├── .gitignore ├── image └── logo.png ├── .gitmodules ├── issues ├── 7 │ ├── jscrollpane-2b1.css │ ├── index.html │ ├── native.html │ ├── before.html │ └── after.html ├── 11 │ ├── brs_main.css │ ├── index.html │ ├── native.html │ ├── before.html │ ├── after.html │ ├── jquery.mousewheel.js │ └── jscrollpane-2b3.css └── 12 │ ├── brs_main.css │ ├── index.html │ ├── jquery.mousewheel.js │ └── jscrollpane-2b3.css ├── themes └── lozenge │ ├── image │ ├── ui-icons_222222_256x240.png │ ├── ui-icons_888888_256x240.png │ └── ui-icons_cd0a0a_256x240.png │ └── style │ └── jquery.jscrollpane.lozenge.css ├── README.md ├── MIT-LICENSE.txt ├── script ├── demo.js ├── mwheelIntent.js └── jquery.mousewheel.js ├── style ├── jquery.jscrollpane.css └── demo.css ├── v1.html ├── faqs.html ├── known_issues.html ├── iframe.html ├── short.html ├── dynamic_content.html ├── image2.html ├── auto_reinitialise.html ├── image.html ├── changelog.html ├── iframe2.html ├── iframe_content3.html ├── iframe_content4.html ├── ajax_content.html ├── iframe_content1.html ├── iframe_content2.html ├── scroll_on_left.html ├── ajax.html ├── anchors.html ├── scroll_to.html ├── scroll_to_animate.html ├── api.html ├── override_animate.html ├── less_basic.html ├── settings.html └── dynamic_height.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | yuicompressor-2.4.2 -------------------------------------------------------------------------------- /image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/html/jScrollPane/master/image/logo.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "v1"] 2 | path = v1 3 | url = git://github.com/vitch/jScrollPane.git 4 | -------------------------------------------------------------------------------- /issues/11/brs_main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/html/jScrollPane/master/issues/11/brs_main.css -------------------------------------------------------------------------------- /issues/12/brs_main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/html/jScrollPane/master/issues/12/brs_main.css -------------------------------------------------------------------------------- /themes/lozenge/image/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/html/jScrollPane/master/themes/lozenge/image/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /themes/lozenge/image/ui-icons_888888_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/html/jScrollPane/master/themes/lozenge/image/ui-icons_888888_256x240.png -------------------------------------------------------------------------------- /themes/lozenge/image/ui-icons_cd0a0a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/html/jScrollPane/master/themes/lozenge/image/ui-icons_cd0a0a_256x240.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jScrollPane - cross browser custom scrollbars 2 | ============================================= 3 | 4 | jScrollPane is a [jQuery](http://www.jquery.com/) plugin which allows you to replace a browser's default scrollbars (on an element which has **overflow: auto**) with a HTML structure that can be easily skinned using CSS. 5 | 6 | To see a bunch of examples of jScrollPane in action please visit the [jScrollPane website](http://jscrollpane.kelvinluck.com/). All of the code for the website is available from this repository so please feel free to download and use it! -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010 Kelvin Luck 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE -------------------------------------------------------------------------------- /themes/lozenge/style/jquery.jscrollpane.lozenge.css: -------------------------------------------------------------------------------- 1 | 2 | .jspHorizontalBar, 3 | .jspVerticalBar, 4 | .jspTrack 5 | { 6 | background: #eeeef4; 7 | } 8 | 9 | .jspDrag 10 | { 11 | background: #bbd; 12 | 13 | -moz-border-radius: 10px; 14 | -webkit-border-radius: 10px; 15 | border-radius: 10px; 16 | } 17 | 18 | .jspTrack .jspActive, 19 | .jspTrack .jspHover, 20 | .jspDrag:hover 21 | { 22 | background: #8B8B9F; 23 | } 24 | 25 | 26 | .jspArrow 27 | { 28 | background: url(../image/ui-icons_222222_256x240.png) no-repeat; 29 | 30 | -moz-border-radius: 10px; 31 | -webkit-border-radius: 10px; 32 | border-radius: 10px; 33 | } 34 | 35 | .jspVerticalBar>.jspActive, 36 | .jspArrow:hover 37 | { 38 | background-image: url('../image/ui-icons_cd0a0a_256x240.png'); 39 | } 40 | 41 | .jspVerticalBar>.jspDisabled, 42 | .jspVerticalBar>.jspDisabled:hover, 43 | .jspHorizontalBar>.jspDisabled, 44 | .jspHorizontalBar>.jspDisabled:hover 45 | { 46 | background-color: transparent; 47 | background-image: url('../image/ui-icons_888888_256x240.png'); 48 | } 49 | 50 | .jspVerticalBar .jspArrow 51 | { 52 | height: 15px; 53 | } 54 | 55 | .jspHorizontalBar .jspArrow 56 | { 57 | width: 15px; 58 | } 59 | 60 | .jspArrowUp 61 | { 62 | background-position: 0 0; 63 | } 64 | 65 | .jspArrowDown 66 | { 67 | background-position: -64px 0 !important; 68 | } 69 | 70 | .jspArrowLeft 71 | { 72 | background-position: -96px 0 !important; 73 | } 74 | 75 | .jspArrowRight 76 | { 77 | background-position: -32px 0 !important; 78 | } -------------------------------------------------------------------------------- /script/demo.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Scripts for the demo pages on the jScrollPane website. 3 | * 4 | * You do not need to include this script or use it on your site. 5 | * 6 | * Copyright (c) 2010 Kelvin Luck 7 | * Dual licensed under the MIT and GPL licenses. 8 | */ 9 | 10 | $(function() 11 | { 12 | // Copy the pages javascript sourcecode to the display block on the page for easy viewing... 13 | var sourcecodeDisplay = $('#sourcecode-display'); 14 | if (sourcecodeDisplay.length) { 15 | sourcecodeDisplay.empty().append( 16 | $('').append( 17 | $('
').html(
18 | 					$('#sourcecode').html().replace(/\n\t\t\t/gm, '\n').replace('>', '>').replace('<', '<')
19 | 				)
20 | 			)
21 | 		);
22 | 		$('#css-display').empty().append(
23 | 			$('').append(
24 | 				$('
').html(
25 | 					$('#page-css').html().replace(/\n\t\t\t/gm, '\n')
26 | 				)
27 | 			)
28 | 		);
29 | 	}
30 | });
31 | 
32 | // It seems some people copy this file and put it on their sites despite the message at the top
33 | // So let's make sure they don't end up in my stats...
34 | if (window.location.hostname == 'jscrollpane.kelvinluck.com') { 
35 | 	// Google analytics tracking code for demo site 
36 | 	var _gaq = _gaq || [];
37 | 	_gaq.push(['_setAccount', 'UA-17828883-1']);
38 | 	_gaq.push(['_trackPageview']);
39 | 	
40 | 	(function() {
41 | 		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
42 | 		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
43 | 		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
44 | 	})();
45 | } else if(window.location.protocol == 'file:') {
46 | 	// Allow local testing without annoying alerts
47 | } else {
48 | 	alert('Do not include demo.js on your site!');
49 | }
50 | 


--------------------------------------------------------------------------------
/script/mwheelIntent.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author trixta
 3 |  * @version 1.2
 4 |  */
 5 | (function($){
 6 | 
 7 | var mwheelI = {
 8 | 			pos: [-260, -260]
 9 | 		},
10 | 	minDif 	= 3,
11 | 	doc 	= document,
12 | 	root 	= doc.documentElement,
13 | 	body 	= doc.body,
14 | 	longDelay, shortDelay
15 | ;
16 | 
17 | function unsetPos(){
18 | 	if(this === mwheelI.elem){
19 | 		mwheelI.pos = [-260, -260];
20 | 		mwheelI.elem = false;
21 | 		minDif = 3;
22 | 	}
23 | }
24 | 
25 | $.event.special.mwheelIntent = {
26 | 	setup: function(){
27 | 		var jElm = $(this).bind('mousewheel', $.event.special.mwheelIntent.handler);
28 | 		if( this !== doc && this !== root && this !== body ){
29 | 			jElm.bind('mouseleave', unsetPos);
30 | 		}
31 | 		jElm = null;
32 |         return true;
33 |     },
34 | 	teardown: function(){
35 |         $(this)
36 | 			.unbind('mousewheel', $.event.special.mwheelIntent.handler)
37 | 			.unbind('mouseleave', unsetPos)
38 | 		;
39 |         return true;
40 |     },
41 |     handler: function(e, d){
42 | 		var pos = [e.clientX, e.clientY];
43 | 		if( this === mwheelI.elem || Math.abs(mwheelI.pos[0] - pos[0]) > minDif || Math.abs(mwheelI.pos[1] - pos[1]) > minDif ){
44 |             mwheelI.elem = this;
45 | 			mwheelI.pos = pos;
46 | 			minDif = 250;
47 | 			
48 | 			clearTimeout(shortDelay);
49 | 			shortDelay = setTimeout(function(){
50 | 				minDif = 10;
51 | 			}, 200);
52 | 			clearTimeout(longDelay);
53 | 			longDelay = setTimeout(function(){
54 | 				minDif = 3;
55 | 			}, 1500);
56 | 			e = $.extend({}, e, {type: 'mwheelIntent'});
57 |             return $.event.handle.apply(this, arguments);
58 | 		}
59 |     }
60 | };
61 | $.fn.extend({
62 | 	mwheelIntent: function(fn) {
63 | 		return fn ? this.bind("mwheelIntent", fn) : this.trigger("mwheelIntent");
64 | 	},
65 | 	
66 | 	unmwheelIntent: function(fn) {
67 | 		return this.unbind("mwheelIntent", fn);
68 | 	}
69 | });
70 | 
71 | $(function(){
72 | 	body = doc.body;
73 | 	//assume that document is always scrollable, doesn't hurt if not
74 | 	$(doc).bind('mwheelIntent.mwheelIntentDefault', $.noop);
75 | });
76 | })(jQuery);


--------------------------------------------------------------------------------
/issues/7/jscrollpane-2b1.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * CSS Styles that are needed by jScrollPane for it to operate correctly.
  3 |  *
  4 |  * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
  5 |  * may not operate correctly without them.
  6 |  */
  7 | 
  8 | .jspContainer
  9 | {
 10 | 	overflow: hidden;
 11 | 	position: relative;
 12 | }
 13 | 
 14 | .jspPane
 15 | {
 16 | 	position: absolute;
 17 | }
 18 | 
 19 | .jspVerticalBar
 20 | {
 21 | 	position: absolute;
 22 | 	top: 0;
 23 | 	right: 0;
 24 | 	width: 16px;
 25 | 	height: 100%;
 26 | 	background: red;
 27 | }
 28 | 
 29 | .jspHorizontalBar
 30 | {
 31 | 	position: absolute;
 32 | 	bottom: 0;
 33 | 	left: 0;
 34 | 	width: 100%;
 35 | 	height: 16px;
 36 | 	background: red;
 37 | }
 38 | 
 39 | .jspVerticalBar *,
 40 | .jspHorizontalBar *
 41 | {
 42 | 	margin: 0;
 43 | 	padding: 0;
 44 | }
 45 | 
 46 | .jspCap
 47 | {
 48 | 	display: none;
 49 | }
 50 | 
 51 | .jspHorizontalBar .jspCap
 52 | {
 53 | 	float: left;
 54 | }
 55 | 
 56 | .jspTrack
 57 | {
 58 | 	background: #dde;
 59 | 	position: relative;
 60 | }
 61 | 
 62 | .jspDrag
 63 | {
 64 | 	background: #bbd;
 65 | 	position: relative;
 66 | 	top: 0;
 67 | 	left: 0;
 68 | 	cursor: pointer;
 69 | }
 70 | 
 71 | .jspHorizontalBar .jspTrack,
 72 | .jspHorizontalBar .jspDrag
 73 | {
 74 | 	float: left;
 75 | 	height: 100%;
 76 | }
 77 | 
 78 | .jspArrow
 79 | {
 80 | 	background: #50506d;
 81 | 	text-indent: -20000px;
 82 | 	display: block;
 83 | 	cursor: pointer;
 84 | }
 85 | 
 86 | .jspArrow.jspDisabled
 87 | {
 88 | 	cursor: default;
 89 | 	background: #80808d;
 90 | }
 91 | 
 92 | .jspVerticalBar .jspArrow
 93 | {
 94 | 	height: 16px;
 95 | }
 96 | 
 97 | .jspHorizontalBar .jspArrow
 98 | {
 99 | 	width: 16px;
100 | 	float: left;
101 | 	height: 100%;
102 | }
103 | 
104 | .jspVerticalBar .jspArrow:focus
105 | {
106 | 	outline: none;
107 | }
108 | 
109 | .jspCorner
110 | {
111 | 	background: #eeeef4;
112 | 	float: left;
113 | 	height: 100%;
114 | }
115 | 
116 | /* Yuk! CSS Hack for IE6 3 pixel bug :( */
117 | * html .jspCorner
118 | {
119 | 	margin: 0 -3px 0 0;
120 | }


