Added alwaysVisible configuration option. When set to true scrollbar

is initially visible and it does not hide on mouse in/out.

Author: rochal

index.htm

@@ -22,7 +22,7 @@
 	  <h1>jQuery slimScroll</h1>
 	  <h2>Facebook-like jQuery Scrollbar</h1>
 
-	  <hr /><h2>chainability test</h2>
+	  <hr /><h2>chainability test & always visible test</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>
@@ -72,7 +72,7 @@ <h2>Facebook-like jQuery Scrollbar</h1>
 		  <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</h2>
+	<hr /><h2>No initial content test & always visible</h2>
 	<div id="noinitialcontent"></div>
 
 	<hr /><h2>Not enough content to scroll test</h2>
@@ -87,7 +87,8 @@ <h2>Facebook-like jQuery Scrollbar</h1>
 	  <script type="text/javascript">
 		  $(function(){
 			  $('#test1').slimScroll({
-				  height: '250px'
+				  height: '250px',
+				  alwaysVisible: true
 			  }).css({ background: '#ccc', paddingRight: '10px' });
 			  $('#test2').slimScroll({
 				  position: 'left',
@@ -108,7 +109,10 @@ <h2>Facebook-like jQuery Scrollbar</h1>
 			  });
 			  //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' }).html(somecontent);
+			  $('#noinitialcontent').slimScroll({ 
+				  width: '300px',
+				  alwaysVisible: true
+			  }).html(somecontent);
 
 			  //not long enough test
 			  $('#notlongenough').slimScroll({ width:'400px', height:'300px' });

index.min.htm

@@ -22,7 +22,7 @@
 	  <h1>jQuery slimScroll</h1>
 	  <h2>Facebook-like jQuery Scrollbar</h1>
 
-	  <hr /><h2>chainability test</h2>
+	  <hr /><h2>chainability test & always visible test</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>
@@ -72,7 +72,7 @@ <h2>Facebook-like jQuery Scrollbar</h1>
 		  <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</h2>
+	<hr /><h2>No initial content test & always visible</h2>
 	<div id="noinitialcontent"></div>
 
 	<hr /><h2>Not enough content to scroll test</h2>
@@ -87,7 +87,8 @@ <h2>Facebook-like jQuery Scrollbar</h1>
 	  <script type="text/javascript">
 		  $(function(){
 			  $('#test1').slimScroll({
-				  height: '250px'
+				  height: '250px',
+				  alwaysVisible: true
 			  }).css({ background: '#ccc', paddingRight: '10px' });
 			  $('#test2').slimScroll({
 				  position: 'left',
@@ -108,7 +109,10 @@ <h2>Facebook-like jQuery Scrollbar</h1>
 			  });
 			  //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' }).html(somecontent);
+			  $('#noinitialcontent').slimScroll({ 
+				  width: '300px',
+				  alwaysVisible: true
+			  }).html(somecontent);
 
 			  //not long enough test
 			  $('#notlongenough').slimScroll({ width:'400px', height:'300px' });

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.2.4
+ * Version: 0.2.5
  * 
  */
 (function($) {
@@ -14,7 +14,7 @@
 			//do it for every element that matches selector
 			this.each(function(){
 
-			var isOverPanel, isOverBar, isDragg, queueHide,
+			var isOverPanel, isOverBar, isDragg, queueHide, barHeight,
 				divS = '<div></div>',
 				minBarHeight = 30,
 				wheelStep = 30,
@@ -24,7 +24,8 @@
 				size = o.size || '7px',
 				color = o.color || '#000',
 				position = o.position || 'right',
-				opacity = o.opacity || .4;
+				opacity = o.opacity || .4,
+				alwaysVisible = o.alwaysVisible === true;
 
 				//used in event handlers and for better minification
 				var me = $(this);
@@ -62,7 +63,7 @@
 						position: 'absolute',
 						top: 0,
 						opacity: opacity,
-						display: 'none',
+						display: alwaysVisible ? 'block' : 'none',
 						BorderRadius: size,
 						MozBorderRadius: size,
 						WebkitBorderRadius: size,
@@ -182,25 +183,38 @@
 				//attach scroll events
 				attachWheel();
 
-				var showBar = function()
+				var getBarHeight = function()
 				{
 					//calculate scrollbar height and make sure it is not too small
-					var height = Math.max((me.outerHeight() / me[0].scrollHeight) 
-						* me.outerHeight(), minBarHeight);
-					bar.css({ height: height + 'px' });
+					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);
 
-					if(height >= me.outerHeight()) {
+					//show only when required
+					if(barHeight >= me.outerHeight()) {
 						return;
 					}
 					bar.fadeIn('fast');
 				}
 
 				var hideBar = function()
 				{
-					queueHide = setTimeout(function(){
-						if (!isOverBar && !isDragg) { bar.fadeOut('slow'); }
-					}, 1000);
+					//only hide when options allow it
+					if (!alwaysVisible)
+					{
+						queueHide = setTimeout(function(){
+							if (!isOverBar && !isDragg) { bar.fadeOut('slow'); }
+						}, 1000);
+					}
 				}
 
 			});