forked from vitch/jScrollPane
-
Notifications
You must be signed in to change notification settings - Fork 1
/
dynamic_contentH.html
172 lines (149 loc) · 5.74 KB
/
dynamic_contentH.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--REMARK: solution in https://github.com/vitch/jScrollPane/pull/81/ doesn't help either -->
<html>
<head>
<title>jScrollPane - dynamic content demo page - Horizontal variant</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%;
overflow: auto;
height: auto;
}
.strip {
height: 36px;
max-height: 36px;
}
.strip div {
float: left;
border: 1px solid black;
height: 18px;
text-align: center;
}
.strip div {
width: 198px;
}
</style>
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="script/demo.js"></script>
<script type="text/javascript" >
function reload(hash) {
var ts = new Date().getTime();
var wl = window.location;
window.location=wl.protocol + "//" + wl.host + wl.pathname + "?ts=" + ts + "#" + hash;
}
function newStyle(str){
var pa= document.getElementsByTagName('head')[0] ;
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'screen';
if(el.styleSheet) { el.styleSheet.cssText= str;// IE method
} else { el.appendChild(document.createTextNode(str));// others
}
pa.appendChild(el);
return el;
}
$(function(){
var sp = $('span#testsizes');
var testsizes=[800,760,400,380,300,250,200,100,20];
var ht = [];
$(testsizes).each(function() {
ht.push("<a href=javascript:reload("+this+")>" + this + "</a>");
});
sp.html(ht.join(" - "));
});
var w = window.location.hash.substring(1) || 200;
newStyle(".strip > div {width: " + (w-2) + "px; }");
</script>
<script type="text/javascript" id="sourcecode">
$(function()
{
var settings = {
showArrows: true
};
var pane = $('.scroll-pane');
var pw = pane.width();
var strip = $('.strip');
strip.css('min-width', pw + 'px');
pane.css('width', '');
pane.jScrollPane(settings);
var api = pane.data('jsp');
function setStripWith(i) {
var wset = w*i;
strip.width(wset);
api.getContentPane().width(wset);
}
var i = 1;
setStripWith(i);
function add() {
strip.append('<div>'+ (i++) +'</div>');
setStripWith(i);
api.reinitialise();
}
// Every second add some new content...
var period = 1000, interv, $sb = $('#stopstart');
function launch() {
interv = setInterval(add, period);
$sb.html('Stop');
}
function terminate() {
clearInterval(interv);
$sb.html('Start');
}
launch();
$sb.toggle(terminate, launch);
});
</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 time you hit the button a new block of content is added to the scrollpane and then
<a href="api.html#reinitialise">reinitialise</a> is called on 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>
<p>Test this page with different unit sizes: <span id="testsizes"></span></p>
<p>Every second an extra element is added. You should see the scrollbar appear and shrink.
Push this <button id="stopstart">Stop</button> to stop/start the adding.</p>
<div class="scroll-pane">
<div class="strip" ><div>0</div></div>
</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>