Full Support for Horizontal Scrollbars

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

README.md

@@ -2,7 +2,67 @@
 
 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 deocumentation available here: [jQuery slimScroll docs](http://rocha.la/jQuery-slimScroll)
+Demo and deocumentation available here: [jQuery slimScroll docs](http://lanre-ade.github.io/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.
+#This Fork Supports both Horizontal and Vertical Scrollbars.
+### The initialization options have been modified to accomodate horizontal scroll bars. See below for details.
+
+*axis* - x(X) or y(Y) or both - Axis to apply scrollbars. Default: y.  
+Note: the plugin detects if the content size exceeds the div dimensions and creates scrollbars accordingly. If width and height are specified in the options, they'll be used in place of the div dimensions.
+
+*width* - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: auto
+
+*height* - Height in pixels of the visible scroll area. Also supports auto to set the height to same as parent container. Default: 250px
+
+*size* - Width in pixels of the scrollbar. Default: 7px
+
+*positionX* - top or bottom. Sets the position of the horizontal scrollbar. Default: bottom
+
+*positionY* - left or right. Sets the position of the vertical scrollbar. Default: right
+
+*color* - Color in hex of the scrollbar. Default: #000000
+
+*alwaysVisible* - Disables scrollbar hide. Default: false
+
+*distance* - Distance in pixels from the edge of the parent element where scrollbar should appear. It is used together with position property. Default:1px
+
+*startX* - left or right or $(selector) - defines initial position of the horizontal scrollbar. When set to left it automatically scrolls to the left of the scrollable container. When HTML element is passed, slimScroll defaults to offsetLeft of this element. Default: left.
+
+*startY* - top or bottom or $(selector) - defines initial position of the vertical scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.
+
+*wheelStep* - Integer value for mouse wheel delta. Default: 20
+
+*railVisible* - Enables scrollbar rail. Default: false
+
+*railColor* - Sets scrollbar rail color, Default: #333333
+
+*railOpacity* - Sets scrollbar rail opacity. Default: 0.2
+
+*allowPageScroll* - Checks if mouse wheel should scroll page when bar reaches extremities of the container. When set to true is scrolls the page. Default: false
+
+*scrollToX* - Jumps to the specified horizontal scroll value. Can be called on any element with slimScroll already enabled.  
+Example: `$(element).slimScroll({ scrollToX: '50px' });`
+
+*scrollByX* - Increases/decreases current horizontal scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled.  
+Example: `$(element).slimScroll({ scrollByX: '60px' });`
+
+*scrollToY* - Jumps to the specified vertical scroll value. Can be called on any element with slimScroll already enabled.   
+Example: `$(element).slimScroll({ scrollToY: '50px' });`
+
+*scrollByY* - Increases/decreases current vertical scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled.  
+Example: `$(element).slimScroll({ scrollByY: '60px' });`
+
+*disableFadeOut* - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false
+
+*touchScrollStep* - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction. Default: 200
+
+
+######Events
+slimScroll publishes slimscrollX, slimscrollY, slimscrollingX and slimscrollingY events when the corresponding scrollbar moves along the parent container. You can use jQuery bind method to subscribe to these events
+
+        $(selector).slimScroll().bind('slimscrollX', function(e, pos){
+            console.log("Horizontal Scrollbar Reached " + pos + "px");
+        });
+
+Copyright (c) 2011 Piotr Rochala (http://rocha.la), Lanre Adebambo   
+Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.

examples/allow-page-scroll.html

@@ -10,7 +10,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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">
     <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>
@@ -91,4 +91,4 @@
   })();
 </script>
 </body>
-</html>
+</html>

examples/chaining.html

@@ -10,7 +10,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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">
     <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>
@@ -77,4 +77,4 @@
   })();
 </script>
 </body>
-</html>
+</html>

examples/disable-fade-out.html

@@ -11,7 +11,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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">
     <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>
@@ -91,4 +91,4 @@
   })();
 </script>
 </body>
-</html>
+</html>

examples/dynamic-content.html

@@ -11,7 +11,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
 <div class="examples">
 
 
@@ -35,8 +35,28 @@
   });
   </pre>
 
+  <div id="testDiv2">
+    <p></p>
+  </div>
+
+  <pre class="prettyprint">
+  // update content every second
+  setInterval(function(){
+
+    $('#testDiv2').find('p').append(' ' + new Date() + ' ');
+
+    // update slimscroll every time content changes
+    $('#testDiv2').slimscroll();
 
+  }, 1000);
 