--------------------------------------------------------------------------------
/style/jquery.jscrollpane.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * CSS Styles that are needed by jScrollPane for it to operate correctly.
  3 |  *
  4 |  * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
  5 |  * may not operate correctly without them.
  6 |  */
  7 | 
  8 | .jspContainer
  9 | {
 10 | 	overflow: hidden;
 11 | 	position: relative;
 12 | }
 13 | 
 14 | .jspPane
 15 | {
 16 | 	position: absolute;
 17 | }
 18 | 
 19 | .jspVerticalBar
 20 | {
 21 | 	position: absolute;
 22 | 	top: 0;
 23 | 	right: 0;
 24 | 	width: 16px;
 25 | 	height: 100%;
 26 | 	background: red;
 27 | }
 28 | 
 29 | .jspHorizontalBar
 30 | {
 31 | 	position: absolute;
 32 | 	bottom: 0;
 33 | 	left: 0;
 34 | 	width: 100%;
 35 | 	height: 16px;
 36 | 	background: red;
 37 | }
 38 | 
 39 | .jspVerticalBar *,
 40 | .jspHorizontalBar *
 41 | {
 42 | 	margin: 0;
 43 | 	padding: 0;
 44 | }
 45 | 
 46 | .jspCap
 47 | {
 48 | 	display: none;
 49 | }
 50 | 
 51 | .jspHorizontalBar .jspCap
 52 | {
 53 | 	float: left;
 54 | }
 55 | 
 56 | .jspTrack
 57 | {
 58 | 	background: #dde;
 59 | 	position: relative;
 60 | }
 61 | 
 62 | .jspDrag
 63 | {
 64 | 	background: #bbd;
 65 | 	position: relative;
 66 | 	top: 0;
 67 | 	left: 0;
 68 | 	cursor: pointer;
 69 | }
 70 | 
 71 | .jspHorizontalBar .jspTrack,
 72 | .jspHorizontalBar .jspDrag
 73 | {
 74 | 	float: left;
 75 | 	height: 100%;
 76 | }
 77 | 
 78 | .jspArrow
 79 | {
 80 | 	background: #50506d;
 81 | 	text-indent: -20000px;
 82 | 	display: block;
 83 | 	cursor: pointer;
 84 | }
 85 | 
 86 | .jspArrow.jspDisabled
 87 | {
 88 | 	cursor: default;
 89 | 	background: #80808d;
 90 | }
 91 | 
 92 | .jspVerticalBar .jspArrow
 93 | {
 94 | 	height: 16px;
 95 | }
 96 | 
 97 | .jspHorizontalBar .jspArrow
 98 | {
 99 | 	width: 16px;
100 | 	float: left;
101 | 	height: 100%;
102 | }
103 | 
104 | .jspVerticalBar .jspArrow:focus
105 | {
106 | 	outline: none;
107 | }
108 | 
109 | .jspCorner
110 | {
111 | 	background: #eeeef4;
112 | 	float: left;
113 | 	height: 100%;
114 | }
115 | 
116 | /* Yuk! CSS Hack for IE6 3 pixel bug :( */
117 | * html .jspCorner
118 | {
119 | 	margin: 0 -3px 0 0;
120 | }


--------------------------------------------------------------------------------
/issues/7/index.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - issue 7
 7 | 
 8 | 		
 9 | 		
10 | 
11 | 		
12 | 		
13 | 		
14 | 		
15 | 	
16 | 	
17 | 		

18 | 			jScrollPane
19 | 			
29 | 		

30 | 		

31 | 			
jScrollPane - issue 7

32 | 			

33 | 				This page demonstrates the bug described in 
34 | 				issue 7 as reported (with nice striped down test cases) by Rob
35 | 				Lifford. 
36 | 			

37 | 			
    
38 | 				
  • 
39 | 					Before - showing the bug as it appears in the version of jScrollPane which
40 | 					was current when it was reported.
41 | 				
    • 
42 | 				
  • 
