Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

95 lines (89 sloc) 3.363 kb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jScrollPane - dynamic content demo page</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 */
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
</style>
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></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">
$(function()
{
var settings = {
showArrows: true
};
var pane = $('.scroll-pane')
pane.jScrollPane(settings);
var api = pane.data('jsp');
var i = 1;
// Every second add some new content...
setInterval(
function()
{
api.getContentPane().append(
$('<p />').text('This is paragraph number ' + i++)
);
// we could call "pane.jScrollPane(settings)" again but it is
// more convenient to call via the API as then the original
// settings we passed in are automatically remembered.
api.reinitialise();
},
1000
);
});
</script>
</head>
<body>
<div id="top-nav">
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<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>
</ul>
</div>
<div id="container">
<h1>jScrollPane - dynamic content demo page</h1>
<p>
This demonstration shows how you can manually reinitialise jScrollPane when new content is added to it.
Every second we add a new line of content to the scrollpane (using the <a href="api.html#getContentPane">
getContentPane</a> API method) and then <a href="api.html#reinitialise">reinitialise</a> the scrollpane.
As the <a href="settings.html#maintainPosition">maintainPosition</a> setting is true by default then
the position of the scrollpane is maintained even if we are scrolling while the update happens.
</p>
<div class="scroll-pane">
</div>
<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>
</div>
<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>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.