├── .gitmodules ├── examples ├── image ├── style ├── script ├── v1.html ├── faqs.html ├── known_issues.html ├── iframe.html ├── short.html ├── resize_sensor.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 ├── max_height.html ├── ajax.html ├── anchors.html ├── scroll_to.html ├── scroll_to_animate.html ├── api.html ├── override_animate.html ├── less_basic.html ├── dynamic_height.html ├── focus.html └── arrows.html ├── .gitignore ├── image └── logo.png ├── themes └── lozenge │ ├── image │ ├── ui-icons_222222_256x240.png │ ├── ui-icons_888888_256x240.png │ └── ui-icons_cd0a0a_256x240.png │ └── style │ └── jquery.jscrollpane.lozenge.css ├── bower.json ├── package.json ├── MIT-LICENSE.txt ├── script ├── demo.js ├── mwheelIntent.js └── jquery.mousewheel.js ├── Gruntfile.js ├── style ├── jquery.jscrollpane.css └── demo.css └── README.md /.gitmodules: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/image: -------------------------------------------------------------------------------- 1 | ../image -------------------------------------------------------------------------------- /examples/style: -------------------------------------------------------------------------------- 1 | ../style -------------------------------------------------------------------------------- /examples/script: -------------------------------------------------------------------------------- 1 | ../script -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | yuicompressor-2.4.2 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitch/jScrollPane/HEAD/image/logo.png -------------------------------------------------------------------------------- /themes/lozenge/image/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitch/jScrollPane/HEAD/themes/lozenge/image/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /themes/lozenge/image/ui-icons_888888_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitch/jScrollPane/HEAD/themes/lozenge/image/ui-icons_888888_256x240.png -------------------------------------------------------------------------------- /themes/lozenge/image/ui-icons_cd0a0a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitch/jScrollPane/HEAD/themes/lozenge/image/ui-icons_cd0a0a_256x240.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jScrollPane", 3 | "license": [ 4 | "MIT", 5 | "GPL-2.0" 6 | ], 7 | "main": [ 8 | "./script/jquery.mousewheel.js", 9 | "./script/mwheelIntent.js", 10 | "./script/jquery.jscrollpane.js", 11 | "./script/jquery.jscrollpane.min.js", 12 | "./style/jquery.jscrollpane.css" 13 | ], 14 | "dependencies": { 15 | "jquery": "latest" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git://github.com/vitch/jScrollPane.git" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jscrollpane", 3 | "version": "2.2.3-rc.1", 4 | "description": "jScrollPane - cross browser custom scroll bars", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/vitch/jScrollPane.git" 8 | }, 9 | "keywords": [ 10 | "jquery", 11 | "jscrollpane", 12 | "css" 13 | ], 14 | "author": "Tuukka Pasanen", 15 | "license": "(MIT OR GPL-2.0)", 16 | "bugs": { 17 | "url": "https://github.com/vitch/jScrollPane/issues" 18 | }, 19 | "main": "script/jquery.jscrollpane.min.js", 20 | "homepage": "https://github.com/vitch/jScrollPane#readme", 21 | "scripts": { 22 | "build": "grunt" 23 | }, 24 | "dependencies": { 25 | "jquery": "^3.5.1" 26 | }, 27 | "devDependencies": { 28 | "grunt": "^1.1.0", 29 | "grunt-cli": "^1.3.2", 30 | "grunt-contrib-connect": "^2.1.0", 31 | "grunt-contrib-uglify": "^4.0.1", 32 | "grunt-contrib-watch": "^1.1.0", 33 | "grunt-prettier": "^2.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010 Kelvin Luck 2 | Copyright (c) 2017-2020 Tuukka Pasanen 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE 21 | -------------------------------------------------------------------------------- /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; 68 | } 69 | 70 | .jspArrowLeft 71 | { 72 | background-position: -96px 0; 73 | } 74 | 75 | .jspArrowRight 76 | { 77 | background-position: -32px 0; 78 | } 79 | -------------------------------------------------------------------------------- /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 or 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:' || window.location.hostname == 'localhost') {
46 | 	// Allow local testing without annoying alerts
47 | } else {
48 | 	alert('Do not include demo.js on your site!');
49 | }
50 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * jScrollPane build script
 3 |  * http://jscrollpane.kelvinluck.com/
 4 |  *
 5 |  * Copyright (c) 2013 Kelvin Luck
 6 |  * Copyright (c) 2020 Tuukka Pasanen
 7 |  * Licensed under the MIT license.
 8 |  */
 9 | 
