SimpleHorizontalScroller

left-right

This is a micro script that produces a smooth horizontal transition without hijacking all your links on the page and setting up listeners for them. Instead you wire up the events to the links you want to control viewing scrolling elements and delegate the scrolling to left-right. Why the heck would I use this when I can find libraries that can do everything automatically for me, you ask? There is no reason you must use this. There are special cases where you don't want to drop-in a huge library for animations or slide transitions or you can't use CSS3. Or, there may even be a case (like mine) where you only need to setup few links to control your scrollable content.

This is especially useful when you have multiple elements to stack inside a single tab in a tab view.

This is the installation:

<script type="text/javascript" src="js/leftRight.js"></script>
<link href="css/leftRight.css" type="text/css" rel="stylesheet"/>

This is how you wire up your links

function scrollGrids(e) { //this function is your handler for clicks
   e.preventDefault();
   if($(e.currentTarget).hasClass("selected") || leftRight.isScrolling()) {
      return false;
   }
   else if($(e.currentTarget).hasClass("first-link")) {
      $(".first-link").addClass("selected");
      $(".second-link").removeClass("selected");
      leftRight.setIntervalId(setInterval(function() {
           leftRight.scroll(0);
      },10));

   }
   else if($(e.currentTarget).hasClass("second-link")) {
      $(".first-link").removeClass("selected");
      $(".second-link").addClass("selected");
      var sideScrollerWidth = $(".side-scroller").width();
      leftRight.setIntervalId(setInterval(function() {
           leftRight.scroll(sideScrollerWidth);
      },10));
   }
   return true;
}

Sample markup

<div style="width: 900px;height:400px; padding: 100px;">
    <div class="links">
         <a href="first-grid" class="first-link selected">First Grid</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="second-grid" class="second-link">Second Grid</a>
    </div>
    <div class="side-scroller">
         <div class="side-scroll-wrapper">
             <div id="first-grid">
                 <table class="table-bordered" style="width:850px">
                      <thead>
                           <tr>
                              <th>Name</th>
                              <th>Description</th>
                              <th>Something</th>
                              <th>Else</th>
                           </tr>
                      </thead>
                      <tbody>
                           <tr>
                               <td>Praneet Loke</td>
                               <td>This script has only 35 lines un-minified!</td>
                               <td>...</td>
                               <td>....</td>
                           </tr>
                        </tbody>
                   </table>
              </div>
              <div id="second-grid">
                   <table class="table-bordered" style="width:850px">
                        <thead>
                           <tr>
                               <th>Name</th>
                               <th>Description</th>
                               <th>Something</th>
                               <th>Else</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                               <td>Praneet Loke</td>
                               <td>This script has only 35 lines un-minified!</td>
                               <td>...</td>
                               <td>....</td>
                           </tr>
                        </tbody>
                    </table>
              </div>
          </div>
     </div>
</div>

To-do

Detect browser support for CSS3 transforms and automatically use that instead of javascript based scrolling.

Found issues?

I would greatly appreciate it if you can fix it otherwise, please give me an example and explain what is wrong and I'll take a look at it "when I get a chance".