43 | 					Native - showing how the page looks with native scrollbars (i.e. if
44 | 					jScrollPane isn't initialised).
45 | 				
    • 
46 | 				
  • 
47 | 					After - showing the page which was displaying the bug with the latest
48 | 					version of jScrollPane.
49 | 				
    • 
50 | 			

51 | 		

52 | 	
53 | 


--------------------------------------------------------------------------------
/issues/11/index.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - issue 11
 7 | 
 8 | 		
 9 | 		
10 | 
11 | 		
12 | 		
13 | 		
14 | 		
15 | 	
16 | 	
17 | 		

18 | 			jScrollPane
19 | 			
29 | 		

30 | 		

31 | 			
jScrollPane - issue 11

32 | 			

33 | 				This page demonstrates the bug described in 
34 | 				issue 11 as reported (with nice striped down test cases) by
35 | 				TinyFish. 
36 | 			

37 | 			
    
38 | 				
  • 
39 | 					Before - showing the bug as it appears in the version of jScrollPane which
40 | 					was current when it was reported.
41 | 				
    • 
42 | 				
  • 
43 | 					Native - showing how the page looks with native scrollbars (i.e. if
44 | 					jScrollPane isn't initialised).
45 | 				
    • 
46 | 				
  • 
47 | 					After - showing the page which was displaying the bug with the latest
48 | 					version of jScrollPane.
49 | 				
    • 
50 | 			

51 | 		

52 | 	
53 | 


--------------------------------------------------------------------------------
/issues/11/native.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | latest news
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
22 | 
23 | 
24 | 

25 | 
news

26 | 
After three years of toil, The new Tinyfish album, The Big Red Spark,
27 |   is finally finished, and to celebrate, you'll be able to join us at The Luminaire
28 |   in Kilburn for a very special gig to launch the album on an unsuspecting world.

29 | 
Although by this point, some people may already have suspected.

30 | 
Support will be provided by the excellent Dec Burke and his new band,
31 |   Destroy All Monsters

32 | 
When: Friday, 10th September

33 | 
34 |   Where: The Luminaire (click for map)

35 |   How much: £10 in advance (£8 CRS members advance) or £12 on the door.

36 |   Doors open at 7:30.

37 | 
Tickets: www.linktoticket website.co.uk

38 | 

39 | 
40 | 
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/issues/12/index.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - issue 12
 7 | 
 8 | 		
 9 | 		
10 | 
11 | 		
12 | 		
13 | 		
14 | 		
15 | 	
16 | 	
17 | 		

18 | 			jScrollPane
19 | 			
29 | 		

30 | 		

31 | 			
jScrollPane - issue 12

32 | 			

33 | 				This page demonstrates the bug described in 
34 | 				issue 12 as reported (with nice striped down test cases) by
35 | 				TinyFish. 
36 | 			

37 | 			
    
38 | 				
  • 
39 | 					Before - showing the bug as it appears in the version of jScrollPane which
40 | 					was current when it was reported.
41 | 				
    • 
42 | 				
  • 
43 | 					Native - showing how the page looks with native scrollbars (i.e. if
44 | 					jScrollPane isn't initialised).
45 | 				
    • 
46 | 				
  • 
47 | 					After - showing the page which was displaying the bug with the latest
48 | 					version of jScrollPane.
49 | 				
    • 
50 | 			

51 | 		

52 | 	
53 | 


--------------------------------------------------------------------------------
/issues/11/before.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | latest news
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
25 | 
26 | 
27 | 

28 | 
news

29 | 
After three years of toil, The new Tinyfish album, The Big Red Spark,
30 |   is finally finished, and to celebrate, you'll be able to join us at The Luminaire
31 |   in Kilburn for a very special gig to launch the album on an unsuspecting world.

32 | 
Although by this point, some people may already have suspected.

33 | 
Support will be provided by the excellent Dec Burke and his new band,
34 |   Destroy All Monsters

35 | 
When: Friday, 10th September

36 | 
37 |   Where: The Luminaire (click for map)

38 |   How much: £10 in advance (£8 CRS members advance) or £12 on the door.

39 |   Doors open at 7:30.

40 | 
Tickets: www.linktoticket website.co.uk

41 | 

42 | 
43 | 
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/v1.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane version 1.x
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
14 | 		
15 | 		
16 | 		
17 | 		
18 | 		
19 | 		
20 | 		
21 | 	
22 | 	
23 | 		

24 | 			jScrollPane
25 | 			
35 | 		

36 | 		

37 | 			
jScrollPane version 1.x

38 | 			

39 | 				You followed a link to a page for version 1 of jScrollPane - the jQuery plugin which provides cross browser
40 | 				custom scrollbars. Version 1 is now deprecated and all development/ support is concentrated on version 2 of
41 | 				the plugin. I suggest that you visit the new jScrollPane homepage to find out all about version
42 | 				2 of the plugin.
43 | 			

44 | 			

45 | 				If you must use version 1 of the (for example because you are updating a site that was originally built using 
46 | 				version 1) then you can find the old site here.
47 | 		

48 | 	
49 | 


--------------------------------------------------------------------------------
/issues/11/after.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | latest news
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
25 | 
26 | 
27 | 

28 | 
news

29 | 
After three years of toil, The new Tinyfish album, The Big Red Spark,
30 |   is finally finished, and to celebrate, you'll be able to join us at The Luminaire
31 |   in Kilburn for a very special gig to launch the album on an unsuspecting world.

32 | 
Although by this point, some people may already have suspected.

33 | 
Support will be provided by the excellent Dec Burke and his new band,
34 |   Destroy All Monsters

35 | 
When: Friday, 10th September

36 | 
37 |   Where: The Luminaire (click for map)

38 |   How much: £10 in advance (£8 CRS members advance) or £12 on the door.

39 |   Doors open at 7:30.

40 | 
Tickets: www.linktoticket website.co.uk

41 | 

42 | 
43 | 
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/issues/11/jquery.mousewheel.js:
--------------------------------------------------------------------------------
 1 | /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
 2 |  * Licensed under the MIT License (LICENSE.txt).
 3 |  *
 4 |  * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 5 |  * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 6 |  * Thanks to: Seamus Leahy for adding deltaX and deltaY
 7 |  *
 8 |  * Version: 3.0.3
 9 |  *
10 |  * Requires: 1.2.2+
11 |  */
12 | 
13 | (function($) {
14 | 
15 | var types = ['DOMMouseScroll', 'mousewheel'];
16 | 
17 | $.event.special.mousewheel = {
18 |     setup: function() {
19 |         if ( this.addEventListener ) {
20 |             for ( var i=types.length; i; ) {
21 |                 this.addEventListener( types[--i], handler, false );
22 |             }
23 |         } else {
24 |             this.onmousewheel = handler;
25 |         }
26 |     },
27 | 
28 |     teardown: function() {
29 |         if ( this.removeEventListener ) {
30 |             for ( var i=types.length; i; ) {
31 |                 this.removeEventListener( types[--i], handler, false );
32 |             }
33 |         } else {
34 |             this.onmousewheel = null;
35 |         }
36 |     }
37 | };
38 | 
39 | $.fn.extend({
40 |     mousewheel: function(fn) {
41 |         return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
42 |     },
43 | 
44 |     unmousewheel: function(fn) {
45 |         return this.unbind("mousewheel", fn);
46 |     }
47 | });
48 | 
49 | 
50 | function handler(event) {
51 |     var orgEvent = event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
52 | 
53 |     event = $.event.fix(event || window.event);
54 |     event.type = "mousewheel";
55 | 
56 |     // Old school scrollwheel delta
57 |     if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
58 |     if ( event.detail     ) { delta = -event.detail/3; }
59 | 
60 |     // New school multidimensional scroll (touchpads) deltas
61 |     deltaY = delta;
62 | 
63 |     // Gecko
64 |     if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
65 |         deltaY = 0;
66 |         deltaX = -1*delta;
67 |     }
68 | 
69 |     // Webkit
70 |     if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
71 |     if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
72 | 
73 |     // Add event and delta to the front of the arguments
74 |     args.unshift(event, delta, deltaX, deltaY);
75 | 
76 |     return $.event.handle.apply(this, args);
77 | }
78 | 
79 | })(jQuery);


--------------------------------------------------------------------------------
/issues/12/jquery.mousewheel.js:
--------------------------------------------------------------------------------
 1 | /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
 2 |  * Licensed under the MIT License (LICENSE.txt).
 3 |  *
 4 |  * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 5 |  * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 6 |  * Thanks to: Seamus Leahy for adding deltaX and deltaY
 7 |  *
 8 |  * Version: 3.0.3
 9 |  *
10 |  * Requires: 1.2.2+
11 |  */
12 | 
13 | (function($) {
14 | 
15 | var types = ['DOMMouseScroll', 'mousewheel'];
16 | 
17 | $.event.special.mousewheel = {
18 |     setup: function() {
19 |         if ( this.addEventListener ) {
20 |             for ( var i=types.length; i; ) {
21 |                 this.addEventListener( types[--i], handler, false );
22 |             }
23 |         } else {
24 |             this.onmousewheel = handler;
25 |         }
26 |     },
27 | 
28 |     teardown: function() {
29 |         if ( this.removeEventListener ) {
30 |             for ( var i=types.length; i; ) {
31 |                 this.removeEventListener( types[--i], handler, false );
32 |             }
33 |         } else {
34 |             this.onmousewheel = null;
35 |         }
36 |     }
37 | };
38 | 
39 | $.fn.extend({
40 |     mousewheel: function(fn) {
41 |         return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
42 |     },
43 | 
44 |     unmousewheel: function(fn) {
45 |         return this.unbind("mousewheel", fn);
46 |     }
47 | });
48 | 
49 | 
50 | function handler(event) {
51 |     var orgEvent = event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
52 | 
53 |     event = $.event.fix(event || window.event);
54 |     event.type = "mousewheel";
55 | 
56 |     // Old school scrollwheel delta
57 |     if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
58 |     if ( event.detail     ) { delta = -event.detail/3; }
59 | 
60 |     // New school multidimensional scroll (touchpads) deltas
61 |     deltaY = delta;
62 | 
63 |     // Gecko
64 |     if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
65 |         deltaY = 0;
66 |         deltaX = -1*delta;
67 |     }
68 | 
69 |     // Webkit
70 |     if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
71 |     if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
72 | 
73 |     // Add event and delta to the front of the arguments
74 |     args.unshift(event, delta, deltaX, deltaY);
75 | 
76 |     return $.event.handle.apply(this, args);
77 | }
78 | 
79 | })(jQuery);


--------------------------------------------------------------------------------
/faqs.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - frequently asked questions
 7 | 
 8 | 		
 9 | 		
10 | 
11 | 		
12 | 		
13 | 		
14 | 		
15 | 	
16 | 	
17 | 		

18 | 			jScrollPane
19 | 			
29 | 		

30 | 		

31 | 			
jScrollPane - frequently asked questions

32 | 			

33 | 				This page contains some frequently asked questions about jScrollPane and their answers.
34 | 			

35 | 			
Why does my scrollbar only appear intermittantly in Webkit based browsers?

36 | 			

37 | 				In Webkit based browsers (e.g. Safari, Chrome, iOS and Android) there is a known issue where you must
38 | 				include your CSS before your JS. More info.
39 | 			

40 | 			
Why does my scrollbar disappear when I reinitialise my jScrollPane after updating the content with ajax?

41 | 			

42 | 				jScrollPane version 2 places the scrollbar and associated controls inside the element you apply jScrollPane to. This means that
43 | 				any positional styling on the containing element continues to work correctly and also allows us to calculate size changes correctly when the
44 | 				parent element's size changes.
45 | 			

46 | 			

47 | 				Because of this you can't simply replace the contents of jScrollPane. Instead you need to use the 
48 | 				getContentPane API method as shown in the ajax and dynamic content examples.
49 | 			

50 | 		

51 | 	
52 | 


--------------------------------------------------------------------------------
/issues/11/jscrollpane-2b3.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * CSS Styles that are needed by jScrollPane for it to operate correctly.
  3 |  *
  4 |  * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
  5 |  * may not operate correctly without them.
  6 |  */
  7 | 
  8 | .jspContainer
  9 | {
 10 | 	overflow: hidden;
 11 | 	position: relative;
 12 | }
 13 | 
 14 | .jspPane
 15 | {
 16 | 	position: absolute;
 17 | }
 18 | 
 19 | .jspVerticalBar
 20 | {
 21 | 	position: absolute;
 22 | 	top: 0;
 23 | 	right: 0;
 24 | 	width: 16px;
 25 | 	height: 100%;
 26 | 	background: red;
 27 | }
 28 | 
 29 | .jspHorizontalBar
 30 | {
 31 | 	position: absolute;
 32 | 	bottom: 0;
 33 | 	left: 0;
 34 | 	width: 100%;
 35 | 	height: 16px;
 36 | 	background: red;
 37 | }
 38 | 
 39 | .jspVerticalBar *,
 40 | .jspHorizontalBar *
 41 | {
 42 | 	margin: 0;
 43 | 	padding: 0;
 44 | }
 45 | 
 46 | .jspCap
 47 | {
 48 | 	display: none;
 49 | }
 50 | 
 51 | .jspHorizontalBar .jspCap
 52 | {
 53 | 	float: left;
 54 | }
 55 | 
 56 | .jspTrack
 57 | {
 58 | 	background: #000 url(../__imgs/furn/track.gif) repeat-y center;
 59 | 	position: relative;
 60 | }
 61 | 
 62 | .jspDrag
 63 | {
 64 | 	background: #666;
 65 | 	border: solid #aaa 2px;
 66 | 	position: relative;
 67 | 	top: 0;
 68 | 	left: 0;
 69 | 	cursor: pointer;
 70 | }
 71 | 
 72 | .jspHorizontalBar .jspTrack,
 73 | .jspHorizontalBar .jspDrag
 74 | {
 75 | 	float: left;
 76 | 	height: 100%;
 77 | }
 78 | 
 79 | .jspArrow
 80 | {
 81 | 	background-color: rgba(0,0,0,0.9);
 82 | 	text-indent: -20000px;
 83 | 	display: block;
 84 | 	cursor: pointer;
 85 | }
 86 | 
 87 | .jspArrowUp
 88 | {
 89 | 	background-image: url("../__imgs/furn/arrow_up.gif");
 90 | }
 91 | 
 92 | .jspArrowDown
 93 | {
 94 | 	background-image: url("../__imgs/furn/arrow_down.gif");
 95 | }
 96 | 
 97 | .jspArrow.jspDisabled
 98 | {
 99 | 	cursor: default;
100 | 	background: #80808d;
101 | }
102 | 
103 | .jspArrowUp.jspDisabled
104 | {
105 | 	cursor: default;
106 | 	background-image: url("../__imgs/furn/arrow_up.gif");
107 | }
108 | 
109 | .jspArrowDown.jspDisabled
110 | {
111 | 	cursor: default;
112 | 	background-image: url("../__imgs/furn/arrow_down.gif");
113 | }
114 | 
115 | .jspVerticalBar .jspArrow
116 | {
117 | 	height: 16px;
118 | }
119 | 
120 | .jspHorizontalBar .jspArrow
121 | {
122 | 	width: 16px;
123 | 	float: left;
124 | 	height: 100%;
125 | }
126 | 
127 | .jspVerticalBar .jspArrow:focus
128 | {
129 | 	outline: none;
130 | }
131 | 
132 | .jspCorner
133 | {
134 | 	background: #eeeef4;
135 | 	float: left;
136 | 	height: 100%;
137 | }
138 | 
139 | /* Yuk! CSS Hack for IE6 3 pixel bug :( */
140 | * html .jspCorner
141 | {
142 | 	margin: 0 -3px 0 0;
143 | }


--------------------------------------------------------------------------------
/issues/12/jscrollpane-2b3.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * CSS Styles that are needed by jScrollPane for it to operate correctly.
  3 |  *
  4 |  * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
  5 |  * may not operate correctly without them.
  6 |  */
  7 | 
  8 | .jspContainer
  9 | {
 10 | 	overflow: hidden;
 11 | 	position: relative;
 12 | }
 13 | 
 14 | .jspPane
 15 | {
 16 | 	position: absolute;
 17 | }
 18 | 
 19 | .jspVerticalBar
 20 | {
 21 | 	position: absolute;
 22 | 	top: 0;
 23 | 	right: 0;
 24 | 	width: 16px;
 25 | 	height: 100%;
 26 | 	background: red;
 27 | }
 28 | 
 29 | .jspHorizontalBar
 30 | {
 31 | 	position: absolute;
 32 | 	bottom: 0;
 33 | 	left: 0;
 34 | 	width: 100%;
 35 | 	height: 16px;
 36 | 	background: red;
 37 | }
 38 | 
 39 | .jspVerticalBar *,
 40 | .jspHorizontalBar *
 41 | {
 42 | 	margin: 0;
 43 | 	padding: 0;
 44 | }
 45 | 
 46 | .jspCap
 47 | {
 48 | 	display: none;
 49 | }
 50 | 
 51 | .jspHorizontalBar .jspCap
 52 | {
 53 | 	float: left;
 54 | }
 55 | 
 56 | .jspTrack
 57 | {
 58 | 	background: #000 url(../__imgs/furn/track.gif) repeat-y center;
 59 | 	position: relative;
 60 | }
 61 | 
 62 | .jspDrag
 63 | {
 64 | 	background: #666;
 65 | 	border: solid #aaa 2px;
 66 | 	position: relative;
 67 | 	top: 0;
 68 | 	left: 0;
 69 | 	cursor: pointer;
 70 | }
 71 | 
 72 | .jspHorizontalBar .jspTrack,
 73 | .jspHorizontalBar .jspDrag
 74 | {
 75 | 	float: left;
 76 | 	height: 100%;
 77 | }
 78 | 
 79 | .jspArrow
 80 | {
 81 | 	background-color: rgba(0,0,0,0.9);
 82 | 	text-indent: -20000px;
 83 | 	display: block;
 84 | 	cursor: pointer;
 85 | }
 86 | 
 87 | .jspArrowUp
 88 | {
 89 | 	background-image: url("../__imgs/furn/arrow_up.gif");
 90 | }
 91 | 
 92 | .jspArrowDown
 93 | {
 94 | 	background-image: url("../__imgs/furn/arrow_down.gif");
 95 | }
 96 | 
 97 | .jspArrow.jspDisabled
 98 | {
 99 | 	cursor: default;
100 | 	background: #80808d;
101 | }
102 | 
103 | .jspArrowUp.jspDisabled
104 | {
105 | 	cursor: default;
106 | 	background-image: url("../__imgs/furn/arrow_up.gif");
107 | }
108 | 
109 | .jspArrowDown.jspDisabled
110 | {
111 | 	cursor: default;
112 | 	background-image: url("../__imgs/furn/arrow_down.gif");
113 | }
114 | 
115 | .jspVerticalBar .jspArrow
116 | {
117 | 	height: 16px;
118 | }
119 | 
120 | .jspHorizontalBar .jspArrow
121 | {
122 | 	width: 16px;
123 | 	float: left;
124 | 	height: 100%;
125 | }
126 | 
127 | .jspVerticalBar .jspArrow:focus
128 | {
129 | 	outline: none;
130 | }
131 | 
132 | .jspCorner
133 | {
134 | 	background: #eeeef4;
135 | 	float: left;
136 | 	height: 100%;
137 | }
138 | 
139 | /* Yuk! CSS Hack for IE6 3 pixel bug :( */
140 | * html .jspCorner
141 | {
142 | 	margin: 0 -3px 0 0;
143 | }


--------------------------------------------------------------------------------
/script/jquery.mousewheel.js:
--------------------------------------------------------------------------------
 1 | /*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 2 |  * Licensed under the MIT License (LICENSE.txt).
 3 |  *
 4 |  * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 5 |  * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 6 |  * Thanks to: Seamus Leahy for adding deltaX and deltaY
 7 |  *
 8 |  * Version: 3.0.6
 9 |  * 
10 |  * Requires: 1.2.2+
11 |  */
12 | 
13 | (function($) {
14 | 
15 | var types = ['DOMMouseScroll', 'mousewheel'];
16 | 
17 | if ($.event.fixHooks) {
18 |     for ( var i=types.length; i; ) {
19 |         $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
20 |     }
21 | }
22 | 
23 | $.event.special.mousewheel = {
24 |     setup: function() {
25 |         if ( this.addEventListener ) {
26 |             for ( var i=types.length; i; ) {
27 |                 this.addEventListener( types[--i], handler, false );
28 |             }
29 |         } else {
30 |             this.onmousewheel = handler;
31 |         }
32 |     },
33 |     
34 |     teardown: function() {
35 |         if ( this.removeEventListener ) {
36 |             for ( var i=types.length; i; ) {
37 |                 this.removeEventListener( types[--i], handler, false );
38 |             }
39 |         } else {
40 |             this.onmousewheel = null;
41 |         }
42 |     }
43 | };
44 | 
45 | $.fn.extend({
46 |     mousewheel: function(fn) {
47 |         return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
48 |     },
49 |     
50 |     unmousewheel: function(fn) {
51 |         return this.unbind("mousewheel", fn);
52 |     }
53 | });
54 | 
55 | 
56 | function handler(event) {
57 |     var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
58 |     event = $.event.fix(orgEvent);
59 |     event.type = "mousewheel";
60 |     
61 |     // Old school scrollwheel delta
62 |     if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
63 |     if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
64 |     
65 |     // New school multidimensional scroll (touchpads) deltas
66 |     deltaY = delta;
67 |     
68 |     // Gecko
69 |     if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
70 |         deltaY = 0;
71 |         deltaX = -1*delta;
72 |     }
73 |     
74 |     // Webkit
75 |     if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
76 |     if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
77 |     
78 |     // Add event and delta to the front of the arguments
79 |     args.unshift(event, delta, deltaX, deltaY);
80 |     
81 |     return ($.event.dispatch || $.event.handle).apply(this, args);
82 | }
83 | 
84 | })(jQuery);
85 | 


--------------------------------------------------------------------------------
/known_issues.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - known issues
 7 | 
 8 | 		
 9 | 		
10 | 
11 | 		
12 | 		
13 | 		
14 | 		
15 | 	
16 | 	
17 | 		

18 | 			jScrollPane
19 | 			
29 | 		

30 | 		

31 | 			
jScrollPane - cross browser styleable scrollbars with jQuery and CSS

32 | 			

33 | 				This page discusses known issues with jScrollPane and provides suggested workarounds for these issues.
34 | 			

35 | 			
In Opera the main window scrollbar appears when a jScrollPane contains lots of content

36 | 			

37 | 				As far as I can tell this is due to a bug in Opera. The workaround is to include something absolutely
38 | 				positioned as a parent of your jScrollPane. See 
39 | 				this bug report (from the previous version of jScrollPane) for discussion of this problem.
40 | 			

41 | 			
In Webkit browsers CSS must be included before Javascript

42 | 			

43 | 				For jScrollPane to work correctly in Webkit based browsers (e.g. Safari, Chrome, iOS and Android) then
44 | 				the CSS must be included above your javascript includes. Otherwise jScrollPane can't correctly measure
45 | 				the size of the item you are applying jScrollPane to. See all of the 
46 | 				example or theme pages for a reference as to the correct ordering
47 | 				of items in your <head>.
48 | 			

49 | 			
Width specified directly on an element you apply jScrollPane to will be overwritten

50 | 			