10 | 'use strict';
11 | 
12 | module.exports = function (grunt) {
13 |     // Project configuration.
14 |     grunt.initConfig({
15 |         uglify: {
16 |             jsp: {
17 |                 files: {
18 |                     'script/jquery.jscrollpane.min.js': 'script/jquery.jscrollpane.js',
19 |                 },
20 |                 options: {
21 |                     preserveComments: 'some',
22 |                 },
23 |             },
24 |         },
25 |         watch: {
26 |             content: {
27 |                 files: ['script/jquery.jscrollpane.js'],
28 |                 tasks: 'uglify',
29 |             },
30 |         },
31 |         connect: {
32 |             site: {
33 |                 options: {
34 |                     base: '.',
35 |                 },
36 |             },
37 |         },
38 |         prettier: {
39 |             pretty: {
40 |                 options: {
41 |                     printWidth: 140,
42 |                     tabWidth: 4,
43 |                     useTabs: false,
44 |                     semi: true,
45 |                     singleQuote: true,
46 |                     trailingComma: 'all',
47 |                     bracketSpacing: true,
48 |                     progress: true,
49 |                 },
50 |                 src: ['Gruntfile.js', 'script/jquery.jscrollpane.js'],
51 |             },
52 |         },
53 |     });
54 | 
55 |     grunt.loadNpmTasks('grunt-contrib-connect');
56 |     grunt.loadNpmTasks('grunt-contrib-watch');
57 |     grunt.loadNpmTasks('grunt-contrib-uglify');
58 |     grunt.loadNpmTasks('grunt-prettier');
59 | 
60 |     grunt.registerTask('default', ['uglify', 'prettier']);
61 |     grunt.registerTask('serve', ['uglify', 'connect', 'watch']);
62 | };
63 | 


--------------------------------------------------------------------------------
/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).on('mousewheel', $.event.special.mwheelIntent.handler);
28 | 		if( this !== doc && this !== root && this !== body ){
29 | 			jElm.on('mouseleave', unsetPos);
30 | 		}
31 | 		jElm = null;
32 |         return true;
33 |     },
34 | 	teardown: function(){
35 |         $(this)
36 | 			.unon('mousewheel', $.event.special.mwheelIntent.handler)
37 | 			.unon('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.dispatch || $.event.handle).apply(this, arguments);
58 | 		}
59 |     }
60 | };
61 | $.fn.extend({
62 | 	mwheelIntent: function(fn) {
63 | 		return fn ? this.on("mwheelIntent", fn) : this.trigger("mwheelIntent");
64 | 	},
65 | 	
66 | 	unmwheelIntent: function(fn) {
67 | 		return this.unon("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).on('mwheelIntent.mwheelIntentDefault', $.noop);
75 | });
76 | })(jQuery);
77 | 


--------------------------------------------------------------------------------
/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 | 	background: red;
 22 | 	height: 100%;
 23 | 	position: absolute;
 24 | 	right: 0;
 25 | 	top: 0;
 26 | 	width: 16px;
 27 | }
 28 | 
 29 | .jspHorizontalBar
 30 | {
 31 | 	background: red;
 32 | 	bottom: 0;
 33 | 	height: 16px;
 34 | 	left: 0;
 35 | 	position: absolute;
 36 | 	width: 100%;
 37 | }
 38 | 
 39 | .jspCap
 40 | {
 41 | 	display: none;
 42 | }
 43 | 
 44 | .jspHorizontalBar .jspCap
 45 | {
 46 | 	float: left;
 47 | }
 48 | 
 49 | .jspTrack
 50 | {
 51 | 	background: #dde;
 52 | 	position: relative;
 53 | }
 54 | 
 55 | .jspDrag
 56 | {
 57 | 	background: #bbd;
 58 | 	cursor: pointer;
 59 | 	left: 0;
 60 | 	position: relative;
 61 | 	top: 0;
 62 | }
 63 | 
 64 | .jspHorizontalBar .jspTrack,
 65 | .jspHorizontalBar .jspDrag
 66 | {
 67 | 	float: left;
 68 | 	height: 100%;
 69 | }
 70 | 
 71 | .jspArrow
 72 | {
 73 | 	background: #50506d;
 74 | 	cursor: pointer;
 75 |         direction: ltr;
 76 | 	display: block;
 77 | 	margin: 0;
 78 | 	padding: 0;
 79 | 	text-indent: -20000px;
 80 | }
 81 | 
 82 | .jspDisabled
 83 | {
 84 | 	background: #80808d;
 85 | 	cursor: default;
 86 | }
 87 | 
 88 | .jspVerticalBar .jspArrow
 89 | {
 90 | 	height: 16px;
 91 | }
 92 | 
 93 | .jspHorizontalBar .jspArrow
 94 | {
 95 | 	float: left;
 96 | 	height: 100%;
 97 | 	width: 16px;
 98 | }
 99 | 
