From 5d33775cf220ffded904eab89e386725626fc7cf Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 23 Nov 2011 11:37:05 +0100 Subject: [PATCH 001/119] Trigger hideBar when scrolling is over --- slimScroll.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/slimScroll.js b/slimScroll.js index ba9d64f..1c198c4 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -183,6 +183,9 @@ //ensure bar is visible showBar(); + + // trigger hide when scroll is stopped + hideBar(); } var attachWheel = function() From fa68775f4e6f218246633fb15023fbf685ae0cd7 Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 23 Nov 2011 11:39:58 +0100 Subject: [PATCH 002/119] Added spaces after each inline comment start. --- slimScroll.js | 70 +++++++++++++++++++++++++-------------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 1c198c4..d9554c8 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -11,7 +11,7 @@ slimScroll: function(o) { var ops = o; - //do it for every element that matches selector + // do it for every element that matches selector this.each(function(){ var isOverPanel, isOverBar, isDragg, queueHide, barHeight, @@ -33,10 +33,10 @@ railColor = o.railColor || '#333', railOpacity = o.railOpacity || 0.2; - //used in event handlers and for better minification + // used in event handlers and for better minification var me = $(this); - //wrap content + // wrap content var wrapper = $(divS).css({ position: 'relative', overflow: 'hidden', @@ -44,14 +44,14 @@ height: cheight }).attr({ 'class': 'slimScrollDiv' }); - //update style for the div + // update style for the div me.css({ overflow: 'hidden', width: cwidth, height: cheight }); - //create scrollbar rail + // create scrollbar rail var rail = $(divS).css({ width: size, height: '100%', @@ -64,7 +64,7 @@ zIndex: 90 }); - //create scrollbar + // create scrollbar var bar = $(divS).attr({ 'class': 'slimScrollBar ', style: 'border-radius: ' + size @@ -81,19 +81,19 @@ zIndex: 99 }); - //set position + // set position var posCss = (position == 'right') ? { right: distance } : { left: distance }; rail.css(posCss); bar.css(posCss); - //wrap it + // wrap it me.wrap(wrapper); - //append to parent div + // append to parent div me.parent().append(bar); me.parent().append(rail); - //make it draggable + // make it draggable bar.draggable({ axis: 'y', containment: 'parent', @@ -101,26 +101,26 @@ stop: function() { isDragg = false; hideBar(); }, drag: function(e) { - //scroll content + // scroll content scrollContent(0, $(this).position().top, false); } }); - //on rail over + // on rail over rail.hover(function(){ showBar(); }, function(){ hideBar(); }); - //on bar over + // on bar over bar.hover(function(){ isOverBar = true; }, function(){ isOverBar = false; }); - //show on parent mouseover + // show on parent mouseover me.hover(function(){ isOverPanel = true; showBar(); @@ -132,7 +132,7 @@ var _onWheel = function(e) { - //use mouse wheel only when mouse is over + // use mouse wheel only when mouse is over if (!isOverPanel) { return; } var e = e || window.event; @@ -141,10 +141,10 @@ if (e.wheelDelta) { delta = -e.wheelDelta/120; } if (e.detail) { delta = e.detail / 3; } - //scroll content + // scroll content scrollContent(delta, true); - //stop window scroll + // stop window scroll if (e.preventDefault && !releaseScroll) { e.preventDefault(); } if (!releaseScroll) { e.returnValue = false; } } @@ -155,19 +155,19 @@ if (isWheel) { - //move bar with mouse wheel + // move bar with mouse wheel delta = bar.position().top + y * wheelStep; - //move bar, make sure it doesn't go out + // move bar, make sure it doesn't go out delta = Math.max(delta, 0); var maxTop = me.outerHeight() - bar.outerHeight(); delta = Math.min(delta, maxTop); - //scroll the scrollbar + // scroll the scrollbar bar.css({ top: delta + 'px' }); } - //calculate actual scroll amount + // calculate actual scroll amount var percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight()); delta = percentScroll * (me[0].scrollHeight - me.outerHeight()); @@ -178,10 +178,10 @@ bar.css({ top: offsetTop + 'px' }); } - //scroll content + // scroll content me.scrollTop(delta); - //ensure bar is visible + // ensure bar is visible showBar(); // trigger hide when scroll is stopped @@ -201,28 +201,28 @@ } } - //attach scroll events + // attach scroll events attachWheel(); var getBarHeight = function() { - //calculate scrollbar height and make sure it is not too small + // calculate scrollbar height and make sure it is not too small barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight); bar.css({ height: barHeight + 'px' }); } - //set up initial height + // set up initial height getBarHeight(); var showBar = function() { - //recalculate bar height + // recalculate bar height getBarHeight(); clearTimeout(queueHide); - //show only when required + // show only when required if(barHeight >= me.outerHeight()) { - //allow window scroll + // allow window scroll releaseScroll = true; return; } @@ -232,7 +232,7 @@ var hideBar = function() { - //only hide when options allow it + // only hide when options allow it if (!alwaysVisible) { queueHide = setTimeout(function(){ @@ -245,24 +245,24 @@ } } - //check start position + // check start position if (start == 'bottom') { - //scroll content to bottom + // scroll content to bottom bar.css({ top: 'auto', bottom: 0 }); scrollContent(0, true); } else if (typeof start == 'object') { - //scroll content + // scroll content scrollContent($(start).position().top, null, true); - //make sure bar stays hidden + // make sure bar stays hidden if (!alwaysVisible) { bar.hide(); } } }); - //maintain chainability + // maintain chainability return this; } }); From c43781012c39c1c67bdf3d97bff4fc7d675ad062 Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 23 Nov 2011 11:49:42 +0100 Subject: [PATCH 003/119] Defined slimScroll defaults options as recommended by jQuery plugin authoring notes see: http://docs.jquery.com/Plugins/Authoring#Defaults_and_Options --- slimScroll.js | 537 ++++++++++++++++++++++++++------------------------ 1 file changed, 277 insertions(+), 260 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index d9554c8..2f6df1b 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -7,268 +7,285 @@ */ (function($) { - jQuery.fn.extend({ - slimScroll: function(o) { - - var ops = o; - // do it for every element that matches selector - this.each(function(){ - - var isOverPanel, isOverBar, isDragg, queueHide, barHeight, - divS = '
', - minBarHeight = 30, - releaseScroll = false, - o = ops || {}, - wheelStep = parseInt(o.wheelStep) || 20, - cwidth = o.width || 'auto', - cheight = o.height || '250px', - size = o.size || '7px', - color = o.color || '#000', - position = o.position || 'right', - distance = o.distance || '1px', - start = o.start || 'top', - opacity = o.opacity || .4, - alwaysVisible = o.alwaysVisible === true, - railVisible = o.railVisible || false, - railColor = o.railColor || '#333', - railOpacity = o.railOpacity || 0.2; - - // used in event handlers and for better minification - var me = $(this); - - // wrap content - var wrapper = $(divS).css({ - position: 'relative', - overflow: 'hidden', - width: cwidth, - height: cheight - }).attr({ 'class': 'slimScrollDiv' }); - - // update style for the div - me.css({ - overflow: 'hidden', - width: cwidth, - height: cheight - }); - - // create scrollbar rail - var rail = $(divS).css({ - width: size, - height: '100%', - position: 'absolute', - top: 0, - display: (alwaysVisible && railVisible) ? 'block' : 'none', - 'border-radius': size, - background: railColor, - opacity: railOpacity, - zIndex: 90 - }); - - // create scrollbar - var bar = $(divS).attr({ - 'class': 'slimScrollBar ', - style: 'border-radius: ' + size - }).css({ - background: color, - width: size, - position: 'absolute', - top: 0, - opacity: opacity, - display: alwaysVisible ? 'block' : 'none', - BorderRadius: size, - MozBorderRadius: size, - WebkitBorderRadius: size, - zIndex: 99 - }); - - // set position - var posCss = (position == 'right') ? { right: distance } : { left: distance }; - rail.css(posCss); - bar.css(posCss); - - // wrap it - me.wrap(wrapper); - - // append to parent div - me.parent().append(bar); - me.parent().append(rail); - - // make it draggable - bar.draggable({ - axis: 'y', - containment: 'parent', - start: function() { isDragg = true; }, - stop: function() { isDragg = false; hideBar(); }, - drag: function(e) - { - // scroll content - scrollContent(0, $(this).position().top, false); - } - }); - - // on rail over - rail.hover(function(){ - showBar(); - }, function(){ - hideBar(); - }); - - // on bar over - bar.hover(function(){ - isOverBar = true; - }, function(){ - isOverBar = false; - }); - - // show on parent mouseover - me.hover(function(){ - isOverPanel = true; - showBar(); - hideBar(); - }, function(){ - isOverPanel = false; - hideBar(); - }); - - var _onWheel = function(e) - { - // use mouse wheel only when mouse is over - if (!isOverPanel) { return; } - - var e = e || window.event; - - var delta = 0; - if (e.wheelDelta) { delta = -e.wheelDelta/120; } - if (e.detail) { delta = e.detail / 3; } - - // scroll content - scrollContent(delta, true); - - // stop window scroll - if (e.preventDefault && !releaseScroll) { e.preventDefault(); } - if (!releaseScroll) { e.returnValue = false; } - } - - var scrollContent = function(y, isWheel, isJump) - { - var delta = y; - - if (isWheel) - { - // move bar with mouse wheel - delta = bar.position().top + y * wheelStep; - - // move bar, make sure it doesn't go out - delta = Math.max(delta, 0); - var maxTop = me.outerHeight() - bar.outerHeight(); - delta = Math.min(delta, maxTop); - - // scroll the scrollbar - bar.css({ top: delta + 'px' }); - } - - // calculate actual scroll amount - var percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight()); - delta = percentScroll * (me[0].scrollHeight - me.outerHeight()); - - if (isJump) - { - delta = y; - var offsetTop = delta / me[0].scrollHeight * me.outerHeight(); - bar.css({ top: offsetTop + 'px' }); - } - - // scroll content - me.scrollTop(delta); - - // ensure bar is visible - showBar(); + jQuery.fn.extend({ + slimScroll: function(options) { + + var defaults = { + wheelStep : 20, + width : 'auto', + height : '250px', + size : '7px', + color: '#000', + position : 'right', + distance : '1px', + start : 'top', + opacity : .4, + alwaysVisible : true, + railVisible : false, + railColor : '#333', + railOpacity : '0.2' + }; + + var o = ops = $.extend( defaults , options ); + + // do it for every element that matches selector + this.each(function(){ + + var isOverPanel, isOverBar, isDragg, queueHide, barHeight, + divS = '
', + minBarHeight = 30, + releaseScroll = false, + wheelStep = parseInt(o.wheelStep), + cwidth = o.width, + cheight = o.height, + size = o.size, + color = o.color, + position = o.position, + distance = o.distance, + start = o.start, + opacity = o.opacity, + alwaysVisible = o.alwaysVisible, + railVisible = o.railVisible, + railColor = o.railColor, + railOpacity = o.railOpacity; + + // used in event handlers and for better minification + var me = $(this); + + // wrap content + var wrapper = $(divS).css({ + position: 'relative', + overflow: 'hidden', + width: cwidth, + height: cheight + }).attr({ 'class': 'slimScrollDiv' }); + + // update style for the div + me.css({ + overflow: 'hidden', + width: cwidth, + height: cheight + }); + + // create scrollbar rail + var rail = $(divS).css({ + width: size, + height: '100%', + position: 'absolute', + top: 0, + display: (alwaysVisible && railVisible) ? 'block' : 'none', + 'border-radius': size, + background: railColor, + opacity: railOpacity, + zIndex: 90 + }); + + // create scrollbar + var bar = $(divS).attr({ + 'class': 'slimScrollBar ', + style: 'border-radius: ' + size + }).css({ + background: color, + width: size, + position: 'absolute', + top: 0, + opacity: opacity, + display: alwaysVisible ? 'block' : 'none', + BorderRadius: size, + MozBorderRadius: size, + WebkitBorderRadius: size, + zIndex: 99 + }); + + // set position + var posCss = (position == 'right') ? { right: distance } : { left: distance }; + rail.css(posCss); + bar.css(posCss); + + // wrap it + me.wrap(wrapper); + + // append to parent div + me.parent().append(bar); + me.parent().append(rail); + + // make it draggable + bar.draggable({ + axis: 'y', + containment: 'parent', + start: function() { isDragg = true; }, + stop: function() { isDragg = false; hideBar(); }, + drag: function(e) + { + // scroll content + scrollContent(0, $(this).position().top, false); + } + }); + + // on rail over + rail.hover(function(){ + showBar(); + }, function(){ + hideBar(); + }); + + // on bar over + bar.hover(function(){ + isOverBar = true; + }, function(){ + isOverBar = false; + }); + + // show on parent mouseover + me.hover(function(){ + isOverPanel = true; + showBar(); + hideBar(); + }, function(){ + isOverPanel = false; + hideBar(); + }); + + var _onWheel = function(e) + { + // use mouse wheel only when mouse is over + if (!isOverPanel) { return; } + + var e = e || window.event; + + var delta = 0; + if (e.wheelDelta) { delta = -e.wheelDelta/120; } + if (e.detail) { delta = e.detail / 3; } + + // scroll content + scrollContent(delta, true); + + // stop window scroll + if (e.preventDefault && !releaseScroll) { e.preventDefault(); } + if (!releaseScroll) { e.returnValue = false; } + } + + var scrollContent = function(y, isWheel, isJump) + { + var delta = y; + + if (isWheel) + { + // move bar with mouse wheel + delta = bar.position().top + y * wheelStep; + + // move bar, make sure it doesn't go out + delta = Math.max(delta, 0); + var maxTop = me.outerHeight() - bar.outerHeight(); + delta = Math.min(delta, maxTop); + + // scroll the scrollbar + bar.css({ top: delta + 'px' }); + } + + // calculate actual scroll amount + var percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight()); + delta = percentScroll * (me[0].scrollHeight - me.outerHeight()); + + if (isJump) + { + delta = y; + var offsetTop = delta / me[0].scrollHeight * me.outerHeight(); + bar.css({ top: offsetTop + 'px' }); + } + + // scroll content + me.scrollTop(delta); + + // ensure bar is visible + showBar(); // trigger hide when scroll is stopped hideBar(); - } - - var attachWheel = function() - { - if (window.addEventListener) - { - this.addEventListener('DOMMouseScroll', _onWheel, false ); - this.addEventListener('mousewheel', _onWheel, false ); - } - else - { - document.attachEvent("onmousewheel", _onWheel) - } - } - - // attach scroll events - attachWheel(); - - var getBarHeight = function() - { - // calculate scrollbar height and make sure it is not too small - barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight); - bar.css({ height: barHeight + 'px' }); - } - - // set up initial height - getBarHeight(); - - var showBar = function() - { - // recalculate bar height - getBarHeight(); - clearTimeout(queueHide); - - // show only when required - if(barHeight >= me.outerHeight()) { - // allow window scroll - releaseScroll = true; - return; - } - bar.fadeIn('fast'); - if (railVisible) { rail.fadeIn('fast'); } - } - - var hideBar = function() - { - // only hide when options allow it - if (!alwaysVisible) - { - queueHide = setTimeout(function(){ - if (!isOverBar && !isDragg) - { - bar.fadeOut('slow'); - rail.fadeOut('slow'); - } - }, 1000); - } - } - - // check start position - if (start == 'bottom') - { - // scroll content to bottom - bar.css({ top: 'auto', bottom: 0 }); - scrollContent(0, true); - } - else if (typeof start == 'object') - { - // scroll content - scrollContent($(start).position().top, null, true); - - // make sure bar stays hidden - if (!alwaysVisible) { bar.hide(); } - } - }); - - // maintain chainability - return this; - } - }); - - jQuery.fn.extend({ - slimscroll: jQuery.fn.slimScroll - }); + + } + + var attachWheel = function() + { + if (window.addEventListener) + { + this.addEventListener('DOMMouseScroll', _onWheel, false ); + this.addEventListener('mousewheel', _onWheel, false ); + } + else + { + document.attachEvent("onmousewheel", _onWheel) + } + } + + // attach scroll events + attachWheel(); + + var getBarHeight = function() + { + // calculate scrollbar height and make sure it is not too small + barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight); + bar.css({ height: barHeight + 'px' }); + } + + // set up initial height + getBarHeight(); + + var showBar = function() + { + // recalculate bar height + getBarHeight(); + clearTimeout(queueHide); + + // show only when required + if(barHeight >= me.outerHeight()) { + //allow window scroll + releaseScroll = true; + return; + } + bar.fadeIn('fast'); + if (railVisible) { rail.fadeIn('fast'); } + } + + var hideBar = function() + { + // only hide when options allow it + if (!alwaysVisible) + { + queueHide = setTimeout(function(){ + if (!isOverBar && !isDragg) + { + bar.fadeOut('slow'); + rail.fadeOut('slow'); + } + }, 1000); + } + } + + // check start position + if (start == 'bottom') + { + // scroll content to bottom + bar.css({ top: 'auto', bottom: 0 }); + scrollContent(0, true); + } + else if (typeof start == 'object') + { + // scroll content + scrollContent($(start).position().top, null, true); + + // make sure bar stays hidden + if (!alwaysVisible) { bar.hide(); } + } + }); + + // maintain chainability + return this; + } + }); + + jQuery.fn.extend({ + slimscroll: jQuery.fn.slimScroll + }); })(jQuery); \ No newline at end of file From 93cd52549ea37a67ce2acadde0b893c17ab8fb5b Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 23 Nov 2011 12:00:20 +0100 Subject: [PATCH 004/119] Added CSS class for the wrapper. Moved each class name to settings. --- slimScroll.js | 53 +++++++++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 2f6df1b..06ef6c1 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -23,7 +23,10 @@ alwaysVisible : true, railVisible : false, railColor : '#333', - railOpacity : '0.2' + railOpacity : '0.2', + railClass : 'slimScrollRail', + barClass : 'slimScrollBar', + wrapperClass : 'slimScrollDiv' }; var o = ops = $.extend( defaults , options ); @@ -53,12 +56,14 @@ var me = $(this); // wrap content - var wrapper = $(divS).css({ - position: 'relative', - overflow: 'hidden', - width: cwidth, - height: cheight - }).attr({ 'class': 'slimScrollDiv' }); + var wrapper = $(divS) + .addClass( o.wrapperClass ) + .css({ + position: 'relative', + overflow: 'hidden', + width: cwidth, + height: cheight + }); // update style for the div me.css({ @@ -68,34 +73,36 @@ }); // create scrollbar rail - var rail = $(divS).css({ - width: size, - height: '100%', - position: 'absolute', - top: 0, - display: (alwaysVisible && railVisible) ? 'block' : 'none', - 'border-radius': size, - background: railColor, - opacity: railOpacity, - zIndex: 90 - }); + var rail = $(divS) + .addClass( o.railClass ) + .css({ + width: size, + height: '100%', + position: 'absolute', + top: 0, + display: (alwaysVisible && railVisible) ? 'block' : 'none', + 'border-radius': size, + background: railColor, + opacity: railOpacity, + zIndex: 90 + }); // create scrollbar - var bar = $(divS).attr({ - 'class': 'slimScrollBar ', - style: 'border-radius: ' + size - }).css({ + var bar = $(divS) + .addClass( o.barClass ) + .css({ background: color, width: size, position: 'absolute', top: 0, opacity: opacity, display: alwaysVisible ? 'block' : 'none', + 'border-radius' : size, BorderRadius: size, MozBorderRadius: size, WebkitBorderRadius: size, zIndex: 99 - }); + }); // set position var posCss = (position == 'right') ? { right: distance } : { left: distance }; From 7543cdf2829d5fbe378b1f02d337162a524f6701 Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 23 Nov 2011 12:24:37 +0100 Subject: [PATCH 005/119] Added a README --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..58a01c9 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# What is slimScroll? + +slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value. + +Demo and more: [http://rocha.la/jQuery-slimScroll](http://rocha.la/jQuery-slimScroll) + +Copyright (c) 2011 Piotr Rochala (http://rocha.la) +Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (ttp://www.opensource.org/licenses/gpl-license.php) licenses. + From ba8b5308049fa5f6504500799919f492dc333dee Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 23 Nov 2011 12:25:47 +0100 Subject: [PATCH 006/119] Typo in README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 58a01c9..44d1b8f 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,8 @@ slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value. -Demo and more: [http://rocha.la/jQuery-slimScroll](http://rocha.la/jQuery-slimScroll) +Demo and more: http://rocha.la/jQuery-slimScroll Copyright (c) 2011 Piotr Rochala (http://rocha.la) -Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (ttp://www.opensource.org/licenses/gpl-license.php) licenses. +Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. From 46d7f3572c58831e7db649751b900f34391ab2c2 Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 23 Nov 2011 12:28:50 +0100 Subject: [PATCH 007/119] Re-uglified (minified) slimScroll --- slimScroll.min.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/slimScroll.min.js b/slimScroll.min.js index 319efee..23d2c1f 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -3,6 +3,5 @@ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Version: 0.3.0 - * - */ -(function(a){jQuery.fn.extend({slimScroll:function(c){var b=c;this.each(function(){var F,z,m,s,A,n="
",C=30,y=false,t=b||{},u=parseInt(t.wheelStep)||20,B=t.width||"auto",w=t.height||"250px",r=t.size||"7px",x=t.color||"#000",K=t.position||"right",h=t.distance||"1px",k=t.start||"top",g=t.opacity||0.4,q=t.alwaysVisible===true,j=t.railVisible||false,i=t.railColor||"#333",v=t.railOpacity||0.2;var I=a(this);var l=a(n).css({position:"relative",overflow:"hidden",width:B,height:w}).attr({"class":"slimScrollDiv"});I.css({overflow:"hidden",width:B,height:w});var d=a(n).css({width:r,height:"100%",position:"absolute",top:0,display:(q&&j)?"block":"none","border-radius":r,background:i,opacity:v,zIndex:90});var D=a(n).attr({"class":"slimScrollBar ",style:"border-radius: "+r}).css({background:x,width:r,position:"absolute",top:0,opacity:g,display:q?"block":"none",BorderRadius:r,MozBorderRadius:r,WebkitBorderRadius:r,zIndex:99});var e=(K=="right")?{right:h}:{left:h};d.css(e);D.css(e);I.wrap(l);I.parent().append(D);I.parent().append(d);D.draggable({axis:"y",containment:"parent",start:function(){m=true},stop:function(){m=false;p()},drag:function(o){E(0,a(this).position().top,false)}});d.hover(function(){f()},function(){p()});D.hover(function(){z=true},function(){z=false});I.hover(function(){F=true;f();p()},function(){F=false;p()});var H=function(o){if(!F){return}var o=o||window.event;var L=0;if(o.wheelDelta){L=-o.wheelDelta/120}if(o.detail){L=o.detail/3}E(L,true);if(o.preventDefault&&!y){o.preventDefault()}if(!y){o.returnValue=false}};var E=function(Q,M,o){var P=Q;if(M){P=D.position().top+Q*u;P=Math.max(P,0);var O=I.outerHeight()-D.outerHeight();P=Math.min(P,O);D.css({top:P+"px"})}var N=parseInt(D.position().top)/(I.outerHeight()-D.outerHeight());P=N*(I[0].scrollHeight-I.outerHeight());if(o){P=Q;var L=P/I[0].scrollHeight*I.outerHeight();D.css({top:L+"px"})}I.scrollTop(P);f()};var G=function(){if(window.addEventListener){this.addEventListener("DOMMouseScroll",H,false);this.addEventListener("mousewheel",H,false)}else{document.attachEvent("onmousewheel",H)}};G();var J=function(){A=Math.max((I.outerHeight()/I[0].scrollHeight)*I.outerHeight(),C);D.css({height:A+"px"})};J();var f=function(){J();clearTimeout(s);if(A>=I.outerHeight()){y=true;return}D.fadeIn("fast");if(j){d.fadeIn("fast")}};var p=function(){if(!q){s=setTimeout(function(){if(!z&&!m){D.fadeOut("slow");d.fadeOut("slow")}},1000)}};if(k=="bottom"){D.css({top:"auto",bottom:0});E(0,true)}else{if(typeof k=="object"){E(a(k).position().top,null,true);if(!q){D.hide()}}}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + * + */(function(a){jQuery.fn.extend({slimScroll:function(b){var c={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!0,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},d=ops=a.extend(c,b);this.each(function(){var b,c,e,f,g,h="
",i=30,j=!1,k=parseInt(d.wheelStep),l=d.width,m=d.height,n=d.size,p=d.color,q=d.position,r=d.distance,s=d.start,t=d.opacity,u=d.alwaysVisible,v=d.railVisible,w=d.railColor,x=d.railOpacity,y=a(this),z=a(h).addClass(d.wrapperClass).css({position:"relative",overflow:"hidden",width:l,height:m});y.css({overflow:"hidden",width:l,height:m});var A=a(h).addClass(d.railClass).css({width:n,height:"100%",position:"absolute",top:0,display:u&&v?"block":"none","border-radius":n,background:w,opacity:x,zIndex:90}),B=a(h).addClass(d.barClass).css({background:p,width:n,position:"absolute",top:0,opacity:t,display:u?"block":"none","border-radius":n,BorderRadius:n,MozBorderRadius:n,WebkitBorderRadius:n,zIndex:99}),C=q=="right"?{right:r}:{left:r};A.css(C),B.css(C),y.wrap(z),y.parent().append(B),y.parent().append(A),B.draggable({axis:"y",containment:"parent",start:function(){e=!0},stop:function(){e=!1,I()},drag:function(b){E(0,a(this).position().top,!1)}}),A.hover(function(){H()},function(){I()}),B.hover(function(){c=!0},function(){c=!1}),y.hover(function(){b=!0,H(),I()},function(){b=!1,I()});var D=function(a){if(!!b){var a=a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120),a.detail&&(c=a.detail/3),E(c,!0),a.preventDefault&&!j&&a.preventDefault(),j||(a.returnValue=!1)}},E=function(a,b,c){var d=a;if(b){d=B.position().top+a*k,d=Math.max(d,0);var e=y.outerHeight()-B.outerHeight();d=Math.min(d,e),B.css({top:d+"px"})}var f=parseInt(B.position().top)/(y.outerHeight()-B.outerHeight());d=f*(y[0].scrollHeight-y.outerHeight());if(c){d=a;var g=d/y[0].scrollHeight*y.outerHeight();B.css({top:g+"px"})}y.scrollTop(d),H(),I()},F=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",D,!1),this.addEventListener("mousewheel",D,!1)):document.attachEvent("onmousewheel",D)};F();var G=function(){g=Math.max(y.outerHeight()/y[0].scrollHeight*y.outerHeight(),i),B.css({height:g+"px"})};G();var H=function(){G(),clearTimeout(f);g>=y.outerHeight()?j=!0:(B.fadeIn("fast"),v&&A.fadeIn("fast"))},I=function(){u||(f=setTimeout(function(){!c&&!e&&(B.fadeOut("slow"),A.fadeOut("slow"))},1e3))};s=="bottom"?(B.css({top:"auto",bottom:0}),E(0,!0)):typeof s=="object"&&(E(a(s).position().top,null,!0),u||B.hide())});return this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 2537c81c1cafbd4ca2fbf2e95a7682609f49de0c Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Wed, 23 Nov 2011 22:40:16 +0000 Subject: [PATCH 008/119] Fixed alwaysVisible Flag. Increased version number. Changed formatting of minified version. --- slimScroll.js | 4 ++-- slimScroll.min.js | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 06ef6c1..02d2de2 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -2,7 +2,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.3.0 + * Version: 0.4.0 * */ (function($) { @@ -20,7 +20,7 @@ distance : '1px', start : 'top', opacity : .4, - alwaysVisible : true, + alwaysVisible : false, railVisible : false, railColor : '#333', railOpacity : '0.2', diff --git a/slimScroll.min.js b/slimScroll.min.js index 23d2c1f..f4d0dde 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -2,6 +2,11 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.3.0 + * Version: 0.4.0 * - */(function(a){jQuery.fn.extend({slimScroll:function(b){var c={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!0,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},d=ops=a.extend(c,b);this.each(function(){var b,c,e,f,g,h="
",i=30,j=!1,k=parseInt(d.wheelStep),l=d.width,m=d.height,n=d.size,p=d.color,q=d.position,r=d.distance,s=d.start,t=d.opacity,u=d.alwaysVisible,v=d.railVisible,w=d.railColor,x=d.railOpacity,y=a(this),z=a(h).addClass(d.wrapperClass).css({position:"relative",overflow:"hidden",width:l,height:m});y.css({overflow:"hidden",width:l,height:m});var A=a(h).addClass(d.railClass).css({width:n,height:"100%",position:"absolute",top:0,display:u&&v?"block":"none","border-radius":n,background:w,opacity:x,zIndex:90}),B=a(h).addClass(d.barClass).css({background:p,width:n,position:"absolute",top:0,opacity:t,display:u?"block":"none","border-radius":n,BorderRadius:n,MozBorderRadius:n,WebkitBorderRadius:n,zIndex:99}),C=q=="right"?{right:r}:{left:r};A.css(C),B.css(C),y.wrap(z),y.parent().append(B),y.parent().append(A),B.draggable({axis:"y",containment:"parent",start:function(){e=!0},stop:function(){e=!1,I()},drag:function(b){E(0,a(this).position().top,!1)}}),A.hover(function(){H()},function(){I()}),B.hover(function(){c=!0},function(){c=!1}),y.hover(function(){b=!0,H(),I()},function(){b=!1,I()});var D=function(a){if(!!b){var a=a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120),a.detail&&(c=a.detail/3),E(c,!0),a.preventDefault&&!j&&a.preventDefault(),j||(a.returnValue=!1)}},E=function(a,b,c){var d=a;if(b){d=B.position().top+a*k,d=Math.max(d,0);var e=y.outerHeight()-B.outerHeight();d=Math.min(d,e),B.css({top:d+"px"})}var f=parseInt(B.position().top)/(y.outerHeight()-B.outerHeight());d=f*(y[0].scrollHeight-y.outerHeight());if(c){d=a;var g=d/y[0].scrollHeight*y.outerHeight();B.css({top:g+"px"})}y.scrollTop(d),H(),I()},F=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",D,!1),this.addEventListener("mousewheel",D,!1)):document.attachEvent("onmousewheel",D)};F();var G=function(){g=Math.max(y.outerHeight()/y[0].scrollHeight*y.outerHeight(),i),B.css({height:g+"px"})};G();var H=function(){G(),clearTimeout(f);g>=y.outerHeight()?j=!0:(B.fadeIn("fast"),v&&A.fadeIn("fast"))},I=function(){u||(f=setTimeout(function(){!c&&!e&&(B.fadeOut("slow"),A.fadeOut("slow"))},1e3))};s=="bottom"?(B.css({top:"auto",bottom:0}),E(0,!0)):typeof s=="object"&&(E(a(s).position().top,null,!0),u||B.hide())});return this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(d){jQuery.fn.extend({slimScroll:function(l){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},l);this.each(function(){var m,n,o,u,p,q=!1,l=parseInt(a.wheelStep),g=a.width,v=a.height,f=a.size,z=a.color,A=a.position,w=a.distance,r=a.start,B=a.opacity,j= +a.alwaysVisible,x=a.railVisible,C=a.railColor,D=a.railOpacity,b=d(this),E=d("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:v});b.css({overflow:"hidden",width:g,height:v});var h=d("
").addClass(a.railClass).css({width:f,height:"100%",position:"absolute",top:0,display:j&&x?"block":"none","border-radius":f,background:C,opacity:D,zIndex:90}),c=d("
").addClass(a.barClass).css({background:z,width:f,position:"absolute",top:0,opacity:B, +display:j?"block":"none","border-radius":f,BorderRadius:f,MozBorderRadius:f,WebkitBorderRadius:f,zIndex:99}),g="right"==A?{right:w}:{left:w};h.css(g);c.css(g);b.wrap(E);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){o=!0},stop:function(){o=!1;i()},drag:function(){k(0,d(this).position().top,!1)}});h.hover(function(){s()},function(){i()});c.hover(function(){n=!0},function(){n=!1});b.hover(function(){m=!0;s();i()},function(){m=!1;i()});var t=function(a){if(m){var a= +a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);k(b,!0);a.preventDefault&&!q&&a.preventDefault();if(!q)a.returnValue=!1}},k=function(a,d,f){var e=a;d&&(e=c.position().top+a*l,e=Math.max(e,0),d=b.outerHeight()-c.outerHeight(),e=Math.min(e,d),c.css({top:e+"px"}));e=parseInt(c.position().top)/(b.outerHeight()-c.outerHeight())*(b[0].scrollHeight-b.outerHeight());f&&(e=a,a=e/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(e);s();i()};(function(){window.addEventListener? +(this.addEventListener("DOMMouseScroll",t,!1),this.addEventListener("mousewheel",t,!1)):document.attachEvent("onmousewheel",t)})();var y=function(){p=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:p+"px"})};y();var s=function(){y();clearTimeout(u);p>=b.outerHeight()?q=!0:(c.fadeIn("fast"),x&&h.fadeIn("fast"))},i=function(){j||(u=setTimeout(function(){!n&&!o&&(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))};"bottom"==r?(c.css({top:"auto",bottom:0}),k(0,!0)):"object"==typeof r&& +(k(d(r).position().top,null,!0),j||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 09400fc8a0c70e80555374f291088a48238d0440 Mon Sep 17 00:00:00 2001 From: Robin Komiwes Date: Wed, 30 Nov 2011 14:57:03 +0100 Subject: [PATCH 009/119] bar.css('top') should be used instead of bar.position().top --- slimScroll.js | 6 +++--- slimScroll.min.js | 9 ++------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 02d2de2..a028466 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -2,7 +2,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.0 + * Version: 0.4.1 * */ (function($) { @@ -179,7 +179,7 @@ if (isWheel) { // move bar with mouse wheel - delta = bar.position().top + y * wheelStep; + delta = parseInt( bar.css('top') ) + y * wheelStep; // move bar, make sure it doesn't go out delta = Math.max(delta, 0); @@ -191,7 +191,7 @@ } // calculate actual scroll amount - var percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight()); + var percentScroll = parseInt( bar.css('top') ) / (me.outerHeight() - bar.outerHeight()); delta = percentScroll * (me[0].scrollHeight - me.outerHeight()); if (isJump) diff --git a/slimScroll.min.js b/slimScroll.min.js index f4d0dde..4a86387 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -2,11 +2,6 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.0 + * Version: 0.4.1 * - */(function(d){jQuery.fn.extend({slimScroll:function(l){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},l);this.each(function(){var m,n,o,u,p,q=!1,l=parseInt(a.wheelStep),g=a.width,v=a.height,f=a.size,z=a.color,A=a.position,w=a.distance,r=a.start,B=a.opacity,j= -a.alwaysVisible,x=a.railVisible,C=a.railColor,D=a.railOpacity,b=d(this),E=d("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:v});b.css({overflow:"hidden",width:g,height:v});var h=d("
").addClass(a.railClass).css({width:f,height:"100%",position:"absolute",top:0,display:j&&x?"block":"none","border-radius":f,background:C,opacity:D,zIndex:90}),c=d("
").addClass(a.barClass).css({background:z,width:f,position:"absolute",top:0,opacity:B, -display:j?"block":"none","border-radius":f,BorderRadius:f,MozBorderRadius:f,WebkitBorderRadius:f,zIndex:99}),g="right"==A?{right:w}:{left:w};h.css(g);c.css(g);b.wrap(E);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){o=!0},stop:function(){o=!1;i()},drag:function(){k(0,d(this).position().top,!1)}});h.hover(function(){s()},function(){i()});c.hover(function(){n=!0},function(){n=!1});b.hover(function(){m=!0;s();i()},function(){m=!1;i()});var t=function(a){if(m){var a= -a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);k(b,!0);a.preventDefault&&!q&&a.preventDefault();if(!q)a.returnValue=!1}},k=function(a,d,f){var e=a;d&&(e=c.position().top+a*l,e=Math.max(e,0),d=b.outerHeight()-c.outerHeight(),e=Math.min(e,d),c.css({top:e+"px"}));e=parseInt(c.position().top)/(b.outerHeight()-c.outerHeight())*(b[0].scrollHeight-b.outerHeight());f&&(e=a,a=e/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(e);s();i()};(function(){window.addEventListener? -(this.addEventListener("DOMMouseScroll",t,!1),this.addEventListener("mousewheel",t,!1)):document.attachEvent("onmousewheel",t)})();var y=function(){p=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:p+"px"})};y();var s=function(){y();clearTimeout(u);p>=b.outerHeight()?q=!0:(c.fadeIn("fast"),x&&h.fadeIn("fast"))},i=function(){j||(u=setTimeout(function(){!n&&!o&&(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))};"bottom"==r?(c.css({top:"auto",bottom:0}),k(0,!0)):"object"==typeof r&& -(k(d(r).position().top,null,!0),j||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(a){jQuery.fn.extend({slimScroll:function(b){var c={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},d=ops=a.extend(c,b);this.each(function(){var b,c,e,f,g,h="
",i=30,j=!1,k=parseInt(d.wheelStep),l=d.width,m=d.height,n=d.size,p=d.color,q=d.position,r=d.distance,s=d.start,t=d.opacity,u=d.alwaysVisible,v=d.railVisible,w=d.railColor,x=d.railOpacity,y=a(this),z=a(h).addClass(d.wrapperClass).css({position:"relative",overflow:"hidden",width:l,height:m});y.css({overflow:"hidden",width:l,height:m});var A=a(h).addClass(d.railClass).css({width:n,height:"100%",position:"absolute",top:0,display:u&&v?"block":"none","border-radius":n,background:w,opacity:x,zIndex:90}),B=a(h).addClass(d.barClass).css({background:p,width:n,position:"absolute",top:0,opacity:t,display:u?"block":"none","border-radius":n,BorderRadius:n,MozBorderRadius:n,WebkitBorderRadius:n,zIndex:99}),C=q=="right"?{right:r}:{left:r};A.css(C),B.css(C),y.wrap(z),y.parent().append(B),y.parent().append(A),B.draggable({axis:"y",containment:"parent",start:function(){e=!0},stop:function(){e=!1,I()},drag:function(b){E(0,a(this).position().top,!1)}}),A.hover(function(){H()},function(){I()}),B.hover(function(){c=!0},function(){c=!1}),y.hover(function(){b=!0,H(),I()},function(){b=!1,I()});var D=function(a){if(!!b){var a=a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120),a.detail&&(c=a.detail/3),E(c,!0),a.preventDefault&&!j&&a.preventDefault(),j||(a.returnValue=!1)}},E=function(a,b,c){var d=a;if(b){d=parseInt(B.css("top"))+a*k,d=Math.max(d,0);var e=y.outerHeight()-B.outerHeight();d=Math.min(d,e),B.css({top:d+"px"})}var f=parseInt(B.css("top"))/(y.outerHeight()-B.outerHeight());d=f*(y[0].scrollHeight-y.outerHeight());if(c){d=a;var g=d/y[0].scrollHeight*y.outerHeight();B.css({top:g+"px"})}y.scrollTop(d),H(),I()},F=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",D,!1),this.addEventListener("mousewheel",D,!1)):document.attachEvent("onmousewheel",D)};F();var G=function(){g=Math.max(y.outerHeight()/y[0].scrollHeight*y.outerHeight(),i),B.css({height:g+"px"})};G();var H=function(){G(),clearTimeout(f);g>=y.outerHeight()?j=!0:(B.fadeIn("fast"),v&&A.fadeIn("fast"))},I=function(){u||(f=setTimeout(function(){!c&&!e&&(B.fadeOut("slow"),A.fadeOut("slow"))},1e3))};s=="bottom"?(B.css({top:"auto",bottom:0}),E(0,!0)):typeof s=="object"&&(E(a(s).position().top,null,!0),u||B.hide())});return this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery) \ No newline at end of file From 1459a32001490885b126c5dc52dc8c9d7813fa67 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Tue, 6 Dec 2011 22:35:15 +0000 Subject: [PATCH 010/119] Fixed bug with start:'bottom' on webkit/ie. --- slimScroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/slimScroll.js b/slimScroll.js index a028466..f1edce8 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -273,7 +273,7 @@ if (start == 'bottom') { // scroll content to bottom - bar.css({ top: 'auto', bottom: 0 }); + bar.css({ top: me.outerHeight() - bar.outerHeight() }); scrollContent(0, true); } else if (typeof start == 'object') From 0e12a320ddc695306a99138e30f16d4833de5c62 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Tue, 6 Dec 2011 22:36:39 +0000 Subject: [PATCH 011/119] Modified wheelStep to take under consideration the length of the content so now passed value is a % of total length. --- slimScroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/slimScroll.js b/slimScroll.js index f1edce8..31d5b76 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -179,7 +179,7 @@ if (isWheel) { // move bar with mouse wheel - delta = parseInt( bar.css('top') ) + y * wheelStep; + delta = parseInt(bar.css('top')) + y * wheelStep / 100 * bar.outerHeight(); // move bar, make sure it doesn't go out delta = Math.max(delta, 0); From bc85f2291135d770e1c7b012e6db718cdea42336 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Tue, 6 Dec 2011 23:09:39 +0000 Subject: [PATCH 012/119] Modified the code so mouse wheel is released when the scrollbar reaches top or bottom of the scrollable area to simulate the behaviour of natural HTML elements such as textarea or div with overflow:auto; Updated version number. --- slimScroll.js | 15 ++++++++------- slimScroll.min.js | 10 ++++++++-- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 31d5b76..64871c8 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -2,7 +2,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.1 + * Version: 0.4.3 * */ (function($) { @@ -34,7 +34,7 @@ // do it for every element that matches selector this.each(function(){ - var isOverPanel, isOverBar, isDragg, queueHide, barHeight, + var isOverPanel, isOverBar, isDragg, queueHide, barHeight, percentScroll, divS = '
', minBarHeight = 30, releaseScroll = false, @@ -182,16 +182,15 @@ delta = parseInt(bar.css('top')) + y * wheelStep / 100 * bar.outerHeight(); // move bar, make sure it doesn't go out - delta = Math.max(delta, 0); var maxTop = me.outerHeight() - bar.outerHeight(); - delta = Math.min(delta, maxTop); + delta = Math.min(Math.max(delta, 0), maxTop); // scroll the scrollbar bar.css({ top: delta + 'px' }); } // calculate actual scroll amount - var percentScroll = parseInt( bar.css('top') ) / (me.outerHeight() - bar.outerHeight()); + percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight()); delta = percentScroll * (me[0].scrollHeight - me.outerHeight()); if (isJump) @@ -209,7 +208,6 @@ // trigger hide when scroll is stopped hideBar(); - } var attachWheel = function() @@ -243,7 +241,10 @@ // recalculate bar height getBarHeight(); clearTimeout(queueHide); - + + // release wheel when bar reached top or bottom + releaseScroll = percentScroll == ~~ percentScroll; + // show only when required if(barHeight >= me.outerHeight()) { //allow window scroll diff --git a/slimScroll.min.js b/slimScroll.min.js index 4a86387..3de19e7 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -2,6 +2,12 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.1 + * Version: 0.4.3 * - */(function(a){jQuery.fn.extend({slimScroll:function(b){var c={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},d=ops=a.extend(c,b);this.each(function(){var b,c,e,f,g,h="
",i=30,j=!1,k=parseInt(d.wheelStep),l=d.width,m=d.height,n=d.size,p=d.color,q=d.position,r=d.distance,s=d.start,t=d.opacity,u=d.alwaysVisible,v=d.railVisible,w=d.railColor,x=d.railOpacity,y=a(this),z=a(h).addClass(d.wrapperClass).css({position:"relative",overflow:"hidden",width:l,height:m});y.css({overflow:"hidden",width:l,height:m});var A=a(h).addClass(d.railClass).css({width:n,height:"100%",position:"absolute",top:0,display:u&&v?"block":"none","border-radius":n,background:w,opacity:x,zIndex:90}),B=a(h).addClass(d.barClass).css({background:p,width:n,position:"absolute",top:0,opacity:t,display:u?"block":"none","border-radius":n,BorderRadius:n,MozBorderRadius:n,WebkitBorderRadius:n,zIndex:99}),C=q=="right"?{right:r}:{left:r};A.css(C),B.css(C),y.wrap(z),y.parent().append(B),y.parent().append(A),B.draggable({axis:"y",containment:"parent",start:function(){e=!0},stop:function(){e=!1,I()},drag:function(b){E(0,a(this).position().top,!1)}}),A.hover(function(){H()},function(){I()}),B.hover(function(){c=!0},function(){c=!1}),y.hover(function(){b=!0,H(),I()},function(){b=!1,I()});var D=function(a){if(!!b){var a=a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120),a.detail&&(c=a.detail/3),E(c,!0),a.preventDefault&&!j&&a.preventDefault(),j||(a.returnValue=!1)}},E=function(a,b,c){var d=a;if(b){d=parseInt(B.css("top"))+a*k,d=Math.max(d,0);var e=y.outerHeight()-B.outerHeight();d=Math.min(d,e),B.css({top:d+"px"})}var f=parseInt(B.css("top"))/(y.outerHeight()-B.outerHeight());d=f*(y[0].scrollHeight-y.outerHeight());if(c){d=a;var g=d/y[0].scrollHeight*y.outerHeight();B.css({top:g+"px"})}y.scrollTop(d),H(),I()},F=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",D,!1),this.addEventListener("mousewheel",D,!1)):document.attachEvent("onmousewheel",D)};F();var G=function(){g=Math.max(y.outerHeight()/y[0].scrollHeight*y.outerHeight(),i),B.css({height:g+"px"})};G();var H=function(){G(),clearTimeout(f);g>=y.outerHeight()?j=!0:(B.fadeIn("fast"),v&&A.fadeIn("fast"))},I=function(){u||(f=setTimeout(function(){!c&&!e&&(B.fadeOut("slow"),A.fadeOut("slow"))},1e3))};s=="bottom"?(B.css({top:"auto",bottom:0}),E(0,!0)):typeof s=="object"&&(E(a(s).position().top,null,!0),u||B.hide())});return this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery) \ No newline at end of file + */ +(function(d){jQuery.fn.extend({slimScroll:function(n){var b=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},n);this.each(function(){var o,p,q,v,r,j,k=!1,n=parseInt(b.wheelStep),g=b.width,w=b.height,e=b.size,A=b.color,B=b.position,x=b.distance,s=b.start,C=b.opacity, +l=b.alwaysVisible,y=b.railVisible,D=b.railColor,E=b.railOpacity,a=d(this),F=d("
").addClass(b.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:w});a.css({overflow:"hidden",width:g,height:w});var h=d("
").addClass(b.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:l&&y?"block":"none","border-radius":e,background:D,opacity:E,zIndex:90}),c=d("
").addClass(b.barClass).css({background:A,width:e,position:"absolute",top:0,opacity:C, +display:l?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),g="right"==B?{right:x}:{left:x};h.css(g);c.css(g);a.wrap(F);a.parent().append(c);a.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){q=!0},stop:function(){q=!1;i()},drag:function(){m(0,d(this).position().top,!1)}});h.hover(function(){t()},function(){i()});c.hover(function(){p=!0},function(){p=!1});a.hover(function(){o=!0;t();i()},function(){o=!1;i()});var u=function(a){if(o){var a= +a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120);a.detail&&(c=a.detail/3);m(c,!0);a.preventDefault&&!k&&a.preventDefault();if(!k)a.returnValue=!1}},m=function(b,d,e){var f=b;d&&(f=parseInt(c.css("top"))+b*n/100*c.outerHeight(),d=a.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(a.outerHeight()-c.outerHeight());f=j*(a[0].scrollHeight-a.outerHeight());e&&(f=b,b=f/a[0].scrollHeight*a.outerHeight(),c.css({top:b+"px"}));a.scrollTop(f);t(); +i()};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();var z=function(){r=Math.max(a.outerHeight()/a[0].scrollHeight*a.outerHeight(),30);c.css({height:r+"px"})};z();var t=function(){z();clearTimeout(v);k=j==~~j;r>=a.outerHeight()?k=!0:(c.fadeIn("fast"),y&&h.fadeIn("fast"))},i=function(){l||(v=setTimeout(function(){!p&&!q&&(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))};"bottom"==s?(c.css({top:a.outerHeight()- +c.outerHeight()}),m(0,!0)):"object"==typeof s&&(m(d(s).position().top,null,!0),l||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From c8c5ff7ca6e2ec4cffcb156a1029432beebc8ae9 Mon Sep 17 00:00:00 2001 From: InspiredJW Date: Wed, 28 Dec 2011 16:50:15 +0900 Subject: [PATCH 013/119] Immediate FadeIn without waiting for on-going FadeOut Animation. --- slimScroll.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 64871c8..ec13e5a 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -251,8 +251,8 @@ releaseScroll = true; return; } - bar.fadeIn('fast'); - if (railVisible) { rail.fadeIn('fast'); } + bar.stop(true,true).fadeIn('fast'); + if (railVisible) { rail.stop(true,true).fadeIn('fast'); } } var hideBar = function() From 7217c933cbc487fcb9b3b7e0409ab86d61aeea23 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Sun, 22 Jan 2012 21:42:24 +0000 Subject: [PATCH 014/119] Added package.json file for future compatiblity with new jQuery plugins page. --- package.json | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..c938706 --- /dev/null +++ b/package.json @@ -0,0 +1,44 @@ +{ + "name": "slimScroll", + "version": "0.4.4", + "title": "jQuery.slimScroll()", + "author": { + "name": "Piotr Rochala", + "url": "http://rocha.la/" + }, + "licenses": [ + { + "type": "MIT", + "url": "http://www.opensource.org/licenses/mit-license.php" + }, + { + "type": "GPL", + "url": "http://www.opensource.org/licenses/gpl-license.php" + } + ], + "dependencies": { + "jquery": ">1" + }, + "description": "slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.", + "keywords": [ + "scrollbar", + "scroll", + "slimscroll", + "scrollable" + ], + "homepage": "http://rocha.la/jQuery-slimScroll", + "maintainers": [ + { + "name": "Piotr Rochala", + "url": "https://github.com/rochal" + } + ], + "files": [ + "slimScroll.min.js", + "slimScroll.js", + "index.min.html", + "index.htm", + "README.md", + "package.json" + ] +} \ No newline at end of file From ef584dc71952b8246452452ac3c695ad980633ac Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Sun, 22 Jan 2012 21:54:17 +0000 Subject: [PATCH 015/119] Re-enabled page scroll blocking when cursor is still over the container and scrollbar reached top or bottom. This is still configurable using resumePageScroll flag. --- index.htm | 5 +++-- index.min.htm | 5 +++-- slimScroll.js | 10 ++++++---- slimScroll.min.js | 14 +++++++------- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/index.htm b/index.htm index 8666aa2..e9264e1 100644 --- a/index.htm +++ b/index.htm @@ -80,7 +80,7 @@

rail always visible test (rail color, opacity test)

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

-

rail visible test

+

rail visible test, resumePageScroll true

@@ -176,7 +176,8 @@

rail visible test

}); $('#testrailvisible').slimscroll({ width: '300px', - railVisible: true + railVisible: true, + resumePageScroll: true }); $('#testrailalwaysvisible').slimscroll({ width: '300px', diff --git a/index.min.htm b/index.min.htm index 73b5e71..b8ccace 100644 --- a/index.min.htm +++ b/index.min.htm @@ -80,7 +80,7 @@

rail always visible test (rail color, opacity test)

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

-

rail visible test

+

rail visible test, resumePageScroll true

@@ -176,7 +176,8 @@

rail visible test

}); $('#testrailvisible').slimscroll({ width: '300px', - railVisible: true + railVisible: true, + resumePageScroll: true }); $('#testrailalwaysvisible').slimscroll({ width: '300px', diff --git a/slimScroll.js b/slimScroll.js index 64871c8..b5e0315 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -2,7 +2,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.3 + * Version: 0.4.4 * */ (function($) { @@ -26,7 +26,8 @@ railOpacity : '0.2', railClass : 'slimScrollRail', barClass : 'slimScrollBar', - wrapperClass : 'slimScrollDiv' + wrapperClass : 'slimScrollDiv', + resumePageScroll: false }; var o = ops = $.extend( defaults , options ); @@ -50,7 +51,8 @@ alwaysVisible = o.alwaysVisible, railVisible = o.railVisible, railColor = o.railColor, - railOpacity = o.railOpacity; + railOpacity = o.railOpacity, + resumePageScroll = o.resumePageScroll; // used in event handlers and for better minification var me = $(this); @@ -243,7 +245,7 @@ clearTimeout(queueHide); // release wheel when bar reached top or bottom - releaseScroll = percentScroll == ~~ percentScroll; + releaseScroll = resumePageScroll && percentScroll == ~~ percentScroll; // show only when required if(barHeight >= me.outerHeight()) { diff --git a/slimScroll.min.js b/slimScroll.min.js index 3de19e7..89b3a2c 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -2,12 +2,12 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.3 + * Version: 0.4.4 * */ -(function(d){jQuery.fn.extend({slimScroll:function(n){var b=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},n);this.each(function(){var o,p,q,v,r,j,k=!1,n=parseInt(b.wheelStep),g=b.width,w=b.height,e=b.size,A=b.color,B=b.position,x=b.distance,s=b.start,C=b.opacity, -l=b.alwaysVisible,y=b.railVisible,D=b.railColor,E=b.railOpacity,a=d(this),F=d("
").addClass(b.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:w});a.css({overflow:"hidden",width:g,height:w});var h=d("
").addClass(b.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:l&&y?"block":"none","border-radius":e,background:D,opacity:E,zIndex:90}),c=d("
").addClass(b.barClass).css({background:A,width:e,position:"absolute",top:0,opacity:C, -display:l?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),g="right"==B?{right:x}:{left:x};h.css(g);c.css(g);a.wrap(F);a.parent().append(c);a.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){q=!0},stop:function(){q=!1;i()},drag:function(){m(0,d(this).position().top,!1)}});h.hover(function(){t()},function(){i()});c.hover(function(){p=!0},function(){p=!1});a.hover(function(){o=!0;t();i()},function(){o=!1;i()});var u=function(a){if(o){var a= -a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120);a.detail&&(c=a.detail/3);m(c,!0);a.preventDefault&&!k&&a.preventDefault();if(!k)a.returnValue=!1}},m=function(b,d,e){var f=b;d&&(f=parseInt(c.css("top"))+b*n/100*c.outerHeight(),d=a.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(a.outerHeight()-c.outerHeight());f=j*(a[0].scrollHeight-a.outerHeight());e&&(f=b,b=f/a[0].scrollHeight*a.outerHeight(),c.css({top:b+"px"}));a.scrollTop(f);t(); -i()};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();var z=function(){r=Math.max(a.outerHeight()/a[0].scrollHeight*a.outerHeight(),30);c.css({height:r+"px"})};z();var t=function(){z();clearTimeout(v);k=j==~~j;r>=a.outerHeight()?k=!0:(c.fadeIn("fast"),y&&h.fadeIn("fast"))},i=function(){l||(v=setTimeout(function(){!p&&!q&&(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))};"bottom"==s?(c.css({top:a.outerHeight()- -c.outerHeight()}),m(0,!0)):"object"==typeof s&&(m(d(s).position().top,null,!0),l||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file +(function(d){jQuery.fn.extend({slimScroll:function(n){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",resumePageScroll:!1},n);this.each(function(){var o,p,q,v,r,j,k=!1,n=parseInt(a.wheelStep),g=a.width,w=a.height,e=a.size,A=a.color,B=a.position,x=a.distance,s= +a.start,C=a.opacity,l=a.alwaysVisible,y=a.railVisible,D=a.railColor,E=a.railOpacity,F=a.resumePageScroll,b=d(this),G=d("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:w});b.css({overflow:"hidden",width:g,height:w});var h=d("
").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:l&&y?"block":"none","border-radius":e,background:D,opacity:E,zIndex:90}),c=d("
").addClass(a.barClass).css({background:A, +width:e,position:"absolute",top:0,opacity:C,display:l?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),g="right"==B?{right:x}:{left:x};h.css(g);c.css(g);b.wrap(G);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){q=!0},stop:function(){q=!1;i()},drag:function(){m(0,d(this).position().top,!1)}});h.hover(function(){t()},function(){i()});c.hover(function(){p=!0},function(){p=!1});b.hover(function(){o= +!0;t();i()},function(){o=!1;i()});var u=function(a){if(o){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);m(b,!0);a.preventDefault&&!k&&a.preventDefault();if(!k)a.returnValue=!1}},m=function(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*n/100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=j*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight* +b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);t();i()};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();var z=function(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:r+"px"})};z();var t=function(){z();clearTimeout(v);k=F&&j==~~j;r>=b.outerHeight()?k=!0:(c.fadeIn("fast"),y&&h.fadeIn("fast"))},i=function(){l||(v=setTimeout(function(){!p&&!q&&(c.fadeOut("slow"), +h.fadeOut("slow"))},1E3))};"bottom"==s?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"object"==typeof s&&(m(d(s).position().top,null,!0),l||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 3e568c89238102d1fbba8a0d70925d5f7d8e6034 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Sat, 11 Feb 2012 15:44:49 +0000 Subject: [PATCH 016/119] Renamed resumePageScroll to allowPageScroll. --- slimScroll.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index b5e0315..f860ecb 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -27,7 +27,7 @@ railClass : 'slimScrollRail', barClass : 'slimScrollBar', wrapperClass : 'slimScrollDiv', - resumePageScroll: false + allowPageScroll: false }; var o = ops = $.extend( defaults , options ); @@ -52,7 +52,7 @@ railVisible = o.railVisible, railColor = o.railColor, railOpacity = o.railOpacity, - resumePageScroll = o.resumePageScroll; + allowPageScroll = o.allowPageScroll; // used in event handlers and for better minification var me = $(this); @@ -245,7 +245,7 @@ clearTimeout(queueHide); // release wheel when bar reached top or bottom - releaseScroll = resumePageScroll && percentScroll == ~~ percentScroll; + releaseScroll = allowPageScroll && percentScroll == ~~ percentScroll; // show only when required if(barHeight >= me.outerHeight()) { From 686a818df75ba6f7113e7f7fc800f6011217f598 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Sat, 11 Feb 2012 15:57:11 +0000 Subject: [PATCH 017/119] Added check to disable slimScroll binding on the same element more than once. --- slimScroll.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/slimScroll.js b/slimScroll.js index f860ecb..a779c3e 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -57,6 +57,12 @@ // used in event handlers and for better minification var me = $(this); + //ensure we are not binding it again + if (me.parent().hasClass('slimScrollDiv')) + { + return; + } + // wrap content var wrapper = $(divS) .addClass( o.wrapperClass ) From 162089f1574f3422a4489c2378e9c5b265af4348 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Sat, 11 Feb 2012 17:20:52 +0000 Subject: [PATCH 018/119] Added support for setting the scroll value externally. Now $(slimscroll-enabled-element).slimScroll({ scroll: x }); will scroll by x pixels. It can be called on any element that has been previously enabled to use slimscroll. --- index.htm | 19 ++++++++++++++----- index.min.htm | 19 ++++++++++++++----- slimScroll.js | 27 ++++++++++++++++++++------- slimScroll.min.js | 14 +++++++------- 4 files changed, 55 insertions(+), 24 deletions(-) diff --git a/index.htm b/index.htm index e9264e1..0d379d6 100644 --- a/index.htm +++ b/index.htm @@ -68,7 +68,7 @@

start at the element offsetTop test (multiple elements)


-

rail always visible test (rail color, opacity test)

+

rail always visible test (rail color, opacity test), external setting scroll value test

@@ -79,8 +79,10 @@

rail always visible test (rail color, opacity test)

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

- -

rail visible test, resumePageScroll true

+ + +
+

rail visible test, allowPageScroll true

@@ -177,7 +179,7 @@

rail visible test, resumePageScroll true

$('#testrailvisible').slimscroll({ width: '300px', railVisible: true, - resumePageScroll: true + allowPageScroll: true }); $('#testrailalwaysvisible').slimscroll({ width: '300px', @@ -186,7 +188,14 @@

rail visible test, resumePageScroll true

railColor: '#f00', opacity: 1, color: '#333' - }); + }); + //scrolling buttons test + $('#scrollDown').click(function(){ + $('#testrailalwaysvisible').slimScroll({ scroll: '50px' }); + }); + $('#scrollUp').click(function(){ + $('#testrailalwaysvisible').slimScroll({ scroll: '-50px' }); + }); //no initial content var somecontent = "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

"; $('#noinitialcontent').slimScroll({ diff --git a/index.min.htm b/index.min.htm index b8ccace..9c8077f 100644 --- a/index.min.htm +++ b/index.min.htm @@ -68,7 +68,7 @@

start at the element offsetTop test (multiple elements)


-

rail always visible test (rail color, opacity test)

+

rail always visible test (rail color, opacity test), external setting scroll value test

@@ -79,8 +79,10 @@

rail always visible test (rail color, opacity test)

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

- -

rail visible test, resumePageScroll true

+ + +
+

rail visible test, allowPageScroll true

@@ -177,7 +179,7 @@

rail visible test, resumePageScroll true

$('#testrailvisible').slimscroll({ width: '300px', railVisible: true, - resumePageScroll: true + allowPageScroll: true }); $('#testrailalwaysvisible').slimscroll({ width: '300px', @@ -186,7 +188,14 @@

rail visible test, resumePageScroll true

railColor: '#f00', opacity: 1, color: '#333' - }); + }); + //scrolling buttons test + $('#scrollDown').click(function(){ + $('#testrailalwaysvisible').slimScroll({ scroll: '50px' }); + }); + $('#scrollUp').click(function(){ + $('#testrailalwaysvisible').slimScroll({ scroll: '-50px' }); + }); //no initial content var somecontent = "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

"; $('#noinitialcontent').slimScroll({ diff --git a/slimScroll.js b/slimScroll.js index 1738882..601a0aa 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -2,7 +2,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.4 + * Version: 0.5.0 * */ (function($) { @@ -27,7 +27,8 @@ railClass : 'slimScrollRail', barClass : 'slimScrollBar', wrapperClass : 'slimScrollDiv', - allowPageScroll: false + allowPageScroll: false, + scroll: 0 }; var o = ops = $.extend( defaults , options ); @@ -52,7 +53,8 @@ railVisible = o.railVisible, railColor = o.railColor, railOpacity = o.railOpacity, - allowPageScroll = o.allowPageScroll; + allowPageScroll = o.allowPageScroll, + scroll = o.scroll; // used in event handlers and for better minification var me = $(this); @@ -60,6 +62,17 @@ //ensure we are not binding it again if (me.parent().hasClass('slimScrollDiv')) { + //check if we should scroll existing instance + if (scroll) + { + //find bar and rail + bar = me.parent().find('.slimScrollBar'); + rail = me.parent().find('.slimScrollRail'); + + //scroll by given amount of pixels + scrollContent( me.scrollTop() + parseInt(scroll), false, true); + } + return; } @@ -180,7 +193,7 @@ if (!releaseScroll) { e.returnValue = false; } } - var scrollContent = function(y, isWheel, isJump) + function scrollContent(y, isWheel, isJump) { var delta = y; @@ -234,7 +247,7 @@ // attach scroll events attachWheel(); - var getBarHeight = function() + function getBarHeight() { // calculate scrollbar height and make sure it is not too small barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight); @@ -244,7 +257,7 @@ // set up initial height getBarHeight(); - var showBar = function() + function showBar() { // recalculate bar height getBarHeight(); @@ -263,7 +276,7 @@ if (railVisible) { rail.stop(true,true).fadeIn('fast'); } } - var hideBar = function() + function hideBar() { // only hide when options allow it if (!alwaysVisible) diff --git a/slimScroll.min.js b/slimScroll.min.js index 89b3a2c..4a928fb 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -2,12 +2,12 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.4.4 + * Version: 0.5.0 * */ -(function(d){jQuery.fn.extend({slimScroll:function(n){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",resumePageScroll:!1},n);this.each(function(){var o,p,q,v,r,j,k=!1,n=parseInt(a.wheelStep),g=a.width,w=a.height,e=a.size,A=a.color,B=a.position,x=a.distance,s= -a.start,C=a.opacity,l=a.alwaysVisible,y=a.railVisible,D=a.railColor,E=a.railOpacity,F=a.resumePageScroll,b=d(this),G=d("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:w});b.css({overflow:"hidden",width:g,height:w});var h=d("
").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:l&&y?"block":"none","border-radius":e,background:D,opacity:E,zIndex:90}),c=d("
").addClass(a.barClass).css({background:A, -width:e,position:"absolute",top:0,opacity:C,display:l?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),g="right"==B?{right:x}:{left:x};h.css(g);c.css(g);b.wrap(G);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){q=!0},stop:function(){q=!1;i()},drag:function(){m(0,d(this).position().top,!1)}});h.hover(function(){t()},function(){i()});c.hover(function(){p=!0},function(){p=!1});b.hover(function(){o= -!0;t();i()},function(){o=!1;i()});var u=function(a){if(o){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);m(b,!0);a.preventDefault&&!k&&a.preventDefault();if(!k)a.returnValue=!1}},m=function(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*n/100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=j*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight* -b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);t();i()};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();var z=function(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:r+"px"})};z();var t=function(){z();clearTimeout(v);k=F&&j==~~j;r>=b.outerHeight()?k=!0:(c.fadeIn("fast"),y&&h.fadeIn("fast"))},i=function(){l||(v=setTimeout(function(){!p&&!q&&(c.fadeOut("slow"), -h.fadeOut("slow"))},1E3))};"bottom"==s?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"object"==typeof s&&(m(d(s).position().top,null,!0),l||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file +(function(d){jQuery.fn.extend({slimScroll:function(o){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0},o);this.each(function(){function h(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*B/100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(), +f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));k=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=k*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);p();i()}function w(){q=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),o);c.css({height:q+"px"})}function p(){w();clearTimeout(x);l=C&&k==~~k;q>=b.outerHeight()?l=!0:(c.stop(!0,!0).fadeIn("fast"),y&&g.stop(!0,!0).fadeIn("fast"))}function i(){m||(x=setTimeout(function(){!r&& +!s&&(c.fadeOut("slow"),g.fadeOut("slow"))},1E3))}var t,r,s,x,q,k,o=30,l=!1,B=parseInt(a.wheelStep),j=a.width,z=a.height,e=a.size,D=a.color,E=a.position,A=a.distance,u=a.start,F=a.opacity,m=a.alwaysVisible,y=a.railVisible,G=a.railColor,H=a.railOpacity,C=a.allowPageScroll,n=a.scroll,b=d(this);if(b.parent().hasClass("slimScrollDiv"))n&&(c=b.parent().find(".slimScrollBar"),g=b.parent().find(".slimScrollRail"),h(b.scrollTop()+parseInt(n),!1,!0));else{n=d("
").addClass(a.wrapperClass).css({position:"relative", +overflow:"hidden",width:j,height:z});b.css({overflow:"hidden",width:j,height:z});var g=d("
").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:m&&y?"block":"none","border-radius":e,background:G,opacity:H,zIndex:90}),c=d("
").addClass(a.barClass).css({background:D,width:e,position:"absolute",top:0,opacity:F,display:m?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),j="right"==E?{right:A}:{left:A}; +g.css(j);c.css(j);b.wrap(n);b.parent().append(c);b.parent().append(g);c.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1;i()},drag:function(){h(0,d(this).position().top,!1)}});g.hover(function(){p()},function(){i()});c.hover(function(){r=!0},function(){r=!1});b.hover(function(){t=!0;p();i()},function(){t=!1;i()});var v=function(a){if(t){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);h(b,!0);a.preventDefault&&!l&&a.preventDefault(); +l||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();w();"bottom"==u?(c.css({top:b.outerHeight()-c.outerHeight()}),h(0,!0)):"object"==typeof u&&(h(d(u).position().top,null,!0),m||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 7212a181c99de9583a94025bd7552fa904b5bbd9 Mon Sep 17 00:00:00 2001 From: Umar Farooq Khawaja Date: Wed, 13 Jun 2012 17:05:42 +0200 Subject: [PATCH 019/119] Provide a new option 'disableFadeOut', which keeps the scrollbar visible as long as the mouse has not left the scrollable div. --- slimScroll.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/slimScroll.js b/slimScroll.js index 601a0aa..d7db99b 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -21,6 +21,7 @@ start : 'top', opacity : .4, alwaysVisible : false, + disableFadeOut: false, railVisible : false, railColor : '#333', railOpacity : '0.2', @@ -49,6 +50,7 @@ distance = o.distance, start = o.start, opacity = o.opacity, + disableFadeOut = o.disableFadeOut, alwaysVisible = o.alwaysVisible, railVisible = o.railVisible, railColor = o.railColor, @@ -282,7 +284,7 @@ if (!alwaysVisible) { queueHide = setTimeout(function(){ - if (!isOverBar && !isDragg) + if (!(disableFadeOut && isOverPanel) && !isOverBar && !isDragg) { bar.fadeOut('slow'); rail.fadeOut('slow'); From 83bef518303b83117abe596af9060ad24beee492 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Wed, 12 Sep 2012 20:37:46 +0200 Subject: [PATCH 020/119] Added top/bottom notification events Added events to notify when scrollbar reached top or bottom of the parent container. $(container).bind('slimscroll') can be used to subscribe to events. --- index.htm | 11 ++++++++--- index.min.htm | 11 ++++++++--- slimScroll.js | 29 +++++++++++++++++++++-------- slimScroll.min.js | 14 +++++++------- 4 files changed, 44 insertions(+), 21 deletions(-) diff --git a/index.htm b/index.htm index 0d379d6..0a24ff2 100644 --- a/index.htm +++ b/index.htm @@ -44,7 +44,7 @@

Facebook-like jQuery Scrollbar


-

start at the element offsetTop test

+

start at the element offsetTop test & top/bottom events

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

@@ -54,8 +54,9 @@

start at the element offsetTop test

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+
-

start at the element offsetTop test (multiple elements)

+

start at the element offsetTop test (multiple elements) & disable fadeOut

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

@@ -152,11 +153,15 @@

rail visible test, allowPageScroll true

height: '200px', start: $('#testElement'), alwaysVisible: true + }).bind('slimscroll', function(e, pos){ + $('#test1aout').html($('#test1aout').html() + "Reached " + pos + "
"); }); + $('#test1b').slimScroll({ height: '200px', width: '400px', - start: $('.blah:eq(1)') + start: $('.blah:eq(1)'), + disableFadeOut: true }); $('#test2').slimScroll({ position: 'left', diff --git a/index.min.htm b/index.min.htm index 9c8077f..faf8e9f 100644 --- a/index.min.htm +++ b/index.min.htm @@ -44,7 +44,7 @@

Facebook-like jQuery Scrollbar


-

start at the element offsetTop test

+

start at the element offsetTop test & top/bottom events

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

@@ -54,8 +54,9 @@

start at the element offsetTop test

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+
-

start at the element offsetTop test (multiple elements)

+

start at the element offsetTop test (multiple elements) & disable fadeOut

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

@@ -152,11 +153,15 @@

rail visible test, allowPageScroll true

height: '200px', start: $('#testElement'), alwaysVisible: true + }).bind('slimscroll', function(e, pos){ + $('#test1aout').html($('#test1aout').html() + "Reached " + pos + "
"); }); + $('#test1b').slimScroll({ height: '200px', width: '400px', - start: $('.blah:eq(1)') + start: $('.blah:eq(1)'), + disableFadeOut: true }); $('#test2').slimScroll({ position: 'left', diff --git a/slimScroll.js b/slimScroll.js index d7db99b..8819f4a 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -2,7 +2,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.5.0 + * Version: 0.6.0 * */ (function($) { @@ -32,12 +32,13 @@ scroll: 0 }; - var o = ops = $.extend( defaults , options ); + var o = ops = $.extend(defaults, options); // do it for every element that matches selector this.each(function(){ - var isOverPanel, isOverBar, isDragg, queueHide, barHeight, percentScroll, + var isOverPanel, isOverBar, isDragg, queueHide, + barHeight, percentScroll, lastScroll, divS = '
', minBarHeight = 30, releaseScroll = false, @@ -80,7 +81,7 @@ // wrap content var wrapper = $(divS) - .addClass( o.wrapperClass ) + .addClass(o.wrapperClass) .css({ position: 'relative', overflow: 'hidden', @@ -97,7 +98,7 @@ // create scrollbar rail var rail = $(divS) - .addClass( o.railClass ) + .addClass(o.railClass) .css({ width: size, height: '100%', @@ -112,7 +113,7 @@ // create scrollbar var bar = $(divS) - .addClass( o.barClass ) + .addClass(o.barClass) .css({ background: color, width: size, @@ -265,8 +266,20 @@ getBarHeight(); clearTimeout(queueHide); - // release wheel when bar reached top or bottom - releaseScroll = allowPageScroll && percentScroll == ~~ percentScroll; + // when bar reached top or bottom + if (percentScroll == ~~ percentScroll) + { + //release wheel + releaseScroll = allowPageScroll; + + // publish approporiate event + if (lastScroll != percentScroll) + { + var msg = (~~percentScroll == 0) ? 'top' : 'bottom'; + me.trigger('slimscroll', msg); + } + } + lastScroll = percentScroll; // show only when required if(barHeight >= me.outerHeight()) { diff --git a/slimScroll.min.js b/slimScroll.min.js index 4a928fb..001b37e 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -2,12 +2,12 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.5.0 + * Version: 0.6.0 * */ -(function(d){jQuery.fn.extend({slimScroll:function(o){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0},o);this.each(function(){function h(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*B/100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(), -f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));k=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=k*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);p();i()}function w(){q=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),o);c.css({height:q+"px"})}function p(){w();clearTimeout(x);l=C&&k==~~k;q>=b.outerHeight()?l=!0:(c.stop(!0,!0).fadeIn("fast"),y&&g.stop(!0,!0).fadeIn("fast"))}function i(){m||(x=setTimeout(function(){!r&& -!s&&(c.fadeOut("slow"),g.fadeOut("slow"))},1E3))}var t,r,s,x,q,k,o=30,l=!1,B=parseInt(a.wheelStep),j=a.width,z=a.height,e=a.size,D=a.color,E=a.position,A=a.distance,u=a.start,F=a.opacity,m=a.alwaysVisible,y=a.railVisible,G=a.railColor,H=a.railOpacity,C=a.allowPageScroll,n=a.scroll,b=d(this);if(b.parent().hasClass("slimScrollDiv"))n&&(c=b.parent().find(".slimScrollBar"),g=b.parent().find(".slimScrollRail"),h(b.scrollTop()+parseInt(n),!1,!0));else{n=d("
").addClass(a.wrapperClass).css({position:"relative", -overflow:"hidden",width:j,height:z});b.css({overflow:"hidden",width:j,height:z});var g=d("
").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:m&&y?"block":"none","border-radius":e,background:G,opacity:H,zIndex:90}),c=d("
").addClass(a.barClass).css({background:D,width:e,position:"absolute",top:0,opacity:F,display:m?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),j="right"==E?{right:A}:{left:A}; -g.css(j);c.css(j);b.wrap(n);b.parent().append(c);b.parent().append(g);c.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1;i()},drag:function(){h(0,d(this).position().top,!1)}});g.hover(function(){p()},function(){i()});c.hover(function(){r=!0},function(){r=!1});b.hover(function(){t=!0;p();i()},function(){t=!1;i()});var v=function(a){if(t){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);h(b,!0);a.preventDefault&&!l&&a.preventDefault(); -l||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();w();"bottom"==u?(c.css({top:b.outerHeight()-c.outerHeight()}),h(0,!0)):"object"==typeof u&&(h(d(u).position().top,null,!0),m||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file +(function(d){jQuery.fn.extend({slimScroll:function(p){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0},p);this.each(function(){function i(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*C/100*c.outerHeight(),d=b.outerHeight()- +c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));g=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=g*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);q();j()}function w(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),p);c.css({height:r+"px"})}function q(){w();clearTimeout(x);g==~~g&&(l=D,y!=g&&b.trigger("slimscroll",0==~~g?"top":"bottom"));y=g;r>=b.outerHeight()?l=!0:(c.stop(!0,!0).fadeIn("fast"), +z&&h.stop(!0,!0).fadeIn("fast"))}function j(){m||(x=setTimeout(function(){if((!E||!n)&&!s&&!t)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var n,s,t,x,r,g,y,p=30,l=!1,C=parseInt(a.wheelStep),k=a.width,A=a.height,e=a.size,F=a.color,G=a.position,B=a.distance,u=a.start,H=a.opacity,E=a.disableFadeOut,m=a.alwaysVisible,z=a.railVisible,I=a.railColor,J=a.railOpacity,D=a.allowPageScroll,o=a.scroll,b=d(this);if(b.parent().hasClass("slimScrollDiv"))o&&(c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail"), +i(b.scrollTop()+parseInt(o),!1,!0));else{o=d("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:k,height:A});b.css({overflow:"hidden",width:k,height:A});var h=d("
").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:m&&z?"block":"none","border-radius":e,background:I,opacity:J,zIndex:90}),c=d("
").addClass(a.barClass).css({background:F,width:e,position:"absolute",top:0,opacity:H,display:m?"block":"none","border-radius":e, +BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),k="right"==G?{right:B}:{left:B};h.css(k);c.css(k);b.wrap(o);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){t=!0},stop:function(){t=!1;j()},drag:function(){i(0,d(this).position().top,!1)}});h.hover(function(){q()},function(){j()});c.hover(function(){s=!0},function(){s=!1});b.hover(function(){n=!0;q();j()},function(){n=!1;j()});var v=function(a){if(n){var a=a||window.event,b=0;a.wheelDelta&& +(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);i(b,!0);a.preventDefault&&!l&&a.preventDefault();l||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();w();"bottom"==u?(c.css({top:b.outerHeight()-c.outerHeight()}),i(0,!0)):"object"==typeof u&&(i(d(u).position().top,null,!0),m||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 0508e3a31afd172c23635a19f7a8d0c962512495 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Sun, 30 Sep 2012 13:48:14 +0200 Subject: [PATCH 021/119] Updated to use latest versions of jQuery and jQuery UI --- index.htm | 4 ++-- index.min.htm | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.htm b/index.htm index 0a24ff2..bcb7873 100644 --- a/index.htm +++ b/index.htm @@ -4,8 +4,8 @@ slimScroll demo - - + + diff --git a/index.min.htm b/index.min.htm index faf8e9f..cca2015 100644 --- a/index.min.htm +++ b/index.min.htm @@ -4,8 +4,8 @@ slimScroll demo - - + + From 8a7b32748e1291cc346722d18d1361764ca5adfc Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Wed, 3 Oct 2012 21:26:07 +0200 Subject: [PATCH 022/119] Added support for scrolling on mobile devices Tested on Samsung Galaxy Tab 2 and HTC Desire. Need to check iPad and iPhone before tagging. --- slimScroll.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/slimScroll.js b/slimScroll.js index 8819f4a..ef7397c 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -37,7 +37,7 @@ // do it for every element that matches selector this.each(function(){ - var isOverPanel, isOverBar, isDragg, queueHide, + var isOverPanel, isOverBar, isDragg, queueHide, touchDif, barHeight, percentScroll, lastScroll, divS = '
', minBarHeight = 30, @@ -177,6 +177,28 @@ hideBar(); }); + // support for mobile + me.bind('touchstart', function(e,b){ + if (e.originalEvent.touches.length) + { + // record where touch started + touchDif = e.originalEvent.touches[0].pageY; + } + }); + + me.bind('touchmove', function(e){ + // prevent scrolling the page + e.originalEvent.preventDefault(); + if (e.originalEvent.touches.length) + { + // see how far user swiped + var diff = (touchDif - e.originalEvent.touches[0].pageY) / -100; + // scroll content + scrollContent(diff, true); + } + + }); + var _onWheel = function(e) { // use mouse wheel only when mouse is over From ac5c54bf5f8bcd90e9ed783444cada4352f7b19c Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Fri, 5 Oct 2012 10:55:48 +0200 Subject: [PATCH 023/119] Inverted direction of touch scroll Added touchScrollStep flag to allow setting different sesitivity for touch scroll as well as manual inversion of the touch scroll by setting negative number. Refctored code to remove duplication and decrese the size. --- index.htm | 9 ++--- index.min.htm | 9 ++--- slimScroll.js | 86 +++++++++++++++++++---------------------------- slimScroll.min.js | 15 +++++---- 4 files changed, 53 insertions(+), 66 deletions(-) diff --git a/index.htm b/index.htm index bcb7873..98fd18a 100644 --- a/index.htm +++ b/index.htm @@ -8,7 +8,6 @@ - +

jQuery slimScroll

Facebook-like jQuery Scrollbar

@@ -83,7 +83,7 @@

rail always visible test (rail color, opacity test), external setting scroll
-

rail visible test, allowPageScroll true

+

rail visible test, allowPageScroll true & mobile touch steo

@@ -97,7 +97,7 @@

rail visible test, allowPageScroll true

-

scrollbar on left test

+

scrollbar on left test & mobile large step

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

@@ -184,7 +184,8 @@

rail visible test, allowPageScroll true

$('#testrailvisible').slimscroll({ width: '300px', railVisible: true, - allowPageScroll: true + allowPageScroll: true, + touchScrollStep: 1000 }); $('#testrailalwaysvisible').slimscroll({ width: '300px', diff --git a/index.min.htm b/index.min.htm index cca2015..b685fb3 100644 --- a/index.min.htm +++ b/index.min.htm @@ -8,7 +8,6 @@ - +

jQuery slimScroll

Facebook-like jQuery Scrollbar

@@ -83,7 +83,7 @@

rail always visible test (rail color, opacity test), external setting scroll
-

rail visible test, allowPageScroll true

+

rail visible test, allowPageScroll true & mobile touch steo

@@ -97,7 +97,7 @@

rail visible test, allowPageScroll true

-

scrollbar on left test

+

scrollbar on left test & mobile large step

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

@@ -184,7 +184,8 @@

rail visible test, allowPageScroll true

$('#testrailvisible').slimscroll({ width: '300px', railVisible: true, - allowPageScroll: true + allowPageScroll: true, + touchScrollStep: 1000 }); $('#testrailalwaysvisible').slimscroll({ width: '300px', diff --git a/slimScroll.js b/slimScroll.js index ef7397c..6c981ea 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -2,7 +2,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.6.0 + * Version: 0.6.5 * */ (function($) { @@ -29,10 +29,11 @@ barClass : 'slimScrollBar', wrapperClass : 'slimScrollDiv', allowPageScroll: false, - scroll: 0 + scroll: 0, + touchScrollStep: 200 }; - var o = ops = $.extend(defaults, options); + var o = $.extend(defaults, options); // do it for every element that matches selector this.each(function(){ @@ -41,24 +42,8 @@ barHeight, percentScroll, lastScroll, divS = '
', minBarHeight = 30, - releaseScroll = false, - wheelStep = parseInt(o.wheelStep), - cwidth = o.width, - cheight = o.height, - size = o.size, - color = o.color, - position = o.position, - distance = o.distance, - start = o.start, - opacity = o.opacity, - disableFadeOut = o.disableFadeOut, - alwaysVisible = o.alwaysVisible, - railVisible = o.railVisible, - railColor = o.railColor, - railOpacity = o.railOpacity, - allowPageScroll = o.allowPageScroll, - scroll = o.scroll; - + releaseScroll = false; + // used in event handlers and for better minification var me = $(this); @@ -85,29 +70,29 @@ .css({ position: 'relative', overflow: 'hidden', - width: cwidth, - height: cheight + width: o.width, + height: o.height }); // update style for the div me.css({ overflow: 'hidden', - width: cwidth, - height: cheight + width: o.width, + height: o.height }); // create scrollbar rail var rail = $(divS) .addClass(o.railClass) .css({ - width: size, + width: o.size, height: '100%', position: 'absolute', top: 0, - display: (alwaysVisible && railVisible) ? 'block' : 'none', - 'border-radius': size, - background: railColor, - opacity: railOpacity, + display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none', + 'border-radius': o.size, + background: o.railColor, + opacity: o.railOpacity, zIndex: 90 }); @@ -115,21 +100,21 @@ var bar = $(divS) .addClass(o.barClass) .css({ - background: color, - width: size, + background: o.color, + width: o.size, position: 'absolute', top: 0, - opacity: opacity, - display: alwaysVisible ? 'block' : 'none', - 'border-radius' : size, - BorderRadius: size, - MozBorderRadius: size, - WebkitBorderRadius: size, + opacity: o.opacity, + display: o.alwaysVisible ? 'block' : 'none', + 'border-radius' : o.size, + BorderRadius: o.size, + MozBorderRadius: o.size, + WebkitBorderRadius: o.size, zIndex: 99 }); // set position - var posCss = (position == 'right') ? { right: distance } : { left: distance }; + var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance }; rail.css(posCss); bar.css(posCss); @@ -192,12 +177,11 @@ if (e.originalEvent.touches.length) { // see how far user swiped - var diff = (touchDif - e.originalEvent.touches[0].pageY) / -100; + var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep; // scroll content scrollContent(diff, true); } - - }); + }); var _onWheel = function(e) { @@ -225,7 +209,7 @@ if (isWheel) { // move bar with mouse wheel - delta = parseInt(bar.css('top')) + y * wheelStep / 100 * bar.outerHeight(); + delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight(); // move bar, make sure it doesn't go out var maxTop = me.outerHeight() - bar.outerHeight(); @@ -292,7 +276,7 @@ if (percentScroll == ~~ percentScroll) { //release wheel - releaseScroll = allowPageScroll; + releaseScroll = o.allowPageScroll; // publish approporiate event if (lastScroll != percentScroll) @@ -310,16 +294,16 @@ return; } bar.stop(true,true).fadeIn('fast'); - if (railVisible) { rail.stop(true,true).fadeIn('fast'); } + if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); } } function hideBar() { // only hide when options allow it - if (!alwaysVisible) + if (!o.alwaysVisible) { queueHide = setTimeout(function(){ - if (!(disableFadeOut && isOverPanel) && !isOverBar && !isDragg) + if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg) { bar.fadeOut('slow'); rail.fadeOut('slow'); @@ -329,19 +313,19 @@ } // check start position - if (start == 'bottom') + if (o.start == 'bottom') { // scroll content to bottom bar.css({ top: me.outerHeight() - bar.outerHeight() }); scrollContent(0, true); } - else if (typeof start == 'object') + else if (typeof o.start == 'object') { // scroll content - scrollContent($(start).position().top, null, true); + scrollContent($(o.start).position().top, null, true); // make sure bar stays hidden - if (!alwaysVisible) { bar.hide(); } + if (!o.alwaysVisible) { bar.hide(); } } }); diff --git a/slimScroll.min.js b/slimScroll.min.js index 001b37e..3a9b768 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -2,12 +2,13 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.6.0 + * Version: 0.6.5 * */ -(function(d){jQuery.fn.extend({slimScroll:function(p){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0},p);this.each(function(){function i(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*C/100*c.outerHeight(),d=b.outerHeight()- -c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));g=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=g*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);q();j()}function w(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),p);c.css({height:r+"px"})}function q(){w();clearTimeout(x);g==~~g&&(l=D,y!=g&&b.trigger("slimscroll",0==~~g?"top":"bottom"));y=g;r>=b.outerHeight()?l=!0:(c.stop(!0,!0).fadeIn("fast"), -z&&h.stop(!0,!0).fadeIn("fast"))}function j(){m||(x=setTimeout(function(){if((!E||!n)&&!s&&!t)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var n,s,t,x,r,g,y,p=30,l=!1,C=parseInt(a.wheelStep),k=a.width,A=a.height,e=a.size,F=a.color,G=a.position,B=a.distance,u=a.start,H=a.opacity,E=a.disableFadeOut,m=a.alwaysVisible,z=a.railVisible,I=a.railColor,J=a.railOpacity,D=a.allowPageScroll,o=a.scroll,b=d(this);if(b.parent().hasClass("slimScrollDiv"))o&&(c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail"), -i(b.scrollTop()+parseInt(o),!1,!0));else{o=d("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:k,height:A});b.css({overflow:"hidden",width:k,height:A});var h=d("
").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:m&&z?"block":"none","border-radius":e,background:I,opacity:J,zIndex:90}),c=d("
").addClass(a.barClass).css({background:F,width:e,position:"absolute",top:0,opacity:H,display:m?"block":"none","border-radius":e, -BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),k="right"==G?{right:B}:{left:B};h.css(k);c.css(k);b.wrap(o);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){t=!0},stop:function(){t=!1;j()},drag:function(){i(0,d(this).position().top,!1)}});h.hover(function(){q()},function(){j()});c.hover(function(){s=!0},function(){s=!1});b.hover(function(){n=!0;q();j()},function(){n=!1;j()});var v=function(a){if(n){var a=a||window.event,b=0;a.wheelDelta&& -(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);i(b,!0);a.preventDefault&&!l&&a.preventDefault();l||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();w();"bottom"==u?(c.css({top:b.outerHeight()-c.outerHeight()}),i(0,!0)):"object"==typeof u&&(i(d(u).position().top,null,!0),m||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file +(function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function e(i,d,e){var f=i;d&&(f=parseInt(c.css("top"))+i*parseInt(a.wheelStep)/ +100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));g=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=g*(b[0].scrollHeight-b.outerHeight());e&&(f=i,i=f/b[0].scrollHeight*b.outerHeight(),c.css({top:i+"px"}));b.scrollTop(f);n();j()}function t(){p=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),m);c.css({height:p+"px"})}function n(){t();clearTimeout(u);g==~~g&&(k=a.allowPageScroll,v!=g&&b.trigger("slimscroll",0==~~g?"top":"bottom")); +v=g;p>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function j(){a.alwaysVisible||(u=setTimeout(function(){if((!a.disableFadeOut||!l)&&!q&&!r)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var l,q,r,u,w,p,g,v,m=30,k=!1,b=d(this);if(b.parent().hasClass("slimScrollDiv"))scroll&&(c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail"),e(b.scrollTop()+parseInt(scroll),!1,!0));else{var y=d("
").addClass(a.wrapperClass).css({position:"relative", +overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=d("
").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=d("
").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none", +"border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),x="right"==a.position?{right:a.distance}:{left:a.distance};h.css(x);c.css(x);b.wrap(y);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){r=!0},stop:function(){r=!1;j()},drag:function(){e(0,d(this).position().top,!1)}});h.hover(function(){n()},function(){j()});c.hover(function(){q=!0},function(){q=!1});b.hover(function(){l=!0;n();j()},function(){l= +!1;j()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(w=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&e((w-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var s=function(a){if(l){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);e(b,!0);a.preventDefault&&!k&&a.preventDefault();k||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll", +s,!1),this.addEventListener("mousewheel",s,!1)):document.attachEvent("onmousewheel",s)})();t();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),e(0,!0)):"object"==typeof a.start&&(e(d(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 3a2306683c9a05eff4250a9b57633103d7540737 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Fri, 5 Oct 2012 10:59:15 +0200 Subject: [PATCH 024/119] Fixed typo on demo page --- index.htm | 5 ++--- index.min.htm | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/index.htm b/index.htm index 98fd18a..6dff5ca 100644 --- a/index.htm +++ b/index.htm @@ -18,7 +18,6 @@ -

jQuery slimScroll

Facebook-like jQuery Scrollbar

@@ -83,7 +82,7 @@

rail always visible test (rail color, opacity test), external setting scroll
-

rail visible test, allowPageScroll true & mobile touch steo

+

rail visible test, allowPageScroll true & mobile touch step

@@ -97,7 +96,7 @@

rail visible test, allowPageScroll true & mobile touch steo

-

scrollbar on left test & mobile large step

+

scrollbar on left test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

diff --git a/index.min.htm b/index.min.htm index b685fb3..687677c 100644 --- a/index.min.htm +++ b/index.min.htm @@ -18,7 +18,6 @@ -

jQuery slimScroll

Facebook-like jQuery Scrollbar

@@ -83,7 +82,7 @@

rail always visible test (rail color, opacity test), external setting scroll
-

rail visible test, allowPageScroll true & mobile touch steo

+

rail visible test, allowPageScroll true & mobile touch step

@@ -97,7 +96,7 @@

rail visible test, allowPageScroll true & mobile touch steo

-

scrollbar on left test & mobile large step

+

scrollbar on left test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.

Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.

From b12f98dc13ffa483387658b98e9d3977d8cd44df Mon Sep 17 00:00:00 2001 From: Christian Heckl Date: Wed, 31 Oct 2012 22:33:14 +0100 Subject: [PATCH 025/119] fixed error for programmatic scrolling (variable did not refer to the options) --- slimScroll.js | 4 ++-- slimScroll.min.js | 9 +-------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 6c981ea..9e3632a 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -51,14 +51,14 @@ if (me.parent().hasClass('slimScrollDiv')) { //check if we should scroll existing instance - if (scroll) + if (o.scroll) { //find bar and rail bar = me.parent().find('.slimScrollBar'); rail = me.parent().find('.slimScrollRail'); //scroll by given amount of pixels - scrollContent( me.scrollTop() + parseInt(scroll), false, true); + scrollContent( me.scrollTop() + parseInt(o.scroll), false, true); } return; diff --git a/slimScroll.min.js b/slimScroll.min.js index 3a9b768..989726e 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -4,11 +4,4 @@ * * Version: 0.6.5 * - */ -(function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function e(i,d,e){var f=i;d&&(f=parseInt(c.css("top"))+i*parseInt(a.wheelStep)/ -100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));g=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=g*(b[0].scrollHeight-b.outerHeight());e&&(f=i,i=f/b[0].scrollHeight*b.outerHeight(),c.css({top:i+"px"}));b.scrollTop(f);n();j()}function t(){p=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),m);c.css({height:p+"px"})}function n(){t();clearTimeout(u);g==~~g&&(k=a.allowPageScroll,v!=g&&b.trigger("slimscroll",0==~~g?"top":"bottom")); -v=g;p>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function j(){a.alwaysVisible||(u=setTimeout(function(){if((!a.disableFadeOut||!l)&&!q&&!r)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var l,q,r,u,w,p,g,v,m=30,k=!1,b=d(this);if(b.parent().hasClass("slimScrollDiv"))scroll&&(c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail"),e(b.scrollTop()+parseInt(scroll),!1,!0));else{var y=d("
").addClass(a.wrapperClass).css({position:"relative", -overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=d("
").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=d("
").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none", -"border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),x="right"==a.position?{right:a.distance}:{left:a.distance};h.css(x);c.css(x);b.wrap(y);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){r=!0},stop:function(){r=!1;j()},drag:function(){e(0,d(this).position().top,!1)}});h.hover(function(){n()},function(){j()});c.hover(function(){q=!0},function(){q=!1});b.hover(function(){l=!0;n();j()},function(){l= -!1;j()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(w=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&e((w-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var s=function(a){if(l){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);e(b,!0);a.preventDefault&&!k&&a.preventDefault();k||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll", -s,!1),this.addEventListener("mousewheel",s,!1)):document.attachEvent("onmousewheel",s)})();t();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),e(0,!0)):"object"==typeof a.start&&(e(d(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function w(e,t,n){var i=e;if(t){i=parseInt(g.css("top"))+e*parseInt(r.wheelStep)/100*g.outerHeight();var s=d.outerHeight()-g.outerHeight();i=Math.min(Math.max(i,0),s),g.css({top:i+"px"})}f=parseInt(g.css("top"))/(d.outerHeight()-g.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();g.css({top:u+"px"})}d.scrollTop(i),x(),T()}function S(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),g.css({height:a+"px"})}function x(){S(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}g.stop(!0,!0).fadeIn("fast"),r.railVisible&&m.stop(!0,!0).fadeIn("fast")}function T(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(g.fadeOut("slow"),m.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){r.scrollBy&&(g=d.parent().find(".slimScrollBar"),m=d.parent().find(".slimScrollRail"),w(d.scrollTop()+parseInt(r.scroll),!1,!0));return}var v=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var m=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),g=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),y=r.position=="right"?{right:r.distance}:{left:r.distance};m.css(y),g.css(y),d.wrap(v),d.parent().append(g),d.parent().append(m),g.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,T()},drag:function(t){w(0,e(this).position().top,!1)}}),m.hover(function(){x()},function(){T()}),g.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,x(),T()},function(){t=!1,T()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;w(t,!0)}});var b=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),w(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},E=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",b,!1),this.addEventListener("mousewheel",b,!1)):document.attachEvent("onmousewheel",b)};E(),S(),r.start=="bottom"?(g.css({top:d.outerHeight()-g.outerHeight()}),w(0,!0)):typeof r.start=="object"&&(w(e(r.start).position().top,null,!0),r.alwaysVisible||g.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From c7c5b6698c127380c0a6de1d8db23dbff4dd8089 Mon Sep 17 00:00:00 2001 From: Christian Heckl Date: Wed, 31 Oct 2012 22:47:36 +0100 Subject: [PATCH 026/119] extends scroll amount to be either absolute or relative --- slimScroll.js | 29 +++++++++++++++++++++++++++-- slimScroll.min.js | 2 +- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 9e3632a..2581b8a 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -57,8 +57,33 @@ bar = me.parent().find('.slimScrollBar'); rail = me.parent().find('.slimScrollRail'); - //scroll by given amount of pixels - scrollContent( me.scrollTop() + parseInt(o.scroll), false, true); + //scroll either by relative or absolute amount + var offset = 0; + var value = o.scroll; + if(typeof(value) == 'string') + { + if(value.charAt(1) == '=') + { + //can be one of '+=', '-=' + offset = me.scrollTop(); + var op = value.charAt(0); + + value = parseInt(value.substr(2)); + + if(op == '-') + value *= -1; + + offset += value; + } + else + { + offset = parseInt(value); + } + } + else + { + offset = value; + } } return; diff --git a/slimScroll.min.js b/slimScroll.min.js index 989726e..3ef958c 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -4,4 +4,4 @@ * * Version: 0.6.5 * - */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function w(e,t,n){var i=e;if(t){i=parseInt(g.css("top"))+e*parseInt(r.wheelStep)/100*g.outerHeight();var s=d.outerHeight()-g.outerHeight();i=Math.min(Math.max(i,0),s),g.css({top:i+"px"})}f=parseInt(g.css("top"))/(d.outerHeight()-g.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();g.css({top:u+"px"})}d.scrollTop(i),x(),T()}function S(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),g.css({height:a+"px"})}function x(){S(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}g.stop(!0,!0).fadeIn("fast"),r.railVisible&&m.stop(!0,!0).fadeIn("fast")}function T(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(g.fadeOut("slow"),m.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){r.scrollBy&&(g=d.parent().find(".slimScrollBar"),m=d.parent().find(".slimScrollRail"),w(d.scrollTop()+parseInt(r.scroll),!1,!0));return}var v=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var m=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),g=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),y=r.position=="right"?{right:r.distance}:{left:r.distance};m.css(y),g.css(y),d.wrap(v),d.parent().append(g),d.parent().append(m),g.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,T()},drag:function(t){w(0,e(this).position().top,!1)}}),m.hover(function(){x()},function(){T()}),g.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,x(),T()},function(){t=!1,T()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;w(t,!0)}});var b=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),w(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},E=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",b,!1),this.addEventListener("mousewheel",b,!1)):document.attachEvent("onmousewheel",b)};E(),S(),r.start=="bottom"?(g.css({top:d.outerHeight()-g.outerHeight()}),w(0,!0)):typeof r.start=="object"&&(w(e(r.start).position().top,null,!0),r.alwaysVisible||g.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function x(e,t,n){var i=e;if(t){i=parseInt(w.css("top"))+e*parseInt(r.wheelStep)/100*w.outerHeight();var s=d.outerHeight()-w.outerHeight();i=Math.min(Math.max(i,0),s),w.css({top:i+"px"})}f=parseInt(w.css("top"))/(d.outerHeight()-w.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();w.css({top:u+"px"})}d.scrollTop(i),C(),k()}function N(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),w.css({height:a+"px"})}function C(){N(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}w.stop(!0,!0).fadeIn("fast"),r.railVisible&&b.stop(!0,!0).fadeIn("fast")}function k(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(w.fadeOut("slow"),b.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){if(r.scroll){w=d.parent().find(".slimScrollBar"),b=d.parent().find(".slimScrollRail");var v=0,m=r.scroll;if(typeof m=="string")if(m.charAt(1)=="="){v=d.scrollTop();var g=m.charAt(0);m=parseInt(m.substr(2)),g=="-"&&(m*=-1),v+=m}else v=parseInt(m);else v=m}return}var y=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var b=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),w=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),E=r.position=="right"?{right:r.distance}:{left:r.distance};b.css(E),w.css(E),d.wrap(y),d.parent().append(w),d.parent().append(b),w.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,k()},drag:function(t){x(0,e(this).position().top,!1)}}),b.hover(function(){C()},function(){k()}),w.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,C(),k()},function(){t=!1,k()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;x(t,!0)}});var S=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),x(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},T=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",S,!1),this.addEventListener("mousewheel",S,!1)):document.attachEvent("onmousewheel",S)};T(),N(),r.start=="bottom"?(w.css({top:d.outerHeight()-w.outerHeight()}),x(0,!0)):typeof r.start=="object"&&(x(e(r.start).position().top,null,!0),r.alwaysVisible||w.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 16877fe08fd58b7f92dedba18c94646377bad2cd Mon Sep 17 00:00:00 2001 From: Christian Heckl Date: Wed, 31 Oct 2012 22:58:20 +0100 Subject: [PATCH 027/119] fixed missing line to actually execute the scroll --- slimScroll.js | 2 ++ slimScroll.min.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/slimScroll.js b/slimScroll.js index 2581b8a..8342988 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -85,6 +85,8 @@ offset = value; } } + + scrollContent( offset, false, true); return; } diff --git a/slimScroll.min.js b/slimScroll.min.js index 3ef958c..4b5fd61 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -4,4 +4,4 @@ * * Version: 0.6.5 * - */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function x(e,t,n){var i=e;if(t){i=parseInt(w.css("top"))+e*parseInt(r.wheelStep)/100*w.outerHeight();var s=d.outerHeight()-w.outerHeight();i=Math.min(Math.max(i,0),s),w.css({top:i+"px"})}f=parseInt(w.css("top"))/(d.outerHeight()-w.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();w.css({top:u+"px"})}d.scrollTop(i),C(),k()}function N(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),w.css({height:a+"px"})}function C(){N(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}w.stop(!0,!0).fadeIn("fast"),r.railVisible&&b.stop(!0,!0).fadeIn("fast")}function k(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(w.fadeOut("slow"),b.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){if(r.scroll){w=d.parent().find(".slimScrollBar"),b=d.parent().find(".slimScrollRail");var v=0,m=r.scroll;if(typeof m=="string")if(m.charAt(1)=="="){v=d.scrollTop();var g=m.charAt(0);m=parseInt(m.substr(2)),g=="-"&&(m*=-1),v+=m}else v=parseInt(m);else v=m}return}var y=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var b=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),w=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),E=r.position=="right"?{right:r.distance}:{left:r.distance};b.css(E),w.css(E),d.wrap(y),d.parent().append(w),d.parent().append(b),w.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,k()},drag:function(t){x(0,e(this).position().top,!1)}}),b.hover(function(){C()},function(){k()}),w.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,C(),k()},function(){t=!1,k()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;x(t,!0)}});var S=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),x(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},T=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",S,!1),this.addEventListener("mousewheel",S,!1)):document.attachEvent("onmousewheel",S)};T(),N(),r.start=="bottom"?(w.css({top:d.outerHeight()-w.outerHeight()}),x(0,!0)):typeof r.start=="object"&&(x(e(r.start).position().top,null,!0),r.alwaysVisible||w.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function x(e,t,n){var i=e;if(t){i=parseInt(w.css("top"))+e*parseInt(r.wheelStep)/100*w.outerHeight();var s=d.outerHeight()-w.outerHeight();i=Math.min(Math.max(i,0),s),w.css({top:i+"px"})}f=parseInt(w.css("top"))/(d.outerHeight()-w.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();w.css({top:u+"px"})}d.scrollTop(i),C(),k()}function N(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),w.css({height:a+"px"})}function C(){N(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}w.stop(!0,!0).fadeIn("fast"),r.railVisible&&b.stop(!0,!0).fadeIn("fast")}function k(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(w.fadeOut("slow"),b.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){if(r.scroll){w=d.parent().find(".slimScrollBar"),b=d.parent().find(".slimScrollRail");var v=0,m=r.scroll;if(typeof m=="string")if(m.charAt(1)=="="){v=d.scrollTop();var g=m.charAt(0);m=parseInt(m.substr(2)),g=="-"&&(m*=-1),v+=m}else v=parseInt(m);else v=m}x(v,!1,!0);return}var y=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var b=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),w=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),E=r.position=="right"?{right:r.distance}:{left:r.distance};b.css(E),w.css(E),d.wrap(y),d.parent().append(w),d.parent().append(b),w.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,k()},drag:function(t){x(0,e(this).position().top,!1)}}),b.hover(function(){C()},function(){k()}),w.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,C(),k()},function(){t=!1,k()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;x(t,!0)}});var S=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),x(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},T=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",S,!1),this.addEventListener("mousewheel",S,!1)):document.attachEvent("onmousewheel",S)};T(),N(),r.start=="bottom"?(w.css({top:d.outerHeight()-w.outerHeight()}),x(0,!0)):typeof r.start=="object"&&(x(e(r.start).position().top,null,!0),r.alwaysVisible||w.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From dcb908caea6a5a1a7bd6cb3c7128b4bf64d784c6 Mon Sep 17 00:00:00 2001 From: Christian Heckl Date: Wed, 31 Oct 2012 22:58:20 +0100 Subject: [PATCH 028/119] fixed missing line to actually execute the scroll --- slimScroll.js | 2 ++ slimScroll.min.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/slimScroll.js b/slimScroll.js index 2581b8a..8342988 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -85,6 +85,8 @@ offset = value; } } + + scrollContent( offset, false, true); return; } diff --git a/slimScroll.min.js b/slimScroll.min.js index 3ef958c..4b5fd61 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -4,4 +4,4 @@ * * Version: 0.6.5 * - */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function x(e,t,n){var i=e;if(t){i=parseInt(w.css("top"))+e*parseInt(r.wheelStep)/100*w.outerHeight();var s=d.outerHeight()-w.outerHeight();i=Math.min(Math.max(i,0),s),w.css({top:i+"px"})}f=parseInt(w.css("top"))/(d.outerHeight()-w.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();w.css({top:u+"px"})}d.scrollTop(i),C(),k()}function N(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),w.css({height:a+"px"})}function C(){N(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}w.stop(!0,!0).fadeIn("fast"),r.railVisible&&b.stop(!0,!0).fadeIn("fast")}function k(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(w.fadeOut("slow"),b.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){if(r.scroll){w=d.parent().find(".slimScrollBar"),b=d.parent().find(".slimScrollRail");var v=0,m=r.scroll;if(typeof m=="string")if(m.charAt(1)=="="){v=d.scrollTop();var g=m.charAt(0);m=parseInt(m.substr(2)),g=="-"&&(m*=-1),v+=m}else v=parseInt(m);else v=m}return}var y=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var b=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),w=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),E=r.position=="right"?{right:r.distance}:{left:r.distance};b.css(E),w.css(E),d.wrap(y),d.parent().append(w),d.parent().append(b),w.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,k()},drag:function(t){x(0,e(this).position().top,!1)}}),b.hover(function(){C()},function(){k()}),w.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,C(),k()},function(){t=!1,k()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;x(t,!0)}});var S=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),x(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},T=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",S,!1),this.addEventListener("mousewheel",S,!1)):document.attachEvent("onmousewheel",S)};T(),N(),r.start=="bottom"?(w.css({top:d.outerHeight()-w.outerHeight()}),x(0,!0)):typeof r.start=="object"&&(x(e(r.start).position().top,null,!0),r.alwaysVisible||w.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function x(e,t,n){var i=e;if(t){i=parseInt(w.css("top"))+e*parseInt(r.wheelStep)/100*w.outerHeight();var s=d.outerHeight()-w.outerHeight();i=Math.min(Math.max(i,0),s),w.css({top:i+"px"})}f=parseInt(w.css("top"))/(d.outerHeight()-w.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();w.css({top:u+"px"})}d.scrollTop(i),C(),k()}function N(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),w.css({height:a+"px"})}function C(){N(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}w.stop(!0,!0).fadeIn("fast"),r.railVisible&&b.stop(!0,!0).fadeIn("fast")}function k(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(w.fadeOut("slow"),b.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){if(r.scroll){w=d.parent().find(".slimScrollBar"),b=d.parent().find(".slimScrollRail");var v=0,m=r.scroll;if(typeof m=="string")if(m.charAt(1)=="="){v=d.scrollTop();var g=m.charAt(0);m=parseInt(m.substr(2)),g=="-"&&(m*=-1),v+=m}else v=parseInt(m);else v=m}x(v,!1,!0);return}var y=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var b=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),w=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),E=r.position=="right"?{right:r.distance}:{left:r.distance};b.css(E),w.css(E),d.wrap(y),d.parent().append(w),d.parent().append(b),w.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,k()},drag:function(t){x(0,e(this).position().top,!1)}}),b.hover(function(){C()},function(){k()}),w.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,C(),k()},function(){t=!1,k()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;x(t,!0)}});var S=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),x(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},T=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",S,!1),this.addEventListener("mousewheel",S,!1)):document.attachEvent("onmousewheel",S)};T(),N(),r.start=="bottom"?(w.css({top:d.outerHeight()-w.outerHeight()}),x(0,!0)):typeof r.start=="object"&&(x(e(r.start).position().top,null,!0),r.alwaysVisible||w.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 6c8f1c8cf646df62da3f247402e0937f7df0ac7f Mon Sep 17 00:00:00 2001 From: Christian Heckl Date: Wed, 31 Oct 2012 23:09:37 +0100 Subject: [PATCH 029/119] fixed error with 0 values, more explicitely refer to the newly passed options instead of the merged onesfixed error with 0 values, more --- slimScroll.js | 5 ++--- slimScroll.min.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index 8342988..db1c481 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -51,7 +51,7 @@ if (me.parent().hasClass('slimScrollDiv')) { //check if we should scroll existing instance - if (o.scroll) + if ('scroll' in options) { //find bar and rail bar = me.parent().find('.slimScrollBar'); @@ -84,10 +84,9 @@ { offset = value; } + scrollContent( offset, false, true); } - scrollContent( offset, false, true); - return; } diff --git a/slimScroll.min.js b/slimScroll.min.js index 4b5fd61..0ccbf7e 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -4,4 +4,4 @@ * * Version: 0.6.5 * - */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function x(e,t,n){var i=e;if(t){i=parseInt(w.css("top"))+e*parseInt(r.wheelStep)/100*w.outerHeight();var s=d.outerHeight()-w.outerHeight();i=Math.min(Math.max(i,0),s),w.css({top:i+"px"})}f=parseInt(w.css("top"))/(d.outerHeight()-w.outerHeight()),i=f*(d[0].scrollHeight-d.outerHeight());if(n){i=e;var u=i/d[0].scrollHeight*d.outerHeight();w.css({top:u+"px"})}d.scrollTop(i),C(),k()}function N(){a=Math.max(d.outerHeight()/d[0].scrollHeight*d.outerHeight(),h),w.css({height:a+"px"})}function C(){N(),clearTimeout(s);if(f==~~f){p=r.allowPageScroll;if(l!=f){var e=~~f==0?"top":"bottom";d.trigger("slimscroll",e)}}l=f;if(a>=d.outerHeight()){p=!0;return}w.stop(!0,!0).fadeIn("fast"),r.railVisible&&b.stop(!0,!0).fadeIn("fast")}function k(){r.alwaysVisible||(s=setTimeout(function(){(!r.disableFadeOut||!t)&&!n&&!i&&(w.fadeOut("slow"),b.fadeOut("slow"))},1e3))}var t,n,i,s,u,a,f,l,c="
",h=30,p=!1,d=e(this);if(d.parent().hasClass("slimScrollDiv")){if(r.scroll){w=d.parent().find(".slimScrollBar"),b=d.parent().find(".slimScrollRail");var v=0,m=r.scroll;if(typeof m=="string")if(m.charAt(1)=="="){v=d.scrollTop();var g=m.charAt(0);m=parseInt(m.substr(2)),g=="-"&&(m*=-1),v+=m}else v=parseInt(m);else v=m}x(v,!1,!0);return}var y=e(c).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});d.css({overflow:"hidden",width:r.width,height:r.height});var b=e(c).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),w=e(c).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),E=r.position=="right"?{right:r.distance}:{left:r.distance};b.css(E),w.css(E),d.wrap(y),d.parent().append(w),d.parent().append(b),w.draggable({axis:"y",containment:"parent",start:function(){i=!0},stop:function(){i=!1,k()},drag:function(t){x(0,e(this).position().top,!1)}}),b.hover(function(){C()},function(){k()}),w.hover(function(){n=!0},function(){n=!1}),d.hover(function(){t=!0,C(),k()},function(){t=!1,k()}),d.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(u=e.originalEvent.touches[0].pageY)}),d.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(u-e.originalEvent.touches[0].pageY)/r.touchScrollStep;x(t,!0)}});var S=function(e){if(!t)return;var e=e||window.event,n=0;e.wheelDelta&&(n=-e.wheelDelta/120),e.detail&&(n=e.detail/3),x(n,!0),e.preventDefault&&!p&&e.preventDefault(),p||(e.returnValue=!1)},T=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",S,!1),this.addEventListener("mousewheel",S,!1)):document.attachEvent("onmousewheel",S)};T(),N(),r.start=="bottom"?(w.css({top:d.outerHeight()-w.outerHeight()}),x(0,!0)):typeof r.start=="object"&&(x(e(r.start).position().top,null,!0),r.alwaysVisible||w.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function T(e,t,n){var i=e;if(t){i=parseInt(E.css("top"))+e*parseInt(r.wheelStep)/100*E.outerHeight();var s=v.outerHeight()-E.outerHeight();i=Math.min(Math.max(i,0),s),E.css({top:i+"px"})}l=parseInt(E.css("top"))/(v.outerHeight()-E.outerHeight()),i=l*(v[0].scrollHeight-v.outerHeight());if(n){i=e;var u=i/v[0].scrollHeight*v.outerHeight();E.css({top:u+"px"})}v.scrollTop(i),k(),L()}function C(){f=Math.max(v.outerHeight()/v[0].scrollHeight*v.outerHeight(),p),E.css({height:f+"px"})}function k(){C(),clearTimeout(u);if(l==~~l){d=r.allowPageScroll;if(c!=l){var e=~~l==0?"top":"bottom";v.trigger("slimscroll",e)}}c=l;if(f>=v.outerHeight()){d=!0;return}E.stop(!0,!0).fadeIn("fast"),r.railVisible&&w.stop(!0,!0).fadeIn("fast")}function L(){r.alwaysVisible||(u=setTimeout(function(){(!r.disableFadeOut||!n)&&!i&&!s&&(E.fadeOut("slow"),w.fadeOut("slow"))},1e3))}var n,i,s,u,a,f,l,c,h="
",p=30,d=!1,v=e(this);if(v.parent().hasClass("slimScrollDiv")){if("scroll"in t){E=v.parent().find(".slimScrollBar"),w=v.parent().find(".slimScrollRail");var m=0,g=r.scroll;if(typeof g=="string")if(g.charAt(1)=="="){m=v.scrollTop();var y=g.charAt(0);g=parseInt(g.substr(2)),y=="-"&&(g*=-1),m+=g}else m=parseInt(g);else m=g;T(m,!1,!0)}return}var b=e(h).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});v.css({overflow:"hidden",width:r.width,height:r.height});var w=e(h).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),E=e(h).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),S=r.position=="right"?{right:r.distance}:{left:r.distance};w.css(S),E.css(S),v.wrap(b),v.parent().append(E),v.parent().append(w),E.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1,L()},drag:function(t){T(0,e(this).position().top,!1)}}),w.hover(function(){k()},function(){L()}),E.hover(function(){i=!0},function(){i=!1}),v.hover(function(){n=!0,k(),L()},function(){n=!1,L()}),v.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(a=e.originalEvent.touches[0].pageY)}),v.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(a-e.originalEvent.touches[0].pageY)/r.touchScrollStep;T(t,!0)}});var x=function(e){if(!n)return;var e=e||window.event,t=0;e.wheelDelta&&(t=-e.wheelDelta/120),e.detail&&(t=e.detail/3),T(t,!0),e.preventDefault&&!d&&e.preventDefault(),d||(e.returnValue=!1)},N=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",x,!1),this.addEventListener("mousewheel",x,!1)):document.attachEvent("onmousewheel",x)};N(),C(),r.start=="bottom"?(E.css({top:v.outerHeight()-E.outerHeight()}),T(0,!0)):typeof r.start=="object"&&(T(e(r.start).position().top,null,!0),r.alwaysVisible||E.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From 5aa9143c32917b68f01ecdd58a92335334b1602b Mon Sep 17 00:00:00 2001 From: Christian Heckl Date: Wed, 31 Oct 2012 23:18:31 +0100 Subject: [PATCH 030/119] more bulletproofing --- slimScroll.js | 4 ++-- slimScroll.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/slimScroll.js b/slimScroll.js index e6d4362..ea95f53 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -51,7 +51,7 @@ if (me.parent().hasClass('slimScrollDiv')) { //check if we should scroll existing instance - if ('scroll' in options) + if (options && ('scroll' in options)) { //find bar and rail bar = me.parent().find('.slimScrollBar'); @@ -84,7 +84,7 @@ { offset = value; } - scrollContent( offset, false, true); + scrollContent( offset, false, true); } return; diff --git a/slimScroll.min.js b/slimScroll.min.js index 0ccbf7e..5a444df 100644 --- a/slimScroll.min.js +++ b/slimScroll.min.js @@ -4,4 +4,4 @@ * * Version: 0.6.5 * - */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function T(e,t,n){var i=e;if(t){i=parseInt(E.css("top"))+e*parseInt(r.wheelStep)/100*E.outerHeight();var s=v.outerHeight()-E.outerHeight();i=Math.min(Math.max(i,0),s),E.css({top:i+"px"})}l=parseInt(E.css("top"))/(v.outerHeight()-E.outerHeight()),i=l*(v[0].scrollHeight-v.outerHeight());if(n){i=e;var u=i/v[0].scrollHeight*v.outerHeight();E.css({top:u+"px"})}v.scrollTop(i),k(),L()}function C(){f=Math.max(v.outerHeight()/v[0].scrollHeight*v.outerHeight(),p),E.css({height:f+"px"})}function k(){C(),clearTimeout(u);if(l==~~l){d=r.allowPageScroll;if(c!=l){var e=~~l==0?"top":"bottom";v.trigger("slimscroll",e)}}c=l;if(f>=v.outerHeight()){d=!0;return}E.stop(!0,!0).fadeIn("fast"),r.railVisible&&w.stop(!0,!0).fadeIn("fast")}function L(){r.alwaysVisible||(u=setTimeout(function(){(!r.disableFadeOut||!n)&&!i&&!s&&(E.fadeOut("slow"),w.fadeOut("slow"))},1e3))}var n,i,s,u,a,f,l,c,h="
",p=30,d=!1,v=e(this);if(v.parent().hasClass("slimScrollDiv")){if("scroll"in t){E=v.parent().find(".slimScrollBar"),w=v.parent().find(".slimScrollRail");var m=0,g=r.scroll;if(typeof g=="string")if(g.charAt(1)=="="){m=v.scrollTop();var y=g.charAt(0);g=parseInt(g.substr(2)),y=="-"&&(g*=-1),m+=g}else m=parseInt(g);else m=g;T(m,!1,!0)}return}var b=e(h).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});v.css({overflow:"hidden",width:r.width,height:r.height});var w=e(h).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),E=e(h).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),S=r.position=="right"?{right:r.distance}:{left:r.distance};w.css(S),E.css(S),v.wrap(b),v.parent().append(E),v.parent().append(w),E.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1,L()},drag:function(t){T(0,e(this).position().top,!1)}}),w.hover(function(){k()},function(){L()}),E.hover(function(){i=!0},function(){i=!1}),v.hover(function(){n=!0,k(),L()},function(){n=!1,L()}),v.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(a=e.originalEvent.touches[0].pageY)}),v.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(a-e.originalEvent.touches[0].pageY)/r.touchScrollStep;T(t,!0)}});var x=function(e){if(!n)return;var e=e||window.event,t=0;e.wheelDelta&&(t=-e.wheelDelta/120),e.detail&&(t=e.detail/3),T(t,!0),e.preventDefault&&!d&&e.preventDefault(),d||(e.returnValue=!1)},N=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",x,!1),this.addEventListener("mousewheel",x,!1)):document.attachEvent("onmousewheel",x)};N(),C(),r.start=="bottom"?(E.css({top:v.outerHeight()-E.outerHeight()}),T(0,!0)):typeof r.start=="object"&&(T(e(r.start).position().top,null,!0),r.alwaysVisible||E.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file + */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function T(e,t,n){var i=e;if(t){i=parseInt(E.css("top"))+e*parseInt(r.wheelStep)/100*E.outerHeight();var s=v.outerHeight()-E.outerHeight();i=Math.min(Math.max(i,0),s),E.css({top:i+"px"})}l=parseInt(E.css("top"))/(v.outerHeight()-E.outerHeight()),i=l*(v[0].scrollHeight-v.outerHeight());if(n){i=e;var u=i/v[0].scrollHeight*v.outerHeight();E.css({top:u+"px"})}v.scrollTop(i),k(),L()}function C(){f=Math.max(v.outerHeight()/v[0].scrollHeight*v.outerHeight(),p),E.css({height:f+"px"})}function k(){C(),clearTimeout(u);if(l==~~l){d=r.allowPageScroll;if(c!=l){var e=~~l==0?"top":"bottom";v.trigger("slimscroll",e)}}c=l;if(f>=v.outerHeight()){d=!0;return}E.stop(!0,!0).fadeIn("fast"),r.railVisible&&w.stop(!0,!0).fadeIn("fast")}function L(){r.alwaysVisible||(u=setTimeout(function(){(!r.disableFadeOut||!n)&&!i&&!s&&(E.fadeOut("slow"),w.fadeOut("slow"))},1e3))}var n,i,s,u,a,f,l,c,h="
",p=30,d=!1,v=e(this);if(v.parent().hasClass("slimScrollDiv")){if(t&&"scroll"in t){E=v.parent().find(".slimScrollBar"),w=v.parent().find(".slimScrollRail");var m=0,g=r.scroll;if(typeof g=="string")if(g.charAt(1)=="="){m=v.scrollTop();var y=g.charAt(0);g=parseInt(g.substr(2)),y=="-"&&(g*=-1),m+=g}else m=parseInt(g);else m=g;T(m,!1,!0)}return}var b=e(h).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});v.css({overflow:"hidden",width:r.width,height:r.height});var w=e(h).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),E=e(h).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),S=r.position=="right"?{right:r.distance}:{left:r.distance};w.css(S),E.css(S),v.wrap(b),v.parent().append(E),v.parent().append(w),E.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1,L()},drag:function(t){T(0,e(this).position().top,!1)}}),w.hover(function(){k()},function(){L()}),E.hover(function(){i=!0},function(){i=!1}),v.hover(function(){n=!0,k(),L()},function(){n=!1,L()}),v.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(a=e.originalEvent.touches[0].pageY)}),v.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(a-e.originalEvent.touches[0].pageY)/r.touchScrollStep;T(t,!0)}});var x=function(e){if(!n)return;var e=e||window.event,t=0;e.wheelDelta&&(t=-e.wheelDelta/120),e.detail&&(t=e.detail/3),T(t,!0),e.preventDefault&&!d&&e.preventDefault(),d||(e.returnValue=!1)},N=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",x,!1),this.addEventListener("mousewheel",x,!1)):document.attachEvent("onmousewheel",x)};N(),C(),r.start=="bottom"?(E.css({top:v.outerHeight()-E.outerHeight()}),T(0,!0)):typeof r.start=="object"&&(T(e(r.start).position().top,null,!0),r.alwaysVisible||E.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery); \ No newline at end of file From cc350e7cc6e3d067c600f61fe2ce89f5667301c8 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Mon, 7 Jan 2013 23:51:38 +1100 Subject: [PATCH 031/119] Support for automatically setting the height of the scroll area to the parent element. Based on the original commit b613f22a0383c65060a0798f65845b6f72a11ea3 @chrismi --- slimScroll.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/slimScroll.js b/slimScroll.js index 6c981ea..d23f7de 100644 --- a/slimScroll.js +++ b/slimScroll.js @@ -64,6 +64,9 @@ return; } + // optionally set height to the parent's height + o.height = (o.height == 'auto') ? me.parent().innerHeight() : o.height; + // wrap content var wrapper = $(divS) .addClass(o.wrapperClass) From e9e5e165d691c391edd7f564aeec6f21586782c6 Mon Sep 17 00:00:00 2001 From: "@rochal" Date: Tue, 8 Jan 2013 23:15:59 +1100 Subject: [PATCH 032/119] scroll method refactoring, added detailed example pages - Bumbed up version to 1.0.0 as this include few bigger changes. - renamed plugin file to include jquery. prefix - replaced scroll() method with scrollTo and scrollBy depending how scroll should be performed - included prettify for syntax highlighting in the example pages --- examples/chaining.html | 91 ++ examples/height-width.html | 112 ++ examples/libs/prettify/prettify.css | 52 + examples/libs/prettify/prettify.js | 1477 +++++++++++++++++++++++++ index.htm => examples/main.html | 58 +- examples/programmatic-scrolling.html | 147 +++ index.min.htm | 218 ---- slimScroll.js => jquery.slimscroll.js | 70 +- jquery.slimscroll.min.js | 14 + package.json | 11 +- slimScroll.min.js | 7 - 11 files changed, 1959 insertions(+), 298 deletions(-) create mode 100644 examples/chaining.html create mode 100644 examples/height-width.html create mode 100644 examples/libs/prettify/prettify.css create mode 100644 examples/libs/prettify/prettify.js rename index.htm => examples/main.html (96%) create mode 100644 examples/programmatic-scrolling.html delete mode 100644 index.min.htm rename slimScroll.js => jquery.slimscroll.js (86%) create mode 100644 jquery.slimscroll.min.js delete mode 100644 slimScroll.min.js diff --git a/examples/chaining.html b/examples/chaining.html new file mode 100644 index 0000000..a32e3b5 --- /dev/null +++ b/examples/chaining.html @@ -0,0 +1,91 @@ + + + +jquery.slimscroll - chaining + + + + + + + + + +Fork me on GitHub +
+

jQuery slimScroll

+

Facebook-style jQuery Scrollbar

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+
+ +
+$('#testDiv').slimscroll({
+  height: '250px'
+}).parent().css({ 
+  background: '#237FAD', 
+  border: '2px dashed #184055'
+});
+
+ + +
+ + + + + + + \ No newline at end of file diff --git a/examples/height-width.html b/examples/height-width.html new file mode 100644 index 0000000..937d241 --- /dev/null +++ b/examples/height-width.html @@ -0,0 +1,112 @@ + + + +jquery.slimscroll - height / width + + + + + + + + + +Fork me on GitHub +
+

jQuery slimScroll

+

Facebook-style jQuery Scrollbar

+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+
+
+ +
+$('#testDiv').slimscroll({
+  height: 'auto'
+});
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

+

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

+

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

+

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

+
+ +
+$('#testDiv2').slimscroll({
+  height: '100px',
+  width: '300px'
+});
+
+ + +
+ + + + + + + \ No newline at end of file diff --git a/examples/libs/prettify/prettify.css b/examples/libs/prettify/prettify.css new file mode 100644 index 0000000..400fd74 --- /dev/null +++ b/examples/libs/prettify/prettify.css @@ -0,0 +1,52 @@ +/* Pretty printing styles. Used with prettify.js. */ + +/* SPAN elements with the classes below are added by prettyprint. */ +.pln { color: #000 } /* plain text */ + +@media screen { + .str { color: #080 } /* string content */ + .kwd { color: #008 } /* a keyword */ + .com { color: #800 } /* a comment */ + .typ { color: #606 } /* a type name */ + .lit { color: #066 } /* a literal value */ + /* punctuation, lisp open bracket, lisp close bracket */ + .pun, .opn, .clo { color: #660 } + .tag { color: #008 } /* a markup tag name */ + .atn { color: #606 } /* a markup attribute name */ + .atv { color: #080 } /* a markup attribute value */ + .dec, .var { color: #606 } /* a declaration; a variable name */ + .fun { color: red } /* a function name */ +} + +/* Use higher contrast and text-weight for printable form. */ +@media print, projection { + .str { color: #060 } + .kwd { color: #006; font-weight: bold } + .com { color: #600; font-style: italic } + .typ { color: #404; font-weight: bold } + .lit { color: #044 } + .pun, .opn, .clo { color: #440 } + .tag { color: #006; font-weight: bold } + .atn { color: #404 } + .atv { color: #060 } +} + +/* Put a border around prettyprinted code snippets. */ +pre.prettyprint { padding: 2px; border: 1px solid #888 } + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */ +li.L0, +li.L1, +li.L2, +li.L3, +li.L5, +li.L6, +li.L7, +li.L8 { list-style-type: none } +/* Alternate shading for lines */ +li.L1, +li.L3, +li.L5, +li.L7, +li.L9 { background: #eee } diff --git a/examples/libs/prettify/prettify.js b/examples/libs/prettify/prettify.js new file mode 100644 index 0000000..037c26d --- /dev/null +++ b/examples/libs/prettify/prettify.js @@ -0,0 +1,1477 @@ +// Copyright (C) 2006 Google Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +/** + * @fileoverview + * some functions for browser-side pretty printing of code contained in html. + * + *

+ * For a fairly comprehensive set of languages see the + * README + * file that came with this source. At a minimum, the lexer should work on a + * number of languages including C and friends, Java, Python, Bash, SQL, HTML, + * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk + * and a subset of Perl, but, because of commenting conventions, doesn't work on + * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class. + *

+ * Usage:

    + *
  1. include this source file in an html page via + * {@code } + *
  2. define style rules. See the example page for examples. + *
  3. mark the {@code
    } and {@code } tags in your source with
    + *    {@code class=prettyprint.}
    + *    You can also use the (html deprecated) {@code } tag, but the pretty
    + *    printer needs to do more substantial DOM manipulations to support that, so
    + *    some css styles may not be preserved.
    + * </ol>
    + * That's it.  I wanted to keep the API as simple as possible, so there's no
    + * need to specify which language the code is in, but if you wish, you can add
    + * another class to the {@code <pre>} or {@code <code>} element to specify the
    + * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
    + * starts with "lang-" followed by a file extension, specifies the file type.
    + * See the "lang-*.js" files in this directory for code that implements
    + * per-language file handlers.
    + * <p>
    + * Change log:<br>
    + * cbeust, 2006/08/22
    + * <blockquote>
    + *   Java annotations (start with "@") are now captured as literals ("lit")
    + * </blockquote>
    + * @requires console
    + */
    +
    +// JSLint declarations
    +/*global console, document, navigator, setTimeout, window */
    +
    +/**
    + * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
    + * UI events.
    + * If set to {@code false}, {@code prettyPrint()} is synchronous.
    + */
    +window['PR_SHOULD_USE_CONTINUATION'] = true;
    +
    +(function () {
    +  // Keyword lists for various languages.
    +  // We use things that coerce to strings to make them compact when minified
    +  // and to defeat aggressive optimizers that fold large string constants.
    +  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
    +  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
    +      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
    +      "static,struct,switch,typedef,union,unsigned,void,volatile"];
    +  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
    +      "new,operator,private,protected,public,this,throw,true,try,typeof"];
    +  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
    +      "concept,concept_map,const_cast,constexpr,decltype," +
    +      "dynamic_cast,explicit,export,friend,inline,late_check," +
    +      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
    +      "template,typeid,typename,using,virtual,where"];
    +  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
    +      "abstract,boolean,byte,extends,final,finally,implements,import," +
    +      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
    +      "transient"];
    +  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
    +      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
    +      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
    +      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
    +      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
    +  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
    +      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
    +      "true,try,unless,until,when,while,yes";
    +  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
    +      "debugger,eval,export,function,get,null,set,undefined,var,with," +
    +      "Infinity,NaN"];
    +  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
    +      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
    +      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
    +  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
    +      "elif,except,exec,finally,from,global,import,in,is,lambda," +
    +      "nonlocal,not,or,pass,print,raise,try,with,yield," +
    +      "False,True,None"];
    +  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
    +      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
    +      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
    +      "BEGIN,END"];
    +  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
    +      "function,in,local,set,then,until"];
    +  var ALL_KEYWORDS = [
    +      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
    +      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
    +  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
    +
    +  // token style names.  correspond to css classes
    +  /**
    +   * token style for a string literal
    +   * @const
    +   */
    +  var PR_STRING = 'str';
    +  /**
    +   * token style for a keyword
    +   * @const
    +   */
    +  var PR_KEYWORD = 'kwd';
    +  /**
    +   * token style for a comment
    +   * @const
    +   */
    +  var PR_COMMENT = 'com';
    +  /**
    +   * token style for a type
    +   * @const
    +   */
    +  var PR_TYPE = 'typ';
    +  /**
    +   * token style for a literal value.  e.g. 1, null, true.
    +   * @const
    +   */
    +  var PR_LITERAL = 'lit';
    +  /**
    +   * token style for a punctuation string.
    +   * @const
    +   */
    +  var PR_PUNCTUATION = 'pun';
    +  /**
    +   * token style for a punctuation string.
    +   * @const
    +   */
    +  var PR_PLAIN = 'pln';
    +
    +  /**
    +   * token style for an sgml tag.
    +   * @const
    +   */
    +  var PR_TAG = 'tag';
    +  /**
    +   * token style for a markup declaration such as a DOCTYPE.
    +   * @const
    +   */
    +  var PR_DECLARATION = 'dec';
    +  /**
    +   * token style for embedded source.
    +   * @const
    +   */
    +  var PR_SOURCE = 'src';
    +  /**
    +   * token style for an sgml attribute name.
    +   * @const
    +   */
    +  var PR_ATTRIB_NAME = 'atn';
    +  /**
    +   * token style for an sgml attribute value.
    +   * @const
    +   */
    +  var PR_ATTRIB_VALUE = 'atv';
    +
    +  /**
    +   * A class that indicates a section of markup that is not code, e.g. to allow
    +   * embedding of line numbers within code listings.
    +   * @const
    +   */
    +  var PR_NOCODE = 'nocode';
    +
    +
    +
    +/**
    + * A set of tokens that can precede a regular expression literal in
    + * javascript
    + * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
    + * has the full list, but I've removed ones that might be problematic when
    + * seen in languages that don't support regular expression literals.
    + *
    + * <p>Specifically, I've removed any keywords that can't precede a regexp
    + * literal in a syntactically legal javascript program, and I've removed the
    + * "in" keyword since it's not a keyword in many languages, and might be used
    + * as a count of inches.
    + *
    + * <p>The link a above does not accurately describe EcmaScript rules since
    + * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
    + * very well in practice.
    + *
    + * @private
    + * @const
    + */
    +var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
    +
    +// CAVEAT: this does not properly handle the case where a regular
    +// expression immediately follows another since a regular expression may
    +// have flags for case-sensitivity and the like.  Having regexp tokens
    +// adjacent is not valid in any language I'm aware of, so I'm punting.
    +// TODO: maybe style special characters inside a regexp as punctuation.
    +
    +
    +  /**
    +   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
    +   * matches the union of the sets of strings matched by the input RegExp.
    +   * Since it matches globally, if the input strings have a start-of-input
    +   * anchor (/^.../), it is ignored for the purposes of unioning.
    +   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
    +   * @return {RegExp} a global regex.
    +   */
    +  function combinePrefixPatterns(regexs) {
    +    var capturedGroupIndex = 0;
    +  
    +    var needToFoldCase = false;
    +    var ignoreCase = false;
    +    for (var i = 0, n = regexs.length; i < n; ++i) {
    +      var regex = regexs[i];
    +      if (regex.ignoreCase) {
    +        ignoreCase = true;
    +      } else if (/[a-z]/i.test(regex.source.replace(
    +                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
    +        needToFoldCase = true;
    +        ignoreCase = false;
    +        break;
    +      }
    +    }
    +  
    +    var escapeCharToCodeUnit = {
    +      'b': 8,
    +      't': 9,
    +      'n': 0xa,
    +      'v': 0xb,
    +      'f': 0xc,
    +      'r': 0xd
    +    };
    +  
    +    function decodeEscape(charsetPart) {
    +      var cc0 = charsetPart.charCodeAt(0);
    +      if (cc0 !== 92 /* \\ */) {
    +        return cc0;
    +      }
    +      var c1 = charsetPart.charAt(1);
    +      cc0 = escapeCharToCodeUnit[c1];
    +      if (cc0) {
    +        return cc0;
    +      } else if ('0' <= c1 && c1 <= '7') {
    +        return parseInt(charsetPart.substring(1), 8);
    +      } else if (c1 === 'u' || c1 === 'x') {
    +        return parseInt(charsetPart.substring(2), 16);
    +      } else {
    +        return charsetPart.charCodeAt(1);
    +      }
    +    }
    +  
    +    function encodeEscape(charCode) {
    +      if (charCode < 0x20) {
    +        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
    +      }
    +      var ch = String.fromCharCode(charCode);
    +      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
    +        ch = '\\' + ch;
    +      }
    +      return ch;
    +    }
    +  
    +    function caseFoldCharset(charSet) {
    +      var charsetParts = charSet.substring(1, charSet.length - 1).match(
    +          new RegExp(
    +              '\\\\u[0-9A-Fa-f]{4}'
    +              + '|\\\\x[0-9A-Fa-f]{2}'
    +              + '|\\\\[0-3][0-7]{0,2}'
    +              + '|\\\\[0-7]{1,2}'
    +              + '|\\\\[\\s\\S]'
    +              + '|-'
    +              + '|[^-\\\\]',
    +              'g'));
    +      var groups = [];
    +      var ranges = [];
    +      var inverse = charsetParts[0] === '^';
    +      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
    +        var p = charsetParts[i];
    +        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
    +          groups.push(p);
    +        } else {
    +          var start = decodeEscape(p);
    +          var end;
    +          if (i + 2 < n && '-' === charsetParts[i + 1]) {
    +            end = decodeEscape(charsetParts[i + 2]);
    +            i += 2;
    +          } else {
    +            end = start;
    +          }
    +          ranges.push([start, end]);
    +          // If the range might intersect letters, then expand it.
    +          // This case handling is too simplistic.
    +          // It does not deal with non-latin case folding.
    +          // It works for latin source code identifiers though.
    +          if (!(end < 65 || start > 122)) {
    +            if (!(end < 65 || start > 90)) {
    +              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
    +            }
    +            if (!(end < 97 || start > 122)) {
    +              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
    +            }
    +          }
    +        }
    +      }
    +  
    +      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
    +      // -> [[1, 12], [14, 14], [16, 17]]
    +      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
    +      var consolidatedRanges = [];
    +      var lastRange = [NaN, NaN];
    +      for (var i = 0; i < ranges.length; ++i) {
    +        var range = ranges[i];
    +        if (range[0] <= lastRange[1] + 1) {
    +          lastRange[1] = Math.max(lastRange[1], range[1]);
    +        } else {
    +          consolidatedRanges.push(lastRange = range);
    +        }
    +      }
    +  
    +      var out = ['['];
    +      if (inverse) { out.push('^'); }
    +      out.push.apply(out, groups);
    +      for (var i = 0; i < consolidatedRanges.length; ++i) {
    +        var range = consolidatedRanges[i];
    +        out.push(encodeEscape(range[0]));
    +        if (range[1] > range[0]) {
    +          if (range[1] + 1 > range[0]) { out.push('-'); }
    +          out.push(encodeEscape(range[1]));
    +        }
    +      }
    +      out.push(']');
    +      return out.join('');
    +    }
    +  
    +    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
    +      // Split into character sets, escape sequences, punctuation strings
    +      // like ('(', '(?:', ')', '^'), and runs of characters that do not
    +      // include any of the above.
    +      var parts = regex.source.match(
    +          new RegExp(
    +              '(?:'
    +              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
    +              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
    +              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
    +              + '|\\\\[0-9]+'  // a back-reference or octal escape
    +              + '|\\\\[^ux0-9]'  // other escape sequence
    +              + '|\\(\\?[:!=]'  // start of a non-capturing group
    +              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
    +              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
    +              + ')',
    +              'g'));
    +      var n = parts.length;
    +  
    +      // Maps captured group numbers to the number they will occupy in
    +      // the output or to -1 if that has not been determined, or to
    +      // undefined if they need not be capturing in the output.
    +      var capturedGroups = [];
    +  
    +      // Walk over and identify back references to build the capturedGroups
    +      // mapping.
    +      for (var i = 0, groupIndex = 0; i < n; ++i) {
    +        var p = parts[i];
    +        if (p === '(') {
    +          // groups are 1-indexed, so max group index is count of '('
    +          ++groupIndex;
    +        } else if ('\\' === p.charAt(0)) {
    +          var decimalValue = +p.substring(1);
    +          if (decimalValue && decimalValue <= groupIndex) {
    +            capturedGroups[decimalValue] = -1;
    +          }
    +        }
    +      }
    +  
    +      // Renumber groups and reduce capturing groups to non-capturing groups
    +      // where possible.
    +      for (var i = 1; i < capturedGroups.length; ++i) {
    +        if (-1 === capturedGroups[i]) {
    +          capturedGroups[i] = ++capturedGroupIndex;
    +        }
    +      }
    +      for (var i = 0, groupIndex = 0; i < n; ++i) {
    +        var p = parts[i];
    +        if (p === '(') {
    +          ++groupIndex;
    +          if (capturedGroups[groupIndex] === undefined) {
    +            parts[i] = '(?:';
    +          }
    +        } else if ('\\' === p.charAt(0)) {
    +          var decimalValue = +p.substring(1);
    +          if (decimalValue && decimalValue <= groupIndex) {
    +            parts[i] = '\\' + capturedGroups[groupIndex];
    +          }
    +        }
    +      }
    +  
    +      // Remove any prefix anchors so that the output will match anywhere.
    +      // ^^ really does mean an anchored match though.
    +      for (var i = 0, groupIndex = 0; i < n; ++i) {
    +        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
    +      }
    +  
    +      // Expand letters to groups to handle mixing of case-sensitive and
    +      // case-insensitive patterns if necessary.
    +      if (regex.ignoreCase && needToFoldCase) {
    +        for (var i = 0; i < n; ++i) {
    +          var p = parts[i];
    +          var ch0 = p.charAt(0);
    +          if (p.length >= 2 && ch0 === '[') {
    +            parts[i] = caseFoldCharset(p);
    +          } else if (ch0 !== '\\') {
    +            // TODO: handle letters in numeric escapes.
    +            parts[i] = p.replace(
    +                /[a-zA-Z]/g,
    +                function (ch) {
    +                  var cc = ch.charCodeAt(0);
    +                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
    +                });
    +          }
    +        }
    +      }
    +  
    +      return parts.join('');
    +    }
    +  
    +    var rewritten = [];
    +    for (var i = 0, n = regexs.length; i < n; ++i) {
    +      var regex = regexs[i];
    +      if (regex.global || regex.multiline) { throw new Error('' + regex); }
    +      rewritten.push(
    +          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
    +    }
    +  
    +    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
    +  }
    +
    +
    +  /**
    +   * Split markup into a string of source code and an array mapping ranges in
    +   * that string to the text nodes in which they appear.
    +   *
    +   * <p>
    +   * The HTML DOM structure:</p>
    +   * <pre>
    +   * (Element   "p"
    +   *   (Element "b"
    +   *     (Text  "print "))       ; #1
    +   *   (Text    "'Hello '")      ; #2
    +   *   (Element "br")            ; #3
    +   *   (Text    "  + 'World';")) ; #4
    +   * </pre>
    +   * <p>
    +   * corresponds to the HTML
    +   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
    +   *
    +   * <p>
    +   * It will produce the output:</p>
    +   * <pre>
    +   * {
    +   *   sourceCode: "print 'Hello '\n  + 'World';",
    +   *   //                 1         2
    +   *   //       012345678901234 5678901234567
    +   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
    +   * }
    +   * </pre>
    +   * <p>
    +   * where #1 is a reference to the {@code "print "} text node above, and so
    +   * on for the other text nodes.
    +   * </p>
    +   *
    +   * <p>
    +   * The {@code} spans array is an array of pairs.  Even elements are the start
    +   * indices of substrings, and odd elements are the text nodes (or BR elements)
    +   * that contain the text for those substrings.
    +   * Substrings continue until the next index or the end of the source.
    +   * </p>
    +   *
    +   * @param {Node} node an HTML DOM subtree containing source-code.
    +   * @return {Object} source code and the text nodes in which they occur.
    +   */
    +  function extractSourceSpans(node) {
    +    var nocode = /(?:^|\s)nocode(?:\s|$)/;
    +  
    +    var chunks = [];
    +    var length = 0;
    +    var spans = [];
    +    var k = 0;
    +  
    +    var whitespace;
    +    if (node.currentStyle) {
    +      whitespace = node.currentStyle.whiteSpace;
    +    } else if (window.getComputedStyle) {
    +      whitespace = document.defaultView.getComputedStyle(node, null)
    +          .getPropertyValue('white-space');
    +    }
    +    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
    +  
    +    function walk(node) {
    +      switch (node.nodeType) {
    +        case 1:  // Element
    +          if (nocode.test(node.className)) { return; }
    +          for (var child = node.firstChild; child; child = child.nextSibling) {
    +            walk(child);
    +          }
    +          var nodeName = node.nodeName;
    +          if ('BR' === nodeName || 'LI' === nodeName) {
    +            chunks[k] = '\n';
    +            spans[k << 1] = length++;
    +            spans[(k++ << 1) | 1] = node;
    +          }
    +          break;
    +        case 3: case 4:  // Text
    +          var text = node.nodeValue;
    +          if (text.length) {
    +            if (!isPreformatted) {
    +              text = text.replace(/[ \t\r\n]+/g, ' ');
    +            } else {
    +              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
    +            }
    +            // TODO: handle tabs here?
    +            chunks[k] = text;
    +            spans[k << 1] = length;
    +            length += text.length;
    +            spans[(k++ << 1) | 1] = node;
    +          }
    +          break;
    +      }
    +    }
    +  
    +    walk(node);
    +  
    +    return {
    +      sourceCode: chunks.join('').replace(/\n$/, ''),
    +      spans: spans
    +    };
    +  }
    +
    +
    +  /**
    +   * Apply the given language handler to sourceCode and add the resulting
    +   * decorations to out.
    +   * @param {number} basePos the index of sourceCode within the chunk of source
    +   *    whose decorations are already present on out.
    +   */
    +  function appendDecorations(basePos, sourceCode, langHandler, out) {
    +    if (!sourceCode) { return; }
    +    var job = {
    +      sourceCode: sourceCode,
    +      basePos: basePos
    +    };
    +    langHandler(job);
    +    out.push.apply(out, job.decorations);
    +  }
    +
    +  var notWs = /\S/;
    +
    +  /**
    +   * Given an element, if it contains only one child element and any text nodes
    +   * it contains contain only space characters, return the sole child element.
    +   * Otherwise returns undefined.
    +   * <p>
    +   * This is meant to return the CODE element in {@code <pre><code ...>} when
    +   * there is a single child element that contains all the non-space textual
    +   * content, but not to return anything where there are multiple child elements
    +   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
    +   * is textual content.
    +   */
    +  function childContentWrapper(element) {
    +    var wrapper = undefined;
    +    for (var c = element.firstChild; c; c = c.nextSibling) {
    +      var type = c.nodeType;
    +      wrapper = (type === 1)  // Element Node
    +          ? (wrapper ? element : c)
    +          : (type === 3)  // Text Node
    +          ? (notWs.test(c.nodeValue) ? element : wrapper)
    +          : wrapper;
    +    }
    +    return wrapper === element ? undefined : wrapper;
    +  }
    +
    +  /** Given triples of [style, pattern, context] returns a lexing function,
    +    * The lexing function interprets the patterns to find token boundaries and
    +    * returns a decoration list of the form
    +    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
    +    * where index_n is an index into the sourceCode, and style_n is a style
    +    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
    +    * all characters in sourceCode[index_n-1:index_n].
    +    *
    +    * The stylePatterns is a list whose elements have the form
    +    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
    +    *
    +    * Style is a style constant like PR_PLAIN, or can be a string of the
    +    * form 'lang-FOO', where FOO is a language extension describing the
    +    * language of the portion of the token in $1 after pattern executes.
    +    * E.g., if style is 'lang-lisp', and group 1 contains the text
    +    * '(hello (world))', then that portion of the token will be passed to the
    +    * registered lisp handler for formatting.
    +    * The text before and after group 1 will be restyled using this decorator
    +    * so decorators should take care that this doesn't result in infinite
    +    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
    +    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
    +    * '<script>foo()<\/script>', which would cause the current decorator to
    +    * be called with '<script>' which would not match the same rule since
    +    * group 1 must not be empty, so it would be instead styled as PR_TAG by
    +    * the generic tag rule.  The handler registered for the 'js' extension would
    +    * then be called with 'foo()', and finally, the current decorator would
    +    * be called with '<\/script>' which would not match the original rule and
    +    * so the generic tag rule would identify it as a tag.
    +    *
    +    * Pattern must only match prefixes, and if it matches a prefix, then that
    +    * match is considered a token with the same style.
    +    *
    +    * Context is applied to the last non-whitespace, non-comment token
    +    * recognized.
    +    *
    +    * Shortcut is an optional string of characters, any of which, if the first
    +    * character, gurantee that this pattern and only this pattern matches.
    +    *
    +    * @param {Array} shortcutStylePatterns patterns that always start with
    +    *   a known character.  Must have a shortcut string.
    +    * @param {Array} fallthroughStylePatterns patterns that will be tried in
    +    *   order if the shortcut ones fail.  May have shortcuts.
    +    *
    +    * @return {function (Object)} a
    +    *   function that takes source code and returns a list of decorations.
    +    */
    +  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
    +    var shortcuts = {};
    +    var tokenizer;
    +    (function () {
    +      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
    +      var allRegexs = [];
    +      var regexKeys = {};
    +      for (var i = 0, n = allPatterns.length; i < n; ++i) {
    +        var patternParts = allPatterns[i];
    +        var shortcutChars = patternParts[3];
    +        if (shortcutChars) {
    +          for (var c = shortcutChars.length; --c >= 0;) {
    +            shortcuts[shortcutChars.charAt(c)] = patternParts;
    +          }
    +        }
    +        var regex = patternParts[1];
    +        var k = '' + regex;
    +        if (!regexKeys.hasOwnProperty(k)) {
    +          allRegexs.push(regex);
    +          regexKeys[k] = null;
    +        }
    +      }
    +      allRegexs.push(/[\0-\uffff]/);
    +      tokenizer = combinePrefixPatterns(allRegexs);
    +    })();
    +
    +    var nPatterns = fallthroughStylePatterns.length;
    +
    +    /**
    +     * Lexes job.sourceCode and produces an output array job.decorations of
    +     * style classes preceded by the position at which they start in
    +     * job.sourceCode in order.
    +     *
    +     * @param {Object} job an object like <pre>{
    +     *    sourceCode: {string} sourceText plain text,
    +     *    basePos: {int} position of job.sourceCode in the larger chunk of
    +     *        sourceCode.
    +     * }</pre>
    +     */
    +    var decorate = function (job) {
    +      var sourceCode = job.sourceCode, basePos = job.basePos;
    +      /** Even entries are positions in source in ascending order.  Odd enties
    +        * are style markers (e.g., PR_COMMENT) that run from that position until
    +        * the end.
    +        * @type {Array.<number|string>}
    +        */
    +      var decorations = [basePos, PR_PLAIN];
    +      var pos = 0;  // index into sourceCode
    +      var tokens = sourceCode.match(tokenizer) || [];
    +      var styleCache = {};
    +
    +      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
    +        var token = tokens[ti];
    +        var style = styleCache[token];
    +        var match = void 0;
    +
    +        var isEmbedded;
    +        if (typeof style === 'string') {
    +          isEmbedded = false;
    +        } else {
    +          var patternParts = shortcuts[token.charAt(0)];
    +          if (patternParts) {
    +            match = token.match(patternParts[1]);
    +            style = patternParts[0];
    +          } else {
    +            for (var i = 0; i < nPatterns; ++i) {
    +              patternParts = fallthroughStylePatterns[i];
    +              match = token.match(patternParts[1]);
    +              if (match) {
    +                style = patternParts[0];
    +                break;
    +              }
    +            }
    +
    +            if (!match) {  // make sure that we make progress
    +              style = PR_PLAIN;
    +            }
    +          }
    +
    +          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
    +          if (isEmbedded && !(match && typeof match[1] === 'string')) {
    +            isEmbedded = false;
    +            style = PR_SOURCE;
    +          }
    +
    +          if (!isEmbedded) { styleCache[token] = style; }
    +        }
    +
    +        var tokenStart = pos;
    +        pos += token.length;
    +
    +        if (!isEmbedded) {
    +          decorations.push(basePos + tokenStart, style);
    +        } else {  // Treat group 1 as an embedded block of source code.
    +          var embeddedSource = match[1];
    +          var embeddedSourceStart = token.indexOf(embeddedSource);
    +          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
    +          if (match[2]) {
    +            // If embeddedSource can be blank, then it would match at the
    +            // beginning which would cause us to infinitely recurse on the
    +            // entire token, so we catch the right context in match[2].
    +            embeddedSourceEnd = token.length - match[2].length;
    +            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
    +          }
    +          var lang = style.substring(5);
    +          // Decorate the left of the embedded source
    +          appendDecorations(
    +              basePos + tokenStart,
    +              token.substring(0, embeddedSourceStart),
    +              decorate, decorations);
    +          // Decorate the embedded source
    +          appendDecorations(
    +              basePos + tokenStart + embeddedSourceStart,
    +              embeddedSource,
    +              langHandlerForExtension(lang, embeddedSource),
    +              decorations);
    +          // Decorate the right of the embedded section
    +          appendDecorations(
    +              basePos + tokenStart + embeddedSourceEnd,
    +              token.substring(embeddedSourceEnd),
    +              decorate, decorations);
    +        }
    +      }
    +      job.decorations = decorations;
    +    };
    +    return decorate;
    +  }
    +
    +  /** returns a function that produces a list of decorations from source text.
    +    *
    +    * This code treats ", ', and ` as string delimiters, and \ as a string
    +    * escape.  It does not recognize perl's qq() style strings.
    +    * It has no special handling for double delimiter escapes as in basic, or
    +    * the tripled delimiters used in python, but should work on those regardless
    +    * although in those cases a single string literal may be broken up into
    +    * multiple adjacent string literals.
    +    *
    +    * It recognizes C, C++, and shell style comments.
    +    *
    +    * @param {Object} options a set of optional parameters.
    +    * @return {function (Object)} a function that examines the source code
    +    *     in the input job and builds the decoration list.
    +    */
    +  function sourceDecorator(options) {
    +    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
    +    if (options['tripleQuotedStrings']) {
    +      // '''multi-line-string''', 'single-line-string', and double-quoted
    +      shortcutStylePatterns.push(
    +          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
    +           null, '\'"']);
    +    } else if (options['multiLineStrings']) {
    +      // 'multi-line-string', "multi-line-string"
    +      shortcutStylePatterns.push(
    +          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
    +           null, '\'"`']);
    +    } else {
    +      // 'single-line-string', "single-line-string"
    +      shortcutStylePatterns.push(
    +          [PR_STRING,
    +           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
    +           null, '"\'']);
    +    }
    +    if (options['verbatimStrings']) {
    +      // verbatim-string-literal production from the C# grammar.  See issue 93.
    +      fallthroughStylePatterns.push(
    +          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
    +    }
    +    var hc = options['hashComments'];
    +    if (hc) {
    +      if (options['cStyleComments']) {
    +        if (hc > 1) {  // multiline hash comments
    +          shortcutStylePatterns.push(
    +              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
    +        } else {
    +          // Stop C preprocessor declarations at an unclosed open comment
    +          shortcutStylePatterns.push(
    +              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
    +               null, '#']);
    +        }
    +        fallthroughStylePatterns.push(
    +            [PR_STRING,
    +             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
    +             null]);
    +      } else {
    +        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
    +      }
    +    }
    +    if (options['cStyleComments']) {
    +      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
    +      fallthroughStylePatterns.push(
    +          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
    +    }
    +    if (options['regexLiterals']) {
    +      /**
    +       * @const
    +       */
    +      var REGEX_LITERAL = (
    +          // A regular expression literal starts with a slash that is
    +          // not followed by * or / so that it is not confused with
    +          // comments.
    +          '/(?=[^/*])'
    +          // and then contains any number of raw characters,
    +          + '(?:[^/\\x5B\\x5C]'
    +          // escape sequences (\x5C),
    +          +    '|\\x5C[\\s\\S]'
    +          // or non-nesting character sets (\x5B\x5D);
    +          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
    +          // finally closed by a /.
    +          + '/');
    +      fallthroughStylePatterns.push(
    +          ['lang-regex',
    +           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
    +           ]);
    +    }
    +
    +    var types = options['types'];
    +    if (types) {
    +      fallthroughStylePatterns.push([PR_TYPE, types]);
    +    }
    +
    +    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
    +    if (keywords.length) {
    +      fallthroughStylePatterns.push(
    +          [PR_KEYWORD,
    +           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
    +           null]);
    +    }
    +
    +    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
    +    fallthroughStylePatterns.push(
    +        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
    +        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
    +        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
    +        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
    +        [PR_LITERAL,
    +         new RegExp(
    +             '^(?:'
    +             // A hex number
    +             + '0x[a-f0-9]+'
    +             // or an octal or decimal number,
    +             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
    +             // possibly in scientific notation
    +             + '(?:e[+\\-]?\\d+)?'
    +             + ')'
    +             // with an optional modifier like UL for unsigned long
    +             + '[a-z]*', 'i'),
    +         null, '0123456789'],
    +        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
    +        [PR_PLAIN,       /^\\[\s\S]?/, null],
    +        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
    +
    +    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
    +  }
    +
    +  var decorateSource = sourceDecorator({
    +        'keywords': ALL_KEYWORDS,
    +        'hashComments': true,
    +        'cStyleComments': true,
    +        'multiLineStrings': true,
    +        'regexLiterals': true
    +      });
    +
    +  /**
    +   * Given a DOM subtree, wraps it in a list, and puts each line into its own
    +   * list item.
    +   *
    +   * @param {Node} node modified in place.  Its content is pulled into an
    +   *     HTMLOListElement, and each line is moved into a separate list item.
    +   *     This requires cloning elements, so the input might not have unique
    +   *     IDs after numbering.
    +   */
    +  function numberLines(node, opt_startLineNum) {
    +    var nocode = /(?:^|\s)nocode(?:\s|$)/;
    +    var lineBreak = /\r\n?|\n/;
    +  
    +    var document = node.ownerDocument;
    +  
    +    var whitespace;
    +    if (node.currentStyle) {
    +      whitespace = node.currentStyle.whiteSpace;
    +    } else if (window.getComputedStyle) {
    +      whitespace = document.defaultView.getComputedStyle(node, null)
    +          .getPropertyValue('white-space');
    +    }
    +    // If it's preformatted, then we need to split lines on line breaks
    +    // in addition to <BR>s.
    +    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
    +  
    +    var li = document.createElement('LI');
    +    while (node.firstChild) {
    +      li.appendChild(node.firstChild);
    +    }
    +    // An array of lines.  We split below, so this is initialized to one
    +    // un-split line.
    +    var listItems = [li];
    +  
    +    function walk(node) {
    +      switch (node.nodeType) {
    +        case 1:  // Element
    +          if (nocode.test(node.className)) { break; }
    +          if ('BR' === node.nodeName) {
    +            breakAfter(node);
    +            // Discard the <BR> since it is now flush against a </LI>.
    +            if (node.parentNode) {
    +              node.parentNode.removeChild(node);
    +            }
    +          } else {
    +            for (var child = node.firstChild; child; child = child.nextSibling) {
    +              walk(child);
    +            }
    +          }
    +          break;
    +        case 3: case 4:  // Text
    +          if (isPreformatted) {
    +            var text = node.nodeValue;
    +            var match = text.match(lineBreak);
    +            if (match) {
    +              var firstLine = text.substring(0, match.index);
    +              node.nodeValue = firstLine;
    +              var tail = text.substring(match.index + match[0].length);
    +              if (tail) {
    +                var parent = node.parentNode;
    +                parent.insertBefore(
    +                    document.createTextNode(tail), node.nextSibling);
    +              }
    +              breakAfter(node);
    +              if (!firstLine) {
    +                // Don't leave blank text nodes in the DOM.
    +                node.parentNode.removeChild(node);
    +              }
    +            }
    +          }
    +          break;
    +      }
    +    }
    +  
    +    // Split a line after the given node.
    +    function breakAfter(lineEndNode) {
    +      // If there's nothing to the right, then we can skip ending the line
    +      // here, and move root-wards since splitting just before an end-tag
    +      // would require us to create a bunch of empty copies.
    +      while (!lineEndNode.nextSibling) {
    +        lineEndNode = lineEndNode.parentNode;
    +        if (!lineEndNode) { return; }
    +      }
    +  
    +      function breakLeftOf(limit, copy) {
    +        // Clone shallowly if this node needs to be on both sides of the break.
    +        var rightSide = copy ? limit.cloneNode(false) : limit;
    +        var parent = limit.parentNode;
    +        if (parent) {
    +          // We clone the parent chain.
    +          // This helps us resurrect important styling elements that cross lines.
    +          // E.g. in <i>Foo<br>Bar</i>
    +          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
    +          var parentClone = breakLeftOf(parent, 1);
    +          // Move the clone and everything to the right of the original
    +          // onto the cloned parent.
    +          var next = limit.nextSibling;
    +          parentClone.appendChild(rightSide);
    +          for (var sibling = next; sibling; sibling = next) {
    +            next = sibling.nextSibling;
    +            parentClone.appendChild(sibling);
    +          }
    +        }
    +        return rightSide;
    +      }
    +  
    +      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
    +  
    +      // Walk the parent chain until we reach an unattached LI.
    +      for (var parent;
    +           // Check nodeType since IE invents document fragments.
    +           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
    +        copiedListItem = parent;
    +      }
    +      // Put it on the list of lines for later processing.
    +      listItems.push(copiedListItem);
    +    }
    +  
    +    // Split lines while there are lines left to split.
    +    for (var i = 0;  // Number of lines that have been split so far.
    +         i < listItems.length;  // length updated by breakAfter calls.
    +         ++i) {
    +      walk(listItems[i]);
    +    }
    +  
    +    // Make sure numeric indices show correctly.
    +    if (opt_startLineNum === (opt_startLineNum|0)) {
    +      listItems[0].setAttribute('value', opt_startLineNum);
    +    }
    +  
    +    var ol = document.createElement('OL');
    +    ol.className = 'linenums';
    +    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
    +    for (var i = 0, n = listItems.length; i < n; ++i) {
    +      li = listItems[i];
    +      // Stick a class on the LIs so that stylesheets can
    +      // color odd/even rows, or any other row pattern that
    +      // is co-prime with 10.
    +      li.className = 'L' + ((i + offset) % 10);
    +      if (!li.firstChild) {
    +        li.appendChild(document.createTextNode('\xA0'));
    +      }
    +      ol.appendChild(li);
    +    }
    +  
    +    node.appendChild(ol);
    +  }
    +
    +  /**
    +   * Breaks {@code job.sourceCode} around style boundaries in
    +   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
    +   * @param {Object} job like <pre>{
    +   *    sourceCode: {string} source as plain text,
    +   *    spans: {Array.<number|Node>} alternating span start indices into source
    +   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
    +   *       span.
    +   *    decorations: {Array.<number|string} an array of style classes preceded
    +   *       by the position at which they start in job.sourceCode in order
    +   * }</pre>
    +   * @private
    +   */
    +  function recombineTagsAndDecorations(job) {
    +    var isIE = /\bMSIE\b/.test(navigator.userAgent);
    +    var newlineRe = /\n/g;
    +  
    +    var source = job.sourceCode;
    +    var sourceLength = source.length;
    +    // Index into source after the last code-unit recombined.
    +    var sourceIndex = 0;
    +  
    +    var spans = job.spans;
    +    var nSpans = spans.length;
    +    // Index into spans after the last span which ends at or before sourceIndex.
    +    var spanIndex = 0;
    +  
    +    var decorations = job.decorations;
    +    var nDecorations = decorations.length;
    +    // Index into decorations after the last decoration which ends at or before
    +    // sourceIndex.
    +    var decorationIndex = 0;
    +  
    +    // Remove all zero-length decorations.
    +    decorations[nDecorations] = sourceLength;
    +    var decPos, i;
    +    for (i = decPos = 0; i < nDecorations;) {
    +      if (decorations[i] !== decorations[i + 2]) {
    +        decorations[decPos++] = decorations[i++];
    +        decorations[decPos++] = decorations[i++];
    +      } else {
    +        i += 2;
    +      }
    +    }
    +    nDecorations = decPos;
    +  
    +    // Simplify decorations.
    +    for (i = decPos = 0; i < nDecorations;) {
    +      var startPos = decorations[i];
    +      // Conflate all adjacent decorations that use the same style.
    +      var startDec = decorations[i + 1];
    +      var end = i + 2;
    +      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
    +        end += 2;
    +      }
    +      decorations[decPos++] = startPos;
    +      decorations[decPos++] = startDec;
    +      i = end;
    +    }
    +  
    +    nDecorations = decorations.length = decPos;
    +  
    +    var decoration = null;
    +    while (spanIndex < nSpans) {
    +      var spanStart = spans[spanIndex];
    +      var spanEnd = spans[spanIndex + 2] || sourceLength;
    +  
    +      var decStart = decorations[decorationIndex];
    +      var decEnd = decorations[decorationIndex + 2] || sourceLength;
    +  
    +      var end = Math.min(spanEnd, decEnd);
    +  
    +      var textNode = spans[spanIndex + 1];
    +      var styledText;
    +      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
    +          // Don't introduce spans around empty text nodes.
    +          && (styledText = source.substring(sourceIndex, end))) {
    +        // This may seem bizarre, and it is.  Emitting LF on IE causes the
    +        // code to display with spaces instead of line breaks.
    +        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
    +        // space to appear at the beginning of every line but the first.
    +        // Emitting an old Mac OS 9 line separator makes everything spiffy.
    +        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
    +        textNode.nodeValue = styledText;
    +        var document = textNode.ownerDocument;
    +        var span = document.createElement('SPAN');
    +        span.className = decorations[decorationIndex + 1];
    +        var parentNode = textNode.parentNode;
    +        parentNode.replaceChild(span, textNode);
    +        span.appendChild(textNode);
    +        if (sourceIndex < spanEnd) {  // Split off a text node.
    +          spans[spanIndex + 1] = textNode
    +              // TODO: Possibly optimize by using '' if there's no flicker.
    +              = document.createTextNode(source.substring(end, spanEnd));
    +          parentNode.insertBefore(textNode, span.nextSibling);
    +        }
    +      }
    +  
    +      sourceIndex = end;
    +  
    +      if (sourceIndex >= spanEnd) {
    +        spanIndex += 2;
    +      }
    +      if (sourceIndex >= decEnd) {
    +        decorationIndex += 2;
    +      }
    +    }
    +  }
    +
    +
    +  /** Maps language-specific file extensions to handlers. */
    +  var langHandlerRegistry = {};
    +  /** Register a language handler for the given file extensions.
    +    * @param {function (Object)} handler a function from source code to a list
    +    *      of decorations.  Takes a single argument job which describes the
    +    *      state of the computation.   The single parameter has the form
    +    *      {@code {
    +    *        sourceCode: {string} as plain text.
    +    *        decorations: {Array.<number|string>} an array of style classes
    +    *                     preceded by the position at which they start in
    +    *                     job.sourceCode in order.
    +    *                     The language handler should assigned this field.
    +    *        basePos: {int} the position of source in the larger source chunk.
    +    *                 All positions in the output decorations array are relative
    +    *                 to the larger source chunk.
    +    *      } }
    +    * @param {Array.<string>} fileExtensions
    +    */
    +  function registerLangHandler(handler, fileExtensions) {
    +    for (var i = fileExtensions.length; --i >= 0;) {
    +      var ext = fileExtensions[i];
    +      if (!langHandlerRegistry.hasOwnProperty(ext)) {
    +        langHandlerRegistry[ext] = handler;
    +      } else if (window['console']) {
    +        console['warn']('cannot override language handler %s', ext);
    +      }
    +    }
    +  }
    +  function langHandlerForExtension(extension, source) {
    +    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
    +      // Treat it as markup if the first non whitespace character is a < and
    +      // the last non-whitespace character is a >.
    +      extension = /^\s*</.test(source)
    +          ? 'default-markup'
    +          : 'default-code';
    +    }
    +    return langHandlerRegistry[extension];
    +  }
    +  registerLangHandler(decorateSource, ['default-code']);
    +  registerLangHandler(
    +      createSimpleLexer(
    +          [],
    +          [
    +           [PR_PLAIN,       /^[^<?]+/],
    +           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
    +           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
    +           // Unescaped content in an unknown language
    +           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
    +           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
    +           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
    +           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
    +           // Unescaped content in javascript.  (Or possibly vbscript).
    +           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
    +           // Contains unescaped stylesheet content
    +           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
    +           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
    +          ]),
    +      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
    +  registerLangHandler(
    +      createSimpleLexer(
    +          [
    +           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
    +           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
    +           ],
    +          [
    +           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
    +           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
    +           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
    +           [PR_PUNCTUATION,  /^[=<>\/]+/],
    +           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
    +           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
    +           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
    +           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
    +           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
    +           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
    +           ]),
    +      ['in.tag']);
    +  registerLangHandler(
    +      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': CPP_KEYWORDS,
    +          'hashComments': true,
    +          'cStyleComments': true,
    +          'types': C_TYPES
    +        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': 'null,true,false'
    +        }), ['json']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': CSHARP_KEYWORDS,
    +          'hashComments': true,
    +          'cStyleComments': true,
    +          'verbatimStrings': true,
    +          'types': C_TYPES
    +        }), ['cs']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': JAVA_KEYWORDS,
    +          'cStyleComments': true
    +        }), ['java']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': SH_KEYWORDS,
    +          'hashComments': true,
    +          'multiLineStrings': true
    +        }), ['bsh', 'csh', 'sh']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': PYTHON_KEYWORDS,
    +          'hashComments': true,
    +          'multiLineStrings': true,
    +          'tripleQuotedStrings': true
    +        }), ['cv', 'py']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': PERL_KEYWORDS,
    +          'hashComments': true,
    +          'multiLineStrings': true,
    +          'regexLiterals': true
    +        }), ['perl', 'pl', 'pm']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': RUBY_KEYWORDS,
    +          'hashComments': true,
    +          'multiLineStrings': true,
    +          'regexLiterals': true
    +        }), ['rb']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': JSCRIPT_KEYWORDS,
    +          'cStyleComments': true,
    +          'regexLiterals': true
    +        }), ['js']);
    +  registerLangHandler(sourceDecorator({
    +          'keywords': COFFEE_KEYWORDS,
    +          'hashComments': 3,  // ### style block comments
    +          'cStyleComments': true,
    +          'multilineStrings': true,
    +          'tripleQuotedStrings': true,
    +          'regexLiterals': true
    +        }), ['coffee']);
    +  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
    +
    +  function applyDecorator(job) {
    +    var opt_langExtension = job.langExtension;
    +
    +    try {
    +      // Extract tags, and convert the source code to plain text.
    +      var sourceAndSpans = extractSourceSpans(job.sourceNode);
    +      /** Plain text. @type {string} */
    +      var source = sourceAndSpans.sourceCode;
    +      job.sourceCode = source;
    +      job.spans = sourceAndSpans.spans;
    +      job.basePos = 0;
    +
    +      // Apply the appropriate language handler
    +      langHandlerForExtension(opt_langExtension, source)(job);
    +
    +      // Integrate the decorations and tags back into the source code,
    +      // modifying the sourceNode in place.
    +      recombineTagsAndDecorations(job);
    +    } catch (e) {
    +      if ('console' in window) {
    +        console['log'](e && e['stack'] ? e['stack'] : e);
    +      }
    +    }
    +  }
    +
    +  /**
    +   * @param sourceCodeHtml {string} The HTML to pretty print.
    +   * @param opt_langExtension {string} The language name to use.
    +   *     Typically, a filename extension like 'cpp' or 'java'.
    +   * @param opt_numberLines {number|boolean} True to number lines,
    +   *     or the 1-indexed number of the first line in sourceCodeHtml.
    +   */
    +  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
    +    var container = document.createElement('PRE');
    +    // This could cause images to load and onload listeners to fire.
    +    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
    +    // We assume that the inner HTML is from a trusted source.
    +    container.innerHTML = sourceCodeHtml;
    +    if (opt_numberLines) {
    +      numberLines(container, opt_numberLines);
    +    }
    +
    +    var job = {
    +      langExtension: opt_langExtension,
    +      numberLines: opt_numberLines,
    +      sourceNode: container
    +    };
    +    applyDecorator(job);
    +    return container.innerHTML;
    +  }
    +
    +  function prettyPrint(opt_whenDone) {
    +    function byTagName(tn) { return document.getElementsByTagName(tn); }
    +    // fetch a list of nodes to rewrite
    +    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
    +    var elements = [];
    +    for (var i = 0; i < codeSegments.length; ++i) {
    +      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
    +        elements.push(codeSegments[i][j]);
    +      }
    +    }
    +    codeSegments = null;
    +
    +    var clock = Date;
    +    if (!clock['now']) {
    +      clock = { 'now': function () { return +(new Date); } };
    +    }
    +
    +    // The loop is broken into a series of continuations to make sure that we
    +    // don't make the browser unresponsive when rewriting a large page.
    +    var k = 0;
    +    var prettyPrintingJob;
    +
    +    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
    +    var prettyPrintRe = /\bprettyprint\b/;
    +
    +    function doWork() {
    +      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
    +                     clock['now']() + 250 /* ms */ :
    +                     Infinity);
    +      for (; k < elements.length && clock['now']() < endTime; k++) {
    +        var cs = elements[k];
    +        var className = cs.className;
    +        if (className.indexOf('prettyprint') >= 0) {
    +          // If the classes includes a language extensions, use it.
    +          // Language extensions can be specified like
    +          //     <pre class="prettyprint lang-cpp">
    +          // the language extension "cpp" is used to find a language handler as
    +          // passed to PR.registerLangHandler.
    +          // HTML5 recommends that a language be specified using "language-"
    +          // as the prefix instead.  Google Code Prettify supports both.
    +          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
    +          var langExtension = className.match(langExtensionRe);
    +          // Support <pre class="prettyprint"><code class="language-c">
    +          var wrapper;
    +          if (!langExtension && (wrapper = childContentWrapper(cs))
    +              && "CODE" === wrapper.tagName) {
    +            langExtension = wrapper.className.match(langExtensionRe);
    +          }
    +
    +          if (langExtension) {
    +            langExtension = langExtension[1];
    +          }
    +
    +          // make sure this is not nested in an already prettified element
    +          var nested = false;
    +          for (var p = cs.parentNode; p; p = p.parentNode) {
    +            if ((p.tagName === 'pre' || p.tagName === 'code' ||
    +                 p.tagName === 'xmp') &&
    +                p.className && p.className.indexOf('prettyprint') >= 0) {
    +              nested = true;
    +              break;
    +            }
    +          }
    +          if (!nested) {
    +            // Look for a class like linenums or linenums:<n> where <n> is the
    +            // 1-indexed number of the first line.
    +            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
    +            lineNums = lineNums
    +                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
    +                  : false;
    +            if (lineNums) { numberLines(cs, lineNums); }
    +
    +            // do the pretty printing
    +            prettyPrintingJob = {
    +              langExtension: langExtension,
    +              sourceNode: cs,
    +              numberLines: lineNums
    +            };
    +            applyDecorator(prettyPrintingJob);
    +          }
    +        }
    +      }
    +      if (k < elements.length) {
    +        // finish up in a continuation
    +        setTimeout(doWork, 250);
    +      } else if (opt_whenDone) {
    +        opt_whenDone();
    +      }
    +    }
    +
    +    doWork();
    +  }
    +
    +   /**
    +    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
    +    * {@code class=prettyprint} and prettify them.
    +    *
    +    * @param {Function?} opt_whenDone if specified, called when the last entry
    +    *     has been finished.
    +    */
    +  window['prettyPrintOne'] = prettyPrintOne;
    +   /**
    +    * Pretty print a chunk of code.
    +    *
    +    * @param {string} sourceCodeHtml code as html
    +    * @return {string} code as html, but prettier
    +    */
    +  window['prettyPrint'] = prettyPrint;
    +   /**
    +    * Contains functions for creating and registering new language handlers.
    +    * @type {Object}
    +    */
    +  window['PR'] = {
    +        'createSimpleLexer': createSimpleLexer,
    +        'registerLangHandler': registerLangHandler,
    +        'sourceDecorator': sourceDecorator,
    +        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
    +        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
    +        'PR_COMMENT': PR_COMMENT,
    +        'PR_DECLARATION': PR_DECLARATION,
    +        'PR_KEYWORD': PR_KEYWORD,
    +        'PR_LITERAL': PR_LITERAL,
    +        'PR_NOCODE': PR_NOCODE,
    +        'PR_PLAIN': PR_PLAIN,
    +        'PR_PUNCTUATION': PR_PUNCTUATION,
    +        'PR_SOURCE': PR_SOURCE,
    +        'PR_STRING': PR_STRING,
    +        'PR_TAG': PR_TAG,
    +        'PR_TYPE': PR_TYPE
    +      };
    +})();
    diff --git a/index.htm b/examples/main.html
    similarity index 96%
    rename from index.htm
    rename to examples/main.html
    index 6dff5ca..0ea3874 100644
    --- a/index.htm
    +++ b/examples/main.html
    @@ -1,26 +1,31 @@
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     <html>
    -  <head>
    -    <title>slimScroll demo</title>
    -    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<head>
    +<title>jquery.slimscroll - height / width</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimScroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
     
    -	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    -	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    -	
    -	<script type="text/javascript" src="slimScroll.js"></script>
    -	<style type="text/css">
    -		* { font-family:Tahoma,sans-serif; font-size:12px; color:#000; }
    -		h1 { font-size:20px; margin:0 }
    -		h2 { font-size:14px; margin:0 }
    -		p { margin:5px 0; }
    -		.slimScrollDiv { border: 1px solid #ccc; margin:10px; }
    -		#multi-test { }
    -	</style>
    -  </head>
    -  <body>
    -	  <h1>jQuery slimScroll</h1>
    -	  <h2>Facebook-like jQuery Scrollbar</h1>
    -	  
     	  <hr /><h2>chainability & always visible & start at the bottom test & small mouse wheel step</h2>
     	  <div id="test1">
     		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    @@ -79,8 +84,10 @@ <h2>rail always visible test (rail color, opacity test), external setting scroll
     		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
     		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
     	  </div>
    -	      <input type="button" id="scrollDown" value="scroll down by 50 px" />
    +	  <input type="button" id="scrollDown" value="scroll down by 50 px" />
           <input type="button" id="scrollUp" value="scroll up by 50 px" />
    +
    +      
           <hr />
     	<h2>rail visible test, allowPageScroll true & mobile touch step</h2>
     	
    @@ -135,9 +142,8 @@ <h2>rail visible test, allowPageScroll true & mobile touch step</h2>
     		<p><b>scrollbar should not appear here</b></p>
     		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
     		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
     	</div>
    -	
    +</div>
     	
     	  <script type="text/javascript">
     		  $(function(){
    @@ -196,11 +202,11 @@ <h2>rail visible test, allowPageScroll true & mobile touch step</h2>
     			  });
                   //scrolling buttons test
     			  $('#scrollDown').click(function(){
    -				  $('#testrailalwaysvisible').slimScroll({ scroll: '50px' });
    +				  $('#testrailalwaysvisible').slimScroll({ scrollBy: '50px' });
     			  });
     			  $('#scrollUp').click(function(){
    -				  $('#testrailalwaysvisible').slimScroll({ scroll: '-50px' });
    -			  });
    +				  $('#testrailalwaysvisible').slimScroll({ scrollBy: '-50px' });
    +			  });		  
     			  //no initial content
     			  var somecontent = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>";
     			  $('#noinitialcontent').slimScroll({ 
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    new file mode 100644
    index 0000000..e714ba3
    --- /dev/null
    +++ b/examples/programmatic-scrolling.html
    @@ -0,0 +1,147 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - programmatic scrolling</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +  <input type="button" id="scrollDown" value="scroll down by 50 px" />
    +  <input type="button" id="scrollUp" value="scroll up by 50 px" />
    +
    +
    +<pre class="prettyprint">
    +$('#testDiv').slimscroll({
    +  height: '250px'
    +});
    +
    +$('#scrollDown').click(function(){
    +  $('#testDiv').slimScroll({ scrollBy: '50px' });
    +});
    +
    +$('#scrollUp').click(function(){
    +  $('#testDiv').slimScroll({ scrollBy: '-50px' });
    +});
    +</pre>
    +
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +  <input type="button" id="scrollDownTo" value="Scroll to 300px from the top" />
    +  <input type="button" id="scrollUpTo" value="Scroll to 20px from the top" />
    +  
    +
    +<pre class="prettyprint">
    +$('#testDiv2').slimscroll({
    +  height: '250px'
    +});
    +
    +$('#scrollDownTo').click(function(){
    +  $('#testDiv2').slimScroll({ scrollTo: '300px' });
    +});
    +
    +$('#scrollUpTo').click(function(){
    +  $('#testDiv2').slimScroll({ scrollTo: '20px' });
    +});
    +</pre>
    +
    +
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +      $('#testDiv').slimscroll({
    +        height: '250px'
    +      });
    +
    +      $('#scrollDown').click(function(){
    +        $('#testDiv').slimScroll({ scrollBy: '50px' });
    +      });
    +
    +      $('#scrollUp').click(function(){
    +        $('#testDiv').slimScroll({ scrollBy: '-50px' });
    +      });
    +
    +      $('#testDiv2').slimscroll({
    +        height: '250px'
    +      });
    +
    +      $('#scrollDownTo').click(function(){
    +        $('#testDiv2').slimScroll({ scrollTo: '300px' });
    +      });
    +
    +      $('#scrollUpTo').click(function(){
    +        $('#testDiv2').slimScroll({ scrollTo: '20px' });
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/index.min.htm b/index.min.htm
    deleted file mode 100644
    index 687677c..0000000
    --- a/index.min.htm
    +++ /dev/null
    @@ -1,218 +0,0 @@
    -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    -<html>
    -  <head>
    -    <title>slimScroll demo</title>
    -    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -
    -	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    -	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    -	
    -	<script type="text/javascript" src="slimScroll.min.js"></script>
    -	<style type="text/css">
    -		* { font-family:Tahoma,sans-serif; font-size:12px; color:#000; }
    -		h1 { font-size:20px; margin:0 }
    -		h2 { font-size:14px; margin:0 }
    -		p { margin:5px 0; }
    -		.slimScrollDiv { border: 1px solid #ccc; margin:10px; }
    -		#multi-test { }
    -	</style>
    -  </head>
    -  <body>
    -	  <h1>jQuery slimScroll</h1>
    -	  <h2>Facebook-like jQuery Scrollbar</h1>
    -	  
    -	  <hr /><h2>chainability & always visible & start at the bottom test & small mouse wheel step</h2>
    -	  <div id="test1">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -	  	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -	  
    -	  </div>
    -<hr />
    -	  <table>
    -		  <tr><td valign="top">
    -	<h2>start at the element offsetTop test & top/bottom events</h2>
    -	  <div id="test1a">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p><span id="testElement" style="background:red;"> Scroll here </span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -	  </div>
    -	  <div id="test1aout"></div>
    -	</td><td>
    -	<h2>start at the element offsetTop test (multiple elements) & disable fadeOut</h2>
    -	  <div id="test1b">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p><span class="blah" style="background:green;"> Do not scroll here </span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p><span class="blah" style="background:green;"> Scroll here </span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -	  </div>				  
    -	</td></tr>
    -	  </table>
    -			  
    -<hr />
    -	<h2>rail always visible test (rail color, opacity test), external setting scroll value test</h2>
    -	
    -
    -	  <div id="testrailalwaysvisible">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -	  </div>
    -	      <input type="button" id="scrollDown" value="scroll down by 50 px" />
    -      <input type="button" id="scrollUp" value="scroll up by 50 px" />
    -      <hr />
    -	<h2>rail visible test, allowPageScroll true & mobile touch step</h2>
    -	
    -
    -	  <div id="testrailvisible">
    -		  
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -	  </div>				  
    -
    -<div style="clear:both"></div>
    -	   <hr /><h2>scrollbar on left test</h2>
    -	  <div id="test2">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div>
    -	  
    -	<hr /><h2>float:left test, .slimscroll(), distance: 20px</h2>
    -	  <div id="test3" style="float:left">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div>
    -	    <hr /><h2>Multiple elements test:</h2>
    -		<table id="multi-test">
    -		<tr>
    -			<td><div class="multi">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div></td>
    -	  			<td><div class="multi">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div></td>
    -	<td><div class="multi">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div></td>	  <tr>
    -		</table>
    -	<hr /><h2>No initial content test & always visible</h2>
    -	<div id="noinitialcontent"></div>
    -	
    -	<hr /><h2>Not enough content to scroll test</h2>
    -	<div id="notlongenough">
    -		<p><b>scrollbar should not appear here</b></p>
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	</div>
    -	
    -	
    -	  <script type="text/javascript">
    -		  $(function(){
    -			  $('#test1').slimScroll({
    -				  height: '250px',
    -				  alwaysVisible: true,
    -				  start: 'bottom',
    -				  wheelStep: 10
    -			  }).css({ background: '#ccc', paddingRight: '10px' });
    -			  $('#test1a').slimscroll({
    -				  width: '400px',
    -				  height: '200px',
    -				  start: $('#testElement'),
    -				  alwaysVisible: true
    -			  }).bind('slimscroll', function(e, pos){
    -				$('#test1aout').html($('#test1aout').html() + "Reached " + pos + "<br />");
    -			  });
    -
    -			  $('#test1b').slimScroll({
    -				  height: '200px',
    -				  width: '400px',
    -				  start: $('.blah:eq(1)'),
    -				  disableFadeOut: true
    -			  });
    -			  $('#test2').slimScroll({
    -				  position: 'left',
    -				  width: '300px',
    -				  height: '250px'
    -			  });
    -			  //invalid name call
    -			  $('#test3').slimscroll({
    -				  color: '#00f',
    -				  size: '10px',
    -				  width: '300px',
    -				  height: '250px',
    -				  distance: '20px'
    -			  });
    -			  //multiple elemenets
    -			  $('.multi').slimScroll({
    -				  height: '250px',
    -				  width: '200px'
    -			  });
    -			  $('#testrailvisible').slimscroll({
    -				  width: '300px',
    -				  railVisible: true,
    -				  allowPageScroll: true,
    -				  touchScrollStep: 1000
    -			  });
    -			  $('#testrailalwaysvisible').slimscroll({
    -				  width: '300px',
    -				  railVisible: true,
    -				  alwaysVisible: true,
    -				  railColor: '#f00',
    -				  opacity: 1,
    -				  color: '#333'
    -			  });
    -              //scrolling buttons test
    -			  $('#scrollDown').click(function(){
    -				  $('#testrailalwaysvisible').slimScroll({ scroll: '50px' });
    -			  });
    -			  $('#scrollUp').click(function(){
    -				  $('#testrailalwaysvisible').slimScroll({ scroll: '-50px' });
    -			  });
    -			  //no initial content
    -			  var somecontent = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>";
    -			  $('#noinitialcontent').slimScroll({ 
    -				  width: '300px',
    -				  alwaysVisible: true
    -			  }).html(somecontent);
    -			  
    -			  //not long enough test
    -			  $('#notlongenough').slimScroll({ width:'400px', height:'300px' });
    -			  
    -		  });
    -	  </script>
    -	  
    -  </body>
    -</html>
    \ No newline at end of file
    diff --git a/slimScroll.js b/jquery.slimscroll.js
    similarity index 86%
    rename from slimScroll.js
    rename to jquery.slimscroll.js
    index ddfb530..dd0aa3c 100644
    --- a/slimScroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 0.6.5
    + * Version: 1.0.0
      * 
      */
     (function($) {
    @@ -28,9 +28,9 @@
             railClass : 'slimScrollRail',
             barClass : 'slimScrollBar',
             wrapperClass : 'slimScrollDiv',
    -        allowPageScroll: false,
    -        scroll: 0,
    -        touchScrollStep: 200
    +        allowPageScroll : false,
    +        scroll : 0,
    +        touchScrollStep : 200
           };
     
           var o = $.extend(defaults, options);
    @@ -47,46 +47,34 @@
             // used in event handlers and for better minification
             var me = $(this);
     
    -        //ensure we are not binding it again
    +        // ensure we are not binding it again
             if (me.parent().hasClass('slimScrollDiv'))
             {
    -            //check if we should scroll existing instance
    -            if (options && ('scroll' in options))
    +            // start from last bar position
    +            var offset = me.scrollTop();
    +
    +            // find bar and rail
    +            bar = me.parent().find('.slimScrollBar');
    +            rail = me.parent().find('.slimScrollRail');
    +
    +            // check if we should scroll existing instance
    +            if (options)
                 {
    -                //find bar and rail
    -                bar = me.parent().find('.slimScrollBar');
    -                rail = me.parent().find('.slimScrollRail');
    -
    -				//scroll either by relative or absolute amount
    -                var offset = 0;
    -                var value = o.scroll;
    -                if(typeof(value) == 'string')
    -                {
    -                    if(value.charAt(1) == '=')
    -                    {
    -                        //can be one of '+=', '-='
    -                        offset =  me.scrollTop();
    -                        var op = value.charAt(0);
    -                        
    -						value = parseInt(value.substr(2));
    -                        
    -                        if(op == '-')
    -                            value *= -1;
    -                        
    -                        offset += value;
    -                    }
    -                    else
    -                    {
    -                        offset = parseInt(value);
    -                    }
    -                }
    -                else
    -                {
    -                    offset = value;
    -                }
    -                scrollContent( offset, false, true);
    +              if ('scrollTo' in options)
    +              {
    +                // jump to a static point
    +                offset = parseInt(o.scrollTo);
    +              }
    +              else if ('scrollBy' in options)
    +              {
    +                // jump by value pixels
    +                offset += parseInt(o.scrollBy);
    +              }
    +
    +              //scroll content by the given offset
    +              scrollContent(offset, false, true);
                 }
    -	
    +
                 return;
             }
     
    @@ -197,7 +185,7 @@
               {
                 // record where touch started
                 touchDif = e.originalEvent.touches[0].pageY;
    -          }            
    +          }
             });
     
             me.bind('touchmove', function(e){
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    new file mode 100644
    index 0000000..0e75c01
    --- /dev/null
    +++ b/jquery.slimscroll.min.js
    @@ -0,0 +1,14 @@
    +/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
    + * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
    + * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
    + *
    + * Version: 1.0.0
    + * 
    + */
    + (function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function e(k,d,e){var f=k;d&&(f=parseInt(c.css("top"))+k*parseInt(a.wheelStep)/
    +100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));g=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=g*(b[0].scrollHeight-b.outerHeight());e&&(f=k,k=f/b[0].scrollHeight*b.outerHeight(),c.css({top:k+"px"}));b.scrollTop(f);q();l()}function v(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:r+"px"})}function q(){v();clearTimeout(w);g==~~g&&(n=a.allowPageScroll,x!=g&&b.trigger("slimscroll",0==~~g?"top":"bottom"));
    +x=g;r>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function l(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!s&&!t)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var p,s,t,w,y,r,g,x,A=30,n=!1,b=d(this);if(b.parent().hasClass("slimScrollDiv")){var j=b.scrollTop(),c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail");m&&("scrollTo"in m?j=parseInt(a.scrollTo):"scrollBy"in m&&(j+=parseInt(a.scrollBy)),e(j,!1,
    +!0))}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;j=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=d("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:a.color,
    +width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};h.css(z);c.css(z);b.wrap(j);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){t=!0},stop:function(){t=!1;l()},drag:function(){e(0,d(this).position().top,!1)}});h.hover(function(){q()},function(){l()});
    +c.hover(function(){s=!0},function(){s=!1});b.hover(function(){p=!0;q();l()},function(){p=!1;l()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&e((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var u=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);e(b,!0);a.preventDefault&&!n&&
    +a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();v();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),e(0,!0)):"object"==typeof a.start&&(e(d(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    diff --git a/package.json b/package.json
    index c938706..7ade21f 100644
    --- a/package.json
    +++ b/package.json
    @@ -34,11 +34,10 @@
             }
         ],
         "files": [
    -        "slimScroll.min.js",
    -		"slimScroll.js",
    -		"index.min.html",
    -		"index.htm",
    -		"README.md",
    -		"package.json"
    +        "jquery.slimscroll.min.js",
    +        "jquery.slimscroll.js",
    +        "examples/",
    +        "README.md",
    +        "package.json"
         ]
     }
    \ No newline at end of file
    diff --git a/slimScroll.min.js b/slimScroll.min.js
    deleted file mode 100644
    index 5a444df..0000000
    --- a/slimScroll.min.js
    +++ /dev/null
    @@ -1,7 +0,0 @@
    -/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
    - * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
    - * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
    - *
    - * Version: 0.6.5
    - * 
    - */(function(e){jQuery.fn.extend({slimScroll:function(t){var n={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},r=e.extend(n,t);return this.each(function(){function T(e,t,n){var i=e;if(t){i=parseInt(E.css("top"))+e*parseInt(r.wheelStep)/100*E.outerHeight();var s=v.outerHeight()-E.outerHeight();i=Math.min(Math.max(i,0),s),E.css({top:i+"px"})}l=parseInt(E.css("top"))/(v.outerHeight()-E.outerHeight()),i=l*(v[0].scrollHeight-v.outerHeight());if(n){i=e;var u=i/v[0].scrollHeight*v.outerHeight();E.css({top:u+"px"})}v.scrollTop(i),k(),L()}function C(){f=Math.max(v.outerHeight()/v[0].scrollHeight*v.outerHeight(),p),E.css({height:f+"px"})}function k(){C(),clearTimeout(u);if(l==~~l){d=r.allowPageScroll;if(c!=l){var e=~~l==0?"top":"bottom";v.trigger("slimscroll",e)}}c=l;if(f>=v.outerHeight()){d=!0;return}E.stop(!0,!0).fadeIn("fast"),r.railVisible&&w.stop(!0,!0).fadeIn("fast")}function L(){r.alwaysVisible||(u=setTimeout(function(){(!r.disableFadeOut||!n)&&!i&&!s&&(E.fadeOut("slow"),w.fadeOut("slow"))},1e3))}var n,i,s,u,a,f,l,c,h="<div></div>",p=30,d=!1,v=e(this);if(v.parent().hasClass("slimScrollDiv")){if(t&&"scroll"in t){E=v.parent().find(".slimScrollBar"),w=v.parent().find(".slimScrollRail");var m=0,g=r.scroll;if(typeof g=="string")if(g.charAt(1)=="="){m=v.scrollTop();var y=g.charAt(0);g=parseInt(g.substr(2)),y=="-"&&(g*=-1),m+=g}else m=parseInt(g);else m=g;T(m,!1,!0)}return}var b=e(h).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});v.css({overflow:"hidden",width:r.width,height:r.height});var w=e(h).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.size,background:r.railColor,opacity:r.railOpacity,zIndex:90}),E=e(h).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.size,BorderRadius:r.size,MozBorderRadius:r.size,WebkitBorderRadius:r.size,zIndex:99}),S=r.position=="right"?{right:r.distance}:{left:r.distance};w.css(S),E.css(S),v.wrap(b),v.parent().append(E),v.parent().append(w),E.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1,L()},drag:function(t){T(0,e(this).position().top,!1)}}),w.hover(function(){k()},function(){L()}),E.hover(function(){i=!0},function(){i=!1}),v.hover(function(){n=!0,k(),L()},function(){n=!1,L()}),v.bind("touchstart",function(e,t){e.originalEvent.touches.length&&(a=e.originalEvent.touches[0].pageY)}),v.bind("touchmove",function(e){e.originalEvent.preventDefault();if(e.originalEvent.touches.length){var t=(a-e.originalEvent.touches[0].pageY)/r.touchScrollStep;T(t,!0)}});var x=function(e){if(!n)return;var e=e||window.event,t=0;e.wheelDelta&&(t=-e.wheelDelta/120),e.detail&&(t=e.detail/3),T(t,!0),e.preventDefault&&!d&&e.preventDefault(),d||(e.returnValue=!1)},N=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",x,!1),this.addEventListener("mousewheel",x,!1)):document.attachEvent("onmousewheel",x)};N(),C(),r.start=="bottom"?(E.css({top:v.outerHeight()-E.outerHeight()}),T(0,!0)):typeof r.start=="object"&&(T(e(r.start).position().top,null,!0),r.alwaysVisible||E.hide())}),this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From d823e7b6bb75c24f87112ae652404b33adf5e268 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Wed, 9 Jan 2013 07:53:18 +1100
    Subject: [PATCH 033/119] Updated version number in package.json
    
    ---
     package.json | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/package.json b/package.json
    index 7ade21f..c8617b4 100644
    --- a/package.json
    +++ b/package.json
    @@ -1,6 +1,6 @@
     {
         "name": "slimScroll",
    -    "version": "0.4.4",
    +    "version": "1.0.0",
         "title": "jQuery.slimScroll()",
         "author": {
             "name": "Piotr Rochala",
    
    From beb84c71b1d32085c07b7b1a50962f6bdc12ce8c Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Wed, 9 Jan 2013 20:31:09 +1100
    Subject: [PATCH 034/119] Added more examples, minor comment refactoring
    
    ---
     examples/allow-page-scroll.html      | 106 +++++++++++++++
     examples/chaining.html               |   2 +-
     examples/height-width.html           |  27 +++-
     examples/main.html                   |   2 +-
     examples/mouse-wheel.html            | 109 +++++++++++++++
     examples/multiple-elements.html      | 122 +++++++++++++++++
     examples/programmatic-scrolling.html |   2 +-
     examples/rail.html                   | 171 +++++++++++++++++++++++
     examples/scrollbar.html              | 196 +++++++++++++++++++++++++++
     examples/start-position.html         | 110 +++++++++++++++
     examples/top-bottom-events.html      |  77 +++++++++++
     jquery.slimscroll.js                 |   2 +-
     12 files changed, 920 insertions(+), 6 deletions(-)
     create mode 100644 examples/allow-page-scroll.html
     create mode 100644 examples/mouse-wheel.html
     create mode 100644 examples/multiple-elements.html
     create mode 100644 examples/rail.html
     create mode 100644 examples/scrollbar.html
     create mode 100644 examples/start-position.html
     create mode 100644 examples/top-bottom-events.html
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    new file mode 100644
    index 0000000..298dd3e
    --- /dev/null
    +++ b/examples/allow-page-scroll.html
    @@ -0,0 +1,106 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - allow page scroll</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv').slimScroll();
    +</pre>
    +
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p><span class="helloDiv" style="background:green;font-weigh:bold;">Hello!</span>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv2').slimScroll({
    +      allowPageScroll: true
    +  });
    +</pre>
    +
    +<div style="height:500px;">...adding height...</div>
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      $('#testDiv').slimScroll();
    +
    +      $('#testDiv2').slimScroll({
    +          allowPageScroll: true
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/chaining.html b/examples/chaining.html
    index a32e3b5..d63dba4 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -13,7 +13,7 @@
         h1 { font-size:20px; margin:0 }
         h2 { font-size:14px; margin:0 }
         p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
         .examples { border-radius:20px; background:#fff; padding:15px;
           margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
         .slimScrollDiv { border:1px solid #eee; }
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 937d241..30033aa 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -13,7 +13,7 @@
         h1 { font-size:20px; margin:0 }
         h2 { font-size:14px; margin:0 }
         p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
         .examples { border-radius:20px; background:#fff; padding:15px;
           margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
         .slimScrollDiv { border:1px solid #eee; }
    @@ -76,6 +76,27 @@ <h2>Facebook-style jQuery Scrollbar</h1>
     });
     </pre>
     
    +    <div id="testDiv3">
    +      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +      <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +      <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +      <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +      <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +      <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +      <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +      <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +      <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +      <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    </div>
    +
    +<pre class="prettyprint">
    +$('#testDiv3').slimscroll();
    +</pre>
     
     </div>
     
    @@ -88,7 +109,9 @@ <h2>Facebook-style jQuery Scrollbar</h1>
           $('#testDiv2').slimScroll({
               height: '100px',
               width: '300px'
    -      });      
    +      });
    +
    +      $('#testDiv3').slimScroll();
     
           //enable syntax highlighter
           prettyPrint();
    diff --git a/examples/main.html b/examples/main.html
    index 0ea3874..9057641 100644
    --- a/examples/main.html
    +++ b/examples/main.html
    @@ -1,7 +1,7 @@
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     <html>
     <head>
    -<title>jquery.slimscroll - height / width</title>
    +<title>jquery.slimscroll - main</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    new file mode 100644
    index 0000000..f1cf559
    --- /dev/null
    +++ b/examples/mouse-wheel.html
    @@ -0,0 +1,109 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - mouse wheel</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv').slimScroll({
    +      wheelStep: 20
    +  });
    +</pre>
    +
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv2').slimScroll({
    +      wheelStep: 100
    +  });
    +</pre>
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      $('#testDiv').slimScroll({
    +          wheelStep: 20
    +      });
    +
    +      $('#testDiv2').slimScroll({
    +          wheelStep: 100
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    new file mode 100644
    index 0000000..aee52ef
    --- /dev/null
    +++ b/examples/multiple-elements.html
    @@ -0,0 +1,122 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - multiple elements</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <div class="area">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +  <div class="area">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +  <div class="area">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<div style="clear:both"></div>
    +<pre class="prettyprint">
    +  $('.area').slimscroll({
    +    width: '200px'
    +  }).parent().css({
    +    'float': 'left',
    +    'margin-right': '30px'
    +  });
    +</pre>
    +
    +<div style="clear:both"></div>
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      $('.area').slimscroll({
    +        width: '200px'
    +      }).parent().css({
    +        'float': 'left',
    +        'margin-right': '30px'
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index e714ba3..435d73e 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -13,7 +13,7 @@
         h1 { font-size:20px; margin:0 }
         h2 { font-size:14px; margin:0 }
         p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
         .examples { border-radius:20px; background:#fff; padding:15px;
           margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
         .slimScrollDiv { border:1px solid #eee; }
    diff --git a/examples/rail.html b/examples/rail.html
    new file mode 100644
    index 0000000..ffadf21
    --- /dev/null
    +++ b/examples/rail.html
    @@ -0,0 +1,171 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - rail options</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv').slimScroll({
    +      alwaysVisible: true,
    +      railVisible: true
    +  });
    +</pre>
    +
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv2').slimScroll({
    +      railVisible: true,
    +      railColor: '#f00'
    +  });
    +</pre>
    +
    +  <div id="testDiv3">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv3').slimScroll({
    +      railVisible: true,
    +      railOpacity: 0.8
    +  });
    +</pre>
    +
    +  <div id="testDiv4">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv4').slimscroll({
    +    railVisible: true
    +  });
    +</pre>
    +
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      $('#testDiv').slimScroll({
    +          alwaysVisible: true,
    +          railVisible: true
    +      });
    +
    +      $('#testDiv2').slimScroll({
    +          railVisible: true,
    +          railColor: '#f00'
    +      });
    +
    +      $('#testDiv3').slimScroll({
    +          railVisible: true,
    +          railOpacity: 0.8
    +      });
    +
    +      $('#testDiv4').slimscroll({
    +        railVisible: true
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    new file mode 100644
    index 0000000..0293b67
    --- /dev/null
    +++ b/examples/scrollbar.html
    @@ -0,0 +1,196 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - scrollbar options</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv').slimscroll({
    +    size: '15px'
    +  });
    +</pre>
    +
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv2').slimScroll({
    +      position: 'left'
    +  });
    +</pre>
    +
    +  <div id="testDiv3">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv3').slimScroll({
    +      color: '#00f'
    +  });
    +</pre>
    +
    +
    +
    +  <div id="testDiv4">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv4').slimScroll({
    +      alwaysVisible: true
    +  });
    +</pre>
    +
    +
    +
    +  <div id="testDiv5">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv5').slimScroll({
    +      distance: '20px'
    +  });
    +</pre>
    +
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +      $('#testDiv').slimscroll({
    +        size: '15px'
    +      });
    +
    +      $('#testDiv2').slimScroll({
    +          position: 'left'
    +      });
    +
    +      $('#testDiv3').slimScroll({
    +          color: '#00f'
    +      });
    +
    +      $('#testDiv4').slimScroll({
    +          alwaysVisible: true
    +      });
    +
    +      $('#testDiv5').slimScroll({
    +          distance: '20px'
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/start-position.html b/examples/start-position.html
    new file mode 100644
    index 0000000..1f9591b
    --- /dev/null
    +++ b/examples/start-position.html
    @@ -0,0 +1,110 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - start position</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv').slimScroll({
    +      start: 'bottom'
    +  });
    +</pre>
    +
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p><span class="helloDiv" style="background:green;font-weigh:bold;">Hello!</span>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv2').slimScroll({
    +      start: $('.helloDiv')
    +  });
    +</pre>
    +
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      $('#testDiv').slimScroll({
    +          start: 'bottom'
    +      });
    +
    +      $('#testDiv2').slimScroll({
    +          start: $('.helloDiv')
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/top-bottom-events.html b/examples/top-bottom-events.html
    new file mode 100644
    index 0000000..a986747
    --- /dev/null
    +++ b/examples/top-bottom-events.html
    @@ -0,0 +1,77 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - top/bottom events</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +  </div>
    +  <div style="padding:2px;border:1px dashed #333;margin:2px;" id="testDivOut"></div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv').slimscroll({
    +    alwaysVisible: true
    +  }).bind('slimscroll', function(e, pos) {
    +    $('#testDivOut').append("Reached " + pos + ", ");
    +  });
    +</pre>
    +
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +    $('#testDiv').slimscroll({
    +      alwaysVisible: true
    +    }).bind('slimscroll', function(e, pos) {
    +      $('#testDivOut').append("Reached " + pos + ", ");
    +    });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index dd0aa3c..bc6fbba 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -71,7 +71,7 @@
                     offset += parseInt(o.scrollBy);
                   }
     
    -              //scroll content by the given offset
    +              // scroll content by the given offset
                   scrollContent(offset, false, true);
                 }
     
    
    From 0545d36340c5b1804838707b5eaf7ea330cfd0c3 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Wed, 9 Jan 2013 20:55:05 +1100
    Subject: [PATCH 035/119] added disableFadeOut example
    
    ---
     examples/disable-fade-out.html | 104 +++++++++++++++++++++++++++++++++
     1 file changed, 104 insertions(+)
     create mode 100644 examples/disable-fade-out.html
    
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    new file mode 100644
    index 0000000..6809181
    --- /dev/null
    +++ b/examples/disable-fade-out.html
    @@ -0,0 +1,104 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - disable fade out</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<style type="text/css">
    +    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    +    h1 { font-size:20px; margin:0 }
    +    h2 { font-size:14px; margin:0 }
    +    p { margin:5px 0; font-size:12px; }
    +    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +    .examples { border-radius:20px; background:#fff; padding:15px;
    +      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    +    .slimScrollDiv { border:1px solid #eee; }
    +</style>
    +</head>
    +<body>
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +$('#testDiv').slimscroll();
    +</pre>
    +
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +$('#testDiv2').slimscroll({
    +  disableFadeOut: true
    +});
    +</pre>
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      $('#testDiv').slimscroll();
    +
    +      $('#testDiv2').slimscroll({
    +        disableFadeOut: true
    +      });
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    
    From 952897f4fd01dedc7777e49af31da9586237345a Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Wed, 9 Jan 2013 21:56:48 +1100
    Subject: [PATCH 036/119] Updated minified version
    
    ---
     jquery.slimscroll.min.js | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 0e75c01..355d2fd 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -5,7 +5,7 @@
      * Version: 1.0.0
      * 
      */
    - (function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function e(k,d,e){var f=k;d&&(f=parseInt(c.css("top"))+k*parseInt(a.wheelStep)/
    +(function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function e(k,d,e){var f=k;d&&(f=parseInt(c.css("top"))+k*parseInt(a.wheelStep)/
     100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));g=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=g*(b[0].scrollHeight-b.outerHeight());e&&(f=k,k=f/b[0].scrollHeight*b.outerHeight(),c.css({top:k+"px"}));b.scrollTop(f);q();l()}function v(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:r+"px"})}function q(){v();clearTimeout(w);g==~~g&&(n=a.allowPageScroll,x!=g&&b.trigger("slimscroll",0==~~g?"top":"bottom"));
     x=g;r>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function l(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!s&&!t)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var p,s,t,w,y,r,g,x,A=30,n=!1,b=d(this);if(b.parent().hasClass("slimScrollDiv")){var j=b.scrollTop(),c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail");m&&("scrollTo"in m?j=parseInt(a.scrollTo):"scrollBy"in m&&(j+=parseInt(a.scrollBy)),e(j,!1,
     !0))}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;j=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=d("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:a.color,
    
    From e8fbd17d39a1fca161331f68a81c25e96c6a8ed9 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Thu, 10 Jan 2013 21:05:36 +1100
    Subject: [PATCH 037/119] Added navigation to the examples page
    
    ---
     examples/allow-page-scroll.html      |  30 ++--
     examples/chaining.html               |  29 ++--
     examples/disable-fade-out.html       |  30 ++--
     examples/height-width.html           |  29 ++--
     examples/main.html                   | 224 ---------------------------
     examples/mouse-wheel.html            |  30 ++--
     examples/multiple-elements.html      |  29 ++--
     examples/programmatic-scrolling.html |  29 ++--
     examples/rail.html                   |  29 ++--
     examples/scrollbar.html              |  29 ++--
     examples/start-position.html         |  30 ++--
     examples/style.css                   |  12 ++
     examples/top-bottom-events.html      |  29 ++--
     13 files changed, 199 insertions(+), 360 deletions(-)
     delete mode 100644 examples/main.html
     create mode 100644 examples/style.css
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index 298dd3e..f236417 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -8,24 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    -
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index d63dba4..8fc4c32 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -8,23 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 6809181..2d89e29 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -7,24 +7,28 @@
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    -<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 30033aa..6ca52d0 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -8,23 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
         <div style="height:300px;">
           <div id="testDiv">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/main.html b/examples/main.html
    deleted file mode 100644
    index 9057641..0000000
    --- a/examples/main.html
    +++ /dev/null
    @@ -1,224 +0,0 @@
    -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    -<html>
    -<head>
    -<title>jquery.slimscroll - main</title>
    -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    -<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    -<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    -<script type="text/javascript" src="../jquery.slimScroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    -</head>
    -<body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -
    -	  <hr /><h2>chainability & always visible & start at the bottom test & small mouse wheel step</h2>
    -	  <div id="test1">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -	  	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -	  
    -	  </div>
    -<hr />
    -	  <table>
    -		  <tr><td valign="top">
    -	<h2>start at the element offsetTop test & top/bottom events</h2>
    -	  <div id="test1a">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p><span id="testElement" style="background:red;"> Scroll here </span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -		<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    -	  </div>
    -	  <div id="test1aout"></div>
    -	</td><td>
    -	<h2>start at the element offsetTop test (multiple elements) & disable fadeOut</h2>
    -	  <div id="test1b">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p><span class="blah" style="background:green;"> Do not scroll here </span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p><span class="blah" style="background:green;"> Scroll here </span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -	  </div>				  
    -	</td></tr>
    -	  </table>
    -			  
    -<hr />
    -	<h2>rail always visible test (rail color, opacity test), external setting scroll value test</h2>
    -	
    -
    -	  <div id="testrailalwaysvisible">
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -	  </div>
    -	  <input type="button" id="scrollDown" value="scroll down by 50 px" />
    -      <input type="button" id="scrollUp" value="scroll up by 50 px" />
    -
    -      
    -      <hr />
    -	<h2>rail visible test, allowPageScroll true & mobile touch step</h2>
    -	
    -
    -	  <div id="testrailvisible">
    -		  
    -		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    -		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    -		<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    -	  </div>				  
    -
    -<div style="clear:both"></div>
    -	   <hr /><h2>scrollbar on left test</h2>
    -	  <div id="test2">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div>
    -	  
    -	<hr /><h2>float:left test, .slimscroll(), distance: 20px</h2>
    -	  <div id="test3" style="float:left">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div>
    -	    <hr /><h2>Multiple elements test:</h2>
    -		<table id="multi-test">
    -		<tr>
    -			<td><div class="multi">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div></td>
    -	  			<td><div class="multi">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div></td>
    -	<td><div class="multi">
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	  </div></td>	  <tr>
    -		</table>
    -	<hr /><h2>No initial content test & always visible</h2>
    -	<div id="noinitialcontent"></div>
    -	
    -	<hr /><h2>Not enough content to scroll test</h2>
    -	<div id="notlongenough">
    -		<p><b>scrollbar should not appear here</b></p>
    -		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
    -		  <p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
    -	</div>
    -</div>
    -	
    -	  <script type="text/javascript">
    -		  $(function(){
    -			  $('#test1').slimScroll({
    -				  height: '250px',
    -				  alwaysVisible: true,
    -				  start: 'bottom',
    -				  wheelStep: 10
    -			  }).css({ background: '#ccc', paddingRight: '10px' });
    -			  $('#test1a').slimscroll({
    -				  width: '400px',
    -				  height: '200px',
    -				  start: $('#testElement'),
    -				  alwaysVisible: true
    -			  }).bind('slimscroll', function(e, pos){
    -				$('#test1aout').html($('#test1aout').html() + "Reached " + pos + "<br />");
    -			  });
    -
    -			  $('#test1b').slimScroll({
    -				  height: '200px',
    -				  width: '400px',
    -				  start: $('.blah:eq(1)'),
    -				  disableFadeOut: true
    -			  });
    -			  $('#test2').slimScroll({
    -				  position: 'left',
    -				  width: '300px',
    -				  height: '250px'
    -			  });
    -			  //invalid name call
    -			  $('#test3').slimscroll({
    -				  color: '#00f',
    -				  size: '10px',
    -				  width: '300px',
    -				  height: '250px',
    -				  distance: '20px'
    -			  });
    -			  //multiple elemenets
    -			  $('.multi').slimScroll({
    -				  height: '250px',
    -				  width: '200px'
    -			  });
    -			  $('#testrailvisible').slimscroll({
    -				  width: '300px',
    -				  railVisible: true,
    -				  allowPageScroll: true,
    -				  touchScrollStep: 1000
    -			  });
    -			  $('#testrailalwaysvisible').slimscroll({
    -				  width: '300px',
    -				  railVisible: true,
    -				  alwaysVisible: true,
    -				  railColor: '#f00',
    -				  opacity: 1,
    -				  color: '#333'
    -			  });
    -              //scrolling buttons test
    -			  $('#scrollDown').click(function(){
    -				  $('#testrailalwaysvisible').slimScroll({ scrollBy: '50px' });
    -			  });
    -			  $('#scrollUp').click(function(){
    -				  $('#testrailalwaysvisible').slimScroll({ scrollBy: '-50px' });
    -			  });		  
    -			  //no initial content
    -			  var somecontent = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>";
    -			  $('#noinitialcontent').slimScroll({ 
    -				  width: '300px',
    -				  alwaysVisible: true
    -			  }).html(somecontent);
    -			  
    -			  //not long enough test
    -			  $('#notlongenough').slimScroll({ width:'400px', height:'300px' });
    -			  
    -		  });
    -	  </script>
    -	  
    -  </body>
    -</html>
    \ No newline at end of file
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index f1cf559..f506514 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -8,24 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    -
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index aee52ef..85a8002 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -8,23 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div class="area">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index 435d73e..b5a4b69 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -8,23 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/rail.html b/examples/rail.html
    index ffadf21..e877ede 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -8,23 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index 0293b67..f4fcc5c 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -8,23 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 1f9591b..7de6da0 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -8,24 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    -
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    diff --git a/examples/style.css b/examples/style.css
    new file mode 100644
    index 0000000..b4365a4
    --- /dev/null
    +++ b/examples/style.css
    @@ -0,0 +1,12 @@
    +body { font-family:Verdana,sans-serif; font-size:12px; color:#000; background:#111; }
    +h1 { font-size:20px; margin:0 }
    +h2 { font-size:10px; margin:0 }
    +p { margin:5px 0; font-size:12px; }
    +pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    +.examples { border-radius:20px; background:#fff; padding:15px;
    +  margin:0 0 0 250px; width:70%; border-collapse: collapse; border:1px solid #000; }
    +.slimScrollDiv { border:1px solid #eee; }
    +#nav { position:fixed; top:0 left:0; background:#fff; padding:15px; border-radius:20px; width:200px; }
    +#nav ul { list-style-type:square; list-style-position:inside; margin:20px 0 0 0; padding:0; }
    +#nav a { text-decoration:none; color:#000; }
    +#nav a:hover { text-decoration: underline };
    \ No newline at end of file
    diff --git a/examples/top-bottom-events.html b/examples/top-bottom-events.html
    index a986747..7c99832 100644
    --- a/examples/top-bottom-events.html
    +++ b/examples/top-bottom-events.html
    @@ -8,23 +8,28 @@
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    -<style type="text/css">
    -    body { font-family:Tahoma,sans-serif; font-size:12px; color:#000; background:#111; }
    -    h1 { font-size:20px; margin:0 }
    -    h2 { font-size:14px; margin:0 }
    -    p { margin:5px 0; font-size:12px; }
    -    pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
    -    .examples { border-radius:20px; background:#fff; padding:15px;
    -      margin:0 auto; width:70%; border-collapse: collapse; border:1px solid #000; }
    -    .slimScrollDiv { border:1px solid #eee; }
    -</style>
    +<link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
    -<div class="examples">
    +<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
       <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    
    From 35b3253b31d3f2abbb1b5f8eb78c001b508e48ce Mon Sep 17 00:00:00 2001
    From: sualko <github@spam.herberth.eu>
    Date: Fri, 18 Jan 2013 01:47:42 +0100
    Subject: [PATCH 038/119] Fix scrollTo
    
    scrollTo wasn't limited
    ---
     jquery.slimscroll.js | 7 +++++--
     1 file changed, 5 insertions(+), 2 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index bc6fbba..97e55c6 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -57,6 +57,8 @@
                 bar = me.parent().find('.slimScrollBar');
                 rail = me.parent().find('.slimScrollRail');
     
    +            getBarHeight();
    +
                 // check if we should scroll existing instance
                 if (options)
                 {
    @@ -222,6 +224,7 @@
             function scrollContent(y, isWheel, isJump)
             {
               var delta = y;
    +          var maxTop = me.outerHeight() - bar.outerHeight();
     
               if (isWheel)
               {
    @@ -229,7 +232,6 @@
                 delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
     
                 // move bar, make sure it doesn't go out
    -            var maxTop = me.outerHeight() - bar.outerHeight();
                 delta = Math.min(Math.max(delta, 0), maxTop);
     
                 // scroll the scrollbar
    @@ -244,6 +246,7 @@
               {
                 delta = y;
                 var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
    +            offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
                 bar.css({ top: offsetTop + 'px' });
               }
     
    @@ -355,4 +358,4 @@
         slimscroll: jQuery.fn.slimScroll
       });
     
    -})(jQuery);
    \ No newline at end of file
    +})(jQuery);
    
    From 88410a6bb364ac3c6551874a85a56ec9efc687d7 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Fri, 18 Jan 2013 21:33:30 +1100
    Subject: [PATCH 039/119] Fixed example temples so github ribbon doesn't
     overlap slimscroll div
    
    ---
     examples/allow-page-scroll.html      |  4 ++--
     examples/chaining.html               | 14 +++++++-------
     examples/disable-fade-out.html       |  5 +++--
     examples/height-width.html           |  4 ++--
     examples/mouse-wheel.html            |  4 ++--
     examples/multiple-elements.html      |  4 ++--
     examples/programmatic-scrolling.html |  6 +++---
     examples/rail.html                   |  4 ++--
     examples/scrollbar.html              |  4 ++--
     examples/start-position.html         |  4 ++--
     examples/style.css                   |  5 +++--
     examples/top-bottom-events.html      |  4 ++--
     12 files changed, 32 insertions(+), 30 deletions(-)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index f236417..d1a3c47 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 8fc4c32..6b339ed 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    @@ -51,8 +51,8 @@ <h2>Facebook-style jQuery Scrollbar</h1>
     <pre class="prettyprint">
     $('#testDiv').slimscroll({
       height: '250px'
    -}).parent().css({ 
    -  background: '#237FAD', 
    +}).parent().css({
    +  background: '#237FAD',
       border: '2px dashed #184055'
     });
     </pre>
    @@ -64,15 +64,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         $(function(){
           $('#testDiv').slimscroll({
             height: '250px'
    -      }).parent().css({ 
    -        background: '#237FAD', 
    +      }).parent().css({
    +        background: '#237FAD',
             border: '2px dashed #184055'
           });
     
           $('#testDiv2').slimScroll({
               height: '100px',
               width: '300px'
    -      });      
    +      });
     
           //enable syntax highlighter
           prettyPrint();
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 2d89e29..388717e 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -7,10 +7,11 @@
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -24,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 6ca52d0..535de7b 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index f506514..11af599 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 85a8002..6081343 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index b5a4b69..04f96d3 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    @@ -84,7 +84,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
       </div>
       <input type="button" id="scrollDownTo" value="Scroll to 300px from the top" />
       <input type="button" id="scrollUpTo" value="Scroll to 20px from the top" />
    -  
    +
     
     <pre class="prettyprint">
     $('#testDiv2').slimscroll({
    diff --git a/examples/rail.html b/examples/rail.html
    index e877ede..5b8f91d 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index f4fcc5c..d4031da 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 7de6da0..de96dfd 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    diff --git a/examples/style.css b/examples/style.css
    index b4365a4..6d2965a 100644
    --- a/examples/style.css
    +++ b/examples/style.css
    @@ -4,9 +4,10 @@ h2 { font-size:10px; margin:0 }
     p { margin:5px 0; font-size:12px; }
     pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
     .examples { border-radius:20px; background:#fff; padding:15px;
    -  margin:0 0 0 250px; width:70%; border-collapse: collapse; border:1px solid #000; }
    +  margin:0 125px 0 250px; border-collapse: collapse; border:1px solid #000; }
     .slimScrollDiv { border:1px solid #eee; }
     #nav { position:fixed; top:0 left:0; background:#fff; padding:15px; border-radius:20px; width:200px; }
     #nav ul { list-style-type:square; list-style-position:inside; margin:20px 0 0 0; padding:0; }
     #nav a { text-decoration:none; color:#000; }
    -#nav a:hover { text-decoration: underline };
    \ No newline at end of file
    +#nav a:hover { text-decoration: underline }
    +#git-fork img { position:fixed; top:0; right:0; border:0; z-index:999; }
    \ No newline at end of file
    diff --git a/examples/top-bottom-events.html b/examples/top-bottom-events.html
    index 7c99832..de7d733 100644
    --- a/examples/top-bottom-events.html
    +++ b/examples/top-bottom-events.html
    @@ -11,7 +11,7 @@
     <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
    -<a href="https://github.com/rochal/jQuery-slimScroll"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     <div id="nav">
       <h1>jQuery slimScroll</h1>
       <h2>Facebook-style jQuery Scrollbar</h1>
    @@ -25,7 +25,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>    
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
       </ul>
     </div>
    
    From 434ce2b312e25455c98fbcf5b17ffe9513c969bc Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Fri, 18 Jan 2013 21:37:06 +1100
    Subject: [PATCH 040/119] Add minified code and bump up the version
    
    ---
     jquery.slimscroll.js     | 28 ++++++++++++++--------------
     jquery.slimscroll.min.js | 18 +++++++++---------
     2 files changed, 23 insertions(+), 23 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 97e55c6..a35ac04 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,8 +2,8 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.0
    - * 
    + * Version: 1.0.1
    + *
      */
     (function($) {
     
    @@ -38,7 +38,7 @@
           // do it for every element that matches selector
           this.each(function(){
     
    -      var isOverPanel, isOverBar, isDragg, queueHide, touchDif, 
    +      var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
             barHeight, percentScroll, lastScroll,
             divS = '<div></div>',
             minBarHeight = 30,
    @@ -145,13 +145,13 @@
             me.parent().append(rail);
     
             // make it draggable
    -        bar.draggable({ 
    -          axis: 'y', 
    +        bar.draggable({
    +          axis: 'y',
               containment: 'parent',
               start: function() { isDragg = true; },
               stop: function() { isDragg = false; hideBar(); },
    -          drag: function(e) 
    -          { 
    +          drag: function(e)
    +          {
                 // scroll content
                 scrollContent(0, $(this).position().top, false);
               }
    @@ -266,7 +266,7 @@
               {
                 this.addEventListener('DOMMouseScroll', _onWheel, false );
                 this.addEventListener('mousewheel', _onWheel, false );
    -          } 
    +          }
               else
               {
                 document.attachEvent("onmousewheel", _onWheel)
    @@ -295,13 +295,13 @@
               // when bar reached top or bottom
               if (percentScroll == ~~ percentScroll)
               {
    -            //release wheel 
    +            //release wheel
                 releaseScroll = o.allowPageScroll;
    -            
    +
                 // publish approporiate event
                 if (lastScroll != percentScroll)
                 {
    -                var msg = (~~percentScroll == 0) ? 'top' : 'bottom'; 
    +                var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
                     me.trigger('slimscroll', msg);
                 }
               }
    @@ -324,7 +324,7 @@
               {
                 queueHide = setTimeout(function(){
                   if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
    -              { 
    +              {
                     bar.fadeOut('slow');
                     rail.fadeOut('slow');
                   }
    @@ -333,7 +333,7 @@
             }
     
             // check start position
    -        if (o.start == 'bottom') 
    +        if (o.start == 'bottom')
             {
               // scroll content to bottom
               bar.css({ top: me.outerHeight() - bar.outerHeight() });
    @@ -348,7 +348,7 @@
               if (!o.alwaysVisible) { bar.hide(); }
             }
           });
    -      
    +
           // maintain chainability
           return this;
         }
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 355d2fd..eb39201 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,13 +2,13 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.0
    - * 
    + * Version: 1.0.1
    + *
      */
    -(function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function e(k,d,e){var f=k;d&&(f=parseInt(c.css("top"))+k*parseInt(a.wheelStep)/
    -100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));g=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=g*(b[0].scrollHeight-b.outerHeight());e&&(f=k,k=f/b[0].scrollHeight*b.outerHeight(),c.css({top:k+"px"}));b.scrollTop(f);q();l()}function v(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:r+"px"})}function q(){v();clearTimeout(w);g==~~g&&(n=a.allowPageScroll,x!=g&&b.trigger("slimscroll",0==~~g?"top":"bottom"));
    -x=g;r>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function l(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!s&&!t)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var p,s,t,w,y,r,g,x,A=30,n=!1,b=d(this);if(b.parent().hasClass("slimScrollDiv")){var j=b.scrollTop(),c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail");m&&("scrollTo"in m?j=parseInt(a.scrollTo):"scrollBy"in m&&(j+=parseInt(a.scrollBy)),e(j,!1,
    -!0))}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;j=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=d("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:a.color,
    -width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};h.css(z);c.css(z);b.wrap(j);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){t=!0},stop:function(){t=!1;l()},drag:function(){e(0,d(this).position().top,!1)}});h.hover(function(){q()},function(){l()});
    -c.hover(function(){s=!0},function(){s=!1});b.hover(function(){p=!0;q();l()},function(){p=!1;l()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&e((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var u=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);e(b,!0);a.preventDefault&&!n&&
    -a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();v();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),e(0,!0)):"object"==typeof a.start&&(e(d(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function f(h,d,f){var g=h,e=b.outerHeight()-c.outerHeight();d&&(g=parseInt(c.css("top"))+
    +h*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),e),c.css({top:g+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());g=j*(b[0].scrollHeight-b.outerHeight());f&&(g=h,h=g/b[0].scrollHeight*b.outerHeight(),h=Math.min(Math.max(h,0),e),c.css({top:h+"px"}));b.scrollTop(g);q();l()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,x!=j&&b.trigger("slimscroll",
    +0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&e.stop(!0,!0).fadeIn("fast"))}function l(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),e.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=d(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),e=b.parent().find(".slimScrollRail");r();m&&("scrollTo"in m?k=parseInt(a.scrollTo):"scrollBy"in m&&(k+=parseInt(a.scrollBy)),
    +f(k,!1,!0))}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var e=d("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:a.color,
    +width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};e.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(e);c.draggable({axis:"y",containment:"parent",start:function(){u=!0},stop:function(){u=!1;l()},drag:function(){f(0,d(this).position().top,!1)}});e.hover(function(){q()},function(){l()});
    +c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();l()},function(){p=!1;l()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&f((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var v=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);f(b,!0);a.preventDefault&&!n&&
    +a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),f(0,!0)):"object"==typeof a.start&&(f(d(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From 295f204ee0702c6fafe81551a1d3c41de1a43e92 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 21 Jan 2013 19:07:28 +1100
    Subject: [PATCH 041/119] Added jquery plugins page support
    
    - added support for jQuery 1.9.0
    - updated version
    ---
     examples/allow-page-scroll.html         |  2 +-
     examples/chaining.html                  |  2 +-
     examples/disable-fade-out.html          |  2 +-
     examples/height-width.html              |  2 +-
     examples/mouse-wheel.html               |  2 +-
     examples/multiple-elements.html         |  2 +-
     examples/programmatic-scrolling.html    |  2 +-
     examples/rail.html                      |  2 +-
     examples/scrollbar.html                 |  2 +-
     examples/start-position.html            |  2 +-
     examples/top-bottom-events.html         |  2 +-
     jquery.slimscroll.js                    |  2 +-
     jquery.slimscroll.min.js                |  2 +-
     package.json => slimscroll.package.json | 17 ++++++-----------
     14 files changed, 19 insertions(+), 24 deletions(-)
     rename package.json => slimscroll.package.json (80%)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index d1a3c47..31df27d 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - allow page scroll</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 6b339ed..68a42c4 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - chaining</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 388717e..8ca6d38 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - disable fade out</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 535de7b..ff52379 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - height / width</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index 11af599..d1b7bc1 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - mouse wheel</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 6081343..8054b91 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - multiple elements</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index 04f96d3..c123d5c 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - programmatic scrolling</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/rail.html b/examples/rail.html
    index 5b8f91d..1ce6cb6 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - rail options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index d4031da..a667c1f 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - scrollbar options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/start-position.html b/examples/start-position.html
    index de96dfd..4b782d9 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - start position</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/examples/top-bottom-events.html b/examples/top-bottom-events.html
    index de7d733..a92144c 100644
    --- a/examples/top-bottom-events.html
    +++ b/examples/top-bottom-events.html
    @@ -3,7 +3,7 @@
     <head>
     <title>jquery.slimscroll - top/bottom events</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index a35ac04..a1702c4 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.1
    + * Version: 1.0.2
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index eb39201..b18ef53 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.1
    + * Version: 1.0.2
      *
      */
     (function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function f(h,d,f){var g=h,e=b.outerHeight()-c.outerHeight();d&&(g=parseInt(c.css("top"))+
    diff --git a/package.json b/slimscroll.package.json
    similarity index 80%
    rename from package.json
    rename to slimscroll.package.json
    index c8617b4..9c6c312 100644
    --- a/package.json
    +++ b/slimscroll.package.json
    @@ -1,7 +1,7 @@
     {
         "name": "slimScroll",
    -    "version": "1.0.0",
    -    "title": "jQuery.slimScroll()",
    +    "version": "1.0.2",
    +    "title": "jQuery slimScroll",
         "author": {
             "name": "Piotr Rochala",
             "url": "http://rocha.la/"
    @@ -17,14 +17,16 @@
             }
         ],
         "dependencies": {
    -        "jquery": ">1"
    +        "jquery": ">1.5"
         },
         "description": "slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.",
         "keywords": [
             "scrollbar",
             "scroll",
             "slimscroll",
    -        "scrollable"
    +        "scrollable",
    +        "scrolling",
    +        "scroller"
         ],
         "homepage": "http://rocha.la/jQuery-slimScroll",
         "maintainers": [
    @@ -32,12 +34,5 @@
                 "name": "Piotr Rochala",
                 "url": "https://github.com/rochal"
             }
    -    ],
    -    "files": [
    -        "jquery.slimscroll.min.js",
    -        "jquery.slimscroll.js",
    -        "examples/",
    -        "README.md",
    -        "package.json"
         ]
     }
    \ No newline at end of file
    
    From 18b71dc731d5d48236a3806d511c5e0e9779831b Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 21 Jan 2013 21:38:48 +1100
    Subject: [PATCH 042/119] Reformat package.json, bump-up version
    
    ---
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js |  2 +-
     slimscroll.package.json  | 62 +++++++++++++++++-----------------------
     3 files changed, 29 insertions(+), 37 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index a1702c4..8e9b7d1 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.2
    + * Version: 1.0.3
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index b18ef53..3a840b9 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.2
    + * Version: 1.0.3
      *
      */
     (function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function f(h,d,f){var g=h,e=b.outerHeight()-c.outerHeight();d&&(g=parseInt(c.css("top"))+
    diff --git a/slimscroll.package.json b/slimscroll.package.json
    index 9c6c312..ac3aee6 100644
    --- a/slimscroll.package.json
    +++ b/slimscroll.package.json
    @@ -1,38 +1,30 @@
     {
    -    "name": "slimScroll",
    -    "version": "1.0.2",
    -    "title": "jQuery slimScroll",
    -    "author": {
    -        "name": "Piotr Rochala",
    -        "url": "http://rocha.la/"
    +  "name"        : "slimScroll",
    +  "version"     : "1.0.3",
    +  "title"       : "jQuery slimScroll scrollbar",
    +  "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    +  "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    +  "demo"        : "http://rocha.la/jQuery-slimScroll/",
    +  "homepage"    : "http://rocha.la/jQuery-slimScroll/",
    +  "download"    : "http://rocha.la/jQuery-slimScroll/",
    +
    +  "author" : {
    +    "name"  : "Piotr Rochala",
    +    "url"   : "http://rocha.la/"
    +  },
    +
    +  "dependencies" : {
    +    "jquery" : ">= 1.7"
    +  },
    +
    +  "licenses" : [
    +    {
    +      "type": "MIT",
    +      "url": "http://www.opensource.org/licenses/mit-license.php"
         },
    -    "licenses": [
    -        {
    -            "type": "MIT",
    -            "url": "http://www.opensource.org/licenses/mit-license.php"
    -        },
    -        {
    -            "type": "GPL",
    -            "url": "http://www.opensource.org/licenses/gpl-license.php"
    -        }
    -    ],
    -    "dependencies": {
    -        "jquery": ">1.5"
    -    },
    -    "description": "slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.",
    -    "keywords": [
    -        "scrollbar",
    -        "scroll",
    -        "slimscroll",
    -        "scrollable",
    -        "scrolling",
    -        "scroller"
    -    ],
    -    "homepage": "http://rocha.la/jQuery-slimScroll",
    -    "maintainers": [
    -        {
    -            "name": "Piotr Rochala",
    -            "url": "https://github.com/rochal"
    -        }
    -    ]
    +    {
    +      "type": "GPL",
    +      "url": "http://www.opensource.org/licenses/gpl-license.php"
    +    }
    +  ]
     }
    \ No newline at end of file
    
    From 6304484219afdbe4d32e0c98ac537765cdab3da0 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Tue, 22 Jan 2013 18:19:04 +1100
    Subject: [PATCH 043/119] Rename package.json, bump-up version
    
    ---
     jquery.slimscroll.js                              | 2 +-
     jquery.slimscroll.min.js                          | 2 +-
     slimscroll.package.json => slimScroll.jquery.json | 2 +-
     3 files changed, 3 insertions(+), 3 deletions(-)
     rename slimscroll.package.json => slimScroll.jquery.json (97%)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 8e9b7d1..39175f1 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.3
    + * Version: 1.0.4
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 3a840b9..0bf062d 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.3
    + * Version: 1.0.4
      *
      */
     (function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function f(h,d,f){var g=h,e=b.outerHeight()-c.outerHeight();d&&(g=parseInt(c.css("top"))+
    diff --git a/slimscroll.package.json b/slimScroll.jquery.json
    similarity index 97%
    rename from slimscroll.package.json
    rename to slimScroll.jquery.json
    index ac3aee6..c077e95 100644
    --- a/slimscroll.package.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.0.3",
    +  "version"     : "1.0.4",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From e557016d655619ab41c9c7cc1b76eb5a6b261ec3 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Tue, 22 Jan 2013 18:32:44 +1100
    Subject: [PATCH 044/119] jquery plugins page testing
    
    ---
     jquery.slimscroll.js     | 2 +-
     jquery.slimscroll.min.js | 2 +-
     slimScroll.jquery.json   | 2 +-
     3 files changed, 3 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 39175f1..1303b2d 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.4
    + * Version: 1.0.5
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 0bf062d..4b28628 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.4
    + * Version: 1.0.5
      *
      */
     (function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function f(h,d,f){var g=h,e=b.outerHeight()-c.outerHeight();d&&(g=parseInt(c.css("top"))+
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index c077e95..f022fef 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.0.4",
    +  "version"     : "1.0.5",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From dfb69c3000c3070678a184e49f6a55a58d45476d Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Thu, 24 Jan 2013 23:55:57 +1100
    Subject: [PATCH 045/119] Fixed jQuery UI reference for compatibility with
     jQuery 1.9.0
    
    ---
     examples/allow-page-scroll.html      | 2 +-
     examples/chaining.html               | 2 +-
     examples/disable-fade-out.html       | 2 +-
     examples/height-width.html           | 2 +-
     examples/mouse-wheel.html            | 2 +-
     examples/multiple-elements.html      | 2 +-
     examples/programmatic-scrolling.html | 2 +-
     examples/rail.html                   | 2 +-
     examples/scrollbar.html              | 2 +-
     examples/start-position.html         | 2 +-
     examples/top-bottom-events.html      | 2 +-
     jquery.slimscroll.js                 | 2 +-
     jquery.slimscroll.min.js             | 2 +-
     slimScroll.jquery.json               | 4 ++--
     14 files changed, 15 insertions(+), 15 deletions(-)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index 31df27d..6da23b0 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - allow page scroll</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 68a42c4..9f4886d 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - chaining</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 8ca6d38..a02f5b6 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - disable fade out</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index ff52379..bc63f3f 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - height / width</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index d1b7bc1..d6cd34e 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - mouse wheel</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 8054b91..1dc3003 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - multiple elements</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index c123d5c..721b5dc 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - programmatic scrolling</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/rail.html b/examples/rail.html
    index 1ce6cb6..818f880 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - rail options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index a667c1f..db4c126 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - scrollbar options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 4b782d9..99e9191 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - start position</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/top-bottom-events.html b/examples/top-bottom-events.html
    index a92144c..8f60e28 100644
    --- a/examples/top-bottom-events.html
    +++ b/examples/top-bottom-events.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - top/bottom events</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 1303b2d..c9b672f 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.5
    + * Version: 1.0.6
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 4b28628..945d983 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.5
    + * Version: 1.0.6
      *
      */
     (function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function f(h,d,f){var g=h,e=b.outerHeight()-c.outerHeight();d&&(g=parseInt(c.css("top"))+
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index f022fef..6f6ed30 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,8 +1,8 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.0.5",
    +  "version"     : "1.0.6",
       "title"       : "jQuery slimScroll scrollbar",
    -  "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    +  "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
       "demo"        : "http://rocha.la/jQuery-slimScroll/",
       "homepage"    : "http://rocha.la/jQuery-slimScroll/",
    
    From 47ced24d0fd63baf587bdd92f039310f2e4bffeb Mon Sep 17 00:00:00 2001
    From: Ben Kamens <ben@khanacademy.org>
    Date: Mon, 4 Feb 2013 17:12:21 -0800
    Subject: [PATCH 046/119] Avoid a jitter when *very slowly* mousewheeling down
     in small-ish scrollable areas.
    
    ---
     jquery.slimscroll.js | 11 +++++++++++
     1 file changed, 11 insertions(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index c9b672f..28f33a6 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -234,6 +234,17 @@
                 // move bar, make sure it doesn't go out
                 delta = Math.min(Math.max(delta, 0), maxTop);
     
    +            if (y > 0) {
    +                // if scrolling down, make sure a fractional change to the
    +                // scroll position isn't rounded away when the scrollbar's CSS
    +                // is set
    +                delta = Math.ceil(delta);
    +            } else {
    +                // this flooring of delta would happened automatically when
    +                // bar.css is set below, but we floor here for clarity
    +                delta = Math.floor(delta);
    +            }
    +
                 // scroll the scrollbar
                 bar.css({ top: delta + 'px' });
               }
    
    From 0e14ee44cc0bd9761c1a5e45052ff0aa339b0c7b Mon Sep 17 00:00:00 2001
    From: unknown <rochala@.(none)>
    Date: Thu, 7 Feb 2013 20:22:33 +1100
    Subject: [PATCH 047/119] Add missing wheelStep example link
    
    ---
     examples/allow-page-scroll.html      | 1 +
     examples/chaining.html               | 1 +
     examples/disable-fade-out.html       | 1 +
     examples/height-width.html           | 1 +
     examples/mouse-wheel.html            | 1 +
     examples/multiple-elements.html      | 1 +
     examples/programmatic-scrolling.html | 1 +
     examples/rail.html                   | 1 +
     examples/scrollbar.html              | 1 +
     examples/start-position.html         | 1 +
     examples/top-bottom-events.html      | 1 +
     11 files changed, 11 insertions(+)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index 6da23b0..df3ca0c 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 9f4886d..9beafa9 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index a02f5b6..cf7e9fd 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/height-width.html b/examples/height-width.html
    index bc63f3f..1280b51 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index d6cd34e..95a502f 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 1dc3003..521af1a 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index 721b5dc..464a89c 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/rail.html b/examples/rail.html
    index 818f880..09307d0 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index db4c126..30adc8b 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 99e9191..231a38e 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/top-bottom-events.html b/examples/top-bottom-events.html
    index 8f60e28..84eb80a 100644
    --- a/examples/top-bottom-events.html
    +++ b/examples/top-bottom-events.html
    @@ -27,6 +27,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="top-bottom-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
       </ul>
     </div>
     <div class="examples">
    
    From aa6d0f5b551ae50beaefb7dd23af3d00469a5266 Mon Sep 17 00:00:00 2001
    From: unknown <rochala@.(none)>
    Date: Thu, 7 Feb 2013 20:26:57 +1100
    Subject: [PATCH 048/119] Mimimize 47ced24 code. Bump up version.
    
    ---
     jquery.slimscroll.js     | 17 ++++++-----------
     jquery.slimscroll.min.js | 16 ++++++++--------
     2 files changed, 14 insertions(+), 19 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 28f33a6..f53aa09 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.6
    + * Version: 1.0.7
      *
      */
     (function($) {
    @@ -234,16 +234,11 @@
                 // move bar, make sure it doesn't go out
                 delta = Math.min(Math.max(delta, 0), maxTop);
     
    -            if (y > 0) {
    -                // if scrolling down, make sure a fractional change to the
    -                // scroll position isn't rounded away when the scrollbar's CSS
    -                // is set
    -                delta = Math.ceil(delta);
    -            } else {
    -                // this flooring of delta would happened automatically when
    -                // bar.css is set below, but we floor here for clarity
    -                delta = Math.floor(delta);
    -            }
    +            // if scrolling down, make sure a fractional change to the
    +            // scroll position isn't rounded away when the scrollbar's CSS is set
    +            // this flooring of delta would happened automatically when
    +            // bar.css is set below, but we floor here for clarity
    +            delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
     
                 // scroll the scrollbar
                 bar.css({ top: delta + 'px' });
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 945d983..935a144 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,13 +2,13 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.6
    + * Version: 1.0.7
      *
      */
    -(function(d){jQuery.fn.extend({slimScroll:function(m){var a=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function f(h,d,f){var g=h,e=b.outerHeight()-c.outerHeight();d&&(g=parseInt(c.css("top"))+
    -h*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),e),c.css({top:g+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());g=j*(b[0].scrollHeight-b.outerHeight());f&&(g=h,h=g/b[0].scrollHeight*b.outerHeight(),h=Math.min(Math.max(h,0),e),c.css({top:h+"px"}));b.scrollTop(g);q();l()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,x!=j&&b.trigger("slimscroll",
    -0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&e.stop(!0,!0).fadeIn("fast"))}function l(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),e.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=d(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),e=b.parent().find(".slimScrollRail");r();m&&("scrollTo"in m?k=parseInt(a.scrollTo):"scrollBy"in m&&(k+=parseInt(a.scrollBy)),
    -f(k,!1,!0))}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var e=d("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:a.color,
    -width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};e.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(e);c.draggable({axis:"y",containment:"parent",start:function(){u=!0},stop:function(){u=!1;l()},drag:function(){f(0,d(this).position().top,!1)}});e.hover(function(){q()},function(){l()});
    -c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();l()},function(){p=!1;l()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&f((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var v=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);f(b,!0);a.preventDefault&&!n&&
    -a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),f(0,!0)):"object"==typeof a.start&&(f(d(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(e){jQuery.fn.extend({slimScroll:function(m){var a=e.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function g(h,e,g){var d=h,f=b.outerHeight()-c.outerHeight();e&&(d=parseInt(c.css("top"))+
    +h*parseInt(a.wheelStep)/100*c.outerHeight(),d=Math.min(Math.max(d,0),f),d=0<h?Math.ceil(d):Math.floor(d),c.css({top:d+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());d=j*(b[0].scrollHeight-b.outerHeight());g&&(d=h,h=d/b[0].scrollHeight*b.outerHeight(),h=Math.min(Math.max(h,0),f),c.css({top:h+"px"}));b.scrollTop(d);q();l()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,
    +x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&f.stop(!0,!0).fadeIn("fast"))}function l(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),f.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=e(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),f=b.parent().find(".slimScrollRail");r();m&&("scrollTo"in m?k=parseInt(a.scrollTo):
    +"scrollBy"in m&&(k+=parseInt(a.scrollBy)),g(k,!1,!0))}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var f=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,
    +zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};f.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(f);c.draggable({axis:"y",containment:"parent",start:function(){u=!0},stop:function(){u=!1;l()},drag:function(){g(0,
    +e(this).position().top,!1)}});f.hover(function(){q()},function(){l()});c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();l()},function(){p=!1;l()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&g((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var v=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/
    +120);a.detail&&(b=a.detail/3);g(b,!0);a.preventDefault&&!n&&a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),g(0,!0)):"object"==typeof a.start&&(g(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From 11205d8cb5b7e8abae99427f4d83d1029ad3a28c Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Wed, 13 Feb 2013 20:55:59 +1100
    Subject: [PATCH 049/119] Added destroy method to remove the slimScroll
    
    ---
     jquery.slimscroll.js     | 10 +++++++++-
     jquery.slimscroll.min.js | 17 +++++++++--------
     2 files changed, 18 insertions(+), 9 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index f53aa09..dd35bd4 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.7
    + * Version: 1.0.8
      *
      */
     (function($) {
    @@ -72,6 +72,14 @@
                     // jump by value pixels
                     offset += parseInt(o.scrollBy);
                   }
    +              else if ('destroy' in options)
    +              {
    +                // remove slimscroll elements
    +                bar.remove();
    +                rail.remove();
    +                me.unwrap();
    +                return;
    +              }
     
                   // scroll content by the given offset
                   scrollContent(offset, false, true);
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 935a144..2f5e067 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,13 +2,14 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.7
    + * Version: 1.0.8
      *
      */
    -(function(e){jQuery.fn.extend({slimScroll:function(m){var a=e.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},m);this.each(function(){function g(h,e,g){var d=h,f=b.outerHeight()-c.outerHeight();e&&(d=parseInt(c.css("top"))+
    -h*parseInt(a.wheelStep)/100*c.outerHeight(),d=Math.min(Math.max(d,0),f),d=0<h?Math.ceil(d):Math.floor(d),c.css({top:d+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());d=j*(b[0].scrollHeight-b.outerHeight());g&&(d=h,h=d/b[0].scrollHeight*b.outerHeight(),h=Math.min(Math.max(h,0),f),c.css({top:h+"px"}));b.scrollTop(d);q();l()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,
    -x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&f.stop(!0,!0).fadeIn("fast"))}function l(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),f.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=e(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),f=b.parent().find(".slimScrollRail");r();m&&("scrollTo"in m?k=parseInt(a.scrollTo):
    -"scrollBy"in m&&(k+=parseInt(a.scrollBy)),g(k,!1,!0))}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var f=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,
    -zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};f.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(f);c.draggable({axis:"y",containment:"parent",start:function(){u=!0},stop:function(){u=!1;l()},drag:function(){g(0,
    -e(this).position().top,!1)}});f.hover(function(){q()},function(){l()});c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();l()},function(){p=!1;l()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&g((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});var v=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/
    -120);a.detail&&(b=a.detail/3);g(b,!0);a.preventDefault&&!n&&a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),g(0,!0)):"object"==typeof a.start&&(g(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(e){jQuery.fn.extend({slimScroll:function(l){var a=e.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},l);this.each(function(){function f(h,e,g){var d=h,f=b.outerHeight()-c.outerHeight();e&&(d=parseInt(c.css("top"))+
    +h*parseInt(a.wheelStep)/100*c.outerHeight(),d=Math.min(Math.max(d,0),f),d=0<h?Math.ceil(d):Math.floor(d),c.css({top:d+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());d=j*(b[0].scrollHeight-b.outerHeight());g&&(d=h,h=d/b[0].scrollHeight*b.outerHeight(),h=Math.min(Math.max(h,0),f),c.css({top:h+"px"}));b.scrollTop(d);q();m()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,
    +x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&g.stop(!0,!0).fadeIn("fast"))}function m(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),g.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=e(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),g=b.parent().find(".slimScrollRail");r();if(l){if("scrollTo"in l)k=parseInt(a.scrollTo);
    +else if("scrollBy"in l)k+=parseInt(a.scrollBy);else if("destroy"in l){c.remove();g.remove();b.unwrap();return}f(k,!1,!0)}}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var g=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?
    +"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};g.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(g);c.draggable({axis:"y",
    +containment:"parent",start:function(){u=!0},stop:function(){u=!1;m()},drag:function(){f(0,e(this).position().top,!1)}});g.hover(function(){q()},function(){m()});c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();m()},function(){p=!1;m()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&f((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,
    +!0)});var v=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);f(b,!0);a.preventDefault&&!n&&a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),f(0,!0)):"object"==typeof a.start&&(f(e(a.start).position().top,null,!0),a.alwaysVisible||
    +c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From 602dd9744eacdce415bbd3d98ec52e9c83e76475 Mon Sep 17 00:00:00 2001
    From: Robert Ramsay <robert.alan.ramsay@gmail.com>
    Date: Mon, 18 Feb 2013 12:55:45 -0800
    Subject: [PATCH 050/119] Fixes issue #11: Check that we scroll only the
     innermost content in the case of nested slimScrollDivs
    
    ---
     jquery.slimscroll.js | 9 ++++++---
     1 file changed, 6 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index dd35bd4..ce09d40 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -221,9 +221,12 @@
               if (e.wheelDelta) { delta = -e.wheelDelta/120; }
               if (e.detail) { delta = e.detail / 3; }
     
    -          // scroll content
    -          scrollContent(delta, true);
    -
    +          var target = e.target || e.srcTarget;
    +          if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
    +            // scroll content
    +            scrollContent(delta, true);
    +          }
    +          
               // stop window scroll
               if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
               if (!releaseScroll) { e.returnValue = false; }
    
    From e3ba30046c7c3e78bb9d41a8958518d2c6841c1a Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Tue, 19 Feb 2013 20:09:07 +1100
    Subject: [PATCH 051/119] nested scroll merge. bump-up version
    
    ---
     examples/allow-page-scroll.html      |  1 +
     examples/chaining.html               |  1 +
     examples/disable-fade-out.html       |  1 +
     examples/height-width.html           |  1 +
     examples/mouse-wheel.html            |  1 +
     examples/multiple-elements.html      |  1 +
     examples/nested.html                 | 99 ++++++++++++++++++++++++++++
     examples/programmatic-scrolling.html |  1 +
     examples/rail.html                   |  1 +
     examples/scrollbar.html              |  6 +-
     examples/start-position.html         |  1 +
     examples/top-bottom-events.html      |  1 +
     jquery.slimscroll.js                 |  4 +-
     jquery.slimscroll.min.js             | 18 ++---
     14 files changed, 124 insertions(+), 13 deletions(-)
     create mode 100644 examples/nested.html
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index df3ca0c..e8c5da6 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 9beafa9..0fbc6dc 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index cf7e9fd..7a46c1b 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 1280b51..fc554e5 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index 95a502f..eea33de 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 521af1a..8429e1b 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/nested.html b/examples/nested.html
    new file mode 100644
    index 0000000..4b28d0e
    --- /dev/null
    +++ b/examples/nested.html
    @@ -0,0 +1,99 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - top/bottom events</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    +<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<link href="style.css" type="text/css" rel="stylesheet" />
    +</head>
    +<body>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div id="nav">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <ul>
    +    <li><a href="height-width.html">Height / Width options</a></li>
    +    <li><a href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a href="rail.html">Rail options</a></li>
    +    <li><a href="start-position.html">Start position</a></li>
    +    <li><a href="chaining.html">Chaining</a></li>
    +    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    +    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
    +  </ul>
    +</div>
    +<div class="examples">
    +  <div id="testDiv">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +      <div id="testDivNested">
    +        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +        <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +        <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +        <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +      </div>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv').slimscroll({
    +    height: '500px'
    +  });
    +  $('#testDivNested').slimscroll({
    +    width: '300px',
    +    height: '200px'
    +  });
    +</pre>
    +
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      $('#testDiv').slimscroll({
    +        height: '500px'
    +      });
    +      $('#testDivNested').slimscroll({
    +        width: '300px',
    +        height: '200px'
    +      }).parent().css({
    +        'float': 'left',
    +        'margin': '0 10px 10px 0'
    +      });
    +
    +
    +      //enable syntax highlighter
    +      prettyPrint();
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index 464a89c..168fb5b 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/rail.html b/examples/rail.html
    index 09307d0..72b4551 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index 30adc8b..7a369d0 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -151,7 +151,8 @@ <h2>Facebook-style jQuery Scrollbar</h1>
     
     <pre class="prettyprint">
       $('#testDiv5').slimScroll({
    -      distance: '20px'
    +      distance: '20px',
    +      opacity: 1
       });
     </pre>
     
    @@ -177,7 +178,8 @@ <h2>Facebook-style jQuery Scrollbar</h1>
           });
     
           $('#testDiv5').slimScroll({
    -          distance: '20px'
    +          distance: '20px',
    +          opacity: 1
           });
     
           //enable syntax highlighter
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 231a38e..dd68cb6 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/top-bottom-events.html b/examples/top-bottom-events.html
    index 84eb80a..60dfc9a 100644
    --- a/examples/top-bottom-events.html
    +++ b/examples/top-bottom-events.html
    @@ -28,6 +28,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index ce09d40..aede60f 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.8
    + * Version: 1.0.9
      *
      */
     (function($) {
    @@ -226,7 +226,7 @@
                 // scroll content
                 scrollContent(delta, true);
               }
    -          
    +
               // stop window scroll
               if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
               if (!releaseScroll) { e.returnValue = false; }
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 2f5e067..f73b58e 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,14 +2,14 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.8
    + * Version: 1.0.9
      *
      */
    -(function(e){jQuery.fn.extend({slimScroll:function(l){var a=e.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},l);this.each(function(){function f(h,e,g){var d=h,f=b.outerHeight()-c.outerHeight();e&&(d=parseInt(c.css("top"))+
    -h*parseInt(a.wheelStep)/100*c.outerHeight(),d=Math.min(Math.max(d,0),f),d=0<h?Math.ceil(d):Math.floor(d),c.css({top:d+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());d=j*(b[0].scrollHeight-b.outerHeight());g&&(d=h,h=d/b[0].scrollHeight*b.outerHeight(),h=Math.min(Math.max(h,0),f),c.css({top:h+"px"}));b.scrollTop(d);q();m()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,
    -x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&g.stop(!0,!0).fadeIn("fast"))}function m(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),g.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=e(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),g=b.parent().find(".slimScrollRail");r();if(l){if("scrollTo"in l)k=parseInt(a.scrollTo);
    -else if("scrollBy"in l)k+=parseInt(a.scrollBy);else if("destroy"in l){c.remove();g.remove();b.unwrap();return}f(k,!1,!0)}}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var g=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?
    -"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};g.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(g);c.draggable({axis:"y",
    -containment:"parent",start:function(){u=!0},stop:function(){u=!1;m()},drag:function(){f(0,e(this).position().top,!1)}});g.hover(function(){q()},function(){m()});c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();m()},function(){p=!1;m()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&f((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,
    -!0)});var v=function(a){if(p){a=a||window.event;var b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);f(b,!0);a.preventDefault&&!n&&a.preventDefault();n||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),f(0,!0)):"object"==typeof a.start&&(f(e(a.start).position().top,null,!0),a.alwaysVisible||
    -c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(f){jQuery.fn.extend({slimScroll:function(l){var a=f.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},l);this.each(function(){function g(d,f,h){var e=d,g=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+
    +d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),g),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());e=j*(b[0].scrollHeight-b.outerHeight());h&&(e=d,d=e/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(e);q();m()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,
    +x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function m(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=f(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail");r();if(l){if("scrollTo"in l)k=parseInt(a.scrollTo);
    +else if("scrollBy"in l)k+=parseInt(a.scrollBy);else if("destroy"in l){c.remove();h.remove();b.unwrap();return}g(k,!1,!0)}}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?
    +"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};h.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",
    +containment:"parent",start:function(){u=!0},stop:function(){u=!1;m()},drag:function(){g(0,f(this).position().top,!1)}});h.hover(function(){q()},function(){m()});c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();m()},function(){p=!1;m()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&g((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,
    +!0)});var v=function(d){if(p){d=d||window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget).closest("."+a.wrapperClass).is(b.parent())&&g(c,!0);d.preventDefault&&!n&&d.preventDefault();n||(d.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),g(0,!0)):
    +"object"==typeof a.start&&(g(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From d79950e30fd4b3530843a6e68c10522576162136 Mon Sep 17 00:00:00 2001
    From: Robin Komiwes <robin.komiwes@gmail.com>
    Date: Wed, 20 Feb 2013 18:07:51 +0100
    Subject: [PATCH 052/119] Trigger an event when scrolling
    
    This is so useful when you want to recalculate the position of elements when something is scrolling (like tooltips).
    
    Bonus: a rainbow :rainbow:
    ---
     jquery.slimscroll.js | 2 ++
     1 file changed, 2 insertions(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index aede60f..9215b7b 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -236,6 +236,8 @@
             {
               var delta = y;
               var maxTop = me.outerHeight() - bar.outerHeight();
    +          
    +          me.trigger('slimscrolling');
     
               if (isWheel)
               {
    
    From 183f8aa006227ed95faa484763d5ca29e27e7c58 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 10:43:59 +1100
    Subject: [PATCH 053/119] Add `railDraggable` option allowing to disable
     scrollbar drag.
    
    This is handy when you only rely on mousewheel scroll and you don't
    want to add jQuery UI as dependency.
    ---
     examples/rail.html   | 28 ++++++++++++++++++++++++++++
     jquery.slimscroll.js | 31 ++++++++++++++++++-------------
     2 files changed, 46 insertions(+), 13 deletions(-)
    
    diff --git a/examples/rail.html b/examples/rail.html
    index 72b4551..2bd6236 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -131,6 +131,30 @@ <h2>Facebook-style jQuery Scrollbar</h1>
       });
     </pre>
     
    +  <div id="testDiv5">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +  </div>
    +
    +<pre class="prettyprint">
    +  // This also removes dependency on jQuery UI
    +  $('#testDiv5').slimscroll({
    +    railDraggable: false
    +  });
    +</pre>
     
     </div>
     
    @@ -156,6 +180,10 @@ <h2>Facebook-style jQuery Scrollbar</h1>
             railVisible: true
           });
     
    +      $('#testDiv5').slimscroll({
    +        railDraggable: false
    +      });
    +
           //enable syntax highlighter
           prettyPrint();
         });
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index aede60f..eef3b40 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -30,7 +30,9 @@
             wrapperClass : 'slimScrollDiv',
             allowPageScroll : false,
             scroll : 0,
    -        touchScrollStep : 200
    +        touchScrollStep : 200,
    +        // whether  we should use jQuery UI Draggable to enable bar dragging
    +        railDraggable : true
           };
     
           var o = $.extend(defaults, options);
    @@ -109,7 +111,7 @@
             });
     
             // create scrollbar rail
    -        var rail  = $(divS)
    +        var rail = $(divS)
               .addClass(o.railClass)
               .css({
                 width: o.size,
    @@ -153,17 +155,20 @@
             me.parent().append(rail);
     
             // make it draggable
    -        bar.draggable({
    -          axis: 'y',
    -          containment: 'parent',
    -          start: function() { isDragg = true; },
    -          stop: function() { isDragg = false; hideBar(); },
    -          drag: function(e)
    -          {
    -            // scroll content
    -            scrollContent(0, $(this).position().top, false);
    -          }
    -        });
    +        if (o.useDraggable)
    +        {
    +          bar.draggable({
    +            axis: 'y',
    +            containment: 'parent',
    +            start: function() { isDragg = true; },
    +            stop: function() { isDragg = false; hideBar(); },
    +            drag: function(e)
    +            {
    +              // scroll content
    +              scrollContent(0, $(this).position().top, false);
    +            }
    +          });
    +        }
     
             // on rail over
             rail.hover(function(){
    
    From 1e99a1604a509bd8e1664dac99402dbe8d044732 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 10:45:44 +1100
    Subject: [PATCH 054/119] Fix #52. Ensure rail/bar/wrapper classes are not
     using hard coded names, instead loading them from the options.
    
    ---
     jquery.slimscroll.js | 6 +++---
     1 file changed, 3 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index eef3b40..01b21d9 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -50,14 +50,14 @@
             var me = $(this);
     
             // ensure we are not binding it again
    -        if (me.parent().hasClass('slimScrollDiv'))
    +        if (me.parent().hasClass(o.wrapperClass))
             {
                 // start from last bar position
                 var offset = me.scrollTop();
     
                 // find bar and rail
    -            bar = me.parent().find('.slimScrollBar');
    -            rail = me.parent().find('.slimScrollRail');
    +            bar = me.parent().find('.' + o.barClass);
    +            rail = me.parent().find('.' + o.railClass);
     
                 getBarHeight();
     
    
    From d77909bf9c81651476600cbe2f4a261b534789e4 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 11:06:13 +1100
    Subject: [PATCH 055/119] Update jQuery UI link to use Google CDN on the
     example pages
    
    ---
     examples/allow-page-scroll.html      | 2 +-
     examples/chaining.html               | 2 +-
     examples/disable-fade-out.html       | 2 +-
     examples/height-width.html           | 2 +-
     examples/mouse-wheel.html            | 2 +-
     examples/multiple-elements.html      | 2 +-
     examples/nested.html                 | 2 +-
     examples/programmatic-scrolling.html | 2 +-
     examples/rail.html                   | 2 +-
     examples/scrollbar.html              | 2 +-
     examples/start-position.html         | 2 +-
     11 files changed, 11 insertions(+), 11 deletions(-)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index e8c5da6..d8730ad 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - allow page scroll</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 0fbc6dc..34bf0e1 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - chaining</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 7a46c1b..2583d09 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - disable fade out</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index fc554e5..7f9db9d 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - height / width</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index eea33de..df88f4d 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - mouse wheel</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 8429e1b..4e12c79 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - multiple elements</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/nested.html b/examples/nested.html
    index 4b28d0e..ca55c72 100644
    --- a/examples/nested.html
    +++ b/examples/nested.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - top/bottom events</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index 168fb5b..49a3790 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - programmatic scrolling</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/rail.html b/examples/rail.html
    index 2bd6236..d6b24c1 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - rail options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index 7a369d0..5e93e28 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - scrollbar options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/start-position.html b/examples/start-position.html
    index dd68cb6..a067903 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - start position</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    
    From 30e478f21ec2fb8d7419bd45c8cb9ecf8ee3c148 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 11:07:06 +1100
    Subject: [PATCH 056/119] Move prettyPrint to separate script block on example
     pages
    
    ---
     examples/allow-page-scroll.html      | 6 ++++--
     examples/chaining.html               | 6 ++++--
     examples/disable-fade-out.html       | 6 ++++--
     examples/height-width.html           | 6 ++++--
     examples/mouse-wheel.html            | 6 ++++--
     examples/multiple-elements.html      | 6 ++++--
     examples/nested.html                 | 7 ++++---
     examples/programmatic-scrolling.html | 6 ++++--
     examples/rail.html                   | 7 ++++---
     examples/scrollbar.html              | 6 ++++--
     examples/start-position.html         | 6 ++++--
     11 files changed, 44 insertions(+), 24 deletions(-)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index d8730ad..0fe25ad 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -90,13 +90,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
               allowPageScroll: true
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 34bf0e1..d9cca47 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -76,13 +76,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
               width: '300px'
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 2583d09..909c050 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -89,13 +89,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
             disableFadeOut: true
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 7f9db9d..fc79e53 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -120,13 +120,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
     
           $('#testDiv3').slimScroll();
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index df88f4d..390ccb7 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -93,13 +93,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
               wheelStep: 100
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 4e12c79..3b8bdb5 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -107,13 +107,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
             'margin-right': '30px'
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/nested.html b/examples/nested.html
    index ca55c72..7c4f54e 100644
    --- a/examples/nested.html
    +++ b/examples/nested.html
    @@ -76,14 +76,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
             'margin': '0 10px 10px 0'
           });
     
    -
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index 49a3790..d5e1ded 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -132,13 +132,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
             $('#testDiv2').slimScroll({ scrollTo: '20px' });
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/rail.html b/examples/rail.html
    index d6b24c1..fa03805 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -183,14 +183,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
           $('#testDiv5').slimscroll({
             railDraggable: false
           });
    -
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index 5e93e28..a7cba0c 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -182,13 +182,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
               opacity: 1
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/examples/start-position.html b/examples/start-position.html
    index a067903..73475f6 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -94,13 +94,15 @@ <h2>Facebook-style jQuery Scrollbar</h1>
               start: $('.helloDiv')
           });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    
    From cba85f48521c9fb0d7ed1667b828ae2b102562fd Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 11:08:29 +1100
    Subject: [PATCH 057/119] Pass current scroll position into `slimscrolling`
     event.
    
    ---
     ...-bottom-events.html => scroll-events.html} | 40 ++++++++++++++-----
     jquery.slimscroll.js                          |  5 ++-
     2 files changed, 34 insertions(+), 11 deletions(-)
     rename examples/{top-bottom-events.html => scroll-events.html} (56%)
    
    diff --git a/examples/top-bottom-events.html b/examples/scroll-events.html
    similarity index 56%
    rename from examples/top-bottom-events.html
    rename to examples/scroll-events.html
    index 60dfc9a..7967dd4 100644
    --- a/examples/top-bottom-events.html
    +++ b/examples/scroll-events.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - top/bottom events</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    @@ -50,25 +50,47 @@ <h2>Facebook-style jQuery Scrollbar</h1>
       });
     </pre>
     
    +  <div id="testDiv2">
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +    <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    +    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
    +    <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
    +    <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
    +    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    +  </div>
    +  <div style="padding:2px;border:1px dashed #333;margin:2px;" id="testDivOut2"></div>
    +
    +<pre class="prettyprint">
    +  $('#testDiv2').slimscroll().bind('slimscrolling', function(e, pos) {
    +    $('#testDivOut2').append("Scroll value: " + pos + "px");
    +  });
    +</pre>
    +
     
     </div>
     
     <script type="text/javascript">
         $(function(){
     
    -    $('#testDiv').slimscroll({
    -      alwaysVisible: true
    -    }).bind('slimscroll', function(e, pos) {
    -      $('#testDivOut').append("Reached " + pos + ", ");
    -    });
    +      $('#testDiv').slimscroll({
    +        alwaysVisible: true
    +      }).bind('slimscroll', function(e, pos) {
    +        $('#testDivOut').append("Reached " + pos + ", ");
    +      });
    +
    +      $('#testDiv2').slimscroll().bind('slimscrolling', function(e, pos) {
    +        $('#testDivOut2').append("Scroll: " + pos + "px, ");
    +      });
     
    -      //enable syntax highlighter
    -      prettyPrint();
         });
     </script>
     
     
     <script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-3112455-22']);
       _gaq.push(['_setDomainName', 'none']);
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 22357f9..ee64ec4 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -241,8 +241,6 @@
             {
               var delta = y;
               var maxTop = me.outerHeight() - bar.outerHeight();
    -          
    -          me.trigger('slimscrolling');
     
               if (isWheel)
               {
    @@ -277,6 +275,9 @@
               // scroll content
               me.scrollTop(delta);
     
    +          // fire scrolling event
    +          me.trigger('slimscrolling', ~~delta);
    +
               // ensure bar is visible
               showBar();
     
    
    From 670a6823af59637d2e0b6ef88da7b565dfeb0c0b Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 11:09:12 +1100
    Subject: [PATCH 058/119] Fix links in the examples to point to new
     scoll-events page.
    
    ---
     examples/allow-page-scroll.html      | 2 +-
     examples/chaining.html               | 2 +-
     examples/disable-fade-out.html       | 2 +-
     examples/height-width.html           | 2 +-
     examples/mouse-wheel.html            | 2 +-
     examples/multiple-elements.html      | 2 +-
     examples/nested.html                 | 2 +-
     examples/programmatic-scrolling.html | 2 +-
     examples/rail.html                   | 2 +-
     examples/scrollbar.html              | 3 ++-
     examples/start-position.html         | 2 +-
     11 files changed, 12 insertions(+), 11 deletions(-)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index 0fe25ad..b5e75c6 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index d9cca47..000ba33 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 909c050..c903dbc 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index fc79e53..09eb183 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index 390ccb7..32ba3a3 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 3b8bdb5..db5b4d3 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/nested.html b/examples/nested.html
    index 7c4f54e..7775a25 100644
    --- a/examples/nested.html
    +++ b/examples/nested.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index d5e1ded..f9374b5 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/rail.html b/examples/rail.html
    index fa03805..1ca241e 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index a7cba0c..cb3aad9 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -24,10 +24,11 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a href="nested.html">nested elements</a></li>
       </ul>
     </div>
     <div class="examples">
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 73475f6..033778c 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -24,7 +24,7 @@ <h2>Facebook-style jQuery Scrollbar</h1>
         <li><a href="chaining.html">Chaining</a></li>
         <li><a href="multiple-elements.html">Mulitple bindings</a></li>
         <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="top-bottom-events.html">Scroll Events</a></li>
    +    <li><a href="scroll-events.html">Scroll Events</a></li>
         <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
         <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
         <li><a href="mouse-wheel.html">wheelStep option</a></li>
    
    From 3a710229447faabbf1df527e4cb88b9e441be48d Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 11:48:58 +1100
    Subject: [PATCH 059/119] Fix invalid railDraggable variable
    
    ---
     jquery.slimscroll.js | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index ee64ec4..bb532ad 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -155,7 +155,7 @@
             me.parent().append(rail);
     
             // make it draggable
    -        if (o.useDraggable)
    +        if (o.railDraggable)
             {
               bar.draggable({
                 axis: 'y',
    
    From 1724edbb6fac87115e738b943887b49b4c2362de Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 14:02:55 +1100
    Subject: [PATCH 060/119] Move examples navigation into seperate file. Add
     frameset for easier control
    
    ---
     examples/allow-page-scroll.html      | 19 ------------------
     examples/chaining.html               | 19 ------------------
     examples/disable-fade-out.html       | 19 ------------------
     examples/height-width.html           | 19 ------------------
     examples/index.html                  |  9 +++++++++
     examples/mouse-wheel.html            | 20 +------------------
     examples/multiple-elements.html      | 20 +------------------
     examples/navigation.html             | 30 ++++++++++++++++++++++++++++
     examples/nested.html                 | 22 ++------------------
     examples/programmatic-scrolling.html | 20 +------------------
     examples/rail.html                   | 20 +------------------
     examples/scroll-events.html          | 20 +------------------
     examples/scrollbar.html              | 20 +------------------
     examples/start-position.html         | 20 +------------------
     examples/style.css                   |  2 +-
     15 files changed, 49 insertions(+), 230 deletions(-)
     create mode 100644 examples/index.html
     create mode 100644 examples/navigation.html
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index b5e75c6..2c584b2 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -12,25 +12,6 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index 000ba33..ef54fa6 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -12,25 +12,6 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index c903dbc..1420e88 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -12,25 +12,6 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 09eb183..17fa9ba 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -12,25 +12,6 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
     <div class="examples">
         <div style="height:300px;">
           <div id="testDiv">
    diff --git a/examples/index.html b/examples/index.html
    new file mode 100644
    index 0000000..890dd71
    --- /dev/null
    +++ b/examples/index.html
    @@ -0,0 +1,9 @@
    +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    +<html>
    +    <head>
    +    </head>
    +    <frameset framespacing="0" cols="250,*" frameborder="0" noresize>
    +        <frame name="nav" src="navigation.html" target="top">
    +        <frame name="main" src="height-width.html" target="main">
    +    </frameset>
    +</html>
    \ No newline at end of file
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index 32ba3a3..f6c0dcf 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index db5b4d3..92099c7 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div class="area">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/navigation.html b/examples/navigation.html
    new file mode 100644
    index 0000000..2df6272
    --- /dev/null
    +++ b/examples/navigation.html
    @@ -0,0 +1,30 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - navigation</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<link href="style.css" type="text/css" rel="stylesheet" />
    +</head>
    +<body>
    +<div id="nav">
    +  <h1>jQuery slimScroll</h1>
    +  <h2>Facebook-style jQuery Scrollbar</h1>
    +  <hr />
    +  <ul>
    +    <li><a target="main" href="height-width.html">Height / Width options</a></li>
    +    <li><a target="main" href="scrollbar.html">Scrollbar options</a></li>
    +    <li><a target="main" href="rail.html">Rail options</a></li>
    +    <li><a target="main" href="start-position.html">Start position</a></li>
    +    <li><a target="main" href="chaining.html">Chaining</a></li>
    +    <li><a target="main" href="multiple-elements.html">Mulitple bindings</a></li>
    +    <li><a target="main" href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    +    <li><a target="main" href="scroll-events.html">Scroll Events</a></li>
    +    <li><a target="main" href="allow-page-scroll.html">allowPageScroll option</a></li>
    +    <li><a target="main" href="disable-fade-out.html">disableFadeOut option</a></li>
    +    <li><a target="main" href="mouse-wheel.html">wheelStep option</a></li>
    +    <li><a target="main" href="nested.html">nested elements</a></li>
    +    <li><a target="main" href="dynamic-content.html">dynamic content</a></li>
    +  </ul>
    +</div>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/examples/nested.html b/examples/nested.html
    index 7775a25..adc465d 100644
    --- a/examples/nested.html
    +++ b/examples/nested.html
    @@ -1,7 +1,7 @@
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     <html>
     <head>
    -<title>jquery.slimscroll - top/bottom events</title>
    +<title>jquery.slimscroll - nested elements</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index f9374b5..67d0a68 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/rail.html b/examples/rail.html
    index 1ca241e..c6350f5 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/scroll-events.html b/examples/scroll-events.html
    index 7967dd4..9ab9521 100644
    --- a/examples/scroll-events.html
    +++ b/examples/scroll-events.html
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index cb3aad9..f2c401d 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 033778c..5e2e8dc 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -12,25 +12,7 @@
     </head>
     <body>
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    -<div id="nav">
    -  <h1>jQuery slimScroll</h1>
    -  <h2>Facebook-style jQuery Scrollbar</h1>
    -  <hr />
    -  <ul>
    -    <li><a href="height-width.html">Height / Width options</a></li>
    -    <li><a href="scrollbar.html">Scrollbar options</a></li>
    -    <li><a href="rail.html">Rail options</a></li>
    -    <li><a href="start-position.html">Start position</a></li>
    -    <li><a href="chaining.html">Chaining</a></li>
    -    <li><a href="multiple-elements.html">Mulitple bindings</a></li>
    -    <li><a href="programmatic-scrolling.html">Programmatic Scrolling</a></li>
    -    <li><a href="scroll-events.html">Scroll Events</a></li>
    -    <li><a href="allow-page-scroll.html">allowPageScroll option</a></li>
    -    <li><a href="disable-fade-out.html">disableFadeOut option</a></li>
    -    <li><a href="mouse-wheel.html">wheelStep option</a></li>
    -    <li><a href="nested.html">nested elements</a></li>
    -  </ul>
    -</div>
    +
     <div class="examples">
       <div id="testDiv">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
    diff --git a/examples/style.css b/examples/style.css
    index 6d2965a..f12104a 100644
    --- a/examples/style.css
    +++ b/examples/style.css
    @@ -4,7 +4,7 @@ h2 { font-size:10px; margin:0 }
     p { margin:5px 0; font-size:12px; }
     pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; background:#eee; border-bottom:3px solid; }
     .examples { border-radius:20px; background:#fff; padding:15px;
    -  margin:0 125px 0 250px; border-collapse: collapse; border:1px solid #000; }
    +  margin:0 150px 0 0; border-collapse: collapse; border:1px solid #000; }
     .slimScrollDiv { border:1px solid #eee; }
     #nav { position:fixed; top:0 left:0; background:#fff; padding:15px; border-radius:20px; width:200px; }
     #nav ul { list-style-type:square; list-style-position:inside; margin:20px 0 0 0; padding:0; }
    
    From 1ac38d2cef968d17b32a6a6283ebf39f2e229f03 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 14:10:27 +1100
    Subject: [PATCH 061/119] Add some meaningfull comments to the options section
    
    ---
     jquery.slimscroll.js | 50 ++++++++++++++++++++++++++++++++++++++------
     1 file changed, 44 insertions(+), 6 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index bb532ad..d2ffd41 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -11,28 +11,66 @@
         slimScroll: function(options) {
     
           var defaults = {
    -        wheelStep : 20,
    +
    +        // width in pixels of the visible scroll area
             width : 'auto',
    +
    +        // height in pixels of the visible scroll area
             height : '250px',
    +
    +        // width in pixels of the scrollbar and rail
             size : '7px',
    +
    +        // scrollbar color, accepts any hex/color value
             color: '#000',
    +
    +        // scrollbar position - left/right
             position : 'right',
    +
    +        // distance in pixels between the side edge and the scrollbar
             distance : '1px',
    +
    +        // default scroll position on load - top / bottom / $('selector')
             start : 'top',
    +
    +        // sets scrollbar opacity
             opacity : .4,
    +
    +        // enables always-on mode for the scrollbar
             alwaysVisible : false,
    +
    +        // check if we should hide the scrollbar when user is hovering over
             disableFadeOut: false,
    +
    +        // sets visibility of the rail
             railVisible : false,
    +
    +        // sets rail color
             railColor : '#333',
    -        railOpacity : '0.2',
    +
    +        // sets rail opacity
    +        railOpacity : .2,
    +
    +        // whether  we should use jQuery UI Draggable to enable bar dragging
    +        railDraggable : true,
    +
    +        // defautlt CSS class of the slimscroll rail
             railClass : 'slimScrollRail',
    +
    +        // defautlt CSS class of the slimscroll bar
             barClass : 'slimScrollBar',
    +
    +        // defautlt CSS class of the slimscroll wrapper
             wrapperClass : 'slimScrollDiv',
    +
    +        // check if mousewheel should scroll the window if we reach top/bottom
             allowPageScroll : false,
    -        scroll : 0,
    -        touchScrollStep : 200,
    -        // whether  we should use jQuery UI Draggable to enable bar dragging
    -        railDraggable : true
    +
    +        // scroll amount applied to each mouse wheel step
    +        wheelStep : 20,
    +
    +        // scroll amount applied when user is using gestures
    +        touchScrollStep : 200
           };
     
           var o = $.extend(defaults, options);
    
    From 8eb8459b76815c4a1e531f7fff187dbd98cadabd Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 14:17:07 +1100
    Subject: [PATCH 062/119] Recalculate scrollbar size when .slimscroll() is
     called again. Extremely useful when we update the content dynamically / using
     ajax.
    
    ---
     examples/dynamic-content.html | 81 +++++++++++++++++++++++++++++++++++
     jquery.slimscroll.js          | 55 +++++++++++++-----------
     2 files changed, 111 insertions(+), 25 deletions(-)
     create mode 100644 examples/dynamic-content.html
    
    diff --git a/examples/dynamic-content.html b/examples/dynamic-content.html
    new file mode 100644
    index 0000000..0d667c8
    --- /dev/null
    +++ b/examples/dynamic-content.html
    @@ -0,0 +1,81 @@
    +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    +<html>
    +<head>
    +<title>jquery.slimscroll - dynamic content</title>
    +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    +<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
    +<script type="text/javascript" src="libs/prettify/prettify.js"></script>
    +<script type="text/javascript" src="../jquery.slimscroll.js"></script>
    +<link href="style.css" type="text/css" rel="stylesheet" />
    +</head>
    +<body>
    +<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    +<div class="examples">
    +
    +
    +  <div id="testDiv">
    +  </div>
    +
    +  <pre class="prettyprint">
    +  // update content every second
    +  setInterval(function(){
    +    var el = $('&lt;div&gt;&lt;/div&gt;').html('#' + $('#testDiv').children().length)
    +            .css({ padding: '3px', border: '1px solid #ccc', margin: '5px' });
    +    $('#testDiv').append(el);
    +
    +    // update slimscroll every time content changes
    +    $('#testDiv').slimscroll();
    +  }, 1000);
    +
    +  $('#testDiv').slimscroll({
    +    alwaysVisible: true,
    +    height: 150
    +  });
    +  </pre>
    +
    +
    +
    +</div>
    +
    +<script type="text/javascript">
    +    $(function(){
    +
    +      // update content every second
    +      setInterval(function(){
    +        var el = $('<div></div>').html('#' + $('#testDiv').children().length)
    +                .css({ padding: '3px', border: '1px solid #ccc', margin: '5px' });
    +        $('#testDiv').append(el);
    +
    +        // update slimscroll every time content changes
    +        $('#testDiv').slimscroll();
    +      }, 1000);
    +
    +      $('#testDiv').slimscroll({
    +        alwaysVisible: true,
    +        height: 150
    +      });
    +
    +    });
    +</script>
    +
    +
    +<script type="text/javascript">
    +
    +  //enable syntax highlighter
    +  prettyPrint();
    +
    +  var _gaq = _gaq || [];
    +  _gaq.push(['_setAccount', 'UA-3112455-22']);
    +  _gaq.push(['_setDomainName', 'none']);
    +  _gaq.push(['_trackPageview']);
    +
    +  (function() {
    +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    +  })();
    +</script>
    +</body>
    +</html>
    \ No newline at end of file
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index d2ffd41..6b99585 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -100,7 +100,7 @@
                 getBarHeight();
     
                 // check if we should scroll existing instance
    -            if (options)
    +            if ($.isPlainObject(options))
                 {
                   if ('scrollTo' in options)
                   {
    @@ -253,7 +253,29 @@
               }
             });
     
    -        var _onWheel = function(e)
    +        // check start position
    +        if (o.start === 'bottom')
    +        {
    +          // scroll content to bottom
    +          bar.css({ top: me.outerHeight() - bar.outerHeight() });
    +          scrollContent(0, true);
    +        }
    +        else if (o.start !== 'top')
    +        {
    +          // assume jQuery selector
    +          scrollContent($(o.start).position().top, null, true);
    +
    +          // make sure bar stays hidden
    +          if (!o.alwaysVisible) { bar.hide(); }
    +        }
    +
    +        // attach scroll events
    +        attachWheel();
    +
    +        // set up initial height
    +        getBarHeight();
    +
    +        function _onWheel(e)
             {
               // use mouse wheel only when mouse is over
               if (!isOverPanel) { return; }
    @@ -323,7 +345,7 @@
               hideBar();
             }
     
    -        var attachWheel = function()
    +        function attachWheel()
             {
               if (window.addEventListener)
               {
    @@ -336,18 +358,16 @@
               }
             }
     
    -        // attach scroll events
    -        attachWheel();
    -
             function getBarHeight()
             {
               // calculate scrollbar height and make sure it is not too small
               barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
               bar.css({ height: barHeight + 'px' });
    -        }
     
    -        // set up initial height
    -        getBarHeight();
    +          // hide scrollbar if content is not long enough
    +          var display = barHeight == me.outerHeight() ? 'none' : 'block';
    +          bar.css({ display: display });
    +        }
     
             function showBar()
             {
    @@ -356,7 +376,7 @@
               clearTimeout(queueHide);
     
               // when bar reached top or bottom
    -          if (percentScroll == ~~ percentScroll)
    +          if (percentScroll == ~~percentScroll)
               {
                 //release wheel
                 releaseScroll = o.allowPageScroll;
    @@ -395,21 +415,6 @@
               }
             }
     
    -        // check start position
    -        if (o.start == 'bottom')
    -        {
    -          // scroll content to bottom
    -          bar.css({ top: me.outerHeight() - bar.outerHeight() });
    -          scrollContent(0, true);
    -        }
    -        else if (typeof o.start == 'object')
    -        {
    -          // scroll content
    -          scrollContent($(o.start).position().top, null, true);
    -
    -          // make sure bar stays hidden
    -          if (!o.alwaysVisible) { bar.hide(); }
    -        }
           });
     
           // maintain chainability
    
    From cdcb258296a9150d6b6fa7850502cbe16febcf51 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Mon, 11 Mar 2013 14:22:37 +1100
    Subject: [PATCH 063/119] Bump-up version.
    
    ---
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js | 18 +++++++++---------
     2 files changed, 10 insertions(+), 10 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 6b99585..8645034 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.9
    + * Version: 1.1.0
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index f73b58e..f3e1b0f 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,14 +2,14 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.0.9
    + * Version: 1.1.0
      *
      */
    -(function(f){jQuery.fn.extend({slimScroll:function(l){var a=f.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0,touchScrollStep:200},l);this.each(function(){function g(d,f,h){var e=d,g=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+
    -d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),g),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());e=j*(b[0].scrollHeight-b.outerHeight());h&&(e=d,d=e/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(e);q();m()}function r(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),A);c.css({height:s+"px"})}function q(){r();clearTimeout(w);j==~~j&&(n=a.allowPageScroll,
    -x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;s>=b.outerHeight()?n=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function m(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!p)&&!t&&!u)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var p,t,u,w,y,s,j,x,A=30,n=!1,b=f(this);if(b.parent().hasClass("slimScrollDiv")){var k=b.scrollTop(),c=b.parent().find(".slimScrollBar"),h=b.parent().find(".slimScrollRail");r();if(l){if("scrollTo"in l)k=parseInt(a.scrollTo);
    -else if("scrollBy"in l)k+=parseInt(a.scrollBy);else if("destroy"in l){c.remove();h.remove();b.unwrap();return}g(k,!1,!0)}}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?
    -"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};h.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",
    -containment:"parent",start:function(){u=!0},stop:function(){u=!1;m()},drag:function(){g(0,f(this).position().top,!1)}});h.hover(function(){q()},function(){m()});c.hover(function(){t=!0},function(){t=!1});b.hover(function(){p=!0;q();m()},function(){p=!1;m()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&g((y-b.originalEvent.touches[0].pageY)/a.touchScrollStep,
    -!0)});var v=function(d){if(p){d=d||window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget).closest("."+a.wrapperClass).is(b.parent())&&g(c,!0);d.preventDefault&&!n&&d.preventDefault();n||(d.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();r();"bottom"==a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),g(0,!0)):
    -"object"==typeof a.start&&(g(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(f){jQuery.fn.extend({slimScroll:function(l){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200},l);this.each(function(){function r(d){if(n){d=d||window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/
    +120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget).closest("."+a.wrapperClass).is(b.parent())&&g(c,!0);d.preventDefault&&!p&&d.preventDefault();p||(d.returnValue=!1)}}function g(d,f,h){var e=d,g=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),g),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());e=j*(b[0].scrollHeight-b.outerHeight());h&&(e=d,d=e/b[0].scrollHeight*
    +b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(e);b.trigger("slimscrolling",~~e);s();m()}function A(){window.addEventListener?(this.addEventListener("DOMMouseScroll",r,!1),this.addEventListener("mousewheel",r,!1)):document.attachEvent("onmousewheel",r)}function t(){q=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),B);c.css({height:q+"px"});var a=q==b.outerHeight()?"none":"block";c.css({display:a})}function s(){t();clearTimeout(w);j==~~j&&(p=a.allowPageScroll,
    +x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;q>=b.outerHeight()?p=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function m(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!n)&&!u&&!v)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var n,u,v,w,y,q,j,x,B=30,p=!1,b=f(this);if(b.parent().hasClass(a.wrapperClass)){var k=b.scrollTop(),c=b.parent().find("."+a.barClass),h=b.parent().find("."+a.railClass);t();if(f.isPlainObject(l)){if("scrollTo"in l)k=
    +parseInt(a.scrollTo);else if("scrollBy"in l)k+=parseInt(a.scrollBy);else if("destroy"in l){c.remove();h.remove();b.unwrap();return}g(k,!1,!0)}}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&
    +a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};h.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(h);
    +a.railDraggable&&c.draggable({axis:"y",containment:"parent",start:function(){v=!0},stop:function(){v=!1;m()},drag:function(){g(0,f(this).position().top,!1)}});h.hover(function(){s()},function(){m()});c.hover(function(){u=!0},function(){u=!1});b.hover(function(){n=!0;s();m()},function(){n=!1;m()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&g((y-
    +b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),g(0,!0)):"top"!==a.start&&(g(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide());A();t()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From a5fb1b6decbe56cb0322f1f354489f2ad29a8df5 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Sat, 16 Mar 2013 13:39:36 +1100
    Subject: [PATCH 064/119] Bump-up version to sync with plugins page.
    
    ---
     jquery.slimscroll.js     | 2 +-
     jquery.slimscroll.min.js | 2 +-
     slimScroll.jquery.json   | 2 +-
     3 files changed, 3 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 8645034..eada791 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.1.0
    + * Version: 1.1.1
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index f3e1b0f..4a65411 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.1.0
    + * Version: 1.1.1
      *
      */
     (function(f){jQuery.fn.extend({slimScroll:function(l){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200},l);this.each(function(){function r(d){if(n){d=d||window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index 6f6ed30..e87a967 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.0.6",
    +  "version"     : "1.1.1",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From 7b3a56e2a61bc150fef4a8bdca3db19ea8e19a41 Mon Sep 17 00:00:00 2001
    From: chawkinsuf <chawkinsuf@gmail.com>
    Date: Sat, 16 Mar 2013 16:28:43 -0400
    Subject: [PATCH 065/119] Add ability to force a resize after contents of an
     existing slimscroll object have changed
    
    ---
     jquery.slimscroll.js | 9 +++++++++
     1 file changed, 9 insertions(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index eada791..15062e0 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -102,6 +102,15 @@
                 // check if we should scroll existing instance
                 if ($.isPlainObject(options))
                 {
    +              // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
    +              if ( 'height' in options && options.height == 'auto' ) {
    +                me.parent().css('height', 'auto');
    +                me.css('height', 'auto');
    +                var height = me.parent().parent().innerHeight();
    +                me.parent().css('height', height);
    +                me.css('height', height);
    +              }
    +
                   if ('scrollTo' in options)
                   {
                     // jump to a static point
    
    From 6f219d5385fcec2dfcdcd89d4f1ea64f9b28d2bc Mon Sep 17 00:00:00 2001
    From: Muhammad Adeel Nawaz <adeel.nawaz@coeus-solutions.de>
    Date: Wed, 20 Mar 2013 16:45:56 +0500
    Subject: [PATCH 066/119] Update jquery.slimscroll.js
    
    Fixed the bug:
    When user sets "allowPageScroll" to true, the parent should only scroll when the scroll in on the boundary. But when the scroll touched one of the boundaries, the parent started to scroll even when the scroll in not at boundaries
    
    Solution:
    The variable "releaseScroll", one set to true, was never set to false. So I set it to false if the scroll is not at the end of the page.
    ---
     jquery.slimscroll.js | 4 ++++
     1 file changed, 4 insertions(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index eada791..8ec3b1c 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -388,6 +388,10 @@
                     me.trigger('slimscroll', msg);
                 }
               }
    +          else
    +          {
    +            releaseScroll = false;
    +          }
               lastScroll = percentScroll;
     
               // show only when required
    
    From c6eb8e008fcb21a4f55716a4e1833e010de2bd0a Mon Sep 17 00:00:00 2001
    From: zensh <admin@zensh.com>
    Date: Thu, 18 Apr 2013 11:41:56 +0800
    Subject: [PATCH 067/119] fix, when scrollbar height equal parent height, auto
     hide
    
    ---
     jquery.slimscroll.js | 5 +++--
     1 file changed, 3 insertions(+), 2 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 15062e0..bd88867 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -374,8 +374,9 @@
               bar.css({ height: barHeight + 'px' });
     
               // hide scrollbar if content is not long enough
    -          var display = barHeight == me.outerHeight() ? 'none' : 'block';
    +          var display = me.outerHeight() - barHeight <= 1 ? 'none' : 'block';
               bar.css({ display: display });
    +          if (o.railVisible) { rail.css({ display: display }); }
             }
     
             function showBar()
    @@ -400,7 +401,7 @@
               lastScroll = percentScroll;
     
               // show only when required
    -          if(barHeight >= me.outerHeight()) {
    +          if(barHeight >= me.outerHeight() - 1) {
                 //allow window scroll
                 releaseScroll = true;
                 return;
    
    From af2152b10d8918cb86ceb7f28727e306de9b1857 Mon Sep 17 00:00:00 2001
    From: =?UTF-8?q?Gabriel=20Caron=20L=27=C3=89cuyer?= <gahilo@hotmail.com>
    Date: Thu, 18 Apr 2013 14:58:34 -0400
    Subject: [PATCH 068/119] Take in account the padding of the containing element
     when height=auto
    
    Uses parent.parent.height, instead of parent.parent.innerHeight to take
    in acount the padding of the containing element whent the height is set
    to 'auto'
    ---
     jquery.slimscroll.js | 4 ++--
     1 file changed, 2 insertions(+), 2 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 15062e0..45eb2d9 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -106,7 +106,7 @@
                   if ( 'height' in options && options.height == 'auto' ) {
                     me.parent().css('height', 'auto');
                     me.css('height', 'auto');
    -                var height = me.parent().parent().innerHeight();
    +                var height = me.parent().parent().height();
                     me.parent().css('height', height);
                     me.css('height', height);
                   }
    @@ -138,7 +138,7 @@
             }
     
             // optionally set height to the parent's height
    -        o.height = (o.height == 'auto') ? me.parent().innerHeight() : o.height;
    +        o.height = (o.height == 'auto') ? me.parent().height() : o.height;
     
             // wrap content
             var wrapper = $(divS)
    
    From b3e009db1e674e61e294ccb2de6276968b8f5951 Mon Sep 17 00:00:00 2001
    From: =?UTF-8?q?Gabriel=20Caron=20L=27=C3=89cuyer?= <gahilo@hotmail.com>
    Date: Thu, 18 Apr 2013 15:55:54 -0400
    Subject: [PATCH 069/119] Oversize the rail and bar when hovered, make it
     easier for the user to select the bar
    
    ---
     jquery.slimscroll.js | 45 ++++++++++++++++++++++++++++++++++++++++----
     1 file changed, 41 insertions(+), 4 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 45eb2d9..78e224c 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -20,6 +20,9 @@
     
             // width in pixels of the scrollbar and rail
             size : '7px',
    +        
    +        // oversize width in pixels of the scrollbar and rail
    +        overSize : '14px',
     
             // scrollbar color, accepts any hex/color value
             color: '#000',
    @@ -78,7 +81,7 @@
           // do it for every element that matches selector
           this.each(function(){
     
    -      var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
    +      var isOverPanel, isOverBar, isOverRail, isDragg, queueHide, touchDif,
             barHeight, percentScroll, lastScroll,
             divS = '<div></div>',
             minBarHeight = 30,
    @@ -219,16 +222,24 @@
     
             // on rail over
             rail.hover(function(){
    +          isOverRail = true;
               showBar();
    +          overSizeBar();
    +          console.log("over");
             }, function(){
    +          isOverRail = true;
               hideBar();
    +          normalSizeBar();
    +          console.log("outover");
             });
     
             // on bar over
             bar.hover(function(){
               isOverBar = true;
    +          overSizeBar();
             }, function(){
               isOverBar = false;
    +          normalSizeBar();
             });
     
             // show on parent mouseover
    @@ -374,10 +385,34 @@
               bar.css({ height: barHeight + 'px' });
     
               // hide scrollbar if content is not long enough
    -          var display = barHeight == me.outerHeight() ? 'none' : 'block';
    +          var display = me.outerHeight() - barHeight <= 1 ? 'none' : 'block';
               bar.css({ display: display });
    +          if (o.railVisible) { rail.css({ display: display }); }
             }
     
    +        function overSizeBar(){
    +        	if (isOverBar || isOverRail){
    +        		bar.css('width', o.overSize);
    +                rail.css('width', o.overSize);
    +        	}
    +        }
    +        
    +        function normalSizeBar(check){
    +        	if(typeof check === "undefined"){
    +        		check = true;
    +        	}
    +        	if (check){
    +        		if (!isOverBar && !isOverRail && !isDragg){
    +            		bar.css('width', o.size);
    +                    rail.css('width', o.size);
    +            	}
    +        	}else{
    +        		bar.css('width', o.size);
    +                rail.css('width', o.size);
    +        	}
    +        	
    +        }
    +        
             function showBar()
             {
               // recalculate bar height
    @@ -400,7 +435,7 @@
               lastScroll = percentScroll;
     
               // show only when required
    -          if(barHeight >= me.outerHeight()) {
    +          if(barHeight >= me.outerHeight() - 1) {
                 //allow window scroll
                 releaseScroll = true;
                 return;
    @@ -419,9 +454,11 @@
                   {
                     bar.fadeOut('slow');
                     rail.fadeOut('slow');
    +                normalSizeBar(false);
                   }
                 }, 1000);
               }
    +          
             }
     
           });
    @@ -435,4 +472,4 @@
         slimscroll: jQuery.fn.slimScroll
       });
     
    -})(jQuery);
    +})(jQuery);
    \ No newline at end of file
    
    From 718d3ca28d3823ff2be0674585fc328a91957524 Mon Sep 17 00:00:00 2001
    From: Wing <steely.wing@gmail.com>
    Date: Wed, 15 May 2013 19:20:34 +0900
    Subject: [PATCH 070/119] Check if jQuery UI draggable is loaded
    
    ---
     jquery.slimscroll.js | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 15062e0..0e13f5c 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -202,7 +202,7 @@
             me.parent().append(rail);
     
             // make it draggable
    -        if (o.railDraggable)
    +        if (o.railDraggable && $.ui && typeof($.ui.draggable) == 'function')
             {
               bar.draggable({
                 axis: 'y',
    
    From daa61fe6b9880bc2958231b5313b97759b839ca5 Mon Sep 17 00:00:00 2001
    From: Jack Godwin <godwhj@gmail.com>
    Date: Tue, 4 Jun 2013 13:07:59 -0400
    Subject: [PATCH 071/119] Fixed IE8 mouse wheel issue #72
    
    ---
     jquery.slimscroll.js | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 15062e0..8c54835 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -295,7 +295,7 @@
               if (e.wheelDelta) { delta = -e.wheelDelta/120; }
               if (e.detail) { delta = e.detail / 3; }
     
    -          var target = e.target || e.srcTarget;
    +          var target = e.target || e.srcTarget || e.srcElement;
               if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
                 // scroll content
                 scrollContent(delta, true);
    
    From 55f2dbd8d9b6d26b33ebfac9b044e280ca5150f0 Mon Sep 17 00:00:00 2001
    From: Piotr Rochala <piotr.rochala@gmail.com>
    Date: Sun, 9 Jun 2013 11:52:54 +1000
    Subject: [PATCH 072/119] Revert "Oversize the rail and bar when hovered, make
     it easier for the user to select the bar"
    
    This reverts commit b3e009db1e674e61e294ccb2de6276968b8f5951.
    ---
     jquery.slimscroll.js | 43 +++----------------------------------------
     1 file changed, 3 insertions(+), 40 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 7835391..66dde9c 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -20,9 +20,6 @@
     
             // width in pixels of the scrollbar and rail
             size : '7px',
    -        
    -        // oversize width in pixels of the scrollbar and rail
    -        overSize : '14px',
     
             // scrollbar color, accepts any hex/color value
             color: '#000',
    @@ -81,7 +78,7 @@
           // do it for every element that matches selector
           this.each(function(){
     
    -      var isOverPanel, isOverBar, isOverRail, isDragg, queueHide, touchDif,
    +      var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
             barHeight, percentScroll, lastScroll,
             divS = '<div></div>',
             minBarHeight = 30,
    @@ -222,24 +219,16 @@
     
             // on rail over
             rail.hover(function(){
    -          isOverRail = true;
               showBar();
    -          overSizeBar();
    -          console.log("over");
             }, function(){
    -          isOverRail = true;
               hideBar();
    -          normalSizeBar();
    -          console.log("outover");
             });
     
             // on bar over
             bar.hover(function(){
               isOverBar = true;
    -          overSizeBar();
             }, function(){
               isOverBar = false;
    -          normalSizeBar();
             });
     
             // show on parent mouseover
    @@ -385,34 +374,10 @@
               bar.css({ height: barHeight + 'px' });
     
               // hide scrollbar if content is not long enough
    -          var display = me.outerHeight() - barHeight <= 1 ? 'none' : 'block';
    +          var display = barHeight == me.outerHeight() ? 'none' : 'block';
               bar.css({ display: display });
    -          if (o.railVisible) { rail.css({ display: display }); }
             }
     
    -        function overSizeBar(){
    -        	if (isOverBar || isOverRail){
    -        		bar.css('width', o.overSize);
    -                rail.css('width', o.overSize);
    -        	}
    -        }
    -        
    -        function normalSizeBar(check){
    -        	if(typeof check === "undefined"){
    -        		check = true;
    -        	}
    -        	if (check){
    -        		if (!isOverBar && !isOverRail && !isDragg){
    -            		bar.css('width', o.size);
    -                    rail.css('width', o.size);
    -            	}
    -        	}else{
    -        		bar.css('width', o.size);
    -                rail.css('width', o.size);
    -        	}
    -        	
    -        }
    -        
             function showBar()
             {
               // recalculate bar height
    @@ -439,7 +404,7 @@
               lastScroll = percentScroll;
     
               // show only when required
    -          if(barHeight >= me.outerHeight() - 1) {
    +          if(barHeight >= me.outerHeight()) {
                 //allow window scroll
                 releaseScroll = true;
                 return;
    @@ -458,11 +423,9 @@
                   {
                     bar.fadeOut('slow');
                     rail.fadeOut('slow');
    -                normalSizeBar(false);
                   }
                 }, 1000);
               }
    -          
             }
     
           });
    
    From 2e563d4c7b88cba21e504cecbcd993d004204ce8 Mon Sep 17 00:00:00 2001
    From: Piotr Rochala <piotr.rochala@gmail.com>
    Date: Sun, 9 Jun 2013 12:00:16 +1000
    Subject: [PATCH 073/119] Bump up version.
    
    ---
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js | 18 +++++++++---------
     slimScroll.jquery.json   |  2 +-
     3 files changed, 11 insertions(+), 11 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 66dde9c..ad6137f 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.1.1
    + * Version: 1.2.0
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 4a65411..dd63f62 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,14 +2,14 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.1.1
    + * Version: 1.2.0
      *
      */
    -(function(f){jQuery.fn.extend({slimScroll:function(l){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200},l);this.each(function(){function r(d){if(n){d=d||window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/
    -120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget).closest("."+a.wrapperClass).is(b.parent())&&g(c,!0);d.preventDefault&&!p&&d.preventDefault();p||(d.returnValue=!1)}}function g(d,f,h){var e=d,g=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),g),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());e=j*(b[0].scrollHeight-b.outerHeight());h&&(e=d,d=e/b[0].scrollHeight*
    -b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(e);b.trigger("slimscrolling",~~e);s();m()}function A(){window.addEventListener?(this.addEventListener("DOMMouseScroll",r,!1),this.addEventListener("mousewheel",r,!1)):document.attachEvent("onmousewheel",r)}function t(){q=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),B);c.css({height:q+"px"});var a=q==b.outerHeight()?"none":"block";c.css({display:a})}function s(){t();clearTimeout(w);j==~~j&&(p=a.allowPageScroll,
    -x!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom"));x=j;q>=b.outerHeight()?p=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function m(){a.alwaysVisible||(w=setTimeout(function(){if((!a.disableFadeOut||!n)&&!u&&!v)c.fadeOut("slow"),h.fadeOut("slow")},1E3))}var n,u,v,w,y,q,j,x,B=30,p=!1,b=f(this);if(b.parent().hasClass(a.wrapperClass)){var k=b.scrollTop(),c=b.parent().find("."+a.barClass),h=b.parent().find("."+a.railClass);t();if(f.isPlainObject(l)){if("scrollTo"in l)k=
    -parseInt(a.scrollTo);else if("scrollBy"in l)k+=parseInt(a.scrollBy);else if("destroy"in l){c.remove();h.remove();b.unwrap();return}g(k,!1,!0)}}else{a.height="auto"==a.height?b.parent().innerHeight():a.height;k=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&
    -a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,zIndex:99}),z="right"==a.position?{right:a.distance}:{left:a.distance};h.css(z);c.css(z);b.wrap(k);b.parent().append(c);b.parent().append(h);
    -a.railDraggable&&c.draggable({axis:"y",containment:"parent",start:function(){v=!0},stop:function(){v=!1;m()},drag:function(){g(0,f(this).position().top,!1)}});h.hover(function(){s()},function(){m()});c.hover(function(){u=!0},function(){u=!1});b.hover(function(){n=!0;s();m()},function(){n=!1;m()});b.bind("touchstart",function(a){a.originalEvent.touches.length&&(y=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&g((y-
    -b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),g(0,!0)):"top"!==a.start&&(g(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide());A();t()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(e){jQuery.fn.extend({slimScroll:function(h){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200},h);this.each(function(){function s(d){if(q){d=d||window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/
    +120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&k(c,!0);d.preventDefault&&!m&&d.preventDefault();m||(d.returnValue=!1)}}function k(d,e,h){var f=d,g=b.outerHeight()-c.outerHeight();e&&(f=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),f=Math.min(Math.max(f,0),g),f=0<d?Math.ceil(f):Math.floor(f),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=j*(b[0].scrollHeight-b.outerHeight());h&&
    +(f=d,d=f/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(f);b.trigger("slimscrolling",~~f);t();n()}function A(){window.addEventListener?(this.addEventListener("DOMMouseScroll",s,!1),this.addEventListener("mousewheel",s,!1)):document.attachEvent("onmousewheel",s)}function u(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),B);c.css({height:r+"px"});var a=r==b.outerHeight()?"none":"block";c.css({display:a})}function t(){u();clearTimeout(x);
    +j==~~j?(m=a.allowPageScroll,y!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom")):m=!1;y=j;r>=b.outerHeight()?m=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&g.stop(!0,!0).fadeIn("fast"))}function n(){a.alwaysVisible||(x=setTimeout(function(){if((!a.disableFadeOut||!q)&&!v&&!w)c.fadeOut("slow"),g.fadeOut("slow")},1E3))}var q,v,w,x,z,r,j,y,B=30,m=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var l=b.scrollTop(),c=b.parent().find("."+a.barClass),g=b.parent().find("."+a.railClass);u();if(e.isPlainObject(h)){if("height"in
    +h&&"auto"==h.height){b.parent().css("height","auto");b.css("height","auto");var p=b.parent().parent().height();b.parent().css("height",p);b.css("height",p)}if("scrollTo"in h)l=parseInt(a.scrollTo);else if("scrollBy"in h)l+=parseInt(a.scrollBy);else if("destroy"in h){c.remove();g.remove();b.unwrap();return}k(l,!1,!0)}}else{a.height="auto"==a.height?b.parent().height():a.height;l=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
    +width:a.width,height:a.height});var g=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,
    +zIndex:99}),p="right"==a.position?{right:a.distance}:{left:a.distance};g.css(p);c.css(p);b.wrap(l);b.parent().append(c);b.parent().append(g);a.railDraggable&&(e.ui&&"function"==typeof e.ui.draggable)&&c.draggable({axis:"y",containment:"parent",start:function(){w=!0},stop:function(){w=!1;n()},drag:function(){k(0,e(this).position().top,!1)}});g.hover(function(){t()},function(){n()});c.hover(function(){v=!0},function(){v=!1});b.hover(function(){q=!0;t();n()},function(){q=!1;n()});b.bind("touchstart",
    +function(a){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&k((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),k(0,!0)):"top"!==a.start&&(k(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());A();u()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index e87a967..41174e6 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.1.1",
    +  "version"     : "1.2.0",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From 47ed5ccc0fefe7c127ac1a2c9b220b291cff057e Mon Sep 17 00:00:00 2001
    From: Sergey Kirillov <serg@gvmachines.com>
    Date: Wed, 26 Jun 2013 17:55:32 +0300
    Subject: [PATCH 074/119] Fixed problem where bar position was set before bar
     height was calculated.
    
    ---
     jquery.slimscroll.js | 6 +++---
     1 file changed, 3 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index ad6137f..eac622d 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -262,6 +262,9 @@
               }
             });
     
    +        // set up initial height
    +        getBarHeight();
    +
             // check start position
             if (o.start === 'bottom')
             {
    @@ -281,9 +284,6 @@
             // attach scroll events
             attachWheel();
     
    -        // set up initial height
    -        getBarHeight();
    -
             function _onWheel(e)
             {
               // use mouse wheel only when mouse is over
    
    From 29b4a9a740580b472011c4949fe39fc7f18f1cab Mon Sep 17 00:00:00 2001
    From: UglyColor <Uglycolor@gmail.com>
    Date: Wed, 31 Jul 2013 14:34:33 +0800
    Subject: [PATCH 075/119] make it draggable and no longer dependent on the
     jqueryUI
    
    jqueryUI is too fat!!!
    ---
     jquery.slimscroll.js | 49 +++++++++++++++++++++++++++++++++-----------
     1 file changed, 37 insertions(+), 12 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index ad6137f..5740963 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -202,18 +202,43 @@
             me.parent().append(rail);
     
             // make it draggable
    -        if (o.railDraggable && $.ui && typeof($.ui.draggable) == 'function')
    -        {
    -          bar.draggable({
    -            axis: 'y',
    -            containment: 'parent',
    -            start: function() { isDragg = true; },
    -            stop: function() { isDragg = false; hideBar(); },
    -            drag: function(e)
    -            {
    -              // scroll content
    -              scrollContent(0, $(this).position().top, false);
    -            }
    +        // if (o.railDraggable && $.ui && typeof($.ui.draggable) == 'function')
    +        // {
    +        //   bar.draggable({
    +        //     axis: 'y',
    +        //     containment: 'parent',
    +        //     start: function() { isDragg = true; },
    +        //     stop: function() { isDragg = false; hideBar(); },
    +        //     drag: function(e)
    +        //     {
    +        //       // scroll content
    +        //       scrollContent(0, $(this).position().top, false);
    +        //     }
    +        //   });
    +        // }
    +        // make it draggable and no longer dependent on the jqueryUI
    +        if (o.railDraggable){
    +          bar.bind("mousedown", function(e) {
    +            var $doc = $(document);
    +            isDragg = true;
    +            t = parseFloat(bar.css('top'));
    +            pageY = e.pageY;          
    +
    +            $doc.bind("mousemove.slimscroll", function(e){
    +              currTop = t + e.pageY - pageY;
    +              bar.css('top', currTop);
    +              scrollContent(0, bar.position().top, false);// scroll content
    +            });
    +
    +            $doc.bind("mouseup.slimscroll", function(e) {
    +              isDragg = false;hideBar();
    +              $doc.unbind('.slimscroll');
    +            });
    +            return false;
    +          }).bind("selectstart.slimscroll", function(e){
    +            e.stopPropagation();
    +            e.preventDefault();
    +            return false;
               });
             }
     
    
    From e52ae2b3c0200d12c364fa51c30fcbde744782ab Mon Sep 17 00:00:00 2001
    From: aidik <vaclav@navratil.vn>
    Date: Fri, 2 Aug 2013 12:46:54 +0200
    Subject: [PATCH 076/119] Variable BorderRadius
    
    Variable to set border radius was added.
    ---
     jquery.slimscroll.js | 18 ++++++++++++------
     1 file changed, 12 insertions(+), 6 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index ad6137f..904b77e 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -70,7 +70,13 @@
             wheelStep : 20,
     
             // scroll amount applied when user is using gestures
    -        touchScrollStep : 200
    +        touchScrollStep : 200,
    +        
    +        // sets border radius
    +        borderRadius: '7px',
    +        
    +        // sets border radius of the rail
    +        railBorderRadius: '7px'
           };
     
           var o = $.extend(defaults, options);
    @@ -166,7 +172,7 @@
                 position: 'absolute',
                 top: 0,
                 display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
    -            'border-radius': o.size,
    +            'border-radius': o.railBorderRadius,
                 background: o.railColor,
                 opacity: o.railOpacity,
                 zIndex: 90
    @@ -182,10 +188,10 @@
                 top: 0,
                 opacity: o.opacity,
                 display: o.alwaysVisible ? 'block' : 'none',
    -            'border-radius' : o.size,
    -            BorderRadius: o.size,
    -            MozBorderRadius: o.size,
    -            WebkitBorderRadius: o.size,
    +            'border-radius' : o.borderRadius,
    +            BorderRadius: o.borderRadius,
    +            MozBorderRadius: o.borderRadius,
    +            WebkitBorderRadius: o.borderRadius,
                 zIndex: 99
               });
     
    
    From a96f2a6954e7a1188b43e00c9f4e0ee7f06852ad Mon Sep 17 00:00:00 2001
    From: Anchor <dixonchong@gmail.com>
    Date: Fri, 2 Aug 2013 21:11:45 -0700
    Subject: [PATCH 077/119] Fixes issue #65
    
    Add listener for mozilla specific event "MozMousePixelScroll"
    ---
     jquery.slimscroll.js | 1 +
     1 file changed, 1 insertion(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 904b77e..c4ef721 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -366,6 +366,7 @@
               {
                 this.addEventListener('DOMMouseScroll', _onWheel, false );
                 this.addEventListener('mousewheel', _onWheel, false );
    +            this.addEventListener('MozMousePixelScroll', _onWheel, false );
               }
               else
               {
    
    From 879947b473fea892eda9a28f41f8d0163483605d Mon Sep 17 00:00:00 2001
    From: Bernhard Sirlinger <bernhard@sirlinger.de>
    Date: Mon, 12 Aug 2013 18:03:09 +0200
    Subject: [PATCH 078/119] Fix several touch issues
    
    ---
     jquery.slimscroll.js | 9 +++++++--
     1 file changed, 7 insertions(+), 2 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 904b77e..b30c7c1 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -257,14 +257,18 @@
             });
     
             me.bind('touchmove', function(e){
    -          // prevent scrolling the page
    -          e.originalEvent.preventDefault();
    +          // prevent scrolling the page if necessary
    +          if(!releaseScroll) 
    +          {
    +  		      e.originalEvent.preventDefault();
    +		      }
               if (e.originalEvent.touches.length)
               {
                 // see how far user swiped
                 var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
                 // scroll content
                 scrollContent(diff, true);
    +            touchDif = e.originalEvent.touches[0].pageY;
               }
             });
     
    @@ -314,6 +318,7 @@
     
             function scrollContent(y, isWheel, isJump)
             {
    +          releaseScroll = false;
               var delta = y;
               var maxTop = me.outerHeight() - bar.outerHeight();
     
    
    From 9439d268c34fd0f789f28041db9c6cf6740eee9f Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Sun, 18 Aug 2013 17:05:12 +1000
    Subject: [PATCH 079/119] Remove jQuery draggable from examples
    
    ---
     examples/allow-page-scroll.html      | 1 -
     examples/chaining.html               | 1 -
     examples/disable-fade-out.html       | 2 +-
     examples/dynamic-content.html        | 2 +-
     examples/height-width.html           | 2 +-
     examples/mouse-wheel.html            | 2 +-
     examples/multiple-elements.html      | 2 +-
     examples/nested.html                 | 2 +-
     examples/programmatic-scrolling.html | 2 +-
     examples/rail.html                   | 3 +--
     examples/scroll-events.html          | 2 +-
     examples/scrollbar.html              | 2 +-
     examples/start-position.html         | 2 +-
     13 files changed, 11 insertions(+), 14 deletions(-)
    
    diff --git a/examples/allow-page-scroll.html b/examples/allow-page-scroll.html
    index 2c584b2..b594de3 100644
    --- a/examples/allow-page-scroll.html
    +++ b/examples/allow-page-scroll.html
    @@ -4,7 +4,6 @@
     <title>jquery.slimscroll - allow page scroll</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/chaining.html b/examples/chaining.html
    index ef54fa6..fead426 100644
    --- a/examples/chaining.html
    +++ b/examples/chaining.html
    @@ -4,7 +4,6 @@
     <title>jquery.slimscroll - chaining</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/disable-fade-out.html b/examples/disable-fade-out.html
    index 1420e88..7c8e6fa 100644
    --- a/examples/disable-fade-out.html
    +++ b/examples/disable-fade-out.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - disable fade out</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/dynamic-content.html b/examples/dynamic-content.html
    index 0d667c8..1ac5e56 100644
    --- a/examples/dynamic-content.html
    +++ b/examples/dynamic-content.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - dynamic content</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/height-width.html b/examples/height-width.html
    index 17fa9ba..4b006b0 100644
    --- a/examples/height-width.html
    +++ b/examples/height-width.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - height / width</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/mouse-wheel.html b/examples/mouse-wheel.html
    index f6c0dcf..434c80c 100644
    --- a/examples/mouse-wheel.html
    +++ b/examples/mouse-wheel.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - mouse wheel</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 92099c7..6f98b32 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - multiple elements</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/nested.html b/examples/nested.html
    index adc465d..92bd599 100644
    --- a/examples/nested.html
    +++ b/examples/nested.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - nested elements</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/programmatic-scrolling.html b/examples/programmatic-scrolling.html
    index 67d0a68..163e753 100644
    --- a/examples/programmatic-scrolling.html
    +++ b/examples/programmatic-scrolling.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - programmatic scrolling</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/rail.html b/examples/rail.html
    index c6350f5..8e55e27 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - rail options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    @@ -132,7 +132,6 @@
       </div>
     
     <pre class="prettyprint">
    -  // This also removes dependency on jQuery UI
       $('#testDiv5').slimscroll({
         railDraggable: false
       });
    diff --git a/examples/scroll-events.html b/examples/scroll-events.html
    index 9ab9521..9eabbdc 100644
    --- a/examples/scroll-events.html
    +++ b/examples/scroll-events.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - top/bottom events</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/scrollbar.html b/examples/scrollbar.html
    index f2c401d..9f13b03 100644
    --- a/examples/scrollbar.html
    +++ b/examples/scrollbar.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - scrollbar options</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    diff --git a/examples/start-position.html b/examples/start-position.html
    index 5e2e8dc..8afdda6 100644
    --- a/examples/start-position.html
    +++ b/examples/start-position.html
    @@ -4,7 +4,7 @@
     <title>jquery.slimscroll - start position</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    -<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    +
     <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="libs/prettify/prettify.js"></script>
     <script type="text/javascript" src="../jquery.slimscroll.js"></script>
    
    From 854f7c5313eab2c24627f4cf1760a9274f786ca9 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Sun, 18 Aug 2013 17:05:26 +1000
    Subject: [PATCH 080/119] Add railBorderRadius to examples
    
    ---
     examples/rail.html | 6 ++++--
     1 file changed, 4 insertions(+), 2 deletions(-)
    
    diff --git a/examples/rail.html b/examples/rail.html
    index 8e55e27..4f77f34 100644
    --- a/examples/rail.html
    +++ b/examples/rail.html
    @@ -109,7 +109,8 @@
     
     <pre class="prettyprint">
       $('#testDiv4').slimscroll({
    -    railVisible: true
    +    railVisible: true,
    +    railBorderRadius: 0
       });
     </pre>
     
    @@ -158,7 +159,8 @@
           });
     
           $('#testDiv4').slimscroll({
    -        railVisible: true
    +        railVisible: true,
    +        railBorderRadius: 0
           });
     
           $('#testDiv5').slimscroll({
    
    From 41b13f6508e0ce60a8948c8e6840e1b8d2590f73 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Sun, 18 Aug 2013 17:05:59 +1000
    Subject: [PATCH 081/119] Bump-up version, remove commented out code
    
    ---
     jquery.slimscroll.js | 29 +++++++----------------------
     1 file changed, 7 insertions(+), 22 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index e27cc80..2ea5b08 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.2.0
    + * Version: 1.3.0
      *
      */
     (function($) {
    @@ -40,7 +40,7 @@
             alwaysVisible : false,
     
             // check if we should hide the scrollbar when user is hovering over
    -        disableFadeOut: false,
    +        disableFadeOut : false,
     
             // sets visibility of the rail
             railVisible : false,
    @@ -71,12 +71,12 @@
     
             // scroll amount applied when user is using gestures
             touchScrollStep : 200,
    -        
    +
             // sets border radius
             borderRadius: '7px',
    -        
    +
             // sets border radius of the rail
    -        railBorderRadius: '7px'
    +        railBorderRadius : '7px'
           };
     
           var o = $.extend(defaults, options);
    @@ -207,28 +207,13 @@
             me.parent().append(bar);
             me.parent().append(rail);
     
    -        // make it draggable
    -        // if (o.railDraggable && $.ui && typeof($.ui.draggable) == 'function')
    -        // {
    -        //   bar.draggable({
    -        //     axis: 'y',
    -        //     containment: 'parent',
    -        //     start: function() { isDragg = true; },
    -        //     stop: function() { isDragg = false; hideBar(); },
    -        //     drag: function(e)
    -        //     {
    -        //       // scroll content
    -        //       scrollContent(0, $(this).position().top, false);
    -        //     }
    -        //   });
    -        // }
             // make it draggable and no longer dependent on the jqueryUI
             if (o.railDraggable){
               bar.bind("mousedown", function(e) {
                 var $doc = $(document);
                 isDragg = true;
                 t = parseFloat(bar.css('top'));
    -            pageY = e.pageY;          
    +            pageY = e.pageY;
     
                 $doc.bind("mousemove.slimscroll", function(e){
                   currTop = t + e.pageY - pageY;
    @@ -283,7 +268,7 @@
     
             me.bind('touchmove', function(e){
               // prevent scrolling the page if necessary
    -          if(!releaseScroll) 
    +          if(!releaseScroll)
               {
       		      e.originalEvent.preventDefault();
     		      }
    
    From 1b202263cc2f1c641e5f39bb47726126da456e3a Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Sun, 18 Aug 2013 17:06:09 +1000
    Subject: [PATCH 082/119] Add minified source
    
    ---
     jquery.slimscroll.min.js | 19 ++++++++++---------
     1 file changed, 10 insertions(+), 9 deletions(-)
    
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index dd63f62..26220d6 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,14 +2,15 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.2.0
    + * Version: 1.3.0
      *
      */
    -(function(e){jQuery.fn.extend({slimScroll:function(h){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200},h);this.each(function(){function s(d){if(q){d=d||window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/
    -120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&k(c,!0);d.preventDefault&&!m&&d.preventDefault();m||(d.returnValue=!1)}}function k(d,e,h){var f=d,g=b.outerHeight()-c.outerHeight();e&&(f=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),f=Math.min(Math.max(f,0),g),f=0<d?Math.ceil(f):Math.floor(f),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=j*(b[0].scrollHeight-b.outerHeight());h&&
    -(f=d,d=f/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(f);b.trigger("slimscrolling",~~f);t();n()}function A(){window.addEventListener?(this.addEventListener("DOMMouseScroll",s,!1),this.addEventListener("mousewheel",s,!1)):document.attachEvent("onmousewheel",s)}function u(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),B);c.css({height:r+"px"});var a=r==b.outerHeight()?"none":"block";c.css({display:a})}function t(){u();clearTimeout(x);
    -j==~~j?(m=a.allowPageScroll,y!=j&&b.trigger("slimscroll",0==~~j?"top":"bottom")):m=!1;y=j;r>=b.outerHeight()?m=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&g.stop(!0,!0).fadeIn("fast"))}function n(){a.alwaysVisible||(x=setTimeout(function(){if((!a.disableFadeOut||!q)&&!v&&!w)c.fadeOut("slow"),g.fadeOut("slow")},1E3))}var q,v,w,x,z,r,j,y,B=30,m=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var l=b.scrollTop(),c=b.parent().find("."+a.barClass),g=b.parent().find("."+a.railClass);u();if(e.isPlainObject(h)){if("height"in
    -h&&"auto"==h.height){b.parent().css("height","auto");b.css("height","auto");var p=b.parent().parent().height();b.parent().css("height",p);b.css("height",p)}if("scrollTo"in h)l=parseInt(a.scrollTo);else if("scrollBy"in h)l+=parseInt(a.scrollBy);else if("destroy"in h){c.remove();g.remove();b.unwrap();return}k(l,!1,!0)}}else{a.height="auto"==a.height?b.parent().height():a.height;l=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
    -width:a.width,height:a.height});var g=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.size,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.size,BorderRadius:a.size,MozBorderRadius:a.size,WebkitBorderRadius:a.size,
    -zIndex:99}),p="right"==a.position?{right:a.distance}:{left:a.distance};g.css(p);c.css(p);b.wrap(l);b.parent().append(c);b.parent().append(g);a.railDraggable&&(e.ui&&"function"==typeof e.ui.draggable)&&c.draggable({axis:"y",containment:"parent",start:function(){w=!0},stop:function(){w=!1;n()},drag:function(){k(0,e(this).position().top,!1)}});g.hover(function(){t()},function(){n()});c.hover(function(){v=!0},function(){v=!1});b.hover(function(){q=!0;t();n()},function(){q=!1;n()});b.bind("touchstart",
    -function(a){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){b.originalEvent.preventDefault();b.originalEvent.touches.length&&k((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0)});"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),k(0,!0)):"top"!==a.start&&(k(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());A();u()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(f){jQuery.fn.extend({slimScroll:function(h){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},h);this.each(function(){function r(d){if(s){d=d||
    +window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,f,h){k=!1;var e=d,g=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),g),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    +e=l*(b[0].scrollHeight-b.outerHeight());h&&(e=d,d=e/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(e);b.trigger("slimscrolling",~~e);v();p()}function C(){window.addEventListener?(this.addEventListener("DOMMouseScroll",r,!1),this.addEventListener("mousewheel",r,!1),this.addEventListener("MozMousePixelScroll",r,!1)):document.attachEvent("onmousewheel",r)}function w(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),D);c.css({height:u+"px"});
    +var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function v(){w();clearTimeout(A);l==~~l?(k=a.allowPageScroll,B!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;B=l;u>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&g.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(A=setTimeout(function(){a.disableFadeOut&&s||(x||y)||(c.fadeOut("slow"),g.fadeOut("slow"))},1E3))}var s,x,y,A,z,u,l,B,D=30,k=!1,b=f(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),
    +c=b.parent().find("."+a.barClass),g=b.parent().find("."+a.railClass);w();if(f.isPlainObject(h)){if("height"in h&&"auto"==h.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",q);b.css("height",q)}if("scrollTo"in h)n=parseInt(a.scrollTo);else if("scrollBy"in h)n+=parseInt(a.scrollBy);else if("destroy"in h){c.remove();g.remove();b.unwrap();return}m(n,!1,!0)}}else{a.height="auto"==a.height?b.parent().height():a.height;n=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",
    +overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var g=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?
    +"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?{right:a.distance}:{left:a.distance};g.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(g);a.railDraggable&&c.bind("mousedown",function(a){var b=f(document);y=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});
    +b.bind("mouseup.slimscroll",function(a){y=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});g.hover(function(){v()},function(){p()});c.hover(function(){x=!0},function(){x=!1});b.hover(function(){s=!0;v();p()},function(){s=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&
    +(m((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),z=b.originalEvent.touches[0].pageY)});w();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"top"!==a.start&&(m(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide());C()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From 9049771db559d8e89426df154aa1a065b00fc61b Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Sun, 18 Aug 2013 17:20:44 +1000
    Subject: [PATCH 083/119] Update version in package file.
    
    ---
     jquery.slimscroll.js     | 2 +-
     jquery.slimscroll.min.js | 2 +-
     slimScroll.jquery.json   | 2 +-
     3 files changed, 3 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 2ea5b08..0f07908 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.0
    + * Version: 1.3.1
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 26220d6..3071977 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.0
    + * Version: 1.3.1
      *
      */
     (function(f){jQuery.fn.extend({slimScroll:function(h){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},h);this.each(function(){function r(d){if(s){d=d||
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index 41174e6..1559a47 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.2.0",
    +  "version"     : "1.3.1",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From e7b34a43ea49e9c7fe1cd0f8ecfb32234a345539 Mon Sep 17 00:00:00 2001
    From: sovanna <sovanna.hing@gmail.com>
    Date: Tue, 3 Sep 2013 11:59:13 +0200
    Subject: [PATCH 084/119] allow slimscroll to resize calling .slimscroll()
     again
    
    ---
     jquery.slimscroll.js | 4 ++++
     1 file changed, 4 insertions(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 0f07908..bb9e053 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -115,6 +115,10 @@
                     var height = me.parent().parent().height();
                     me.parent().css('height', height);
                     me.css('height', height);
    +              } else if ('height' in options) {
    +                var h = options.height;
    +                me.parent().css('height', h);
    +                me.css('height', h);
                   }
     
                   if ('scrollTo' in options)
    
    From 83bc441dafaecea12c173a2bbc28d15ef39c6b43 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Fri, 27 Dec 2013 17:52:06 +1100
    Subject: [PATCH 085/119] Fixing issue #116 - incorrect height for multiple
     class selectors.
    
    ---
     examples/multiple-elements.html | 11 +++++++++--
     jquery.slimscroll.js            |  2 +-
     2 files changed, 10 insertions(+), 3 deletions(-)
    
    diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
    index 6f98b32..8923825 100644
    --- a/examples/multiple-elements.html
    +++ b/examples/multiple-elements.html
    @@ -14,6 +14,7 @@
     <a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
     
     <div class="examples">
    +<div style="height:80px;float:left;">
       <div class="area">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    @@ -31,6 +32,8 @@
         <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
         <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
       </div>
    +</div>
    +<div style="height:400px;float:left;">
       <div class="area">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    @@ -48,6 +51,8 @@
         <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
         <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
       </div>
    +</div>
    +<div style="height:300px;float:left;">
       <div class="area">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
         <p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    @@ -65,11 +70,12 @@
         <p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
         <p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>
       </div>
    +</div>
     
     <div style="clear:both"></div>
     <pre class="prettyprint">
       $('.area').slimscroll({
    -    width: '200px'
    +    width: '200px',
       }).parent().css({
         'float': 'left',
         'margin-right': '30px'
    @@ -83,7 +89,8 @@
         $(function(){
     
           $('.area').slimscroll({
    -        width: '200px'
    +        width: '200px',
    +        height: 'auto'
           }).parent().css({
             'float': 'left',
             'margin-right': '30px'
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 0f07908..c8dc28e 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -144,7 +144,7 @@
             }
     
             // optionally set height to the parent's height
    -        o.height = (o.height == 'auto') ? me.parent().height() : o.height;
    +        o.height = (options.height == 'auto') ? me.parent().height() : options.height;
     
             // wrap content
             var wrapper = $(divS)
    
    From 7236f8f4d74d6a7529128d9248d5045207fcabba Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Fri, 27 Dec 2013 18:01:49 +1100
    Subject: [PATCH 086/119] Revert #65 to fix scrolling on Firefox - #95.
    
    ---
     jquery.slimscroll.js | 1 -
     1 file changed, 1 deletion(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index c8dc28e..9ec8294 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -381,7 +381,6 @@
               {
                 this.addEventListener('DOMMouseScroll', _onWheel, false );
                 this.addEventListener('mousewheel', _onWheel, false );
    -            this.addEventListener('MozMousePixelScroll', _onWheel, false );
               }
               else
               {
    
    From e9a38f401068dcbd472e2efafaf0e69558f97c94 Mon Sep 17 00:00:00 2001
    From: "@rochal" <piotr.rochala@gmail.com>
    Date: Fri, 27 Dec 2013 18:03:13 +1100
    Subject: [PATCH 087/119] Up the version number.
    
    ---
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js | 18 +++++++++---------
     slimScroll.jquery.json   |  2 +-
     3 files changed, 11 insertions(+), 11 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 9ec8294..8f813ee 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.1
    + * Version: 1.3.2
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 3071977..40f9ce9 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,15 +2,15 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.1
    + * Version: 1.3.2
      *
      */
    -(function(f){jQuery.fn.extend({slimScroll:function(h){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},h);this.each(function(){function r(d){if(s){d=d||
    -window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,f,h){k=!1;var e=d,g=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),g),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    -e=l*(b[0].scrollHeight-b.outerHeight());h&&(e=d,d=e/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(e);b.trigger("slimscrolling",~~e);v();p()}function C(){window.addEventListener?(this.addEventListener("DOMMouseScroll",r,!1),this.addEventListener("mousewheel",r,!1),this.addEventListener("MozMousePixelScroll",r,!1)):document.attachEvent("onmousewheel",r)}function w(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),D);c.css({height:u+"px"});
    -var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function v(){w();clearTimeout(A);l==~~l?(k=a.allowPageScroll,B!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;B=l;u>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&g.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(A=setTimeout(function(){a.disableFadeOut&&s||(x||y)||(c.fadeOut("slow"),g.fadeOut("slow"))},1E3))}var s,x,y,A,z,u,l,B,D=30,k=!1,b=f(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),
    -c=b.parent().find("."+a.barClass),g=b.parent().find("."+a.railClass);w();if(f.isPlainObject(h)){if("height"in h&&"auto"==h.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",q);b.css("height",q)}if("scrollTo"in h)n=parseInt(a.scrollTo);else if("scrollBy"in h)n+=parseInt(a.scrollBy);else if("destroy"in h){c.remove();g.remove();b.unwrap();return}m(n,!1,!0)}}else{a.height="auto"==a.height?b.parent().height():a.height;n=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",
    -overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var g=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?
    -"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?{right:a.distance}:{left:a.distance};g.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(g);a.railDraggable&&c.bind("mousedown",function(a){var b=f(document);y=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});
    -b.bind("mouseup.slimscroll",function(a){y=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});g.hover(function(){v()},function(){p()});c.hover(function(){x=!0},function(){x=!1});b.hover(function(){s=!0;v();p()},function(){s=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&
    +(function(f){jQuery.fn.extend({slimScroll:function(g){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function u(d){if(r){d=d||
    +window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,f,g){k=!1;var e=d,h=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),h),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    +e=l*(b[0].scrollHeight-b.outerHeight());g&&(e=d,d=e/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(e);b.trigger("slimscrolling",~~e);v();p()}function C(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)}function w(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),D);c.css({height:s+"px"});var a=s==b.outerHeight()?"none":"block";c.css({display:a})}
    +function v(){w();clearTimeout(A);l==~~l?(k=a.allowPageScroll,B!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;B=l;s>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(A=setTimeout(function(){a.disableFadeOut&&r||x||y||(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))}var r,x,y,A,z,s,l,B,D=30,k=!1,b=f(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),c=b.parent().find("."+a.barClass),h=b.parent().find("."+
    +a.railClass);w();if(f.isPlainObject(g)){if("height"in g&&"auto"==g.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",q);b.css("height",q)}if("scrollTo"in g)n=parseInt(a.scrollTo);else if("scrollBy"in g)n+=parseInt(a.scrollBy);else if("destroy"in g){c.remove();h.remove();b.unwrap();return}m(n,!1,!0)}}else{a.height="auto"==g.height?b.parent().height():g.height;n=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",
    +overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?
    +"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?{right:a.distance}:{left:a.distance};h.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(h);a.railDraggable&&c.bind("mousedown",function(a){var b=f(document);y=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});
    +b.bind("mouseup.slimscroll",function(a){y=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});h.hover(function(){v()},function(){p()});c.hover(function(){x=!0},function(){x=!1});b.hover(function(){r=!0;v();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&
     (m((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),z=b.originalEvent.touches[0].pageY)});w();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"top"!==a.start&&(m(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide());C()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index 1559a47..9fd201b 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.3.1",
    +  "version"     : "1.3.2",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From be134d2e7c5be367d9750b3a903b1937a412c260 Mon Sep 17 00:00:00 2001
    From: Joshua Balloch <joshuaballoch@gmail.com>
    Date: Thu, 23 Jan 2014 11:52:59 +0800
    Subject: [PATCH 088/119] dynamically assign isOverPanel to reduce mistaken
     mousewheel captures
    
    ---
     jquery.slimscroll.js | 11 +++++++----
     1 file changed, 7 insertions(+), 4 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 8f813ee..a957f1b 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -93,6 +93,11 @@
             // used in event handlers and for better minification
             var me = $(this);
     
    +        // create a simple function to check if panel is being hovered over.
    +        isOverPanel = function () {
    +          return me.is(":hover");
    +        }
    +
             // ensure we are not binding it again
             if (me.parent().hasClass(o.wrapperClass))
             {
    @@ -249,11 +254,9 @@
     
             // show on parent mouseover
             me.hover(function(){
    -          isOverPanel = true;
               showBar();
               hideBar();
             }, function(){
    -          isOverPanel = false;
               hideBar();
             });
     
    @@ -307,7 +310,7 @@
             function _onWheel(e)
             {
               // use mouse wheel only when mouse is over
    -          if (!isOverPanel) { return; }
    +          if (!isOverPanel()) { return; }
     
               var e = e || window.event;
     
    @@ -440,7 +443,7 @@
               if (!o.alwaysVisible)
               {
                 queueHide = setTimeout(function(){
    -              if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
    +              if (!(o.disableFadeOut && isOverPanel()) && !isOverBar && !isDragg)
                   {
                     bar.fadeOut('slow');
                     rail.fadeOut('slow');
    
    From 00a2dd7885ed2e3c897cc1662927babb62ab8864 Mon Sep 17 00:00:00 2001
    From: Tony Wang <ziscloud@gmail.com>
    Date: Sun, 4 May 2014 12:21:33 +0800
    Subject: [PATCH 089/119] Create bower.json
    
    Make it to be friendly to bower
    ---
     bower.json | 30 ++++++++++++++++++++++++++++++
     1 file changed, 30 insertions(+)
     create mode 100644 bower.json
    
    diff --git a/bower.json b/bower.json
    new file mode 100644
    index 0000000..9787b57
    --- /dev/null
    +++ b/bower.json
    @@ -0,0 +1,30 @@
    +{
    +  "name" : "slimScroll",
    +  "version" : "1.3.2",
    +  "title" : "jQuery slimScroll scrollbar",
    +  "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    +  "keywords" : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    +  "demo" : "http://rocha.la/jQuery-slimScroll/",
    +  "homepage" : "http://rocha.la/jQuery-slimScroll/",
    +  "download" : "http://rocha.la/jQuery-slimScroll/",
    +
    +  "author" : {
    +    "name" : "Piotr Rochala",
    +    "url" : "http://rocha.la/"
    +  },
    +
    +  "dependencies" : {
    +    "jquery" : ">= 1.7"
    +  },
    +
    +  "licenses" : [
    +    {
    +      "type": "MIT",
    +      "url": "http://www.opensource.org/licenses/mit-license.php"
    +    },
    +    {
    +      "type": "GPL",
    +      "url": "http://www.opensource.org/licenses/gpl-license.php"
    +    }
    +  ]
    +}
    
    From 053e421191a786c515c8dd6dc7b9692e2efeee03 Mon Sep 17 00:00:00 2001
    From: Tony Wang <ziscloud@gmail.com>
    Date: Tue, 24 Jun 2014 09:53:08 +0800
    Subject: [PATCH 090/119] Update bower.json
    
    add main attribute to the bower.json
    ---
     bower.json | 2 ++
     1 file changed, 2 insertions(+)
    
    diff --git a/bower.json b/bower.json
    index 9787b57..52e0c8a 100644
    --- a/bower.json
    +++ b/bower.json
    @@ -7,6 +7,8 @@
       "demo" : "http://rocha.la/jQuery-slimScroll/",
       "homepage" : "http://rocha.la/jQuery-slimScroll/",
       "download" : "http://rocha.la/jQuery-slimScroll/",
    +  
    +  "main": "./jquery.slimscroll.min.js",
     
       "author" : {
         "name" : "Piotr Rochala",
    
    From 9bb3a79a963854960a971d605a41f25169aa5b07 Mon Sep 17 00:00:00 2001
    From: Louy Alakkad <me@l0uy.com>
    Date: Mon, 30 Jun 2014 16:55:15 +0300
    Subject: [PATCH 091/119] Calling "destroy" shouldn't create an instance
    
    Fixes #87
    ---
     jquery.slimscroll.js | 7 +++++++
     1 file changed, 7 insertions(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 8f813ee..a4d195c 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -142,6 +142,13 @@
     
                 return;
             }
    +        else if ($.isPlainObject(options))
    +        {
    +            if ('destroy' in options)
    +            {
    +            	return;
    +            }
    +        }
     
             // optionally set height to the parent's height
             o.height = (options.height == 'auto') ? me.parent().height() : options.height;
    
    From d41d7b764bcdd6aa2ff1676dd5c91a869ec6974d Mon Sep 17 00:00:00 2001
    From: Keith Daulton <kdaulton@d13design.com>
    Date: Fri, 11 Jul 2014 10:59:02 -0400
    Subject: [PATCH 092/119] Use IIFE param for jQuery reference
    
    This is important if you assigned jQuery.noConflict() to variable and only want to reference that.
    ---
     jquery.slimscroll.js | 6 +++---
     1 file changed, 3 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 8f813ee..82ff1f2 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -7,7 +7,7 @@
      */
     (function($) {
     
    -  jQuery.fn.extend({
    +  $.fn.extend({
         slimScroll: function(options) {
     
           var defaults = {
    @@ -456,8 +456,8 @@
         }
       });
     
    -  jQuery.fn.extend({
    -    slimscroll: jQuery.fn.slimScroll
    +  $.fn.extend({
    +    slimscroll: $.fn.slimScroll
       });
     
     })(jQuery);
    
    From be03c37746fa0aea68cfec148fefa1c878d8386e Mon Sep 17 00:00:00 2001
    From: Keith Daulton <kdaulton@d13design.com>
    Date: Fri, 11 Jul 2014 11:02:23 -0400
    Subject: [PATCH 093/119] Use IIFE param for jQuery reference
    
    Updated compressed version
    ---
     jquery.slimscroll.min.js | 10 +---------
     1 file changed, 1 insertion(+), 9 deletions(-)
    
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 40f9ce9..c60cdbc 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -5,12 +5,4 @@
      * Version: 1.3.2
      *
      */
    -(function(f){jQuery.fn.extend({slimScroll:function(g){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function u(d){if(r){d=d||
    -window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,f,g){k=!1;var e=d,h=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),h),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    -e=l*(b[0].scrollHeight-b.outerHeight());g&&(e=d,d=e/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(e);b.trigger("slimscrolling",~~e);v();p()}function C(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)}function w(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),D);c.css({height:s+"px"});var a=s==b.outerHeight()?"none":"block";c.css({display:a})}
    -function v(){w();clearTimeout(A);l==~~l?(k=a.allowPageScroll,B!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;B=l;s>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(A=setTimeout(function(){a.disableFadeOut&&r||x||y||(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))}var r,x,y,A,z,s,l,B,D=30,k=!1,b=f(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),c=b.parent().find("."+a.barClass),h=b.parent().find("."+
    -a.railClass);w();if(f.isPlainObject(g)){if("height"in g&&"auto"==g.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",q);b.css("height",q)}if("scrollTo"in g)n=parseInt(a.scrollTo);else if("scrollBy"in g)n+=parseInt(a.scrollBy);else if("destroy"in g){c.remove();h.remove();b.unwrap();return}m(n,!1,!0)}}else{a.height="auto"==g.height?b.parent().height():g.height;n=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",
    -overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?
    -"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?{right:a.distance}:{left:a.distance};h.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(h);a.railDraggable&&c.bind("mousedown",function(a){var b=f(document);y=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});
    -b.bind("mouseup.slimscroll",function(a){y=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});h.hover(function(){v()},function(){p()});c.hover(function(){x=!0},function(){x=!1});b.hover(function(){r=!0;v();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&
    -(m((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),z=b.originalEvent.touches[0].pageY)});w();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"top"!==a.start&&(m(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide());C()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +function(a){a.fn.extend({slimScroll:function(b){var c={width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},d=a.extend(c,b);return this.each(function(){function w(b){if(c){var b=b||window.event,e=0;b.wheelDelta&&(e=-b.wheelDelta/120),b.detail&&(e=b.detail/3);var f=b.target||b.srcTarget||b.srcElement;a(f).closest("."+d.wrapperClass).is(o.parent())&&x(e,!0),b.preventDefault&&!n&&b.preventDefault(),n||(b.returnValue=!1)}}function x(a,b,c){n=!1;var e=a,f=o.outerHeight()-u.outerHeight();if(b&&(e=parseInt(u.css("top"))+a*parseInt(d.wheelStep)/100*u.outerHeight(),e=Math.min(Math.max(e,0),f),e=a>0?Math.ceil(e):Math.floor(e),u.css({top:e+"px"})),j=parseInt(u.css("top"))/(o.outerHeight()-u.outerHeight()),e=j*(o[0].scrollHeight-o.outerHeight()),c){e=a;var g=e/o[0].scrollHeight*o.outerHeight();g=Math.min(Math.max(g,0),f),u.css({top:g+"px"})}o.scrollTop(e),o.trigger("slimscrolling",~~e),A(),B()}function y(){window.addEventListener?(this.addEventListener("DOMMouseScroll",w,!1),this.addEventListener("mousewheel",w,!1)):document.attachEvent("onmousewheel",w)}function z(){i=Math.max(o.outerHeight()/o[0].scrollHeight*o.outerHeight(),m),u.css({height:i+"px"});var a=i==o.outerHeight()?"none":"block";u.css({display:a})}function A(){if(z(),clearTimeout(g),j==~~j){if(n=d.allowPageScroll,k!=j){var a=0==~~j?"top":"bottom";o.trigger("slimscroll",a)}}else n=!1;return k=j,i>=o.outerHeight()?(n=!0,void 0):(u.stop(!0,!0).fadeIn("fast"),d.railVisible&&s.stop(!0,!0).fadeIn("fast"),void 0)}function B(){d.alwaysVisible||(g=setTimeout(function(){d.disableFadeOut&&c||e||f||(u.fadeOut("slow"),s.fadeOut("slow"))},1e3))}var c,e,f,g,h,i,j,k,l="<div></div>",m=30,n=!1,o=a(this);if(o.parent().hasClass(d.wrapperClass)){var p=o.scrollTop();if(u=o.parent().find("."+d.barClass),s=o.parent().find("."+d.railClass),z(),a.isPlainObject(b)){if("height"in b&&"auto"==b.height){o.parent().css("height","auto"),o.css("height","auto");var q=o.parent().parent().height();o.parent().css("height",q),o.css("height",q)}if("scrollTo"in b)p=parseInt(d.scrollTo);else if("scrollBy"in b)p+=parseInt(d.scrollBy);else if("destroy"in b)return u.remove(),s.remove(),o.unwrap(),void 0;x(p,!1,!0)}}else{d.height="auto"==b.height?o.parent().height():b.height;var r=a(l).addClass(d.wrapperClass).css({position:"relative",overflow:"hidden",width:d.width,height:d.height});o.css({overflow:"hidden",width:d.width,height:d.height});var s=a(l).addClass(d.railClass).css({width:d.size,height:"100%",position:"absolute",top:0,display:d.alwaysVisible&&d.railVisible?"block":"none","border-radius":d.railBorderRadius,background:d.railColor,opacity:d.railOpacity,zIndex:90}),u=a(l).addClass(d.barClass).css({background:d.color,width:d.size,position:"absolute",top:0,opacity:d.opacity,display:d.alwaysVisible?"block":"none","border-radius":d.borderRadius,BorderRadius:d.borderRadius,MozBorderRadius:d.borderRadius,WebkitBorderRadius:d.borderRadius,zIndex:99}),v="right"==d.position?{right:d.distance}:{left:d.distance};s.css(v),u.css(v),o.wrap(r),o.parent().append(u),o.parent().append(s),d.railDraggable&&u.bind("mousedown",function(b){var c=a(document);return f=!0,t=parseFloat(u.css("top")),pageY=b.pageY,c.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY,u.css("top",currTop),x(0,u.position().top,!1)}),c.bind("mouseup.slimscroll",function(){f=!1,B(),c.unbind(".slimscroll")}),!1}).bind("selectstart.slimscroll",function(a){return a.stopPropagation(),a.preventDefault(),!1}),s.hover(function(){A()},function(){B()}),u.hover(function(){e=!0},function(){e=!1}),o.hover(function(){c=!0,A(),B()},function(){c=!1,B()}),o.bind("touchstart",function(a){a.originalEvent.touches.length&&(h=a.originalEvent.touches[0].pageY)}),o.bind("touchmove",function(a){if(n||a.originalEvent.preventDefault(),a.originalEvent.touches.length){var b=(h-a.originalEvent.touches[0].pageY)/d.touchScrollStep;x(b,!0),h=a.originalEvent.touches[0].pageY}}),z(),"bottom"===d.start?(u.css({top:o.outerHeight()-u.outerHeight()}),x(0,!0)):"top"!==d.start&&(x(a(d.start).position().top,null,!0),d.alwaysVisible||u.hide()),y()}}),this}}),a.fn.extend({slimscroll:a.fn.slimScroll})}(jQuery);
    
    From f82fa180b0e3c5fd4ec05a038a541cfcf0d465b3 Mon Sep 17 00:00:00 2001
    From: =?UTF-8?q?Alexis=20S=C3=A1nchez?= <aasanchez@gmail.com>
    Date: Thu, 31 Jul 2014 08:51:56 -0430
    Subject: [PATCH 094/119] a minor fix
    
    ---
     examples/style.css | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/examples/style.css b/examples/style.css
    index f12104a..b676c81 100644
    --- a/examples/style.css
    +++ b/examples/style.css
    @@ -6,7 +6,7 @@ pre.prettyprint { padding:15px; border:1px solid #eee; border-radius:5px; backgr
     .examples { border-radius:20px; background:#fff; padding:15px;
       margin:0 150px 0 0; border-collapse: collapse; border:1px solid #000; }
     .slimScrollDiv { border:1px solid #eee; }
    -#nav { position:fixed; top:0 left:0; background:#fff; padding:15px; border-radius:20px; width:200px; }
    +#nav { position:fixed; top:0; left:0; background:#fff; padding:15px; border-radius:20px; width:200px; }
     #nav ul { list-style-type:square; list-style-position:inside; margin:20px 0 0 0; padding:0; }
     #nav a { text-decoration:none; color:#000; }
     #nav a:hover { text-decoration: underline }
    
    From dd253675ee1de2646101ce14788d50c4510b580a Mon Sep 17 00:00:00 2001
    From: piotrr <piotr.rochala@sportsbet.com.au>
    Date: Mon, 1 Sep 2014 10:03:58 +1000
    Subject: [PATCH 095/119] Fix issue with passing auto height option
    
    ---
     jquery.slimscroll.js | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 169c2b6..4d759ad 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -151,7 +151,7 @@
             }
     
             // optionally set height to the parent's height
    -        o.height = (options.height == 'auto') ? me.parent().height() : options.height;
    +        o.height = (o.height == 'auto') ? me.parent().height() : o.height;
     
             // wrap content
             var wrapper = $(divS)
    
    From 4192bd561bb9bf65e32bb0fea95047e78166abb6 Mon Sep 17 00:00:00 2001
    From: Piotr Rochala <piotr.rochala@gmail.com>
    Date: Mon, 1 Sep 2014 10:14:10 +1000
    Subject: [PATCH 096/119] Revert "[Critical Bug] dynamically assign isOverPanel
     to reduce mistaken mousewheel captures"
    
    ---
     jquery.slimscroll.js | 11 ++++-------
     1 file changed, 4 insertions(+), 7 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index d219493..4d759ad 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -93,11 +93,6 @@
             // used in event handlers and for better minification
             var me = $(this);
     
    -        // create a simple function to check if panel is being hovered over.
    -        isOverPanel = function () {
    -          return me.is(":hover");
    -        }
    -
             // ensure we are not binding it again
             if (me.parent().hasClass(o.wrapperClass))
             {
    @@ -261,9 +256,11 @@
     
             // show on parent mouseover
             me.hover(function(){
    +          isOverPanel = true;
               showBar();
               hideBar();
             }, function(){
    +          isOverPanel = false;
               hideBar();
             });
     
    @@ -317,7 +314,7 @@
             function _onWheel(e)
             {
               // use mouse wheel only when mouse is over
    -          if (!isOverPanel()) { return; }
    +          if (!isOverPanel) { return; }
     
               var e = e || window.event;
     
    @@ -450,7 +447,7 @@
               if (!o.alwaysVisible)
               {
                 queueHide = setTimeout(function(){
    -              if (!(o.disableFadeOut && isOverPanel()) && !isOverBar && !isDragg)
    +              if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
                   {
                     bar.fadeOut('slow');
                     rail.fadeOut('slow');
    
    From c1d1c794f8364d751b188c8b21859501c7991249 Mon Sep 17 00:00:00 2001
    From: piotrr <piotr.rochala@sportsbet.com.au>
    Date: Mon, 1 Sep 2014 10:17:54 +1000
    Subject: [PATCH 097/119] Update version, recompile minified code
    
    ---
     bower.json               |  4 ++--
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js | 12 ++++++++++--
     slimScroll.jquery.json   |  2 +-
     4 files changed, 14 insertions(+), 6 deletions(-)
    
    diff --git a/bower.json b/bower.json
    index 52e0c8a..1f5f71f 100644
    --- a/bower.json
    +++ b/bower.json
    @@ -1,13 +1,13 @@
     {
       "name" : "slimScroll",
    -  "version" : "1.3.2",
    +  "version" : "1.3.3",
       "title" : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords" : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
       "demo" : "http://rocha.la/jQuery-slimScroll/",
       "homepage" : "http://rocha.la/jQuery-slimScroll/",
       "download" : "http://rocha.la/jQuery-slimScroll/",
    -  
    +
       "main": "./jquery.slimscroll.min.js",
     
       "author" : {
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 4d759ad..190368e 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.2
    + * Version: 1.3.3
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index c60cdbc..f25b5cc 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,15 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.2
    + * Version: 1.3.3
      *
      */
    -function(a){a.fn.extend({slimScroll:function(b){var c={width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},d=a.extend(c,b);return this.each(function(){function w(b){if(c){var b=b||window.event,e=0;b.wheelDelta&&(e=-b.wheelDelta/120),b.detail&&(e=b.detail/3);var f=b.target||b.srcTarget||b.srcElement;a(f).closest("."+d.wrapperClass).is(o.parent())&&x(e,!0),b.preventDefault&&!n&&b.preventDefault(),n||(b.returnValue=!1)}}function x(a,b,c){n=!1;var e=a,f=o.outerHeight()-u.outerHeight();if(b&&(e=parseInt(u.css("top"))+a*parseInt(d.wheelStep)/100*u.outerHeight(),e=Math.min(Math.max(e,0),f),e=a>0?Math.ceil(e):Math.floor(e),u.css({top:e+"px"})),j=parseInt(u.css("top"))/(o.outerHeight()-u.outerHeight()),e=j*(o[0].scrollHeight-o.outerHeight()),c){e=a;var g=e/o[0].scrollHeight*o.outerHeight();g=Math.min(Math.max(g,0),f),u.css({top:g+"px"})}o.scrollTop(e),o.trigger("slimscrolling",~~e),A(),B()}function y(){window.addEventListener?(this.addEventListener("DOMMouseScroll",w,!1),this.addEventListener("mousewheel",w,!1)):document.attachEvent("onmousewheel",w)}function z(){i=Math.max(o.outerHeight()/o[0].scrollHeight*o.outerHeight(),m),u.css({height:i+"px"});var a=i==o.outerHeight()?"none":"block";u.css({display:a})}function A(){if(z(),clearTimeout(g),j==~~j){if(n=d.allowPageScroll,k!=j){var a=0==~~j?"top":"bottom";o.trigger("slimscroll",a)}}else n=!1;return k=j,i>=o.outerHeight()?(n=!0,void 0):(u.stop(!0,!0).fadeIn("fast"),d.railVisible&&s.stop(!0,!0).fadeIn("fast"),void 0)}function B(){d.alwaysVisible||(g=setTimeout(function(){d.disableFadeOut&&c||e||f||(u.fadeOut("slow"),s.fadeOut("slow"))},1e3))}var c,e,f,g,h,i,j,k,l="<div></div>",m=30,n=!1,o=a(this);if(o.parent().hasClass(d.wrapperClass)){var p=o.scrollTop();if(u=o.parent().find("."+d.barClass),s=o.parent().find("."+d.railClass),z(),a.isPlainObject(b)){if("height"in b&&"auto"==b.height){o.parent().css("height","auto"),o.css("height","auto");var q=o.parent().parent().height();o.parent().css("height",q),o.css("height",q)}if("scrollTo"in b)p=parseInt(d.scrollTo);else if("scrollBy"in b)p+=parseInt(d.scrollBy);else if("destroy"in b)return u.remove(),s.remove(),o.unwrap(),void 0;x(p,!1,!0)}}else{d.height="auto"==b.height?o.parent().height():b.height;var r=a(l).addClass(d.wrapperClass).css({position:"relative",overflow:"hidden",width:d.width,height:d.height});o.css({overflow:"hidden",width:d.width,height:d.height});var s=a(l).addClass(d.railClass).css({width:d.size,height:"100%",position:"absolute",top:0,display:d.alwaysVisible&&d.railVisible?"block":"none","border-radius":d.railBorderRadius,background:d.railColor,opacity:d.railOpacity,zIndex:90}),u=a(l).addClass(d.barClass).css({background:d.color,width:d.size,position:"absolute",top:0,opacity:d.opacity,display:d.alwaysVisible?"block":"none","border-radius":d.borderRadius,BorderRadius:d.borderRadius,MozBorderRadius:d.borderRadius,WebkitBorderRadius:d.borderRadius,zIndex:99}),v="right"==d.position?{right:d.distance}:{left:d.distance};s.css(v),u.css(v),o.wrap(r),o.parent().append(u),o.parent().append(s),d.railDraggable&&u.bind("mousedown",function(b){var c=a(document);return f=!0,t=parseFloat(u.css("top")),pageY=b.pageY,c.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY,u.css("top",currTop),x(0,u.position().top,!1)}),c.bind("mouseup.slimscroll",function(){f=!1,B(),c.unbind(".slimscroll")}),!1}).bind("selectstart.slimscroll",function(a){return a.stopPropagation(),a.preventDefault(),!1}),s.hover(function(){A()},function(){B()}),u.hover(function(){e=!0},function(){e=!1}),o.hover(function(){c=!0,A(),B()},function(){c=!1,B()}),o.bind("touchstart",function(a){a.originalEvent.touches.length&&(h=a.originalEvent.touches[0].pageY)}),o.bind("touchmove",function(a){if(n||a.originalEvent.preventDefault(),a.originalEvent.touches.length){var b=(h-a.originalEvent.touches[0].pageY)/d.touchScrollStep;x(b,!0),h=a.originalEvent.touches[0].pageY}}),z(),"bottom"===d.start?(u.css({top:o.outerHeight()-u.outerHeight()}),x(0,!0)):"top"!==d.start&&(x(a(d.start).position().top,null,!0),d.alwaysVisible||u.hide()),y()}}),this}}),a.fn.extend({slimscroll:a.fn.slimScroll})}(jQuery);
    +(function(e){e.fn.extend({slimScroll:function(g){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function u(d){if(r){d=d||window.event;
    +var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,e,g){k=!1;var f=d,h=b.outerHeight()-c.outerHeight();e&&(f=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),f=Math.min(Math.max(f,0),h),f=0<d?Math.ceil(f):Math.floor(f),c.css({top:f+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    +f=l*(b[0].scrollHeight-b.outerHeight());g&&(f=d,d=f/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(f);b.trigger("slimscrolling",~~f);v();p()}function C(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)}function w(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:s+"px"});var a=s==b.outerHeight()?"none":"block";c.css({display:a})}
    +function v(){w();clearTimeout(A);l==~~l?(k=a.allowPageScroll,B!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;B=l;s>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(A=setTimeout(function(){a.disableFadeOut&&r||x||y||(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))}var r,x,y,A,z,s,l,B,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),c=b.parent().find("."+a.barClass),h=b.parent().find("."+a.railClass);
    +w();if(e.isPlainObject(g)){if("height"in g&&"auto"==g.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",q);b.css("height",q)}if("scrollTo"in g)n=parseInt(a.scrollTo);else if("scrollBy"in g)n+=parseInt(a.scrollBy);else if("destroy"in g){c.remove();h.remove();b.unwrap();return}m(n,!1,!0)}}else if(!(e.isPlainObject(g)&&"destroy"in g)){a.height="auto"==a.height?b.parent().height():a.height;n=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",
    +overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?
    +"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?{right:a.distance}:{left:a.distance};h.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(h);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);y=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});
    +b.bind("mouseup.slimscroll",function(a){y=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});h.hover(function(){v()},function(){p()});c.hover(function(){x=!0},function(){x=!1});b.hover(function(){r=!0;v();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&
    +(m((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),z=b.originalEvent.touches[0].pageY)});w();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"top"!==a.start&&(m(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());C()}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index 9fd201b..a6bcd84 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.3.2",
    +  "version"     : "1.3.3",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From 2ffd91c78da6a82942a024c6e8727a80bded156c Mon Sep 17 00:00:00 2001
    From: =?UTF-8?q?Marin=20B=C3=AEnzari?= <spartakusmd@gmail.com>
    Date: Sun, 15 Mar 2015 17:33:28 +0200
    Subject: [PATCH 098/119] Allow multilevel slimscrolls
    
    Fixes issue #182: multilevel slimscrolls.
    
    Changed the selector to select the right `bar` and `rail` element to remove from DOM.
    
    In the issue https://github.com/rochal/jQuery-slimScroll/issues/182 is described that multilevel slimscrolls aren't allowed. On destroy of the parent slimscroll, the `bar`s and `rail`s DOM elements for the children scroll are removed.
    ---
     jquery.slimscroll.js | 4 ++--
     1 file changed, 2 insertions(+), 2 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 190368e..e3ac6e6 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -100,8 +100,8 @@
                 var offset = me.scrollTop();
     
                 // find bar and rail
    -            bar = me.parent().find('.' + o.barClass);
    -            rail = me.parent().find('.' + o.railClass);
    +            bar = me.closest('.' + o.barClass);
    +            rail = me.closest('.' + o.railClass);
     
                 getBarHeight();
     
    
    From 00c77d0543002089166cb4b800ecb99455c4e40a Mon Sep 17 00:00:00 2001
    From: Tony Wang <ziscloud@gmail.com>
    Date: Sat, 4 Apr 2015 11:06:56 +0800
    Subject: [PATCH 099/119] Update jquery.slimscroll.js
    
    Inside the attach, this is the Window object, not the DOM container, this could cause the page scroll blocked, because the _onWheel still being used to process the page scroll event while the slimscroll container has been destroyed.
    ---
     jquery.slimscroll.js | 8 ++++----
     1 file changed, 4 insertions(+), 4 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 190368e..a42947d 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -309,7 +309,7 @@
             }
     
             // attach scroll events
    -        attachWheel();
    +        attachWheel(this);
     
             function _onWheel(e)
             {
    @@ -382,12 +382,12 @@
               hideBar();
             }
     
    -        function attachWheel()
    +        function attachWheel(target)
             {
               if (window.addEventListener)
               {
    -            this.addEventListener('DOMMouseScroll', _onWheel, false );
    -            this.addEventListener('mousewheel', _onWheel, false );
    +            target.addEventListener('DOMMouseScroll', _onWheel, false );
    +            target.addEventListener('mousewheel', _onWheel, false );
               }
               else
               {
    
    From cc3014ba4f7a32a646c145b5b5e2634bafa712ab Mon Sep 17 00:00:00 2001
    From: nirmal bhagwani <nil4u.you@gmail.com>
    Date: Thu, 16 Apr 2015 14:57:52 +0530
    Subject: [PATCH 100/119] adding option if element is already hovered
    
    if element is already hovered like if you have applied slimscroll to whole body it will not fire scroll
    ---
     jquery.slimscroll.js | 10 ++++++++++
     1 file changed, 10 insertions(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 190368e..aacc9e2 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -48,6 +48,9 @@
             // sets rail color
             railColor : '#333',
     
    +        //if already mouse is there
    +        mouseOver:false,
    +
             // sets rail opacity
             railOpacity : .2,
     
    @@ -333,6 +336,13 @@
               if (!releaseScroll) { e.returnValue = false; }
             }
     
    +        //if element is allready hovered
    +        if(o.mouseOver){
    +          isOverPanel = true;
    +          showBar();
    +          hideBar();
    +        }
    +        
             function scrollContent(y, isWheel, isJump)
             {
               releaseScroll = false;
    
    From 15fe8209993c4610ef433997cc5b1928bf2ddc28 Mon Sep 17 00:00:00 2001
    From: nirmal bhagwani <nil4u.you@gmail.com>
    Date: Thu, 16 Apr 2015 15:03:12 +0530
    Subject: [PATCH 101/119] showing option of mouseover true demo
    
    ---
     README.md | 5 +++++
     1 file changed, 5 insertions(+)
    
    diff --git a/README.md b/README.md
    index 44d1b8f..7c86284 100644
    --- a/README.md
    +++ b/README.md
    @@ -7,3 +7,8 @@ Demo and more: http://rocha.la/jQuery-slimScroll
     Copyright (c) 2011 Piotr Rochala (http://rocha.la)
     Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
     
    +added option over librarry of rochal 
    +jQuery('#scroll').slimScroll({
    +        height: jQuery(window).height()+'px', //if you want whole page containing div to get scroll it's a trick only
    +        mouseOver:true // if element you want to scroll will already hovered then make it true else no need to mention it.
    +    });
    
    From 1b0a211f0e2dd518a8bed5172f283c87da52c46f Mon Sep 17 00:00:00 2001
    From: nirmal bhagwani <nil4u.you@gmail.com>
    Date: Sat, 18 Apr 2015 20:22:39 +0530
    Subject: [PATCH 102/119] make it robust with animation and mouse pre over
    
    ---
     jquery.slimscroll.js | 14 +++++++++++---
     1 file changed, 11 insertions(+), 3 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index aacc9e2..381a4e8 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -50,6 +50,9 @@
     
             //if already mouse is there
             mouseOver:false,
    +        
    +        // sets animation status on a given scroll
    +        animate: false,
     
             // sets rail opacity
             railOpacity : .2,
    @@ -338,11 +341,16 @@
     
             //if element is allready hovered
             if(o.mouseOver){
    -          isOverPanel = true;
    -          showBar();
    -          hideBar();
    +          rail.trigger('hover')
             }
             
    +        // scroll content
    +    	  if (o.animate){
    +              me.animate({ scrollTop: delta });
    +    	  }else{
    +              me.scrollTop(delta);
    +    	  }
    +    	  
             function scrollContent(y, isWheel, isJump)
             {
               releaseScroll = false;
    
    From 75763c05e5c26a4bf3db5fc351e26045e897e34a Mon Sep 17 00:00:00 2001
    From: nirmal bhagwani <nil4u.you@gmail.com>
    Date: Sat, 18 Apr 2015 20:23:39 +0530
    Subject: [PATCH 103/119] update it with robust pre hover and adding animation
     option
    
    ---
     jquery.slimscroll.min.js | 17 +----------------
     1 file changed, 1 insertion(+), 16 deletions(-)
    
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index f25b5cc..72d364f 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -1,16 +1 @@
    -/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
    - * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
    - * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
    - *
    - * Version: 1.3.3
    - *
    - */
    -(function(e){e.fn.extend({slimScroll:function(g){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function u(d){if(r){d=d||window.event;
    -var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,e,g){k=!1;var f=d,h=b.outerHeight()-c.outerHeight();e&&(f=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),f=Math.min(Math.max(f,0),h),f=0<d?Math.ceil(f):Math.floor(f),c.css({top:f+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    -f=l*(b[0].scrollHeight-b.outerHeight());g&&(f=d,d=f/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(f);b.trigger("slimscrolling",~~f);v();p()}function C(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)}function w(){s=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:s+"px"});var a=s==b.outerHeight()?"none":"block";c.css({display:a})}
    -function v(){w();clearTimeout(A);l==~~l?(k=a.allowPageScroll,B!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;B=l;s>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(A=setTimeout(function(){a.disableFadeOut&&r||x||y||(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))}var r,x,y,A,z,s,l,B,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),c=b.parent().find("."+a.barClass),h=b.parent().find("."+a.railClass);
    -w();if(e.isPlainObject(g)){if("height"in g&&"auto"==g.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",q);b.css("height",q)}if("scrollTo"in g)n=parseInt(a.scrollTo);else if("scrollBy"in g)n+=parseInt(a.scrollBy);else if("destroy"in g){c.remove();h.remove();b.unwrap();return}m(n,!1,!0)}}else if(!(e.isPlainObject(g)&&"destroy"in g)){a.height="auto"==a.height?b.parent().height():a.height;n=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",
    -overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?
    -"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?{right:a.distance}:{left:a.distance};h.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(h);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);y=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});
    -b.bind("mouseup.slimscroll",function(a){y=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});h.hover(function(){v()},function(){p()});c.hover(function(){x=!0},function(){x=!1});b.hover(function(){r=!0;v();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&
    -(m((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),z=b.originalEvent.touches[0].pageY)});w();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"top"!==a.start&&(m(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());C()}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +!function(e){e.fn.extend({slimScroll:function(i){var o={width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",mouseOver:!1,animate:!1,railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},r=e.extend(o,i);return this.each(function(){function o(t){if(h){var t=t||window.event,i=0;t.wheelDelta&&(i=-t.wheelDelta/120),t.detail&&(i=t.detail/3);var o=t.target||t.srcTarget||t.srcElement;e(o).closest("."+r.wrapperClass).is(x.parent())&&a(i,!0),t.preventDefault&&!y&&t.preventDefault(),y||(t.returnValue=!1)}}function a(e,t,i){y=!1;var o=e,a=x.outerHeight()-O.outerHeight();if(t&&(o=parseInt(O.css("top"))+e*parseInt(r.wheelStep)/100*O.outerHeight(),o=Math.min(Math.max(o,0),a),o=e>0?Math.ceil(o):Math.floor(o),O.css({top:o+"px"})),v=parseInt(O.css("top"))/(x.outerHeight()-O.outerHeight()),o=v*(x[0].scrollHeight-x.outerHeight()),i){o=e;var s=o/x[0].scrollHeight*x.outerHeight();s=Math.min(Math.max(s,0),a),O.css({top:s+"px"})}x.scrollTop(o),x.trigger("slimscrolling",~~o),n(),c()}function s(){window.addEventListener?(this.addEventListener("DOMMouseScroll",o,!1),this.addEventListener("mousewheel",o,!1)):document.attachEvent("onmousewheel",o)}function l(){f=Math.max(x.outerHeight()/x[0].scrollHeight*x.outerHeight(),w),O.css({height:f+"px"});var e=f==x.outerHeight()?"none":"block";O.css({display:e})}function n(){if(l(),clearTimeout(p),v==~~v){if(y=r.allowPageScroll,b!=v){var e=0==~~v?"top":"bottom";x.trigger("slimscroll",e)}}else y=!1;return b=v,f>=x.outerHeight()?void(y=!0):(O.stop(!0,!0).fadeIn("fast"),void(r.railVisible&&E.stop(!0,!0).fadeIn("fast")))}function c(){r.alwaysVisible||(p=setTimeout(function(){r.disableFadeOut&&h||u||d||(O.fadeOut("slow"),E.fadeOut("slow"))},1e3))}var h,u,d,p,g,f,v,b,m="<div></div>",w=30,y=!1,x=e(this);if(x.parent().hasClass(r.wrapperClass)){var C=x.scrollTop();if(O=x.parent().find("."+r.barClass),E=x.parent().find("."+r.railClass),l(),e.isPlainObject(i)){if("height"in i&&"auto"==i.height){x.parent().css("height","auto"),x.css("height","auto");var H=x.parent().parent().height();x.parent().css("height",H),x.css("height",H)}if("scrollTo"in i)C=parseInt(r.scrollTo);else if("scrollBy"in i)C+=parseInt(r.scrollBy);else if("destroy"in i)return O.remove(),E.remove(),void x.unwrap();a(C,!1,!0)}}else if(!(e.isPlainObject(i)&&"destroy"in i)){r.height="auto"==r.height?x.parent().height():r.height;var S=e(m).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});x.css({overflow:"hidden",width:r.width,height:r.height});var E=e(m).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.railBorderRadius,background:r.railColor,opacity:r.railOpacity,zIndex:90}),O=e(m).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.borderRadius,BorderRadius:r.borderRadius,MozBorderRadius:r.borderRadius,WebkitBorderRadius:r.borderRadius,zIndex:99}),R="right"==r.position?{right:r.distance}:{left:r.distance};E.css(R),O.css(R),x.wrap(S),x.parent().append(O),x.parent().append(E),r.railDraggable&&O.bind("mousedown",function(i){var o=e(document);return d=!0,t=parseFloat(O.css("top")),pageY=i.pageY,o.bind("mousemove.slimscroll",function(e){currTop=t+e.pageY-pageY,O.css("top",currTop),a(0,O.position().top,!1)}),o.bind("mouseup.slimscroll",function(){d=!1,c(),o.unbind(".slimscroll")}),!1}).bind("selectstart.slimscroll",function(e){return e.stopPropagation(),e.preventDefault(),!1}),E.hover(function(){n()},function(){c()}),O.hover(function(){u=!0},function(){u=!1}),x.hover(function(){h=!0,n(),c()},function(){h=!1,c()}),x.bind("touchstart",function(e){e.originalEvent.touches.length&&(g=e.originalEvent.touches[0].pageY)}),x.bind("touchmove",function(e){if(y||e.originalEvent.preventDefault(),e.originalEvent.touches.length){var t=(g-e.originalEvent.touches[0].pageY)/r.touchScrollStep;a(t,!0),g=e.originalEvent.touches[0].pageY}}),l(),"bottom"===r.start?(O.css({top:x.outerHeight()-O.outerHeight()}),a(0,!0)):"top"!==r.start&&(a(e(r.start).position().top,null,!0),r.alwaysVisible||O.hide()),s(),r.mouseOver&&E.trigger("hover"),r.animate?x.animate({scrollTop:delta}):x.scrollTop(delta)}}),this}}),e.fn.extend({slimscroll:e.fn.slimScroll})}(jQuery);
    
    From 0364ad5467d556eff72a88c0d3908c13e1bf27cb Mon Sep 17 00:00:00 2001
    From: Dotan Simha <dotansimha@gmail.com>
    Date: Thu, 23 Apr 2015 18:20:21 +0300
    Subject: [PATCH 104/119] Added support for Meteor.js packaging
    
    ---
     package.js | 13 +++++++++++++
     1 file changed, 13 insertions(+)
     create mode 100644 package.js
    
    diff --git a/package.js b/package.js
    new file mode 100644
    index 0000000..b855202
    --- /dev/null
    +++ b/package.js
    @@ -0,0 +1,13 @@
    +Package.describe({
    +  name: 'rochal:slimscroll',
    +  version: '1.3.3',
    +  summary: 'jQuery SlimScroll package for meteor.',
    +  git: 'https://github.com/rochal/jQuery-slimScroll',
    +  documentation: 'README.md'
    +});
    +
    +Package.onUse(function (api) {
    +  api.versionsFrom('METEOR@0.9.0.1');
    +  api.use('jquery', 'client');
    +  api.addFiles('jquery.slimscroll.js', 'client');
    +});
    
    From 3956b86403d52824ce3bfd458f7589c6e1d720ff Mon Sep 17 00:00:00 2001
    From: rochal <piotr.rochala@gmail.com>
    Date: Sun, 7 Jun 2015 13:08:30 +1000
    Subject: [PATCH 105/119] Fixup readme
    
    ---
     README.md | 8 +-------
     1 file changed, 1 insertion(+), 7 deletions(-)
    
    diff --git a/README.md b/README.md
    index 7c86284..8042660 100644
    --- a/README.md
    +++ b/README.md
    @@ -5,10 +5,4 @@ slimScroll is a small jQuery plugin that transforms any div into a scrollable ar
     Demo and more: http://rocha.la/jQuery-slimScroll
     
     Copyright (c) 2011 Piotr Rochala (http://rocha.la)
    -Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
    -
    -added option over librarry of rochal 
    -jQuery('#scroll').slimScroll({
    -        height: jQuery(window).height()+'px', //if you want whole page containing div to get scroll it's a trick only
    -        mouseOver:true // if element you want to scroll will already hovered then make it true else no need to mention it.
    -    });
    +Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
    \ No newline at end of file
    
    From 3a3a51c42d2abb605b846e08813a8fce3470f470 Mon Sep 17 00:00:00 2001
    From: rochal <piotr.rochala@gmail.com>
    Date: Sun, 7 Jun 2015 13:13:25 +1000
    Subject: [PATCH 106/119] Revert #199
    
    ---
     jquery.slimscroll.js | 18 ------------------
     1 file changed, 18 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 381a4e8..190368e 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -48,12 +48,6 @@
             // sets rail color
             railColor : '#333',
     
    -        //if already mouse is there
    -        mouseOver:false,
    -        
    -        // sets animation status on a given scroll
    -        animate: false,
    -
             // sets rail opacity
             railOpacity : .2,
     
    @@ -339,18 +333,6 @@
               if (!releaseScroll) { e.returnValue = false; }
             }
     
    -        //if element is allready hovered
    -        if(o.mouseOver){
    -          rail.trigger('hover')
    -        }
    -        
    -        // scroll content
    -    	  if (o.animate){
    -              me.animate({ scrollTop: delta });
    -    	  }else{
    -              me.scrollTop(delta);
    -    	  }
    -    	  
             function scrollContent(y, isWheel, isJump)
             {
               releaseScroll = false;
    
    From 43cb2d6c34cfdd0bf5735b385c077b585070bc7e Mon Sep 17 00:00:00 2001
    From: rochal <piotr.rochala@gmail.com>
    Date: Sun, 7 Jun 2015 14:04:32 +1000
    Subject: [PATCH 107/119] Release 1.3.4
    
    ---
     bower.json               |  2 +-
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js | 17 ++++++++++++++++-
     package.js               |  2 +-
     slimScroll.jquery.json   |  2 +-
     5 files changed, 20 insertions(+), 5 deletions(-)
    
    diff --git a/bower.json b/bower.json
    index 1f5f71f..06075f6 100644
    --- a/bower.json
    +++ b/bower.json
    @@ -1,6 +1,6 @@
     {
       "name" : "slimScroll",
    -  "version" : "1.3.3",
    +  "version" : "1.3.4",
       "title" : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords" : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 3eeedb7..fad01f0 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.3
    + * Version: 1.3.4
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 72d364f..113c621 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -1 +1,16 @@
    -!function(e){e.fn.extend({slimScroll:function(i){var o={width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",mouseOver:!1,animate:!1,railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},r=e.extend(o,i);return this.each(function(){function o(t){if(h){var t=t||window.event,i=0;t.wheelDelta&&(i=-t.wheelDelta/120),t.detail&&(i=t.detail/3);var o=t.target||t.srcTarget||t.srcElement;e(o).closest("."+r.wrapperClass).is(x.parent())&&a(i,!0),t.preventDefault&&!y&&t.preventDefault(),y||(t.returnValue=!1)}}function a(e,t,i){y=!1;var o=e,a=x.outerHeight()-O.outerHeight();if(t&&(o=parseInt(O.css("top"))+e*parseInt(r.wheelStep)/100*O.outerHeight(),o=Math.min(Math.max(o,0),a),o=e>0?Math.ceil(o):Math.floor(o),O.css({top:o+"px"})),v=parseInt(O.css("top"))/(x.outerHeight()-O.outerHeight()),o=v*(x[0].scrollHeight-x.outerHeight()),i){o=e;var s=o/x[0].scrollHeight*x.outerHeight();s=Math.min(Math.max(s,0),a),O.css({top:s+"px"})}x.scrollTop(o),x.trigger("slimscrolling",~~o),n(),c()}function s(){window.addEventListener?(this.addEventListener("DOMMouseScroll",o,!1),this.addEventListener("mousewheel",o,!1)):document.attachEvent("onmousewheel",o)}function l(){f=Math.max(x.outerHeight()/x[0].scrollHeight*x.outerHeight(),w),O.css({height:f+"px"});var e=f==x.outerHeight()?"none":"block";O.css({display:e})}function n(){if(l(),clearTimeout(p),v==~~v){if(y=r.allowPageScroll,b!=v){var e=0==~~v?"top":"bottom";x.trigger("slimscroll",e)}}else y=!1;return b=v,f>=x.outerHeight()?void(y=!0):(O.stop(!0,!0).fadeIn("fast"),void(r.railVisible&&E.stop(!0,!0).fadeIn("fast")))}function c(){r.alwaysVisible||(p=setTimeout(function(){r.disableFadeOut&&h||u||d||(O.fadeOut("slow"),E.fadeOut("slow"))},1e3))}var h,u,d,p,g,f,v,b,m="<div></div>",w=30,y=!1,x=e(this);if(x.parent().hasClass(r.wrapperClass)){var C=x.scrollTop();if(O=x.parent().find("."+r.barClass),E=x.parent().find("."+r.railClass),l(),e.isPlainObject(i)){if("height"in i&&"auto"==i.height){x.parent().css("height","auto"),x.css("height","auto");var H=x.parent().parent().height();x.parent().css("height",H),x.css("height",H)}if("scrollTo"in i)C=parseInt(r.scrollTo);else if("scrollBy"in i)C+=parseInt(r.scrollBy);else if("destroy"in i)return O.remove(),E.remove(),void x.unwrap();a(C,!1,!0)}}else if(!(e.isPlainObject(i)&&"destroy"in i)){r.height="auto"==r.height?x.parent().height():r.height;var S=e(m).addClass(r.wrapperClass).css({position:"relative",overflow:"hidden",width:r.width,height:r.height});x.css({overflow:"hidden",width:r.width,height:r.height});var E=e(m).addClass(r.railClass).css({width:r.size,height:"100%",position:"absolute",top:0,display:r.alwaysVisible&&r.railVisible?"block":"none","border-radius":r.railBorderRadius,background:r.railColor,opacity:r.railOpacity,zIndex:90}),O=e(m).addClass(r.barClass).css({background:r.color,width:r.size,position:"absolute",top:0,opacity:r.opacity,display:r.alwaysVisible?"block":"none","border-radius":r.borderRadius,BorderRadius:r.borderRadius,MozBorderRadius:r.borderRadius,WebkitBorderRadius:r.borderRadius,zIndex:99}),R="right"==r.position?{right:r.distance}:{left:r.distance};E.css(R),O.css(R),x.wrap(S),x.parent().append(O),x.parent().append(E),r.railDraggable&&O.bind("mousedown",function(i){var o=e(document);return d=!0,t=parseFloat(O.css("top")),pageY=i.pageY,o.bind("mousemove.slimscroll",function(e){currTop=t+e.pageY-pageY,O.css("top",currTop),a(0,O.position().top,!1)}),o.bind("mouseup.slimscroll",function(){d=!1,c(),o.unbind(".slimscroll")}),!1}).bind("selectstart.slimscroll",function(e){return e.stopPropagation(),e.preventDefault(),!1}),E.hover(function(){n()},function(){c()}),O.hover(function(){u=!0},function(){u=!1}),x.hover(function(){h=!0,n(),c()},function(){h=!1,c()}),x.bind("touchstart",function(e){e.originalEvent.touches.length&&(g=e.originalEvent.touches[0].pageY)}),x.bind("touchmove",function(e){if(y||e.originalEvent.preventDefault(),e.originalEvent.touches.length){var t=(g-e.originalEvent.touches[0].pageY)/r.touchScrollStep;a(t,!0),g=e.originalEvent.touches[0].pageY}}),l(),"bottom"===r.start?(O.css({top:x.outerHeight()-O.outerHeight()}),a(0,!0)):"top"!==r.start&&(a(e(r.start).position().top,null,!0),r.alwaysVisible||O.hide()),s(),r.mouseOver&&E.trigger("hover"),r.animate?x.animate({scrollTop:delta}):x.scrollTop(delta)}}),this}}),e.fn.extend({slimscroll:e.fn.slimScroll})}(jQuery);
    +/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
    + * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
    + * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
    + *
    + * Version: 1.3.4
    + *
    + */
    +(function(e){e.fn.extend({slimScroll:function(g){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function v(d){if(r){d=d||window.event;
    +var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,e,g){k=!1;var f=d,h=b.outerHeight()-c.outerHeight();e&&(f=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),f=Math.min(Math.max(f,0),h),f=0<d?Math.ceil(f):Math.floor(f),c.css({top:f+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    +f=l*(b[0].scrollHeight-b.outerHeight());g&&(f=d,d=f/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(f);b.trigger("slimscrolling",~~f);w();p()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
    +!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),c=b.closest("."+a.barClass),h=b.closest("."+a.railClass);x();if(e.isPlainObject(g)){if("height"in g&&"auto"==g.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",
    +q);b.css("height",q)}if("scrollTo"in g)n=parseInt(a.scrollTo);else if("scrollBy"in g)n+=parseInt(a.scrollBy);else if("destroy"in g){c.remove();h.remove();b.unwrap();return}m(n,!1,!0)}}else if(!(e.isPlainObject(g)&&"destroy"in g)){a.height="auto"==a.height?b.parent().height():a.height;n=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=e("<div></div>").addClass(a.railClass).css({width:a.size,
    +height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?
    +{right:a.distance}:{left:a.distance};h.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(h);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});
    +h.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(m((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),
    +m(0,!0)):"top"!==a.start&&(m(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    diff --git a/package.js b/package.js
    index b855202..ab9b9e5 100644
    --- a/package.js
    +++ b/package.js
    @@ -1,6 +1,6 @@
     Package.describe({
       name: 'rochal:slimscroll',
    -  version: '1.3.3',
    +  version: '1.3.4',
       summary: 'jQuery SlimScroll package for meteor.',
       git: 'https://github.com/rochal/jQuery-slimScroll',
       documentation: 'README.md'
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index a6bcd84..efbd1e1 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.3.3",
    +  "version"     : "1.3.4",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From 3f836a9be56b84ddffa1aa37bc61467d889a66f8 Mon Sep 17 00:00:00 2001
    From: rochal <piotr.rochala@gmail.com>
    Date: Sun, 7 Jun 2015 14:15:24 +1000
    Subject: [PATCH 108/119] Bump up version
    
    ---
     bower.json               | 2 +-
     jquery.slimscroll.js     | 2 +-
     jquery.slimscroll.min.js | 2 +-
     package.js               | 2 +-
     slimScroll.jquery.json   | 2 +-
     5 files changed, 5 insertions(+), 5 deletions(-)
    
    diff --git a/bower.json b/bower.json
    index 06075f6..aead77a 100644
    --- a/bower.json
    +++ b/bower.json
    @@ -1,6 +1,6 @@
     {
       "name" : "slimScroll",
    -  "version" : "1.3.4",
    +  "version" : "1.3.5",
       "title" : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords" : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index fad01f0..e49bad0 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.4
    + * Version: 1.3.5
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 113c621..2db66a3 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.4
    + * Version: 1.3.5
      *
      */
     (function(e){e.fn.extend({slimScroll:function(g){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function v(d){if(r){d=d||window.event;
    diff --git a/package.js b/package.js
    index ab9b9e5..40fa567 100644
    --- a/package.js
    +++ b/package.js
    @@ -1,6 +1,6 @@
     Package.describe({
       name: 'rochal:slimscroll',
    -  version: '1.3.4',
    +  version: '1.3.5',
       summary: 'jQuery SlimScroll package for meteor.',
       git: 'https://github.com/rochal/jQuery-slimScroll',
       documentation: 'README.md'
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index efbd1e1..1351791 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.3.4",
    +  "version"     : "1.3.5",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    
    From 7d25f8901951185e65b5a7cd8a65e5c3c28338c0 Mon Sep 17 00:00:00 2001
    From: rochal <piotr.rochala@gmail.com>
    Date: Sun, 7 Jun 2015 14:34:35 +1000
    Subject: [PATCH 109/119] Add npm package.json, bump up version
    
    ---
     bower.json               |  2 +-
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js |  2 +-
     package.js               |  2 +-
     package.json             | 31 +++++++++++++++++++++++++++++++
     slimScroll.jquery.json   |  4 ++--
     6 files changed, 37 insertions(+), 6 deletions(-)
     create mode 100644 package.json
    
    diff --git a/bower.json b/bower.json
    index aead77a..5e64416 100644
    --- a/bower.json
    +++ b/bower.json
    @@ -1,6 +1,6 @@
     {
       "name" : "slimScroll",
    -  "version" : "1.3.5",
    +  "version" : "1.3.6",
       "title" : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords" : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index e49bad0..2261a1b 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.5
    + * Version: 1.3.6
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 2db66a3..f41e608 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.5
    + * Version: 1.3.6
      *
      */
     (function(e){e.fn.extend({slimScroll:function(g){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function v(d){if(r){d=d||window.event;
    diff --git a/package.js b/package.js
    index 40fa567..1aec1fb 100644
    --- a/package.js
    +++ b/package.js
    @@ -1,6 +1,6 @@
     Package.describe({
       name: 'rochal:slimscroll',
    -  version: '1.3.5',
    +  version: '1.3.6',
       summary: 'jQuery SlimScroll package for meteor.',
       git: 'https://github.com/rochal/jQuery-slimScroll',
       documentation: 'README.md'
    diff --git a/package.json b/package.json
    new file mode 100644
    index 0000000..3e67a4d
    --- /dev/null
    +++ b/package.json
    @@ -0,0 +1,31 @@
    +{
    +  "name"        : "slimScroll",
    +  "version"     : "1.3.6",
    +  "title"       : "jQuery slimScroll scrollbar",
    +  "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    +  "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui", "jquery-plugin", "ecosystem:jquery"],
    +  "homepage"    : "http://rocha.la/jQuery-slimScroll/",
    +  "repository": {
    +    "type": "git",
    +    "url": "https://github.com/rochal/jQuery-slimScroll.git"
    +  },
    +  "author" : {
    +    "name"  : "Piotr Rochala",
    +    "url"   : "http://rocha.la/"
    +  },
    +
    +  "dependencies" : {
    +    "jquery" : ">= 1.7"
    +  },
    +
    +  "licenses" : [
    +    {
    +      "type": "MIT",
    +      "url": "http://www.opensource.org/licenses/mit-license.php"
    +    },
    +    {
    +      "type": "GPL",
    +      "url": "http://www.opensource.org/licenses/gpl-license.php"
    +    }
    +  ]
    +}
    \ No newline at end of file
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    index 1351791..0c08bad 100644
    --- a/slimScroll.jquery.json
    +++ b/slimScroll.jquery.json
    @@ -1,9 +1,9 @@
     {
       "name"        : "slimScroll",
    -  "version"     : "1.3.5",
    +  "version"     : "1.3.6",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    -  "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    +  "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui", "jquery-plugin", "ecosystem:jquery"],
       "demo"        : "http://rocha.la/jQuery-slimScroll/",
       "homepage"    : "http://rocha.la/jQuery-slimScroll/",
       "download"    : "http://rocha.la/jQuery-slimScroll/",
    
    From e0704eb971e9b5adb2187979f8a92e9677874b81 Mon Sep 17 00:00:00 2001
    From: rochal <piotr.rochala@gmail.com>
    Date: Sun, 7 Jun 2015 14:36:37 +1000
    Subject: [PATCH 110/119] Update package.json
    
    ---
     package.json | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/package.json b/package.json
    index 3e67a4d..8dd6c27 100644
    --- a/package.json
    +++ b/package.json
    @@ -1,5 +1,5 @@
     {
    -  "name"        : "slimScroll",
    +  "name"        : "jquery-slimscroll",
       "version"     : "1.3.6",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    
    From 52825188661dab1eb39c78f84a70ec2931b55d46 Mon Sep 17 00:00:00 2001
    From: rochal <piotr.rochala@gmail.com>
    Date: Sun, 7 Jun 2015 14:42:03 +1000
    Subject: [PATCH 111/119] Update readme
    
    ---
     README.md | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/README.md b/README.md
    index 8042660..bc90347 100644
    --- a/README.md
    +++ b/README.md
    @@ -2,7 +2,7 @@
     
     slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.
     
    -Demo and more: http://rocha.la/jQuery-slimScroll
    +Demo and deocumentation available here: [jQuery slimScroll docs](http://rocha.la/jQuery-slimScroll)
     
     Copyright (c) 2011 Piotr Rochala (http://rocha.la)
     Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
    \ No newline at end of file
    
    From d6309d6d18bc1c488df246bd92aef54a422563d2 Mon Sep 17 00:00:00 2001
    From: laomao800-pe <laomao800@qq.com>
    Date: Tue, 8 Sep 2015 17:16:52 +0800
    Subject: [PATCH 112/119] fix "destroy" can't remove '.slimScrollRail' and
     '.slimScrollBar'
    
    ---
     jquery.slimscroll.js | 4 ++--
     1 file changed, 2 insertions(+), 2 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 2261a1b..170d5c4 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -100,8 +100,8 @@
                 var offset = me.scrollTop();
     
                 // find bar and rail
    -            bar = me.closest('.' + o.barClass);
    -            rail = me.closest('.' + o.railClass);
    +            bar = me.siblings('.' + o.barClass);
    +            rail = me.siblings('.' + o.railClass);
     
                 getBarHeight();
     
    
    From 119ad077e3b7a1c99abd9eac54304096a43324ae Mon Sep 17 00:00:00 2001
    From: Piotr Rochala <piotr.rochala@sportsbet.com.au>
    Date: Thu, 19 Nov 2015 20:47:16 +1100
    Subject: [PATCH 113/119] Clear up package managers, this is getting
     ridicilous. npm ftw.
    
    ---
     bower.json             | 32 --------------------------------
     package.js             | 13 -------------
     slimScroll.jquery.json | 30 ------------------------------
     3 files changed, 75 deletions(-)
     delete mode 100644 bower.json
     delete mode 100644 package.js
     delete mode 100644 slimScroll.jquery.json
    
    diff --git a/bower.json b/bower.json
    deleted file mode 100644
    index 5e64416..0000000
    --- a/bower.json
    +++ /dev/null
    @@ -1,32 +0,0 @@
    -{
    -  "name" : "slimScroll",
    -  "version" : "1.3.6",
    -  "title" : "jQuery slimScroll scrollbar",
    -  "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    -  "keywords" : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui"],
    -  "demo" : "http://rocha.la/jQuery-slimScroll/",
    -  "homepage" : "http://rocha.la/jQuery-slimScroll/",
    -  "download" : "http://rocha.la/jQuery-slimScroll/",
    -
    -  "main": "./jquery.slimscroll.min.js",
    -
    -  "author" : {
    -    "name" : "Piotr Rochala",
    -    "url" : "http://rocha.la/"
    -  },
    -
    -  "dependencies" : {
    -    "jquery" : ">= 1.7"
    -  },
    -
    -  "licenses" : [
    -    {
    -      "type": "MIT",
    -      "url": "http://www.opensource.org/licenses/mit-license.php"
    -    },
    -    {
    -      "type": "GPL",
    -      "url": "http://www.opensource.org/licenses/gpl-license.php"
    -    }
    -  ]
    -}
    diff --git a/package.js b/package.js
    deleted file mode 100644
    index 1aec1fb..0000000
    --- a/package.js
    +++ /dev/null
    @@ -1,13 +0,0 @@
    -Package.describe({
    -  name: 'rochal:slimscroll',
    -  version: '1.3.6',
    -  summary: 'jQuery SlimScroll package for meteor.',
    -  git: 'https://github.com/rochal/jQuery-slimScroll',
    -  documentation: 'README.md'
    -});
    -
    -Package.onUse(function (api) {
    -  api.versionsFrom('METEOR@0.9.0.1');
    -  api.use('jquery', 'client');
    -  api.addFiles('jquery.slimscroll.js', 'client');
    -});
    diff --git a/slimScroll.jquery.json b/slimScroll.jquery.json
    deleted file mode 100644
    index 0c08bad..0000000
    --- a/slimScroll.jquery.json
    +++ /dev/null
    @@ -1,30 +0,0 @@
    -{
    -  "name"        : "slimScroll",
    -  "version"     : "1.3.6",
    -  "title"       : "jQuery slimScroll scrollbar",
    -  "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    -  "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui", "jquery-plugin", "ecosystem:jquery"],
    -  "demo"        : "http://rocha.la/jQuery-slimScroll/",
    -  "homepage"    : "http://rocha.la/jQuery-slimScroll/",
    -  "download"    : "http://rocha.la/jQuery-slimScroll/",
    -
    -  "author" : {
    -    "name"  : "Piotr Rochala",
    -    "url"   : "http://rocha.la/"
    -  },
    -
    -  "dependencies" : {
    -    "jquery" : ">= 1.7"
    -  },
    -
    -  "licenses" : [
    -    {
    -      "type": "MIT",
    -      "url": "http://www.opensource.org/licenses/mit-license.php"
    -    },
    -    {
    -      "type": "GPL",
    -      "url": "http://www.opensource.org/licenses/gpl-license.php"
    -    }
    -  ]
    -}
    \ No newline at end of file
    
    From 00d27e3541d9cb4ada6f41b06cd67bef62d9d2b3 Mon Sep 17 00:00:00 2001
    From: Piotr Rochala <piotr.rochala@sportsbet.com.au>
    Date: Thu, 19 Nov 2015 20:47:23 +1100
    Subject: [PATCH 114/119] Bump up version
    
    ---
     jquery.slimscroll.js | 2 +-
     package.json         | 2 +-
     2 files changed, 2 insertions(+), 2 deletions(-)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index c793290..2b26ca0 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.6
    + * Version: 1.3.7
      *
      */
     (function($) {
    diff --git a/package.json b/package.json
    index 8dd6c27..4ac6ccf 100644
    --- a/package.json
    +++ b/package.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "jquery-slimscroll",
    -  "version"     : "1.3.6",
    +  "version"     : "1.3.7",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui", "jquery-plugin", "ecosystem:jquery"],
    
    From f1e3eeb4c571e77a9abdfaa13186a43611c91025 Mon Sep 17 00:00:00 2001
    From: Piotr Rochala <piotr.rochala@sportsbet.com.au>
    Date: Thu, 19 Nov 2015 20:59:46 +1100
    Subject: [PATCH 115/119] Update minified version.
    
    ---
     jquery.slimscroll.min.js | 20 ++++++++++----------
     1 file changed, 10 insertions(+), 10 deletions(-)
    
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index f41e608..decf42f 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,15 +2,15 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.6
    + * Version: 1.3.7
      *
      */
    -(function(e){e.fn.extend({slimScroll:function(g){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},g);this.each(function(){function v(d){if(r){d=d||window.event;
    -var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,e,g){k=!1;var f=d,h=b.outerHeight()-c.outerHeight();e&&(f=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),f=Math.min(Math.max(f,0),h),f=0<d?Math.ceil(f):Math.floor(f),c.css({top:f+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    -f=l*(b[0].scrollHeight-b.outerHeight());g&&(f=d,d=f/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(f);b.trigger("slimscrolling",~~f);w();p()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
    -!0).fadeIn("fast"),a.railVisible&&h.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),c=b.closest("."+a.barClass),h=b.closest("."+a.railClass);x();if(e.isPlainObject(g)){if("height"in g&&"auto"==g.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",
    -q);b.css("height",q)}if("scrollTo"in g)n=parseInt(a.scrollTo);else if("scrollBy"in g)n+=parseInt(a.scrollBy);else if("destroy"in g){c.remove();h.remove();b.unwrap();return}m(n,!1,!0)}}else if(!(e.isPlainObject(g)&&"destroy"in g)){a.height="auto"==a.height?b.parent().height():a.height;n=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var h=e("<div></div>").addClass(a.railClass).css({width:a.size,
    -height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?
    -{right:a.distance}:{left:a.distance};h.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(h);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});
    -h.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(m((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),
    -m(0,!0)):"top"!==a.start&&(m(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    +(function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
    +var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,e,f){k=!1;var g=d,h=b.outerHeight()-c.outerHeight();e&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),h),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    +g=l*(b[0].scrollHeight-b.outerHeight());f&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();q()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
    +!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function q(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var p=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
    +h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)p=parseInt(a.scrollTo);else if("scrollBy"in f)p+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(p,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;p=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
    +width:a.width,height:a.height});var m=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,
    +WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(p);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;q();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
    +function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){q()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();q()},function(){r=!1;q()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
    +x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From f730bc6433837ed8c5a15cf5fcb060644db367cd Mon Sep 17 00:00:00 2001
    From: Claude Khedhiri <khedhiri@madewithcaffeine.com>
    Date: Wed, 25 Nov 2015 16:51:21 +0100
    Subject: [PATCH 116/119] add bower.son bump up version
    
    ---
     .gitignore               |  9 ++++++++
     bower.json               | 46 ++++++++++++++++++++++++++++++++++++++++
     jquery.slimscroll.js     |  2 +-
     jquery.slimscroll.min.js |  2 +-
     package.json             |  2 +-
     5 files changed, 58 insertions(+), 3 deletions(-)
     create mode 100644 .gitignore
     create mode 100644 bower.json
    
    diff --git a/.gitignore b/.gitignore
    new file mode 100644
    index 0000000..208d3ce
    --- /dev/null
    +++ b/.gitignore
    @@ -0,0 +1,9 @@
    +### Node template
    +node_modules/
    +npm-debug.log*
    +
    +### JetBrains template
    +*.iml
    +.idea/
    +/out/
    +.idea_modules/
    \ No newline at end of file
    diff --git a/bower.json b/bower.json
    new file mode 100644
    index 0000000..831eb32
    --- /dev/null
    +++ b/bower.json
    @@ -0,0 +1,46 @@
    +{
    +  "name": "jquery-slimscroll",
    +  "version": "1.3.8",
    +  "description": "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    +  "keywords": [
    +    "scrollbar",
    +    "scroll",
    +    "slimscroll",
    +    "scrollable",
    +    "scrolling",
    +    "scroller",
    +    "ui",
    +    "jquery-plugin",
    +    "ecosystem:jquery"
    +  ],
    +  "homepage": "http://rocha.la/jQuery-slimScroll/",
    +  "authors": [
    +    { "name": "Piotr Rochala", "homepage": "http://rocha.la/" }
    +  ],
    +  "repository": {
    +    "type": "git",
    +    "url": "https://github.com/rochal/jQuery-slimScroll.git"
    +  },
    +  "main": [
    +    "jquery.slimscroll.js",
    +    "jquery.slimscroll.min.js"
    +  ],
    +  "licenses" : [
    +    {
    +      "type": "MIT",
    +      "url": "http://www.opensource.org/licenses/mit-license.php"
    +    },
    +    {
    +      "type": "GPL",
    +      "url": "http://www.opensource.org/licenses/gpl-license.php"
    +    }
    +  ],
    +  "moduleType": [],
    +  "ignore": [
    +    "**/.*",
    +    "node_modules",
    +    "bower_components",
    +    "test",
    +    "tests"
    +  ]
    +}
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 2b26ca0..90caed3 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.7
    + * Version: 1.3.8
      *
      */
     (function($) {
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index decf42f..2683487 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -2,7 +2,7 @@
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      *
    - * Version: 1.3.7
    + * Version: 1.3.8
      *
      */
     (function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
    diff --git a/package.json b/package.json
    index 4ac6ccf..4005577 100644
    --- a/package.json
    +++ b/package.json
    @@ -1,6 +1,6 @@
     {
       "name"        : "jquery-slimscroll",
    -  "version"     : "1.3.7",
    +  "version"     : "1.3.8",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
       "keywords"    : ["scrollbar", "scroll", "slimscroll", "scrollable", "scrolling", "scroller", "ui", "jquery-plugin", "ecosystem:jquery"],
    
    From d5b86d40e424fb00a523ea6509aa73db625eb0d4 Mon Sep 17 00:00:00 2001
    From: Jean-Philippe Bidegain <jp@bidega.in>
    Date: Tue, 15 Dec 2015 09:44:55 +0100
    Subject: [PATCH 117/119] Add the main property to the package.json
    
    ---
     package.json | 1 +
     1 file changed, 1 insertion(+)
    
    diff --git a/package.json b/package.json
    index 4005577..147e92d 100644
    --- a/package.json
    +++ b/package.json
    @@ -1,5 +1,6 @@
     {
       "name"        : "jquery-slimscroll",
    +  "main"        : "jquery.slimscroll.js",
       "version"     : "1.3.8",
       "title"       : "jQuery slimScroll scrollbar",
       "description" : "slimScroll is a small jQuery plugin that transforms any div into a scrollable area. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over.",
    
    From cf39d364e777ef95574c30c42d3b85cb2bf325d3 Mon Sep 17 00:00:00 2001
    From: Piotr Rochala <piotr.rochala@sportsbet.com.au>
    Date: Sat, 11 Jun 2016 19:19:14 +1000
    Subject: [PATCH 118/119] Update minified file
    
    ---
     jquery.slimscroll.min.js | 12 ++++++------
     1 file changed, 6 insertions(+), 6 deletions(-)
    
    diff --git a/jquery.slimscroll.min.js b/jquery.slimscroll.min.js
    index 2683487..7531ab3 100644
    --- a/jquery.slimscroll.min.js
    +++ b/jquery.slimscroll.min.js
    @@ -6,11 +6,11 @@
      *
      */
     (function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
    -var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,e,f){k=!1;var g=d,h=b.outerHeight()-c.outerHeight();e&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),h),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
    -g=l*(b[0].scrollHeight-b.outerHeight());f&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();q()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
    -!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function q(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var p=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
    -h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)p=parseInt(a.scrollTo);else if("scrollBy"in f)p+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(p,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;p=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
    +var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,g,e){k=!1;var f=b.outerHeight()-c.outerHeight();g&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),f),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());g=
    +l*(b[0].scrollHeight-b.outerHeight());e&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),f),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();p()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
    +!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
    +h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
     width:a.width,height:a.height});var m=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,
    -WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(p);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;q();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
    -function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){q()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();q()},function(){r=!1;q()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
    +WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
    +function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
     x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
    \ No newline at end of file
    
    From d01f84978d8c797fa6a9e65616a0d0999aecc183 Mon Sep 17 00:00:00 2001
    From: muhammadumairaslam <umaira.itack@gmail.com>
    Date: Tue, 12 Feb 2019 23:40:26 +0500
    Subject: [PATCH 119/119] mouse wheel not working on new browser
    
    with the help of below article.
    https://stackoverflow.com/questions/14926366/mousewheel-event-in-modern-browsers
    ---
     jquery.slimscroll.js | 1 +
     1 file changed, 1 insertion(+)
    
    diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
    index 90caed3..1c6a53b 100644
    --- a/jquery.slimscroll.js
    +++ b/jquery.slimscroll.js
    @@ -392,6 +392,7 @@
               {
                 target.addEventListener('DOMMouseScroll', _onWheel, false );
                 target.addEventListener('mousewheel', _onWheel, false );
    +            target.addEventListener('wheel', _onWheel, false);
               }
               else
               {