51 | 				If you apply a width to an element (e.g. via jQuery's width method or via a style attribute) then this
52 | 				width will be overwritten when you reinitialise the scrollpane. Unforunately I can't find a way to avoid
53 | 				this and still support percentage based widths for elements/
54 | 			

55 | 			

56 | 				As a workaround you can specify the width via a CSS class refering to a stylesheet rule. If you can't do
57 | 				this (e.g. you calculate the width dynamically) you will have to wrap your element in an additional div
58 | 				and apply the width to that element while setting the width of your element to 100% via the stylesheet.
59 | 			

60 | 		

61 | 	
62 | 


--------------------------------------------------------------------------------
/iframe.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		iframe jScrollPane demo
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
21 | 
22 | 		
23 | 		
24 | 		
25 | 		
26 | 		
27 | 		
28 | 		
29 | 		
30 | 
31 | 		
34 | 	
35 | 	
36 | 		

37 | 			jScrollPane
38 | 			
48 | 		

49 | 		

50 | 			
jScrollPane - example with iframes

51 | 			

52 | 				This demonstration shows how you can apply jScrollPane to content in an iframe. Note that in this
53 | 				demo nothing is done in the hosting page (this one), all of the necessary javascript happens inside
54 | 				the loaded pages (e.g. iframe_content1.html and
55 | 				iframe_content2.html). Those pages basically use the same technique
56 | 				as in the full page scroll example.
57 | 			

58 | 			

59 | 				To implement this technique you don't need to add any code to the hosting page but you do need to have
60 | 				control over the pages which you load into the iframes. And each of those pages will need to include the
61 | 				relevant script files (e.g. jQuery, jScrollPane etc etc) as well as the document ready script as I show
62 | 				in my examples.
63 | 			

64 | 
65 | 			
Vertical only

66 | 			
67 | 			
Both

68 | 			
69 | 			
Page javascript

70 | 			

71 | 				
The contents of this div will be replaced by the javascript added to this page

72 | 			

73 | 			
Page CSS

74 | 			

75 | 				
The contents of this div will be replaced by the CSS added to this page

76 | 			

77 | 		

78 | 	
79 | 


--------------------------------------------------------------------------------
/short.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		Short jScrollPane demo
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
22 | 
23 | 		
24 | 		
25 | 		
26 | 		
27 | 		
28 | 		
29 | 		
30 | 		
31 | 
32 | 		
38 | 	
39 | 	
40 | 		

41 | 			jScrollPane
42 | 			
52 | 		

53 | 		

54 | 			
jScrollPane - demo page showing "no scroll necessary"

55 | 			

56 | 				This demonstration shows how jScrollPane won't add scrollbars if you apply it to an element which
57 | 				doesn't require scrolling.
58 | 			

59 | 			

60 | 				

61 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
62 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
63 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
64 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
65 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
66 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
67 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
68 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
69 | 					eu lacus semper viverra.
70 | 				

71 | 			

72 | 			
Page javascript

73 | 			

74 | 				
The contents of this div will be replaced by the javascript added to this page

75 | 			

76 | 			
Page CSS

77 | 			

78 | 				
The contents of this div will be replaced by the CSS added to this page

79 | 			

80 | 		

81 | 	
82 | 


--------------------------------------------------------------------------------
/dynamic_content.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - dynamic content demo page
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
22 | 
23 | 		
24 | 		
25 | 		
26 | 		
27 | 		
28 | 		
29 | 		
30 | 		
31 | 
32 | 		
59 | 	
60 | 	
61 | 		

62 | 			jScrollPane
63 | 			
73 | 		

74 | 		

75 | 			
jScrollPane - dynamic content demo page

76 | 			

77 | 				This demonstration shows how you can manually reinitialise jScrollPane when new content is added to it.
78 | 				Every second we add a new line of content to the scrollpane (using the 
79 | 				getContentPane API method) and then reinitialise the scrollpane.
80 | 				As the maintainPosition setting is true by default then
81 | 				the position of the scrollpane is maintained even if we are scrolling while the update happens.
82 | 			

83 | 			

84 | 			

85 | 			
Page javascript

86 | 			

87 | 				
The contents of this div will be replaced by the javascript added to this page

88 | 			

89 | 			
Page CSS

90 | 			

91 | 				
The contents of this div will be replaced by the CSS added to this page

92 | 			

93 | 		

94 | 	
95 | 


--------------------------------------------------------------------------------
/image2.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane image demo 2
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
39 | 
40 | 		
41 | 		
42 | 		
43 | 		
44 | 		
45 | 		
46 | 		
47 | 		
48 | 
49 | 		
55 | 	
56 | 	
57 | 		

58 | 			jScrollPane
59 | 			
69 | 		

70 | 		

71 | 			
jScrollPane - image demo page part 2

72 | 			

73 | 				This demonstration shows how you can avoid the autoReinitialise overhead (as seen in the
74 | 				first image demo) by fixing the width and height of the images inside your
75 | 				scroll pane.
76 | 			

77 | 			

78 | 				As you can see from the sourcecode for this page, you can set the width and height either through CSS or
79 | 				using width and height attributes on the image itself.
80 | 			

81 | 			

82 | 				Touring
83 | 				Avalauncher
84 | 				Rockies
85 | 				Paper cranes
86 | 				Icecream
87 | 			

88 | 			
Page javascript

89 | 			

90 | 				
The contents of this div will be replaced by the javascript added to this page

91 | 			

92 | 			
Page CSS

93 | 			

94 | 				
The contents of this div will be replaced by the CSS added to this page

95 | 			

96 | 		

97 | 	
98 | 


--------------------------------------------------------------------------------
/style/demo.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * CSS Styles that are used on the jScrollPane demo site - these are custom to the site and
  3 |  * you shouldn't need to use them in your own implementations of jScrollPane.
  4 |  */
  5 | 
  6 | *
  7 | {
  8 | 	margin: 0;
  9 | 	padding: 0;
 10 | }
 11 | 
 12 | html,
 13 | body
 14 | {
 15 | 	background: #aac;
 16 | }
 17 | 
 18 | body
 19 | {
 20 | 	font: 13px/1.231 arial,helvetica,clean,sans-serif
 21 | }
 22 | 
 23 | #top-nav
 24 | {
 25 | 	width: 780px;
 26 | 	background: #50506d;
 27 | 	padding: 0 20px 12px 0;
 28 | 	margin: 0 auto 20px;
 29 | 	overflow: hidden;
 30 | 
 31 | 	-moz-border-radius: 5px;
 32 | 	-webkit-border-radius: 5px;
 33 | 	border-radius: 5px;
 34 | 	-moz-border-radius-topleft: 0;
 35 | 	-webkit-border-top-left-radius: 0;
 36 | 	border-radius-topleft: 0;
 37 | 	-moz-border-radius-topright: 0;
 38 | 	-webkit-border-top-right-radius: 0;
 39 | 	border-radius-topright: 0;
 40 | }
 41 | 
 42 | #top-nav img
 43 | {
 44 | 	float: left;
 45 | }
 46 | 
 47 | #top-nav ul
 48 | {
 49 | 	margin: 28px 0 0;
 50 | 	overflow: hidden;
 51 | 	float: right;
 52 | }
 53 | 
 54 | #top-nav ul li
 55 | {
 56 | 	float: left;
 57 | 	padding: 0 0 0 1em;
 58 | 	list-style: none;
 59 | }
 60 | 
 61 | #top-nav ul li a
 62 | {
 63 | 	color: #fff;
 64 | }
 65 | 
 66 | #top-nav ul li a:hover
 67 | {
 68 | 	color: #ffa;
 69 | }
 70 | 
 71 | #top-nav ul li:last-child
 72 | {
 73 | 	padding-right: 0;
 74 | }
 75 | 
 76 | #container
 77 | {
 78 | 	width: 760px;
 79 | 	background: #eeeef4;
 80 | 	padding: 20px;
 81 | 	margin: 20px auto;
 82 | 
 83 | 	-moz-border-radius: 5px;
 84 | 	-webkit-border-radius: 5px;
 85 | 	border-radius: 5px;
 86 | }
 87 | 
 88 | h1
 89 | {
 90 | 	font-size: 116%;
 91 | 	color: #fff;
 92 | 	background: #50506d;
 93 | 	margin: 0 0 1em;
 94 | 	padding:4px 8px 5px;
 95 | 
 96 | 	-moz-border-radius: 3px;
 97 | 	-webkit-border-radius: 3px;
 98 | 	border-radius: 3px;
 99 | }
100 | 
101 | h2
102 | {
103 | 	clear: left;
104 | 	font-size: 100%;
105 | 	color: #fff;
106 | 	background: #8b8b9f;
107 | 	margin: 1em 0;
108 | 	padding:4px 8px 5px;
109 | 
110 | 	-moz-border-radius: 3px;
111 | 	-webkit-border-radius: 3px;
112 | 	border-radius: 3px;
113 | }
114 | 
115 | h2 span.setting-type
116 | {
117 | 	font-weight: normal;
118 | }
119 | 
120 | p
121 | {
122 | 	font-size: 93%;
123 | 	margin: 1em 0;
124 | }
125 | 
126 | p.intro
127 | {
128 | 	font-size: 116%;
129 | 	padding: 10px;
130 | 	background: #fff;
131 | 
132 | 	-moz-border-radius: 3px;
133 | 	-webkit-border-radius: 3px;
134 | 	border-radius: 3px;
135 | 
136 | }
137 | 
138 | a
139 | {
140 | 	color: #7171D4;
141 | 	text-decoration: none;
142 | }
143 | 
144 | a:hover
145 | {
146 | 	color: #f60;
147 | }
148 | 
149 | ul
150 | {
151 | 	padding: 0 0 0 1em;
152 | }
153 | 
154 | ul li
155 | {
156 | 	margin: 0 0 .5em;
157 | }
158 | 
159 | ul.link-list li
160 | {
161 | 	margin: 0;
162 | }
163 | 
164 | ul p
165 | {
166 | 	margin: 0;
167 | }
168 | 
169 | /* For the form demo page */
170 | 
171 | form
172 | {
173 | 	overflow: hidden;
174 | }
175 | 
176 | fieldset
177 | {
178 | 	border: 0;
179 | 	overflow: hidden;
180 | }
181 | 
182 | legend
183 | {
184 | 	font-weight: bold;
185 | 	margin: 1em 0;
186 | }
187 | 
188 | label
189 | {
190 | 	clear: left;
191 | 	float: left;
192 | 	margin: .5em 6px 0 0;
193 | 	text-align: right;
194 | 	width: 100px;
195 | }
196 | 
197 | input,
198 | select,
199 | textarea
200 | {
201 | 	float: left;
202 | 	border: 0;
203 | 	padding: 3px 5px;
204 | 	margin: 0 0 .5em;
205 | }
206 | 
207 | input[type=button],
208 | input[type=submit]
209 | {
210 | 	clear: left;
211 | 	background: #fff;
212 | 	width: auto;
213 | 	margin: 0 0 0 106px;
214 | }
215 | 
216 | pre
217 | {
218 | 	background: #fff;
219 | 	padding: 10px;
220 | 	font-size: 93%;
221 | 	width: 740px;
222 | 
223 | 	-moz-border-radius: 3px;
224 | 	-webkit-border-radius: 3px;
225 | 	border-radius: 3px;
226 | 	overflow: auto;
227 | }
228 | 


--------------------------------------------------------------------------------
/auto_reinitialise.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - automatic reinitialise demo page
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
22 | 
23 | 		
24 | 		
25 | 		
26 | 		
27 | 		
28 | 		
29 | 		
30 | 		
31 | 
32 | 		
56 | 	
57 | 	
58 | 		

59 | 			jScrollPane
60 | 			
70 | 		

71 | 		

72 | 			
jScrollPane - automatic reinitialisation demo page

73 | 			

74 | 				This demonstration shows how you can tell jScrollPane to automatically reinitialise itself. You do this
75 | 				by passing in autoReinitialise: true as a
76 | 				setting. If you do this then the scrollpane attempts to reinitialise itself every
77 | 				autoReinitialiseDelay miliseconds.
78 | 			

79 | 			

80 | 				Note that there is obviously a processing overhead associated with this method as the script is running
81 | 				repeatedly in the background. For this reason autoReinitialise is false by default and
82 | 				if possible you are recommended to manually reinitialise
83 | 				jScrollPane when you add content to it. However, in some situations this isn't possible so the
84 | 				autoReinitialise method is provided for convenience.
85 | 			

86 | 			

87 | 			

88 | 			
Page javascript

89 | 			

90 | 				
The contents of this div will be replaced by the javascript added to this page

91 | 			

92 | 			
Page CSS

93 | 			

94 | 				
The contents of this div will be replaced by the CSS added to this page

95 | 			

96 | 		

97 | 	
98 | 


--------------------------------------------------------------------------------
/image.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane image demo
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
27 | 
28 | 		
29 | 		
30 | 		
31 | 		
32 | 		
33 | 		
34 | 		
35 | 		
36 | 
37 | 		
47 | 	
48 | 	
49 | 		

50 | 			jScrollPane
51 | 			
61 | 		

62 | 		

63 | 			
jScrollPane - image demo page

64 | 			

65 | 				This demonstration shows how jScrollPane can handle it when some slow loading images are included
66 | 				in the contents of the pane.
67 | 			

68 | 			

69 | 				We use autoReinitialse so that the scrollpane automatically
70 | 				re-calculates the size of it's content if and when it changes. Note that use of this property adds an
71 | 				overhead to your page and is subject to the same warnings on the auto
72 | 				reinitialise demo page.
73 | 			

74 | 			

75 | 				If you can it is better to include width and height for each image (either through width and height
76 | 				attributes or via CSS) in the markup. That way you can avoid the autoReinitialise cost. See
77 | 				this demo for an example of that approach.
78 | 			

79 | 			

80 | 				Touring
81 | 				Avalauncher
82 | 				Rockies
83 | 				Paper cranes
84 | 				Icecream
85 | 			

86 | 			
Page javascript

87 | 			

88 | 				
The contents of this div will be replaced by the javascript added to this page

89 | 			

90 | 			
Page CSS

91 | 			

92 | 				
The contents of this div will be replaced by the CSS added to this page

93 | 			

94 | 		

95 | 	
96 | 


--------------------------------------------------------------------------------
/changelog.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane - changelog
 7 | 
 8 | 		
 9 | 		
10 | 		
11 | 		
12 | 
13 | 		
14 | 		
15 | 		
16 | 		
17 | 		
18 | 		
19 | 		
20 | 		
21 | 	
22 | 	
23 | 		

24 | 			jScrollPane
25 | 			
35 | 		

36 | 		

37 | 			
jScrollPane - changelog

38 | 			

39 | 				jScrollPane was originally developed in December 2006. Since then it has been constantly updated to
40 | 				fix bugs and add new features. The change history since November 2008 is available in the jScrollPane
41 | 				git repository. In August 2010 a major rewrite was
42 | 				undertaken, starting from a blank canvas and adding long awaited features like horizontal scrolling
43 | 				and automatic reinitialisation. If you want to find old versions of jScrollPane then there are links
44 | 				to the still available versions below:
45 | 			

46 | 			
    
47 | 				
  • 2011-04-17 - 2.0.0beta10 - cleaner required size calculation, improved keyboard support, stickToBottom/Left, other small fixes
    • 
48 | 				
  • 2011-01-31 - 2.0.0beta9 - new API methods, bug fixes and correct keyboard support for FF/OSX
    • 
49 | 				
  • 2011-01-29 - 2.0.0beta8 - touchscreen support, improved keyboard support
    • 
50 | 				
  • 2011-01-23 - 2.0.0beta7 - scroll speed consistent (thanks Aivo Paas)
    • 
51 | 				
  • 2010-12-07 - 2.0.0beta6 - scrollToElement horizontal support
    • 
52 | 				
  • 2010-10-18 - 2.0.0beta5 - jQuery 1.4.3 support, various bug fixes
    • 
53 | 				
  • 2010-09-13 - 2.0.0beta4 - clickOnTrack support, bug fixes
    • 
54 | 				
  • 2010-08-27 - 2.0.0beta3 - Horizontal mousewheel, mwheelIntent, keyboard support, bug fixes
    • 
55 | 				
  • 2010-08-21 - 2.0.0beta2 - Bug fixes
    • 
56 | 				
  • 2010-08-17 - 2.0.0beta1 - Rewrite to follow modern best practices and enable horizontal scrolling, initially hidden elements and dynamically sized elements.
    • 
57 | 				
  • 2010-06-11 - v1.2+
    • 
58 | 				
  • 2008-12-10 - v1.2.3
    • 
59 | 				
  • 2008-11-29 - v1.2.2
    • 
60 | 				
  • 2008-11-13 - v1.2.1
    • 
61 | 				
  • 2008-11-07 - v1.2
    • 
62 | 				
  • 2006-12-31 - v1
    • 
63 | 			

64 | 		

65 | 	
66 | 


--------------------------------------------------------------------------------
/iframe2.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane - alternative iframe demo
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 27 | 
 28 | 		
 29 | 		
 30 | 		
 31 | 		
 32 | 		
 33 | 		
 34 | 		
 35 | 		
 36 | 
 37 | 		
 74 | 	
 75 | 	
 76 | 		

 77 | 			jScrollPane
 78 | 			
 88 | 		

 89 | 		

 90 | 			
jScrollPane - alternative approach to implement jScrollPane with iframes

 91 | 			

 92 | 				This demonstration shows a different approach to the first iframe demo for
 93 | 				styling the scrollbars associated with an iframe. This approach requires no special code inside the
 94 | 				iframe content pages (e.g. iframe_content3.html and
 95 | 				iframe_content4.html) and instead relies on the script in the hosting
 96 | 				page (this page).
 97 | 			

 98 | 			

 99 | 				This approach has some shortcomings though. The mousewheel doesn't work and the calculation of the width
100 | 				and height seems a little off...
101 | 			

102 | 
103 | 			
Vertical only

104 | 			

105 | 				
106 | 			

107 | 			
Both

108 | 			

109 | 				
110 | 			

111 | 			
Page javascript

112 | 			

113 | 				
The contents of this div will be replaced by the javascript added to this page

114 | 			

115 | 			
Page CSS

116 | 			

117 | 				
The contents of this div will be replaced by the CSS added to this page

118 | 			

119 | 		

120 | 	
121 | 


--------------------------------------------------------------------------------
/iframe_content3.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane iframe content 3
 7 | 
 8 | 		
 9 | 		
10 | 
11 | 		
19 | 
20 | 	
21 | 	
22 | 		

23 | 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
24 | 			eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
25 | 			mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
26 | 			consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
27 | 			bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
28 | 			semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
29 | 			mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
30 | 			quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
31 | 			eu lacus semper viverra.
32 | 		

33 | 		

34 | 			Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
35 | 			lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
36 | 			faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
37 | 			Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
38 | 			tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
39 | 			Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
40 | 			est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
41 | 			volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
42 | 			libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
43 | 			sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
44 | 			pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
45 | 			habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
46 | 		

47 | 		

48 | 			Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
49 | 			eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
50 | 			dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
51 | 			amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
52 | 			est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
53 | 			dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
54 | 			varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
55 | 			feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
56 | 			congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
57 | 			id mollis nisi. Donec fermentum vehicula porta.
58 | 		

59 | 		

60 | 			Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
61 | 			Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
62 | 			sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
63 | 			Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
64 | 			commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
65 | 			ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
66 | 			Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
67 | 			eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
68 | 			luctus, metus
69 | 		

70 | 		

71 | 			Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
72 | 			Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
73 | 			amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
74 | 		

75 | 	
76 | 


--------------------------------------------------------------------------------
/iframe_content4.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 	
 5 | 
 6 | 		jScrollPane iframe content 4
 7 | 
 8 | 		
 9 | 		
10 | 
11 | 		
19 | 
20 | 	
21 | 	
22 | 		

23 | 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
24 | 			eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
25 | 			mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
26 | 			consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
27 | 			bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
28 | 			semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
29 | 			mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
30 | 			quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
31 | 			eu lacus semper viverra.
32 | 		

33 | 		

34 | 			Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
35 | 			lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
36 | 			faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
37 | 			Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
38 | 			tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
39 | 			Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
40 | 			est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
41 | 			volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
42 | 			libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
43 | 			sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
44 | 			pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
45 | 			habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
46 | 		

47 | 		

48 | 			Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
49 | 			eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
50 | 			dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
51 | 			amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
52 | 			est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
53 | 			dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
54 | 			varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
55 | 			feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
56 | 			congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
57 | 			id mollis nisi. Donec fermentum vehicula porta.
58 | 		

59 | 		

60 | 			Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
61 | 			Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
62 | 			sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
63 | 			Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
64 | 			commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
65 | 			ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
66 | 			Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
67 | 			eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
68 | 			luctus, metus
69 | 		

70 | 		

71 | 			Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
72 | 			Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
73 | 			amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
74 | 		

75 | 	
76 | 


--------------------------------------------------------------------------------
/issues/7/native.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |     
  4 | 		
  5 |         
  6 |         jScrollPane 2 reinit bug?
  7 |         
 54 |         
 55 | 
 56 |         
 57 | 
 58 |     
 59 |     
 60 | 
 61 | 	

 62 | 		
    
 63 | 			
  • scrollable list box
    • 
 64 | 			
  • list item
    • 
 65 | 
 66 | 			
  • another list item
    • 
 67 | 			
  • the next list item
    • 
 68 | 			
  • list item
    • 
 69 | 			
  • another list item
    • 
 70 | 			
  • the next list item
    • 
 71 | 			
  • list item
    • 
 72 | 
 73 | 			
  • another list item
    • 
 74 | 			
  • the next list item
    • 
 75 | 			
  • list item
    • 
 76 | 			
  • another list item
    • 
 77 | 			
  • the next list item
    • 
 78 | 			
  • the next list item
    • 
 79 | 
 80 | 			
  • list item
    • 
 81 | 			
  • another list item
    • 
 82 | 			
  • the next list item
    • 
 83 | 			
  • the next list item
    • 
 84 | 			
  • list item
    • 
 85 | 			
  • another list item
    • 
 86 | 
 87 | 			
  • the next list item
    • 
 88 | 		

 89 | 	

 90 | 
 91 | 	

 92 | 		
    
 93 | 			
  • scrollable list box
    • 
 94 | 			
  • list item
    • 
 95 | 
 96 | 			
  • another list item
    • 
 97 | 		

 98 | 	

 99 | 
100 | 	

101 | 		
    
102 | 			
  • scrollable list box
    • 
103 | 			
  • list item
    • 
104 | 
105 | 			
  • another list item
    • 
106 | 			
  • the next list item
    • 
107 | 			
  • list item
    • 
108 | 			
  • another list item
    • 
109 | 			
  • the next list item
    • 
110 | 			
  • list item
    • 
111 | 
112 | 			
  • another list item
    • 
113 | 			
  • the next list item
    • 
114 | 			
  • list item
    • 
115 | 			
  • another list item
    • 
116 | 			
  • the next list item
    • 
117 | 			
  • the next list item
    • 
118 | 
119 | 			
  • list item
    • 
120 | 			
  • another list item
    • 
121 | 			
  • the next list item
    • 
122 | 			
  • the next list item
    • 
123 | 			
  • list item
    • 
124 | 			
  • another list item
    • 
125 | 
126 | 			
  • the next list item
    • 
127 | 		

128 | 	

129 | 
130 | 	

131 | 		
    
132 | 			
  • scrollable list box
    • 
133 | 			
  • list item
    • 
134 | 
135 | 			
  • another list item
    • 
136 | 			
  • the next list item
    • 
137 | 			
  • list item
    • 
138 | 			
  • another list item
    • 
139 | 			
  • the next list item
    • 
140 | 			
  • list item
    • 
141 | 
142 | 			
  • another list item
    • 
143 | 			
  • the next list item
    • 
144 | 			
  • list item
    • 
145 | 			
  • another list item
    • 
146 | 			
  • the next list item
    • 
147 | 			
  • the next list item
    • 
148 | 
149 | 			
  • list item
    • 
150 | 			
  • another list item
    • 
151 | 			
  • the next list item
    • 
152 | 			
  • the next list item
    • 
153 | 			
  • list item
    • 
154 | 			
  • another list item
    • 
155 | 
156 | 			
  • the next list item
    • 
157 | 		

158 | 	

159 | 
160 | 
161 | 	
  

162 | 
163 | 	
In the above testcase: reinitialising jScrollPane (either via the api or simply by re-calling .jScrollPane() on the original element) strips out the width of the div.jspPane and causes a rendering issue: the absolutely-positioned div renders only as wide as its text content. The expected behavior is that it'll fill the available width, as it does on page load after the first call to .jScrollPane().

164 | 
165 | 
166 | 
UPDATE: this is fixed for scrollable content in v2b2, but when the content is not scrollable there's still undesired rendering on first load.

167 | 
168 | 
Additionally, padding calculations might need some tweaks. The third list box here is identical to the first two except for an added 5px of padding all the way around: note how the jspVerticalBar is partially pushed out of view.

169 | 
170 |     
171 | 


--------------------------------------------------------------------------------
/ajax_content.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 	

 3 | 		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
 4 | 		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
 5 | 		sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
 6 | 		Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
 7 | 		commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
 8 | 		ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
 9 | 		Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
10 | 		eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
11 | 		luctus, metus
12 | 	

13 | 	

14 | 		Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
15 | 		lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
16 | 		faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
17 | 		Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
18 | 		tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
19 | 		Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
20 | 		est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
21 | 		volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
22 | 		libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
23 | 		sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
24 | 		pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
25 | 		habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
26 | 	

27 | 	

28 | 		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
29 | 		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
30 | 		amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
31 | 	

32 | 	

33 | 		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
34 | 		eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
35 | 		mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
36 | 		consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
37 | 		bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
38 | 		semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
39 | 		mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
40 | 		quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
41 | 		eu lacus semper viverra.
42 | 	

43 | 	

44 | 		Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
45 | 		eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
46 | 		dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
47 | 		amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
48 | 		est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
49 | 		dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
50 | 		varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
51 | 		feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
52 | 		congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
53 | 		id mollis nisi. Donec fermentum vehicula porta.
54 | 	

55 | 	

56 | 		Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
57 | 		lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
58 | 		faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
59 | 		Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
60 | 		tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
61 | 		Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
62 | 		est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
63 | 		volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
64 | 		libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
65 | 		sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
66 | 		pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
67 | 		habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
68 | 	

69 | 	

70 | 		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
71 | 		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
72 | 		amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
73 | 	



--------------------------------------------------------------------------------
/issues/7/before.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |     
  4 | 		
  5 |         
  6 |         jScrollPane 2 reinit bug?
  7 |         
 54 |         
 55 | 
 56 |         
 57 | 
 58 |         
 59 | 
 60 |         
 76 | 
 77 |     
 78 |     
 79 | 
 80 | 	

 81 | 		
    
 82 | 			
  • scrollable list box
    • 
 83 | 			
  • list item
    • 
 84 | 
 85 | 			
  • another list item
    • 
 86 | 			
  • the next list item
    • 
 87 | 			
  • list item
    • 
 88 | 			
  • another list item
    • 
 89 | 			
  • the next list item
    • 
 90 | 			
  • list item
    • 
 91 | 
 92 | 			
  • another list item
    • 
 93 | 			
  • the next list item
    • 
 94 | 			
  • list item
    • 
 95 | 			
  • another list item
    • 
 96 | 			
  • the next list item
    • 
 97 | 			
  • the next list item
    • 
 98 | 
 99 | 			
  • list item
    • 
100 | 			
  • another list item
    • 
101 | 			
  • the next list item
    • 
102 | 			
  • the next list item
    • 
103 | 			
  • list item
    • 
104 | 			
  • another list item
    • 
105 | 
106 | 			
  • the next list item
    • 
107 | 		

108 | 	

109 | 
110 | 	

111 | 		
    
112 | 			
  • scrollable list box
    • 
113 | 			
  • list item
    • 
114 | 
115 | 			
  • another list item
    • 
116 | 		

117 | 	

118 | 
119 | 	

120 | 		
    
121 | 			
  • scrollable list box
    • 
122 | 			
  • list item
    • 
123 | 
124 | 			
  • another list item
    • 
125 | 			
  • the next list item
    • 
126 | 			
  • list item
    • 
127 | 			
  • another list item
    • 
128 | 			
  • the next list item
    • 
129 | 			
  • list item
    • 
130 | 
131 | 			
  • another list item
    • 
132 | 			
  • the next list item
    • 
133 | 			
  • list item
    • 
134 | 			
  • another list item
    • 
135 | 			
  • the next list item
    • 
136 | 			
  • the next list item
    • 
137 | 
138 | 			
  • list item
    • 
139 | 			
  • another list item
    • 
140 | 			
  • the next list item
    • 
141 | 			
  • the next list item
    • 
142 | 			
  • list item
    • 
143 | 			
  • another list item
    • 
144 | 
145 | 			
  • the next list item
    • 
146 | 		

147 | 	

148 | 
149 | 	

150 | 		
    
151 | 			
  • scrollable list box
    • 
152 | 			
  • list item
    • 
153 | 
154 | 			
  • another list item
    • 
155 | 			
  • the next list item
    • 
156 | 			
  • list item
    • 
157 | 			
  • another list item
    • 
158 | 			
  • the next list item
    • 
159 | 			
  • list item
    • 
160 | 
161 | 			
  • another list item
    • 
162 | 			
  • the next list item
    • 
163 | 			
  • list item
    • 
164 | 			
  • another list item
    • 
165 | 			
  • the next list item
    • 
166 | 			
  • the next list item
    • 
167 | 
168 | 			
  • list item
    • 
169 | 			
  • another list item
    • 
170 | 			
  • the next list item
    • 
171 | 			
  • the next list item
    • 
172 | 			
  • list item
    • 
173 | 			
  • another list item
    • 
174 | 
175 | 			
  • the next list item
    • 
176 | 		

177 | 	

178 | 
179 | 
180 | 	
  

181 | 
182 | 	
In the above testcase: reinitialising jScrollPane (either via the api or simply by re-calling .jScrollPane() on the original element) strips out the width of the div.jspPane and causes a rendering issue: the absolutely-positioned div renders only as wide as its text content. The expected behavior is that it'll fill the available width, as it does on page load after the first call to .jScrollPane().

183 | 
184 | 
185 | 
UPDATE: this is fixed for scrollable content in v2b2, but when the content is not scrollable there's still undesired rendering on first load.

186 | 
187 | 
Additionally, padding calculations might need some tweaks. The third list box here is identical to the first two except for an added 5px of padding all the way around: note how the jspVerticalBar is partially pushed out of view.

188 | 
189 |     
190 | 


--------------------------------------------------------------------------------
/issues/7/after.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |     
  4 | 		
  5 |         
  6 |         jScrollPane 2 reinit bug?
  7 |         
 54 |         
 55 | 
 56 |         
 57 | 
 58 |         
 59 | 
 60 |         
 76 | 
 77 |     
 78 |     
 79 | 
 80 | 	

 81 | 		
    
 82 | 			
  • scrollable list box
    • 
 83 | 			
  • list item
    • 
 84 | 
 85 | 			
  • another list item
    • 
 86 | 			
  • the next list item
    • 
 87 | 			
  • list item
    • 
 88 | 			
  • another list item
    • 
 89 | 			
  • the next list item
    • 
 90 | 			
  • list item
    • 
 91 | 
 92 | 			
  • another list item
    • 
 93 | 			
  • the next list item
    • 
 94 | 			
  • list item
    • 
 95 | 			
  • another list item
    • 
 96 | 			
  • the next list item
    • 
 97 | 			
  • the next list item
    • 
 98 | 
 99 | 			
  • list item
    • 
100 | 			
  • another list item
    • 
101 | 			
  • the next list item
    • 
102 | 			
  • the next list item
    • 
103 | 			
  • list item
    • 
104 | 			
  • another list item
    • 
105 | 
106 | 			
  • the next list item
    • 
107 | 		

108 | 	

109 | 
110 | 	

111 | 		
    
112 | 			
  • scrollable list box
    • 
113 | 			
  • list item
    • 
114 | 
115 | 			
  • another list item
    • 
116 | 		

117 | 	

118 | 
119 | 	

120 | 		
    
121 | 			
  • scrollable list box
    • 
122 | 			
  • list item
    • 
123 | 
124 | 			
  • another list item
    • 
125 | 			
  • the next list item
    • 
126 | 			
  • list item
    • 
127 | 			
  • another list item
    • 
128 | 			
  • the next list item
    • 
129 | 			
  • list item
    • 
130 | 
131 | 			
  • another list item
    • 
132 | 			
  • the next list item
    • 
133 | 			
  • list item
    • 
134 | 			
  • another list item
    • 
135 | 			
  • the next list item
    • 
136 | 			
  • the next list item
    • 
137 | 
138 | 			
  • list item
    • 
139 | 			
  • another list item
    • 
140 | 			
  • the next list item
    • 
141 | 			
  • the next list item
    • 
142 | 			
  • list item
    • 
143 | 			
  • another list item
    • 
144 | 
145 | 			
  • the next list item
    • 
146 | 		

147 | 	

148 | 
149 | 	

150 | 		
    
151 | 			
  • scrollable list box
    • 
152 | 			
  • list item
    • 
153 | 
154 | 			
  • another list item
    • 
155 | 			
  • the next list item
    • 
156 | 			
  • list item
    • 
157 | 			
  • another list item
    • 
158 | 			
  • the next list item
    • 
159 | 			
  • list item
    • 
160 | 
161 | 			
  • another list item
    • 
162 | 			
  • the next list item
    • 
163 | 			
  • list item
    • 
164 | 			
  • another list item
    • 
165 | 			
  • the next list item
    • 
166 | 			
  • the next list item
    • 
167 | 
168 | 			
  • list item
    • 
169 | 			
  • another list item
    • 
170 | 			
  • the next list item
    • 
171 | 			
  • the next list item
    • 
172 | 			
  • list item
    • 
173 | 			
  • another list item
    • 
174 | 
175 | 			
  • the next list item
    • 
176 | 		

177 | 	

178 | 
179 | 
180 | 	
  

181 | 
182 | 	
In the above testcase: reinitialising jScrollPane (either via the api or simply by re-calling .jScrollPane() on the original element) strips out the width of the div.jspPane and causes a rendering issue: the absolutely-positioned div renders only as wide as its text content. The expected behavior is that it'll fill the available width, as it does on page load after the first call to .jScrollPane().

183 | 
184 | 
185 | 
UPDATE: this is fixed for scrollable content in v2b2, but when the content is not scrollable there's still undesired rendering on first load.

186 | 
187 | 
Additionally, padding calculations might need some tweaks. The third list box here is identical to the first two except for an added 5px of padding all the way around: note how the jspVerticalBar is partially pushed out of view.

188 | 
189 |     
190 | 


--------------------------------------------------------------------------------
/iframe_content1.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane iframe content
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 25 | 
 26 | 		
 27 | 		
 28 | 		
 29 | 		
 30 | 		
 31 | 		
 32 | 		
 33 | 		
 34 | 
 35 | 		
 85 | 	
 86 | 	
 87 | 		

 88 | 			

 89 | 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
 90 | 				eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
 91 | 				mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
 92 | 				consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
 93 | 				bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
 94 | 				semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
 95 | 				mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
 96 | 				quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
 97 | 				eu lacus semper viverra.
 98 | 			

 99 | 			

100 | 				Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
101 | 				lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
102 | 				faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
103 | 				Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
104 | 				tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
105 | 				Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
106 | 				est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
107 | 				volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
108 | 				libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
109 | 				sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
110 | 				pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
111 | 				habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
112 | 			

113 | 			

114 | 				Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
115 | 				eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
116 | 				dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
117 | 				amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
118 | 				est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
119 | 				dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
120 | 				varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
121 | 				feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
122 | 				congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
123 | 				id mollis nisi. Donec fermentum vehicula porta.
124 | 			

125 | 			

126 | 				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
127 | 				Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
128 | 				sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
129 | 				Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
130 | 				commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
131 | 				ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
132 | 				Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
133 | 				eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
134 | 				luctus, metus
135 | 			

136 | 			

137 | 				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
138 | 				Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
139 | 				amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
140 | 			

141 | 		

142 | 	
143 | 


--------------------------------------------------------------------------------
/iframe_content2.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane iframe content 2
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 25 | 
 26 | 		
 27 | 		
 28 | 		
 29 | 		
 30 | 		
 31 | 		
 32 | 		
 33 | 		
 34 | 
 35 | 		
 85 | 	
 86 | 	
 87 | 		

 88 | 			

 89 | 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
 90 | 				eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
 91 | 				mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
 92 | 				consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
 93 | 				bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
 94 | 				semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
 95 | 				mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
 96 | 				quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
 97 | 				eu lacus semper viverra.
 98 | 			

 99 | 			

100 | 				Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
101 | 				lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
102 | 				faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
103 | 				Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
104 | 				tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
105 | 				Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
106 | 				est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
107 | 				volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
108 | 				libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
109 | 				sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
110 | 				pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
111 | 				habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
112 | 			

113 | 			

114 | 				Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
115 | 				eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
116 | 				dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
117 | 				amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
118 | 				est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
119 | 				dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
120 | 				varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
121 | 				feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
122 | 				congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
123 | 				id mollis nisi. Donec fermentum vehicula porta.
124 | 			

125 | 			

126 | 				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
127 | 				Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
128 | 				sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
129 | 				Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
130 | 				commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
131 | 				ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
132 | 				Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
133 | 				eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
134 | 				luctus, metus
135 | 			

136 | 			

137 | 				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
138 | 				Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
139 | 				amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
140 | 			

141 | 		

142 | 	
143 | 


--------------------------------------------------------------------------------
/scroll_on_left.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane demo - scroll on left hand side
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 29 | 
 30 | 		
 31 | 		
 32 | 		
 33 | 		
 34 | 		
 35 | 		
 36 | 		
 37 | 		
 38 | 
 39 | 		
 45 | 	
 46 | 	
 47 | 		

 48 | 			jScrollPane
 49 | 			
 59 | 		

 60 | 		

 61 | 			
jScrollPane - scroll on left demo

 62 | 			

 63 | 				This demonstration shows how you can make the jScrollPane scrollbars appear on the left hand side of
 64 | 				your content. You simply set "left: 0" on the .jspVerticalBar class (this overrides the "right: 0" in
 65 | 				the jquery.jscrollpane.css file).
 66 | 			

 67 | 			

 68 | 				

 69 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
 70 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
 71 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
 72 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
 73 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
 74 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
 75 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
 76 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
 77 | 					eu lacus semper viverra.
 78 | 				

 79 | 				

 80 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
 81 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
 82 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
 83 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
 84 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
 85 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
 86 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
 87 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
 88 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
 89 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
 90 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
 91 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
 92 | 				

 93 | 				

 94 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
 95 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
 96 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
 97 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
 98 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
 99 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
100 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
101 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
102 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
103 | 					id mollis nisi. Donec fermentum vehicula porta.
104 | 				

105 | 				

106 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
107 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
108 | 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
109 | 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
110 | 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
111 | 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
112 | 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
113 | 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
114 | 					luctus, metus
115 | 				

116 | 				

117 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
118 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
119 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
120 | 				

121 | 			

122 | 			
Page javascript

123 | 			

124 | 				
The contents of this div will be replaced by the javascript added to this page

125 | 			

126 | 			
Page CSS

127 | 			

128 | 				
The contents of this div will be replaced by the CSS added to this page

129 | 			

130 | 		

131 | 	
132 | 


--------------------------------------------------------------------------------
/ajax.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane - ajax demo page
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 22 | 
 23 | 		
 24 | 		
 25 | 		
 26 | 		
 27 | 		
 28 | 		
 29 | 		
 30 | 		
 31 | 
 32 | 		
 58 | 	
 59 | 	
 60 | 		

 61 | 			jScrollPane
 62 | 			
 72 | 		

 73 | 		

 74 | 			
jScrollPane - ajax demo page

 75 | 			

 76 | 				This demonstration shows how you can use ajax to dynamically load content into your jScrollPane. Because of
 77 | 				the way jScrollPane works you need to use the getContentPane API method
 78 | 				to get the element which you are adding content to and then reinitialise 
 79 | 				the scrollpane once you have changed the content. As the maintainPosition
 80 | 				 setting is true by default then the position of the scrollpane is maintained even if we are scrolling 
 81 | 				while the update happens.
 82 | 			

 83 | 			

 84 | 				You can click here to load some content into the scrollpane below using ajax.
 85 | 			

 86 | 			

 87 | 				

 88 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
 89 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
 90 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
 91 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
 92 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
 93 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
 94 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
 95 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
 96 | 					eu lacus semper viverra.
 97 | 				

 98 | 				

 99 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
100 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
101 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
102 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
103 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
104 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
105 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
106 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
107 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
108 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
109 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
110 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
111 | 				

112 | 				

113 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
114 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
115 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
116 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
117 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
118 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
119 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
120 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
121 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
122 | 					id mollis nisi. Donec fermentum vehicula porta.
123 | 				

124 | 				

125 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
126 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
127 | 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
128 | 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
129 | 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
130 | 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
131 | 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
132 | 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
133 | 					luctus, metus
134 | 				

135 | 				

136 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
137 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
138 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
139 | 				

140 | 			

141 | 			
Page javascript

142 | 			

143 | 				
The contents of this div will be replaced by the javascript added to this page

144 | 			

145 | 			
Page CSS

146 | 			

147 | 				
The contents of this div will be replaced by the CSS added to this page

148 | 			

149 | 		

150 | 	
151 | 


--------------------------------------------------------------------------------
/anchors.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane anchors demo
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 22 | 
 23 | 		
 24 | 		
 25 | 		
 26 | 		
 27 | 		
 28 | 		
 29 | 		
 30 | 		
 31 | 
 32 | 		
 42 | 	
 43 | 	
 44 | 		

 45 | 			jScrollPane
 46 | 			
 56 | 		

 57 | 		

 58 | 			
jScrollPane - anchors demo page

 59 | 			

 60 | 				This demonstration shows how jScrollPane can check the location.hash when the page loads and
 61 | 				automatically scroll the pane to the correct place if the hash refers to an element within the scroll
 62 | 				pane. jScrollPane can also hijack links within your page and automatically convert relevant ones to
 63 | 				scroll the jScrollPane. As an example, the following links will scroll to the paragraphs in the scroll
 64 | 				pane below: 1, 2, 3,
 65 | 				4 and 5. This link (to the
 66 | 				sourcecode listing below) is also an internal link but because its target isn't within the scrollpane
 67 | 				we don't mess with it.
 68 | 			

 69 | 			

 70 | 				Note that the link hijacking functionality is off by default (as it has a small
 71 | 				performance overhead so if you don't need it you might as well not have it). To enable it pass
 72 | 				hijackInternalLinks: true in with
 73 | 				your settings (as I do on this page). If you have changed the content of your page and want to re-apply
 74 | 				the link hijacking then you can call the hijackInternalLinks
 75 | 				method on the jScrollPane API.
 76 | 			

 77 | 			

 78 | 				

 79 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
 80 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
 81 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
 82 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
 83 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
 84 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
 85 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
 86 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
 87 | 					eu lacus semper viverra.
 88 | 				

 89 | 				

 90 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
 91 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
 92 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
 93 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
 94 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
 95 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
 96 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
 97 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
 98 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
 99 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
100 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
101 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
102 | 				

103 | 				

104 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
105 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
106 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
107 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
108 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
109 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
110 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
111 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
112 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
113 | 					id mollis nisi. Donec fermentum vehicula porta.
114 | 				

115 | 				

116 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
117 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
118 | 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
119 | 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
120 | 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
121 | 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
122 | 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
123 | 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
124 | 					luctus, metus
125 | 				

126 | 				

127 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
128 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
129 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
130 | 				

131 | 			

132 | 			
Page javascript

133 | 			

134 | 				
The contents of this div will be replaced by the javascript added to this page

135 | 			

136 | 			
Page CSS

137 | 			

138 | 				
The contents of this div will be replaced by the CSS added to this page

139 | 			

140 | 		

141 | 	
142 | 


--------------------------------------------------------------------------------
/scroll_to.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane scrollTo/ scrollBy demo page
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 35 | 
 36 | 		
 37 | 		
 38 | 		
 39 | 		
 40 | 		
 41 | 		
 42 | 		
 43 | 		
 44 | 
 45 | 		
 79 | 	
 80 | 	
 81 | 		

 82 | 			jScrollPane
 83 | 			
 93 | 		

 94 | 		

 95 | 			
jScrollPane - scrollTo/ scrollBy page

 96 | 			

 97 | 				This example shows how you can use the jScrollPane API to tell a scrollpane
 98 | 				to scrollTo a particular place or scrollBy
 99 | 				 a particular amount. Use the form below to experiment with this functionality:
100 | 			

101 | 			

102 | 				

103 | 					

104 | 						scrollTo functionality
105 | 						
106 | 						
107 | 						
108 | 						
109 | 						
110 | 					

111 | 				

112 | 				

113 | 					

114 | 						scrollBy functionality
115 | 						
116 | 						
117 | 						
118 | 						
119 | 						
120 | 					

121 | 				

122 | 			

123 | 			

124 | 				

125 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
126 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
127 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
128 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
129 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
130 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
131 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
132 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
133 | 					eu lacus semper viverra.
134 | 				

135 | 				

136 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
137 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
138 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
139 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
140 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
141 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
142 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
143 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
144 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
145 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
146 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
147 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
148 | 				

149 | 				

150 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
151 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
152 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
153 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
154 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
155 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
156 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
157 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
158 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
159 | 					id mollis nisi. Donec fermentum vehicula porta.
160 | 				

161 | 				

162 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
163 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
164 | 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
165 | 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
166 | 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
167 | 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
168 | 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
169 | 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
170 | 					luctus, metus
171 | 				

172 | 				

173 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
174 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
175 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
176 | 				

177 | 			

178 | 			
Page javascript

179 | 			

180 | 				
The contents of this div will be replaced by the javascript added to this page

181 | 			

182 | 			
Page CSS

183 | 			

184 | 				
The contents of this div will be replaced by the CSS added to this page

185 | 			

186 | 		

187 | 	
188 | 


--------------------------------------------------------------------------------
/scroll_to_animate.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane scrollTo/ scrollBy with animation demo page
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 35 | 
 36 | 		
 37 | 		
 38 | 		
 39 | 		
 40 | 		
 41 | 		
 42 | 		
 43 | 		
 44 | 
 45 | 		
 80 | 	
 81 | 	
 82 | 		

 83 | 			jScrollPane
 84 | 			
 94 | 		

 95 | 		

 96 | 			
jScrollPane - scrollTo/ scrollBy with animation page

 97 | 			

 98 | 				This example extends the basic scrollTo/ scrollBy demo and passes
 99 | 				animateScroll: true in the settings.
100 | 				This means that when you call scrollTo or 
101 | 				scrollBy the transition to the new state is animated.
102 | 			

103 | 			

104 | 				Note that the animate function which is called is a property on the
105 | 				jScrollPane API method. This means that you are free to overwrite it if you want to implement custom
106 | 				animation settings for your paricular use case. If you just want to tweak the speed and easing of the
107 | 				default animation then you can use the animateDuration and
108 | 				animateEase settings properties.
109 | 			

110 | 			

111 | 				

112 | 					

113 | 						scrollTo functionality
114 | 						
115 | 						
116 | 						
117 | 						
118 | 						
119 | 					

120 | 				

121 | 				

122 | 					

123 | 						scrollBy functionality
124 | 						
125 | 						
126 | 						
127 | 						
128 | 						
129 | 					

130 | 				

131 | 			

132 | 			

133 | 				

134 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
135 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
136 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
137 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
138 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
139 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
140 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
141 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
142 | 					eu lacus semper viverra.
143 | 				

144 | 				

145 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
146 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
147 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
148 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
149 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
150 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
151 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
152 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
153 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
154 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
155 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
156 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
157 | 				

158 | 				

159 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
160 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
161 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
162 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
163 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
164 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
165 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
166 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
167 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
168 | 					id mollis nisi. Donec fermentum vehicula porta.
169 | 				

170 | 				

171 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
172 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
173 | 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
174 | 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
175 | 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
176 | 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
177 | 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
178 | 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
179 | 					luctus, metus
180 | 				

181 | 				

182 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
183 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
184 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
185 | 				

186 | 			

187 | 			
Page javascript

188 | 			

189 | 				
The contents of this div will be replaced by the javascript added to this page

190 | 			

191 | 			
Page CSS

192 | 			

193 | 				
The contents of this div will be replaced by the CSS added to this page

194 | 			

195 | 		

196 | 	
197 | 


--------------------------------------------------------------------------------
/api.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane - API documentation
  7 | 
  8 | 		
  9 | 		
 10 | 
 11 | 		
 12 | 		
 13 | 		
 14 | 		
 15 | 	
 16 | 	
 17 | 		

 18 | 			jScrollPane
 19 | 			
 29 | 		

 30 | 		

 31 | 			
jScrollPane - API documentation

 32 | 			

 33 | 				This page shows how you can use the jScrollPane API (in addition to the 
 34 | 				settings object and the events which are dispatched) to update your
 35 | 				jScrollPane after it's has been initially created.
 36 | 			

 37 | 			

 38 | 				To get a reference to the API for a particular scrollpane you will need to access the 'jsp' variable in
 39 | 				the data of the element you applied jScrollPane to. e.g.
 40 | 			

 41 | 			
var element = $('#my-element').jScrollPane({/* ...settings... */});
 42 | var api = element.data('jsp');

 43 | 			

 44 | 				Once you have a reference to the API you can call any of the following methods on it:
 45 | 			

 46 | 			
reinitialise(s)

 47 | 			

 48 | 				Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it
 49 | 				was initialised). The settings object which is passed in will override any settings from the
 50 | 				previous time it was initialised - if you don't pass any settings then the ones from the previous
 51 | 				initialisation will be used.
 52 | 			

 53 | 			
scrollToElement(ele, stickToTop, animate)

 54 | 			

 55 | 				Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so
 56 | 				that it can be seen within the viewport. If stickToTop is true then the element will appear at
 57 | 				the top of the viewport, if it is false then the viewport will scroll as little as possible to
 58 | 				show the element. You can also specify if you want animation to occur. If you don't provide this
 59 | 				argument then the animateScroll value from the settings object is used instead.
 60 | 			

 61 | 			
scrollTo(destX, destY, animate)

 62 | 			

 63 | 				Scrolls the pane so that the specified co-ordinates within the content are at the top left
 64 | 				of the viewport. animate is optional and if not passed then the value of animateScroll from
 65 | 				the settings object this jScrollPane was initialised with is used.
 66 | 			

 67 | 			
scrollToX(destX, animate)

 68 | 			

 69 | 				Scrolls the pane so that the specified co-ordinate within the content is at the left of the
 70 | 				viewport. animate is optional and if not passed then the value of animateScroll from the settings
 71 | 				object this jScrollPane was initialised with is used.
 72 | 			

 73 | 			
scrollToY(destY, animate)

 74 | 			

 75 | 				Scrolls the pane so that the specified co-ordinate within the content is at the top of the
 76 | 				viewport. animate is optional and if not passed then the value of animateScroll from the settings
 77 | 				object this jScrollPane was initialised with is used.
 78 | 			

 79 | 			
scrollToPercentX(destPercentX, animate)

 80 | 			

 81 | 				Scrolls the pane to the specified percentage of its maximum horizontal scroll position. animate
 82 | 				is optional and if not passed then the value of animateScroll from the settings object this
 83 | 				jScrollPane was initialised with is used.
 84 | 			

 85 | 			
scrollToPercentY(destPercentY, animate)

 86 | 			

 87 | 				Scrolls the pane to the specified percentage of its maximum vertical scroll position. animate
 88 | 				is optional and if not passed then the value of animateScroll from the settings object this
 89 | 				jScrollPane was initialised with is used.
 90 | 			

 91 | 			
scrollBy(deltaX, deltaY, animate)

 92 | 			

 93 | 				Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
 94 | 				the value of animateScroll from the settings object this jScrollPane was initialised with is used.
 95 | 			

 96 | 			
scrollByX(deltaX, animate)

 97 | 			

 98 | 				Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
 99 | 				the value of animateScroll from the settings object this jScrollPane was initialised with is used.
100 | 			

101 | 			
scrollByY(deltaY, animate)

102 | 			

103 | 				Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
104 | 				the value of animateScroll from the settings object this jScrollPane was initialised with is used.
105 | 			

106 | 			
positionDragX(x, animate)

107 | 			

108 | 				Positions the horizontal drag at the specified x position (and updates the viewport to reflect
109 | 				this). animate is optional and if not passed then the value of animateScroll from the settings
110 | 				object this jScrollPane was initialised with is used.
111 | 			

112 | 			
positionDragY(y, animate)

113 | 			

114 | 				Positions the vertical drag at the specified y position (and updates the viewport to reflect
115 | 				this). animate is optional and if not passed then the value of animateScroll from the settings
116 | 				object this jScrollPane was initialised with is used.
117 | 			

118 | 			
animate(ele, prop, value, stepCallback)

119 | 			

120 | 				This method is called when jScrollPane is trying to animate to a new position. You can override
121 | 				it if you want to provide advanced animation functionality. It is passed the following arguments:
122 | 			

123 | 			
    
124 | 				
  • ele - the element whose position is being animated
    • 
125 | 				
  • prop - the property that is being animated
    • 
126 | 				
  • value - the value it's being animated to
    • 
127 | 				
  • stepCallback - a function that you must execute each time you update the value of the property
    • 
128 | 			

129 | 			

130 | 				You can use the default implementation (see sourcecode) as a
131 | 				starting point for your own implementation.
132 | 			

133 | 			
getContentPositionX()

134 | 			

135 | 				Returns the current x position of the viewport with regards to the content pane.
136 | 			

137 | 			
getContentPositionY()

138 | 			

139 | 				Returns the current y position of the viewport with regards to the content pane.
140 | 			

141 | 			
getContentWidth()

142 | 			

143 | 				Returns the width of the content within the scroll pane.
144 | 			

145 | 			
getContentHeight()

146 | 			

147 | 				Returns the height of the content within the scroll pane.
148 | 			

149 | 			
getIsScrollableH()

150 | 			

151 | 				Returns whether or not this scrollpane has a horizontal scrollbar.
152 | 			

153 | 			
getPercentScrolledX()

154 | 			

155 | 				Returns the horizontal position of the viewport within the pane content.
156 | 			

157 | 			
getPercentScrolledY()

158 | 			

159 | 				Returns the vertical position of the viewport within the pane content.
160 | 			

161 | 			
getIsScrollableV()

162 | 			

163 | 				Returns whether or not this scrollpane has a vertical scrollbar.
164 | 			

165 | 			
getContentPane()

166 | 			

167 | 				Gets a reference to the content pane. It is important that you use this method if you want to
168 | 				edit the content of your jScrollPane as if you access the element directly then you may have some
169 | 				problems (as your original element has had additional elements for the scrollbars etc added into
170 | 				it).
171 | 			

172 | 			
scrollToBottom(animate)

173 | 			

174 | 				Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the
175 | 				animateScroll value from settings is used instead.
176 | 			

177 | 			
178 | 			

179 | 				Hijacks the links on the page which link to content inside the scrollpane. If you have changed
180 | 				the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the
181 | 				contents of your scroll pane will work then call this function.
182 | 			

183 | 			
destroy()

184 | 			

185 | 				Destroys the jScrollPane on the instance matching this API object and restores the browser's
186 | 				default behaviour. Example.
187 | 			

188 | 		

189 | 	
190 | 


--------------------------------------------------------------------------------
/override_animate.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane override animate demo page
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 35 | 
 36 | 		
 37 | 		
 38 | 		
 39 | 		
 40 | 		
 41 | 		
 42 | 		
 43 | 		
 44 | 
 45 | 		
102 | 	
103 | 	
104 | 		

105 | 			jScrollPane
106 | 			
116 | 		

117 | 		

118 | 			
jScrollPane - overriding animate example

119 | 			

120 | 				This example extends the scroll to animate example to show how you
121 | 				can override the animate method of the jScrollPane API to implement your
122 | 				own custom animation.
123 | 			

124 | 			

125 | 				For the purposes of the demo we simply implement an animation which jumps to the end point (i.e. doesn't
126 | 				animate at all!) but it shows how you would hook your custom code in...
127 | 			

128 | 			

129 | 				

130 | 					

131 | 						scrollTo functionality
132 | 						
133 | 						
134 | 						
135 | 						
136 | 						
137 | 					

138 | 				

139 | 				

140 | 					

141 | 						scrollBy functionality
142 | 						
143 | 						
144 | 						
145 | 						
146 | 						
147 | 					

148 | 				

149 | 			

150 | 			

151 | 				

152 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
153 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
154 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
155 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
156 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
157 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
158 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
159 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
160 | 					eu lacus semper viverra.
161 | 				

162 | 				

163 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
164 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
165 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
166 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
167 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
168 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
169 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
170 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
171 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
172 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
173 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
174 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
175 | 				

176 | 				

177 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
178 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
179 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
180 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
181 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
182 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
183 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
184 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
185 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
186 | 					id mollis nisi. Donec fermentum vehicula porta.
187 | 				

188 | 				

189 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
190 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
191 | 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
192 | 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
193 | 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
194 | 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
195 | 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
196 | 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
197 | 					luctus, metus
198 | 				

199 | 				

200 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
201 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
202 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
203 | 				

204 | 			

205 | 			
Page javascript

206 | 			

207 | 				
The contents of this div will be replaced by the javascript added to this page

208 | 			

209 | 			
Page CSS

210 | 			

211 | 				
The contents of this div will be replaced by the CSS added to this page

212 | 			

213 | 		

214 | 	
215 | 


--------------------------------------------------------------------------------
/less_basic.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		Less basic jScrollPane demo
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 22 | 
 23 | 		
 24 | 		
 25 | 		
 26 | 		
 27 | 		
 28 | 		
 29 | 		
 30 | 		
 31 | 
 32 | 		
 47 | 	
 48 | 	
 49 | 		

 50 | 			jScrollPane
 51 | 			
 61 | 		

 62 | 		

 63 | 			
jScrollPane - less basic demo page

 64 | 			

 65 | 				This page shows some slightly more complex features of jScrollPane... Matching multiple elements but
 66 | 				allowing each to work independantly, reinitialising when you call it
 67 | 				again etc... Note that you need to use the API to getContentPane
 68 | 				to add and remove content (as your original element now contains the scrollbars etc).
 69 | 			

 70 | 			
Pane 1

 71 | 			

 72 | 				

 73 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
 74 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
 75 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
 76 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
 77 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
 78 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
 79 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
 80 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
 81 | 					eu lacus semper viverra.
 82 | 				

 83 | 				

 84 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
 85 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
 86 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
 87 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
 88 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
 89 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
 90 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
 91 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
 92 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
 93 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
 94 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
 95 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
 96 | 				

 97 | 				

 98 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
 99 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
100 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
101 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
102 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
103 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
104 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
105 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
106 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
107 | 					id mollis nisi. Donec fermentum vehicula porta.
108 | 				

109 | 				

110 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
111 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
112 | 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
113 | 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
114 | 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
115 | 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
116 | 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
117 | 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
118 | 					luctus, metus
119 | 				

120 | 				

121 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
122 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
123 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
124 | 				

125 | 			

126 | 			
Pane 2

127 | 			

128 | 				

129 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
130 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
131 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
132 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
133 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
134 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
135 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
136 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
137 | 					eu lacus semper viverra.
138 | 				

139 | 				

140 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
141 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
142 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
143 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
144 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
145 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
146 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
147 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
148 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
149 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
150 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
151 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
152 | 				

153 | 			

154 | 			
Page javascript

155 | 			

156 | 				
The contents of this div will be replaced by the javascript added to this page

157 | 			

158 | 			
Page CSS

159 | 			

160 | 				
The contents of this div will be replaced by the CSS added to this page

161 | 			

162 | 		

163 | 	
164 | 


--------------------------------------------------------------------------------
/settings.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane - settings object documentation
  7 | 
  8 | 		
  9 | 		
 10 | 
 11 | 		
 12 | 		
 13 | 		
 14 | 		
 15 | 	
 16 | 	
 17 | 		

 18 | 			jScrollPane
 19 | 			
 29 | 		

 30 | 		

 31 | 			
jScrollPane - settings object documentation

 32 | 			

 33 | 				This page details the various options that you can pass into the settings object when you initialise
 34 | 				jScrollPane. Note that there is also a number of changes you can make through the 
 35 | 				API after the scrollpane is already initialised and a number of events you
 36 | 				can listen to.
 37 | 			

 38 | 			
showArrows - boolean (default false)

 39 | 			

 40 | 				Whether arrows should be shown on the generated scroll pane. When set to false only the scrollbar track
 41 | 				and drag will be shown, if set to true then arrows buttons will also be shown. 
 42 | 				Demo.
 43 | 			

 44 | 			
maintainPosition - boolean (default true)

 45 | 			

 46 | 				Whether the scrollpane should attempt to maintain it's position whenever it is reinitialised. If true
 47 | 				then the viewport of the scrollpane will remain the same when it is reinitialised, if false then the
 48 | 				viewport will jump back up to the top when the scrollpane is reinitialised. See also
 49 | 				stickToBottom and stickToRight.
 50 | 			

 51 | 			
stickToBottom- boolean (default false)

 52 | 			

 53 | 				If maintainPosition is true and the scrollpane is scrolled to the
 54 | 				bottom then the scrollpane then the scrollpane will remain scrolled to the bottom even if new content
 55 | 				is added to the pane which makes it taller.
 56 | 			

 57 | 			
stickToRight- boolean (default false)

 58 | 			

 59 | 				If maintainPosition is true and the scrollpane is scrolled to its
 60 | 				right edge then the scrollpane then the scrollpane will remain scrolled to the right edge even if new
 61 | 				content is added to the pane which makes it wider.
 62 | 			

 63 | 			
autoReinitialise - boolean (default false)

 64 | 			

 65 | 				Whether jScrollPane should automatically reinitialise itself periodically after you have initially
 66 | 				initialised it. This can help with instances when the size of the content of the scrollpane (or the
 67 | 				surrounding element) changes. However, it does involve an overhead of running a javascript function on
 68 | 				a timer so it is recommended only to activate where necessary. Demo.
 69 | 			

 70 | 			
autoReinitialiseDelay - int (default 500)

 71 | 			

 72 | 				The number of milliseconds between each reinitialisation (if autoReinitialise
 73 | 				is true).
 74 | 			

 75 | 			
verticalDragMinHeight - int (default 0)

 76 | 			

 77 | 				The smallest height that the vertical drag can have. The size of the drag elements is based on the
 78 | 				proportion of the size of the content to the size of the viewport but is contrained within the minimum
 79 | 				and maximum dimensions given. Demo.
 80 | 			

 81 | 			
verticalDragMaxHeight - int (default 99999)

 82 | 			

 83 | 				See verticalDragMinHeight.
 84 | 			

 85 | 			
horizontalDragMinWidth - int (default 0)

 86 | 			

 87 | 				See verticalDragMinHeight.
 88 | 			

 89 | 			
horizontalDragMaxWidth - int (default 99999)

 90 | 			

 91 | 				See verticalDragMinHeight.
 92 | 			

 93 | 			
contentWidth - int (default undefined)

 94 | 			

 95 | 				The width of the content of the scroll pane. The default value of undefined will allow jScrollPane to
 96 | 				calculate the width of it's content. However, in some cases you will want to disable this (e.g. to
 97 | 				prevent horizontal scrolling or where the calculation of the size of the content doesn't return reliable
 98 | 				results)
 99 | 			

