Fetching contributors…
Cannot retrieve contributors at this time
121 lines (113 sloc) 4.01 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>jScrollPane - alternative iframe demo</title>
<!-- styles specific to demo site -->
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
<!-- styles needed by jScrollPane - include in your own sites -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
.iframe-holder {
width: 100%;
height: 200px;
overflow: auto;
border: 0;
width: 100%;
height: 100%;
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src=""></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="script/demo.js"></script>
<script type="text/javascript" id="sourcecode">
var doc = this.contentDocument || this.contentWindow.document;
var jDoc = $(doc);
//jDoc = $('body', doc);
var frame = $(this);
var destWidth = jDoc.width();
var destHeight = jDoc.height();
// Need to unbind the load event otherwise it is triggered again
// when jScrollPane wraps the iframe which results in it being removed
// from the document and added again.
if (destWidth > frame.width()) {
// to allow for the scrollbar...
// Should be possible more cleanly though
destWidth += 16;
if (destHeight > frame.height()) {
// to allow for the scrollbar...
// Should be possible more cleanly though
destHeight += 16;
<div id="top-nav">
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#examples">Examples</a></li>
<li><a href="index.html#themes">Themes</a></li>
<li><a href="index.html#usage">How to use</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="known_issues.html">Known issues</a></li>
<li><a href="index.html#support">Support</a></li>
<li><a href="index.html#download">Download</a></li>
<div id="container">
<h1>jScrollPane - alternative approach to implement jScrollPane with iframes</h1>
This demonstration shows a different approach to <a href="iframe.html">the first iframe demo</a> for
styling the scrollbars associated with an iframe. This approach requires no special code inside the
iframe content pages (e.g. <a href="iframe_content3.html">iframe_content3.html</a> and
<a href="iframe_content4.html">iframe_content4.html</a>) and instead relies on the script in the hosting
page (this page).
This approach has some shortcomings though. The mousewheel doesn't work and the calculation of the width
and height seems a little off...
<h2>Vertical only</h2>
<div class="iframe-holder">
<iframe src="iframe_content3.html"></iframe>
<div class="iframe-holder">
<iframe src="iframe_content4.html"></iframe>
<h2>Page javascript</h2>
<div id="sourcecode-display">
<p>The contents of this div will be replaced by the javascript added to this page</p>
<h2>Page CSS</h2>
<div id="css-display">
<p>The contents of this div will be replaced by the CSS added to this page</p>