Horizontal Scroll Div with Arrows

by Intesar Haider

HTML

<div id="elem">
  <label>
    <input type="radio" />View</label>
  <label>
    <input type="radio" />All</label>
  <label>
    <input type="radio" />New</label>
  <label>
    <input type="radio" />Unread</label>
  <label>
    <input type="radio" />Favorites</label>
  <label>
    <input type="radio" />Bulk Print</label>
  <label>
    <input type="radio" />Bulk Save</label>
  <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
    <label>
    <input type="radio" />Save Library</label>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

CSS

#outer {
   float: left;
   width: 250px;
   overflow: hidden;
   white-space: nowrap;
   display: inline-block;
 }
 
 #left-button {
   float: left;
   width: 30px;
   text-align: center;
 }
 
 #right-button {
   float: left;
   width: 30px;
   text-align: center;
 }
 
 a {
   text-decoration: none;
   font-weight: bolder;
   color: red;
 }
 
 #inner:first-child {
   margin-left: 0;
 }
 
 label {
   margin-left: 10px;
 }
 
 .hide {
   display: none;
 }

JavaScript

$(function() {
       var print = function(msg) {
         alert(msg);
       };

       var setInvisible = function(elem) {
         elem.css('visibility', 'hidden');
       };
       var setVisible = function(elem) {
         elem.css('visibility', 'visible');
       };

       var elem = $("#elem");
       var items = elem.children();

       // Inserting Buttons
       elem.prepend('<div id="right-button" style="visibility: hidden;"><a href="#"><</a></div>');
       elem.append('  <div id="left-button"><a href="#">></a></div>');

       // Inserting Inner
       items.wrapAll('<div id="inner" />');

       // Inserting Outer
       debugger;
       elem.find('#inner').wrap('<div id="outer"/>');

       var outer = $('#outer');

       var updateUI = function() {
         var maxWidth = outer.outerWidth(true);
         var actualWidth = 0;
         $.each($('#inner >'), function(i, item) {
           actualWidth += $(item).outerWidth(true);
         });

         if (actualWidth <= maxWidth) {
           setVisible($('#left-button'));
         }
       };
       updateUI();



       $('#right-button').click(function() {
         var leftPos = outer.scrollLeft();
         outer.animate({
           scrollLeft: leftPos - 200
         }, 800, function() {
           debugger;
           if ($('#outer').scrollLeft() <= 0) {
             setInvisible($('#right-button'));
           }
         });
       });

       $('#left-button').click(function() {
         setVisible($('#right-button'));
         var leftPos = outer.scrollLeft();
         outer.animate({
           scrollLeft: leftPos + 200
         }, 800);
       });

       $(window).resize(function() {
         updateUI();
       });
     });