title: Trying to create scrolling horizontal thumbnail navigation that hides on left side when not in use
body: <p>I am trying recreate the following type of scrolling thumbnail navigation as described in the following tutorial:</p>
  
  <p><a href="http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/" rel="nofollow noreferrer">http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/</a></p>
  
  <p>I require my thumbs to slide out horizontally from the left. I have amended the code to the best of my abilities, but I can't get it to work. (Think the problem is in the top third of the jquery). </p>
  
  <p>Here is what I have to date:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="menu" id="menu"&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
          &lt;div class="sc_menu_wrapper"&gt;
              &lt;div class="sc_menu"&gt;
                  &lt;a href="#"&gt;&lt;img src="images/gallery/1.jpg" alt=""/&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="images/gallery/2.jpg" alt=""/&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="images/gallery/3.jpg" alt=""/&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="images/gallery/4.jpg" alt=""/&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="images/gallery/5.jpg" alt=""/&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* Navigation Style */
  ul.menu{
  position: fixed;
  top: 0px; 
  left:0px;
  width: 100%;
  }
  
  ul.menu li{
  position:relative;
  width: 100% 
  }
  
  ul.menu li &gt; a{
  position:absolute;
  top:300px;
  left:0px;
  width:40px;
  height:200px;
  background-color:#e7e7e8;
  }
  
  /* Thumb Scrolling Style */
  
  div.sc_menu_wrapper {
  position: absolute;
  right: 0px; 
  height: 220px;
  overflow: hidden;
  top: 300px; 
  left:0px;
  visibility:hidden;
  }
  
  div.sc_menu {
  height: 200px; 
  visibility:hidden;
  }
  
  .sc_menu a {
  display: block;
  background-color:#e7e7e8;
  }
  .sc_menu img {
  display: block;
  border: none;
  opacity:0.3;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>  $(function(){
  
        // function to make the thumbs menu scrollable 
              function buildThumbs($elem){
                  var $wrapper        = $elem.next();
                  var $menu       = $wrapper.find('.sc_menu');
                  var inactiveMargin  = 220;
  
                  // move the scroll down to the beggining (move as much as the height of the menu)
  
                  $wrapper.scrollRight($menu.outerHeight());
  
                 //when moving the mouse up or down, the wrapper moves (scrolls) up or down 
  
                  $wrapper.bind('mousemove',function(e){
  
                      var wrapperWidth    = $wrapper.width();
                      var menuWidth   = $menu.outerWidth() + 2 * inactiveMargin;
                      var top     = (e.pageX - $wrapper.offset().right) * (menuWidth - wrapperWidth) / wrapperWidth - inactiveMargin;
  
                     $wrapper.scrollRight(right+10);
                  });
              }
  
        var stacktime;
  
        $('#menu li &gt; a').bind('mouseover',function () {
            var $this = $(this);
  
            buildThumbs($this);
  
            var pos   =   $this.next().find('a').size();
            var f =   function(){
                if(pos==0) clearTimeout(stacktime);
                $this.next().find('a:nth-child('+pos+')').css('visibility','visible');
                --pos;
            };
  
            // each thumb will appear with a delay 
            stacktime = setInterval(f , 50);
        });
  
  
        /// on mouseleave of the whole &lt;li&gt; the scrollable area is hidden 
        $('#menu li').bind('mouseleave',function () {
            var $this = $(this);
            clearTimeout(stacktime);
            $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
            $this.find('.sc_menu_wrapper').css('visibility','hidden');
        });
  
        // when hovering a thumb, change its opacity 
        $('.sc_menu a').hover(
        function () {
            var $this = $(this);
            $this.find('img')
            .stop()
            .animate({'opacity':'1.0'},400);
        },
        function () {
            var $this = $(this);
            $this.find('img')
            .stop()
            .animate({'opacity':'0.3'},400);
        }
    );
    });
  </code></pre>
  
  <p>Wondering if some eagle eye might be able to point out where I am going wrong. As my knowledge of JQuery is limited, I'm guessing it is in there.</p>
  
  <p>I really appreciate anyone taking the time to look this over.</p>
  
  <p>Thank you!</p>