100 | 			
animateScroll - boolean (default false)

101 | 			

102 | 				Whether to use animation when calling scrollTo or 
103 | 				scrollBy. You can control the animation speed and easing by using the 
104 | 				animateDuration and animateEase settings or if you want to exercise more
105 | 				complete control then you can override the animate API method.
106 | 				Demo.
107 | 			

108 | 			
animateDuration - int (default 300)

109 | 			

110 | 				The number of milliseconds taken to animate to a new position (see animateScroll
111 | 				).
112 | 			

113 | 			
animateEase - string (default 'linear')

114 | 			

115 | 				The type of easing to use when animating to a new position (see animateScroll
116 | 				 and easing).
117 | 			

118 | 			
119 | 			

120 | 				Whether internal links on the page should be hijacked so that if they point so content within a
121 | 				jScrollPane then they automatically scroll the jScrollPane to the correct place. 
122 | 				Demo.
123 | 			

124 | 			
verticalGutter - int (default 4)

125 | 			

126 | 				The amount of space between the side of the content and the vertical scrollbar.
127 | 			

128 | 			
horizontalGutter - int (default 4)

129 | 			

130 | 				The amount of space between the bottom of the content and the horizontal scrollbar.
131 | 			

132 | 			
mouseWheelSpeed - int (default 10)