+  $('#testDiv2').slimscroll({
+    alwaysVisible: true,
+    height: '50px',
+    axis: 'x'
+  });
+
+  </pre>
 </div>
 
 <script type="text/javascript">
@@ -58,6 +78,26 @@
       });
 
     });
+
+    $(function(){
+
+      // update content every second
+      setInterval(function(){
+
+        $('#testDiv2').find('p').append(new Date().getTime() + '||');
+
+        // update slimscroll every time content changes
+        $('#testDiv2').slimscroll();
+
+      }, 1000);
+
+      $('#testDiv2').slimscroll({
+        alwaysVisible: true,
+        height: '50px',
+        axis: 'x'
+      });
+
+    });
 </script>
 
 
@@ -78,4 +118,4 @@
   })();
 </script>
 </body>
-</html>
+</html>

examples/height-width.html

@@ -11,9 +11,9 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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:300px;">
+    <div style="height:300px;width:700px;">
       <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>
@@ -122,4 +122,4 @@
   })();
 </script>
 </body>
-</html>
+</html>

examples/mouse-wheel.html

@@ -11,7 +11,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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">
@@ -34,7 +34,7 @@
 
 <pre class="prettyprint">
   $('#testDiv').slimScroll({
-      wheelStep: 20
+      wheelStep: 2
   });
 </pre>
 
@@ -58,7 +58,7 @@
 
 <pre class="prettyprint">
   $('#testDiv2').slimScroll({
-      wheelStep: 100
+      wheelStep: 10
   });
 </pre>
 
@@ -68,11 +68,11 @@
     $(function(){
 
       $('#testDiv').slimScroll({
-          wheelStep: 20
+          wheelStep: 2
       });
 
       $('#testDiv2').slimScroll({
-          wheelStep: 100
+          wheelStep: 10
       });
 
     });
@@ -96,4 +96,4 @@
   })();
 </script>
 </body>
-</html>
+</html>

examples/multiple-elements.html

@@ -11,7 +11,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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;">

examples/navigation.html

@@ -24,7 +24,8 @@ <h2>Facebook-style jQuery Scrollbar</h1>
     <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>
+    <li><a target="main" href="vertical-horizontal.html">Restrict Axes</a></li>
   </ul>
 </div>
 </body>
-</html>
+</html>

examples/nested.html

@@ -11,7 +11,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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">

examples/programmatic-scrolling.html

@@ -11,7 +11,7 @@
 <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>
+<a id="git-fork" href="https://github.com/lanre-ade/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">
@@ -41,11 +41,11 @@
 });
 
 $('#scrollDown').click(function(){
-  $('#testDiv').slimScroll({ scrollBy: '50px' });
+  $('#testDiv').slimScroll({ scrollByY: '50px' });
 });
 
 $('#scrollUp').click(function(){
-  $('#testDiv').slimScroll({ scrollBy: '-50px' });
+  $('#testDiv').slimScroll({ scrollByY: '-50px' });
 });
 </pre>
 
@@ -76,11 +76,11 @@
 });
 
 $('#scrollDownTo').click(function(){
-  $('#testDiv2').slimScroll({ scrollTo: '300px' });
+  $('#testDiv2').slimScroll({ scrollToY: '300px' });
 });
 
 $('#scrollUpTo').click(function(){
-  $('#testDiv2').slimScroll({ scrollTo: '20px' });
+  $('#testDiv2').slimScroll({ scrollToY: '20px' });
 });
 </pre>
 
@@ -95,23 +95,23 @@
       });
 
       $('#scrollDown').click(function(){
-        $('#testDiv').slimScroll({ scrollBy: '50px' });
+        $('#testDiv').slimScroll({ scrollByY: '50px' });
       });
 
       $('#scrollUp').click(function(){
-        $('#testDiv').slimScroll({ scrollBy: '-50px' });
+        $('#testDiv').slimScroll({ scrollByY: '-50px' });
       });
 
       $('#testDiv2').slimscroll({
         height: '250px'
       });
 
       $('#scrollDownTo').click(function(){
-        $('#testDiv2').slimScroll({ scrollTo: '300px' });
+        $('#testDiv2').slimScroll({ scrollToY: '300px' });
       });
 
       $('#scrollUpTo').click(function(){
-        $('#testDiv2').slimScroll({ scrollTo: '20px' });
+        $('#testDiv2').slimScroll({ scrollToY: '20px' });
       });
 
     });
@@ -135,4 +135,4 @@
   })();
 </script>
 </body>
-</html>
+</html>