100 | .jspVerticalBar .jspArrow:focus
101 | {
102 |         border: 1px solid red;
103 | 	outline: none;
104 | }
105 | 
106 | .jspCorner
107 | {
108 | 	background: #eeeef4;
109 | 	float: left;
110 | 	height: 100%;
111 | }
112 | 
113 | /* Yuk! CSS Hack for IE6 3 pixel bug :( */
114 | * html .jspCorner
115 | {
116 | 	margin: 0 -3px 0 0;
117 | }
118 | 


--------------------------------------------------------------------------------
/examples/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 | 
50 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jScrollPane - cross browser custom scroll bars
 2 | 
 3 | jScrollPane is a [jQuery](http://www.jquery.com/) plugin which allows you to replace a browser's default scroll bars (on an element which has **overflow: auto**) with a HTML structure that can be easily skinned using CSS.
 4 | 
 5 | 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!
 6 | 
 7 | ## How to get it
 8 | 
 9 | ### CDN
10 | Up-to-date CDN version is kindly provided by: [CDNJS jScrollPane](https://cdnjs.com/libraries/jScrollPane)
11 | 
12 | ### NPM
13 | Up-to-date Node version [jScrollPane](https://www.npmjs.com/package/jscrollpane) is also available from NPM.
14 | 
15 | ### Ruby on Rails
16 | jScrollPane [packed as Ruby gem](https://github.com/bodrovis/jscrollpane-rails) is also available.
17 | 
18 | ## Issues
19 | 
20 | Please feel free to make Bug reports against project but if you are making Issue in this project please read below.
21 | 
22 | ### Every Issue should have these
23 | 
24 |  - Brief topic which describes Issue
25 |  - Short explanation about bug
26 |  - Provide Browser info (version and platform) which have been used
27 |  - Provide working example about Issue (JSFiddle or similar)
28 | 
29 | ### It would be nice to have these
30 | 
31 |  - Debug help about Issue if needed
32 |  - Issue owner stays active until Issue is closed
33 | 
34 | ## Contributing
35 | 
36 | There is a simple [grunt](http://gruntjs.com) based build script in `Gruntfile.js` which will help to produce a minified version of
37 | jScrollPane if you make any modifications and want to submit a pull request.
38 | 
39 | To use it, make sure you have [node](http://nodejs.org/), npm:
40 | 
41 | ```
42 | npm install
43 | ```
44 | 
45 | Then:
46 | 
47 | ```
48 | npm run build
49 | ```
50 | 
51 | Please remember to update the changelog in the comment at the header of both JS files when submitting a pull request.
52 | 
53 | ## Pull Request
54 | 
55 | These lines below may sound harsh or stop you making Pull Request. Please do Pull Request! This is very friendly project.
56 | These are just here because my time is *very limited*. So If you read lines below we all get along with less stress.
57 | 
58 | Please feel free to make Bug reports against project but Before making Pull Request please run your code against newest JSHint.
59 | *Code with errors against JSHint won't be integrated or reviewed!*.
60 | 
61 | Please also understand as Pull Request are made there is no time line or promise for that is would ever get integrated.
62 | This Volunteer organization and I do this when I have time. Remember everyone can help to review Pull Request.
63 | 
64 | If there is changes needed to make in Pull Request it's up to Pull Request owner to make sure they are corrected.
65 | 
66 | ### Pull Requests should at least have these
67 |  - Pull Request should at least contain topic what it's changing
68 |  - Brief explanation why this should be integrated and what have been changed
69 |  - If there is new initialize properties they they should be documented to documentation
70 |  - If this Pull Request generates new functionality which ain't having example that should be provided.
71 | 
72 | ## License
73 | 
74 | jScrollPane is dual-licensed under the [GPL 2 license](https://github.com/vitch/jScrollPane/blob/master/GPL-LICENSE.txt) and the [MIT license](https://github.com/vitch/jScrollPane/blob/master/MIT-LICENSE.txt).
75 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/resize_sensor.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 resizeSensor: true as a
76 | 				setting. If you do this then the scrollpane attempts to reinitialise any time it detects a change in the content size.
77 | 			

78 | 			

79 | 				Note this will work fine in most cases, however if content is absolutely positioned it may be unable to
80 | 				detect changes. If that is the case autoReinitialise can be used instead.
81 | 			

82 | 			

83 | 			

84 | 			
Page javascript

85 | 			

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

87 | 			

88 | 			
Page CSS

89 | 			

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

91 | 			

92 | 		

93 | 	
94 | 
95 | 


--------------------------------------------------------------------------------
/examples/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 | 
96 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 or use the resizeSensor.
84 | 			

85 | 			

86 | 			

87 | 			
Page javascript

88 | 			

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

90 | 			

91 | 			
Page CSS

92 | 			

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

94 | 			

95 | 		

96 | 	
97 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 	



--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/max_height.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane - ajax demo page
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 19 | 
 20 | 		
 21 | 		
 22 | 		
 23 | 		
 24 | 		
 25 | 		
 26 | 		
 27 | 		
 28 | 
 29 | 		
 41 | 		
 42 | 	
 43 | 		

 44 | 			jScrollPane
 45 | 			
 55 | 		

 56 | 		

 57 | 			
Change of max-height

 58 | 			

 59 | 				This demonstration shows how to deal with dynamically changing space constraints. Click the button below to
 60 | 				change the height of the scrolling area. When this occurs, you need to call the
 61 | 				reinitialise API method to update the size and scroll information of
 62 | 				your jScrollPane.
 63 | 			

 64 | 			

 65 | 				
 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 | 
133 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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). Internally only one live event is bound to the document body.
 74 | 			

 75 | 			

 76 | 				

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

 87 | 				

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

101 | 				

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

113 | 				

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

129 | 			

130 | 			
Page javascript

131 | 			

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

133 | 			

134 | 			
Page CSS

135 | 			

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

137 | 			

138 | 		

139 | 	
140 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/script/jquery.mousewheel.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * jQuery Mousewheel 3.1.13
  3 |  * Copyright OpenJS Foundation and other contributors
  4 |  */
  5 | 
  6 | ( function( factory ) {
  7 |     if ( typeof define === "function" && define.amd ) {
  8 | 
  9 |         // AMD. Register as an anonymous module.
 10 |         define( [ "jquery" ], factory );
 11 |     } else if ( typeof exports === "object" ) {
 12 | 
 13 |         // Node/CommonJS style for Browserify
 14 |         module.exports = factory;
 15 |     } else {
 16 | 
 17 |         // Browser globals
 18 |         factory( jQuery );
 19 |     }
 20 | } )( function( $ ) {
 21 | 
 22 |     var toFix  = [ "wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll" ],
 23 |         toBind = ( "onwheel" in window.document || window.document.documentMode >= 9 ) ?
 24 |                     [ "wheel" ] : [ "mousewheel", "DomMouseScroll", "MozMousePixelScroll" ],
 25 |         slice  = Array.prototype.slice,
 26 |         nullLowestDeltaTimeout, lowestDelta;
 27 | 
 28 |     if ( $.event.fixHooks ) {
 29 |         for ( var i = toFix.length; i; ) {
 30 |             $.event.fixHooks[ toFix[ --i ] ] = $.event.mouseHooks;
 31 |         }
 32 |     }
 33 | 
 34 |     var special = $.event.special.mousewheel = {
 35 |         version: "3.1.12",
 36 | 
 37 |         setup: function() {
 38 |             if ( this.addEventListener ) {
 39 |                 for ( var i = toBind.length; i; ) {
 40 |                     this.addEventListener( toBind[ --i ], handler, false );
 41 |                 }
 42 |             } else {
 43 |                 this.onmousewheel = handler;
 44 |             }
 45 | 
 46 |             // Store the line height and page height for this particular element
 47 |             $.data( this, "mousewheel-line-height", special.getLineHeight( this ) );
 48 |             $.data( this, "mousewheel-page-height", special.getPageHeight( this ) );
 49 |         },
 50 | 
 51 |         teardown: function() {
 52 |             if ( this.removeEventListener ) {
 53 |                 for ( var i = toBind.length; i; ) {
 54 |                     this.removeEventListener( toBind[ --i ], handler, false );
 55 |                 }
 56 |             } else {
 57 |                 this.onmousewheel = null;
 58 |             }
 59 | 
 60 |             // Clean up the data we added to the element
 61 |             $.removeData( this, "mousewheel-line-height" );
 62 |             $.removeData( this, "mousewheel-page-height" );
 63 |         },
 64 | 
 65 |         getLineHeight: function( elem ) {
 66 |             var $elem = $( elem ),
 67 |                 $parent = $elem[ "offsetParent" in $.fn ? "offsetParent" : "parent" ]();
 68 |             if ( !$parent.length ) {
 69 |                 $parent = $( "body" );
 70 |             }
 71 |             return parseInt( $parent.css( "fontSize" ), 10 ) ||
 72 |                 parseInt( $elem.css( "fontSize" ), 10 ) || 16;
 73 |         },
 74 | 
 75 |         getPageHeight: function( elem ) {
 76 |             return $( elem ).height();
 77 |         },
 78 | 
 79 |         settings: {
 80 |             adjustOldDeltas: true, // see shouldAdjustOldDeltas() below
 81 |             normalizeOffset: true  // calls getBoundingClientRect for each event
 82 |         }
 83 |     };
 84 | 
 85 |     $.fn.extend( {
 86 |         mousewheel: function( fn ) {
 87 |             return fn ? this.on( "mousewheel", fn ) : this.trigger( "mousewheel" );
 88 |         },
 89 | 
 90 |         unmousewheel: function( fn ) {
 91 |             return this.off( "mousewheel", fn );
 92 |         }
 93 |     } );
 94 | 
 95 | 
 96 |     function handler( event ) {
 97 |         var orgEvent   = event || window.event,
 98 |             args       = slice.call( arguments, 1 ),
 99 |             delta      = 0,
100 |             deltaX     = 0,
101 |             deltaY     = 0,
102 |             absDelta   = 0;
103 |         event = $.event.fix( orgEvent );
104 |         event.type = "mousewheel";
105 | 
106 |         // Old school scrollwheel delta
107 |         if ( "detail" in orgEvent ) {
108 |             deltaY = orgEvent.detail * -1;
109 |         }
110 |         if ( "wheelDelta" in orgEvent ) {
111 |             deltaY = orgEvent.wheelDelta;
112 |         }
113 |         if ( "wheelDeltaY" in orgEvent ) {
114 |             deltaY = orgEvent.wheelDeltaY;
115 |         }
116 |         if ( "wheelDeltaX" in orgEvent ) {
117 |             deltaX = orgEvent.wheelDeltaX * -1;
118 |         }
119 | 
120 |         // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
121 |         if ( "axis" in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
122 |             deltaX = deltaY * -1;
123 |             deltaY = 0;
124 |         }
125 | 
126 |         // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
127 |         delta = deltaY === 0 ? deltaX : deltaY;
128 | 
129 |         // New school wheel delta (wheel event)
130 |         if ( "deltaY" in orgEvent ) {
131 |             deltaY = orgEvent.deltaY * -1;
132 |             delta  = deltaY;
133 |         }
134 |         if ( "deltaX" in orgEvent ) {
135 |             deltaX = orgEvent.deltaX;
136 |             if ( deltaY === 0 ) {
137 |                 delta  = deltaX * -1;
138 |             }
139 |         }
140 | 
141 |         // No change actually happened, no reason to go any further
142 |         if ( deltaY === 0 && deltaX === 0 ) {
143 |             return;
144 |         }
145 | 
146 |         // Need to convert lines and pages to pixels if we aren't already in pixels
147 |         // There are three delta modes:
148 |         //   * deltaMode 0 is by pixels, nothing to do
149 |         //   * deltaMode 1 is by lines
150 |         //   * deltaMode 2 is by pages
151 |         if ( orgEvent.deltaMode === 1 ) {
152 |             var lineHeight = $.data( this, "mousewheel-line-height" );
153 |             delta  *= lineHeight;
154 |             deltaY *= lineHeight;
155 |             deltaX *= lineHeight;
156 |         } else if ( orgEvent.deltaMode === 2 ) {
157 |             var pageHeight = $.data( this, "mousewheel-page-height" );
158 |             delta  *= pageHeight;
159 |             deltaY *= pageHeight;
160 |             deltaX *= pageHeight;
161 |         }
162 | 
163 |         // Store lowest absolute delta to normalize the delta values
164 |         absDelta = Math.max( Math.abs( deltaY ), Math.abs( deltaX ) );
165 | 
166 |         if ( !lowestDelta || absDelta < lowestDelta ) {
167 |             lowestDelta = absDelta;
168 | 
169 |             // Adjust older deltas if necessary
170 |             if ( shouldAdjustOldDeltas( orgEvent, absDelta ) ) {
171 |                 lowestDelta /= 40;
172 |             }
173 |         }
174 | 
175 |         // Adjust older deltas if necessary
176 |         if ( shouldAdjustOldDeltas( orgEvent, absDelta ) ) {
177 | 
178 |             // Divide all the things by 40!
179 |             delta  /= 40;
180 |             deltaX /= 40;
181 |             deltaY /= 40;
182 |         }
183 | 
184 |         // Get a whole, normalized value for the deltas
185 |         delta  = Math[ delta  >= 1 ? "floor" : "ceil" ]( delta  / lowestDelta );
186 |         deltaX = Math[ deltaX >= 1 ? "floor" : "ceil" ]( deltaX / lowestDelta );
187 |         deltaY = Math[ deltaY >= 1 ? "floor" : "ceil" ]( deltaY / lowestDelta );
188 | 
189 |         // Normalise offsetX and offsetY properties
190 |         if ( special.settings.normalizeOffset && this.getBoundingClientRect ) {
191 |             var boundingRect = this.getBoundingClientRect();
192 |             event.offsetX = event.clientX - boundingRect.left;
193 |             event.offsetY = event.clientY - boundingRect.top;
194 |         }
195 | 
196 |         // Add information to the event object
197 |         event.deltaX = deltaX;
198 |         event.deltaY = deltaY;
199 |         event.deltaFactor = lowestDelta;
200 | 
201 |         // Go ahead and set deltaMode to 0 since we converted to pixels
202 |         // Although this is a little odd since we overwrite the deltaX/Y
203 |         // properties with normalized deltas.
204 |         event.deltaMode = 0;
205 | 
206 |         // Add event and delta to the front of the arguments
207 |         args.unshift( event, delta, deltaX, deltaY );
208 | 
209 |         // Clearout lowestDelta after sometime to better
210 |         // handle multiple device types that give different
211 |         // a different lowestDelta
212 |         // Ex: trackpad = 3 and mouse wheel = 120
213 |         if ( nullLowestDeltaTimeout ) {
214 |             window.clearTimeout( nullLowestDeltaTimeout );
215 |         }
216 |         nullLowestDeltaTimeout = window.setTimeout( nullLowestDelta, 200 );
217 | 
218 |         return ( $.event.dispatch || $.event.handle ).apply( this, args );
219 |     }
220 | 
221 |     function nullLowestDelta() {
222 |         lowestDelta = null;
223 |     }
224 | 
225 |     function shouldAdjustOldDeltas( orgEvent, absDelta ) {
226 | 
227 |         // If this is an older event and the delta is divisable by 120,
228 |         // then we are assuming that the browser is treating this as an
229 |         // older mouse wheel event and that we should divide the deltas
230 |         // by 40 to try and get a more usable deltaFactor.
231 |         // Side note, this actually impacts the reported scroll distance
232 |         // in older browsers and can cause scrolling to be slower than native.
233 |         // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
234 |         return special.settings.adjustOldDeltas && orgEvent.type === "mousewheel" &&
235 |             absDelta % 120 === 0;
236 |     }
237 | 
238 | } );
239 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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, completeCallback)

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 | 				
  • completeCallback - a function that will be executed after the animation had finished
    • 
129 | 			

130 | 			

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

134 | 			
getContentPositionX()

135 | 			

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

138 | 			
getContentPositionY()

139 | 			

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

142 | 			
getContentWidth()

143 | 			

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

146 | 			
getContentHeight()

147 | 			

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

150 | 			
getIsScrollableH()

151 | 			

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

154 | 			
getPercentScrolledX()

155 | 			

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

158 | 			
getPercentScrolledY()

159 | 			

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

162 | 			
getIsScrollableV()

163 | 			

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

166 | 			
getContentPane()

167 | 			

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

173 | 			
scrollToBottom(animate)

174 | 			

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

178 | 			
179 | 			

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

184 | 			
destroy()

185 | 			

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

189 | 		

190 | 	
191 | 
192 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 


--------------------------------------------------------------------------------
/examples/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 | 		
 82 | 	
 83 | 	
 84 | 		

 85 | 			jScrollPane
 86 | 			
 96 | 		

 97 | 		

 98 | 			
jScrollPane - dynamic height demo

 99 | 			

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

106 | 
107 | 			
Vertical only

108 | 			

109 | 				

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

120 | 				

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

134 | 				

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

146 | 				

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

151 | 			

152 | 			
Both

153 | 			

154 | 				

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

165 | 				

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

179 | 				

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

191 | 				

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

196 | 			

197 | 			
Page javascript

198 | 			

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

200 | 			

201 | 			
Page CSS

202 | 			

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

204 | 			

205 | 		

206 | 	
207 | 


--------------------------------------------------------------------------------
/examples/focus.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		jScrollPane tracking focus 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 how focus is automatically tracked

 55 | 			

 56 | 				This demonstration shows how jScrollPane can track the focus of focusble elements (e.g. form elements
 57 | 				and links) within your scroll pane and automatically scroll so that the focused element is visible.
 58 | 			

 59 | 			

 60 | 				
Vertical only

 61 | 				

 62 | 					

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

 73 | 					

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

 87 | 					

 88 | 						Demo form
 89 | 						
 90 | 						
 91 | 						
 92 | 						
 93 | 						
 94 | 						
 97 | 						
 98 | 					

 99 | 					

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

111 | 					

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

122 | 					

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

127 | 				

128 | 				
Horizontal and vertical

129 | 				

130 | 					

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

141 | 					

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

155 | 					

156 | 						Demo form
157 | 						
158 | 						
159 | 						
160 | 						
161 | 						
162 | 						
165 | 						
166 | 					

167 | 					

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

179 | 					

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

190 | 					

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

195 | 				

196 | 			

197 | 			
Page javascript

198 | 			

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

200 | 			

201 | 			
Page CSS

202 | 			

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

204 | 			

205 | 		

206 | 	
207 | 


--------------------------------------------------------------------------------
/examples/arrows.html:
--------------------------------------------------------------------------------
  1 | 
  3 | 
  4 | 	
  5 | 
  6 | 		Basic arrows jScrollPane demo
  7 | 
  8 | 		
  9 | 		
 10 | 		
 11 | 		
 12 | 
 13 | 		
 27 | 
 28 | 		
 29 | 		
 30 | 		
 31 | 		
 32 | 		
 33 | 		
 34 | 		
 35 | 		
 36 | 
 37 | 		
 43 | 	
 44 | 	
 45 | 		

 46 | 			jScrollPane
 47 | 			
 57 | 		

 58 | 		

 59 | 			
jScrollPane - example with arrow buttons

 60 | 			

 61 | 				This demonstration builds on the basic scrollpane example by adding navigation
 62 | 				"arrows" to the scrollbar. As you can see from the sourcecode below, these are simply added by passing
 63 | 				showArrows:true in the settings object when you
 64 | 				initialise jScrollPane.
 65 | 			

 66 | 
 67 | 			
Vertical only

 68 | 			

 69 | 				

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

 80 | 				

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

 94 | 				

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

106 | 				

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

117 | 				

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

122 | 			

123 | 			
Horizontal only

124 | 			

125 | 				

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

136 | 			

137 | 			
Both

138 | 			

139 | 				

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

150 | 				

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

164 | 				

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

176 | 				

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

187 | 				

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

192 | 			

193 | 			
Page javascript

194 | 			

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

196 | 			

197 | 			
Page CSS

198 | 			

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

200 | 			

201 | 		

202 | 	
203 | 


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