133 | 			

134 | 				A multiplier which is used to control the amount that the scrollpane scrolls each time the mouse wheel
135 | 				is turned.
136 | 			

137 | 			
arrowButtonSpeed - int (default 10)

138 | 			

139 | 				A multiplier which is used to control the amount that the scrollpane scrolls each time on of the arrow
140 | 				buttons is pressed.
141 | 			

142 | 			
arrowRepeatFreq - int (default 100)

143 | 			

144 | 				The number of milliseconds between each repeated scroll event when the mouse is held down over one of
145 | 				the arrow keys.
146 | 			

147 | 			
arrowScrollOnHover - boolean (default false)

148 | 			

149 | 				Whether the arrow buttons should cause the jScrollPane to scroll while you are hovering over them.
150 | 				Demo.
151 | 			

152 | 			

153 | 				verticalArrowPositions - string [split|before|after|os] (default split)
154 | 			

155 | 			

156 | 				Where the vertical arrows should appear relative to the vertical track. 
157 | 				Demo.
158 | 			

159 | 			

160 | 				horizontalArrowPositions - string [split|before|after|os] (default split)
161 | 			

162 | 			

163 | 				Where the horizontal arrows should appear relative to the horizontal track. 
164 | 				Demo.
165 | 			

166 | 			

167 | 				enableKeyboardNavigation - boolean (default true)
168 | 			

169 | 			

170 | 				Whether keyboard navigation should be enabled (e.g. whether the user can focus the scrollpane and then
171 | 				use the arrow (and other) keys to navigate around.
172 | 			

173 | 			

174 | 				hideFocus - boolean (default false)
175 | 			

176 | 			

177 | 				Whether the focus outline should be hidden in all browsers. For best accessibility you should not change
178 | 				this option. You can style the outline with the CSS property outline and outline-offset.
179 | 			

180 | 			

181 | 				clickOnTrack - boolean (default true)
182 | 			

183 | 			

184 | 				Whether clicking on the track (e.g. the area behind the drag) should scroll towards the point clicked on.
185 | 				Defaults to true as this is the native behaviour in these situations.
186 | 			

187 | 			
trackClickSpeed - int (default 30)

188 | 			

189 | 				A multiplier which is used to control the amount that the scrollpane scrolls each trackClickRepeatFreq
190 | 				while the mouse button is held down over the track.
191 | 			

192 | 			
trackClickRepeatFreq - int (default 100)

193 | 			

194 | 				The number of milliseconds between each repeated scroll event when the mouse is held down over the
195 | 				track.
196 | 			

197 | 
198 | 		

199 | 	
200 | 


--------------------------------------------------------------------------------
/dynamic_height.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane dynamic height demo
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 35 | 
 36 | 		
 37 | 		
 38 | 		
 39 | 		
 40 | 		
 41 | 		
 42 | 		
 43 | 		
 44 | 
 45 | 		
 86 | 	
 87 | 	
 88 | 		

 89 | 			jScrollPane
 90 | 			
100 | 		

101 | 		

102 | 			
jScrollPane - dynamic height demo

103 | 			

104 | 				This demonstration builds on the dynamic width demo and shows how
105 | 				jScrollPane will also work correctly with elements which have a percentage height. Note that the rest
106 | 				of the infrastructure for this site isn't built for dynamic height so the code listings may overhang
107 | 				the bottom of their containing box. Also note (if your screen is big enough) that the scrollbars will
108 | 				automatically appear/ disappear as they become necessary or not (dependant on the content).
109 | 			

110 | 
111 | 			
Vertical only

112 | 			

113 | 				

114 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
115 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
116 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
117 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
118 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
119 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
120 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
121 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
122 | 					eu lacus semper viverra.
123 | 				

124 | 				

125 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
126 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
127 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
128 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
129 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
130 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
131 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
132 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
133 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
134 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
135 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
136 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
137 | 				

138 | 				

139 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
140 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
141 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
142 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
143 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
144 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
145 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
146 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
147 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
148 | 					id mollis nisi. Donec fermentum vehicula porta.
149 | 				

150 | 				

151 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
152 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
153 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
154 | 				

155 | 			

156 | 			
Both

157 | 			

158 | 				

159 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
160 | 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
161 | 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
162 | 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
163 | 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
164 | 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
165 | 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
166 | 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
167 | 					eu lacus semper viverra.
168 | 				

169 | 				

170 | 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
171 | 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
172 | 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
173 | 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
174 | 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
175 | 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
176 | 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
177 | 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
178 | 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
179 | 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
180 | 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
181 | 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
182 | 				

183 | 				

184 | 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
185 | 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
186 | 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
187 | 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
188 | 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
189 | 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
190 | 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
191 | 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
192 | 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
193 | 					id mollis nisi. Donec fermentum vehicula porta.
194 | 				

195 | 				

196 | 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
197 | 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
198 | 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
199 | 				

200 | 			

201 | 			
Page javascript

202 | 			

203 | 				
The contents of this div will be replaced by the javascript added to this page

204 | 			

205 | 			
Page CSS

206 | 			

207 | 				
The contents of this div will be replaced by the CSS added to this page

208 | 			

209 | 		

210 | 	
211 | 


--------------------------------------------------------------------------------