Trying to create scrolling horizontal thumbnail navigation that hides on left side when not in use

Question

Hi,

I am trying recreate the following type of scrolling thumbnail navigation as described in the following tutorial:

http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/

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).

Here is what I have to date:

HTML

<ul class="menu" id="menu">
    <li>
        <a href="#"></a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="images/gallery/1.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/2.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/3.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/4.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/5.jpg" alt=""/></a>
            </div>
        </div>
    </li>
    </ul>

CSS

/* Navigation Style */
ul.menu{
position: fixed;
top: 0px; 
left:0px;
width: 100%;
}

ul.menu li{
position:relative;
width: 100% 
}

ul.menu li > 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);
}

JQUERY

  $(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 > 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 <li> 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);
      }
  );
  });

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.

I really appreciate anyone taking the time to look this over.

Thank you!

Answer 1

I posted a demo for you :)

I couldn't get your code to work with the demo, but the first thing that needs changing is all the rights to left. There is no such thing as scrollRight. Here is just the first function in the code with those problems fixed.

  // 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.scrollLeft($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 left         = (e.pageX - $wrapper.offset().left) * (menuWidth - wrapperWidth) / wrapperWidth - inactiveMargin;

               $wrapper.scrollLeft(left+10);
            });
        }

Oh and add a float:left in this bit of CSS:

.sc_menu img {
 display: block;
 border: none;
 float: left;
 opacity:0.3;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

---

Updated to make the scrolling and highlight work properly - it may not be the most efficient method of doing this, but I didn't change the code that much from the original. Updated demo here.

CSS

/* Navigation Style */
ul.menu{
 position: fixed;
 top: 0px;
 left:0px;
 width: 100%;
}

ul.menu li{
 position:relative;
 width: 100%
}

ul.menu li > a {
 display: block;
 position:absolute;
 top:300px;
 left:0px;
 width:40px;
 height:200px;
 background-color:#e7e7e8;
}

/* Thumb Scrolling Style */

div.sc_menu_wrapper {
 position: relative;
 height: 220px;
 overflow: hidden;
 top: 300px;
 left: 0px;
 visibility:hidden;
}

div.sc_menu {
 height: 195px;
 visibility:hidden;
 overflow: hidden;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 top: 0;
 left: 0;
 width: 100%;
}

.sc_menu a {
 background-color:#e7e7e8;
}
.sc_menu img {
 height: 195px;
 width: 130px;
 float: left;
 display: block;
 border: none;
 opacity:0.3;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

Script

$(function(){
 // function to make the thumbs menu scrollable
 function buildThumbs($elem) {
  var $wrapper = $elem.next();
  var $menu = $wrapper.find('.sc_menu');
  var leftOffset = $wrapper.offset().left;

  // move the scroll left to the beggining
  $wrapper.scrollLeft(0);
  // make menuWidth (width of all images side by side) include the offset
  var menuWidth = leftOffset;
  // calculate the width of the menu by adding each image width (includes any padding, border & margin)
  $menu.find('img').each(function(){
   $(this).css('left', menuWidth );
   menuWidth += $(this).outerWidth(true);
  });
  // set calculated menu width - if not done, the images will wrap to the next line
  $menu.width(menuWidth);

  //when moving the mouse left or right, the wrapper moves (scrolls) left or right
  $wrapper.bind('mousemove', function(e){
   var wrapperWidth = $wrapper.outerWidth(true);
   var left = ( e.pageX - leftOffset ) * (menuWidth - wrapperWidth) / wrapperWidth;
   $wrapper.scrollLeft(left);
  });
 }

 var stacktime;
 $('#menu li > a').bind('mouseover', function(){
  var $this = $(this);
  // set up thumbnail scrolling
  buildThumbs($this);
  var pos = 0,
      len = $this.next().find('a').length;
  var f = function () {
   if (pos > len) { 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, the whole 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(){
  $(this).find('img').stop().animate({ 'opacity': '1.0' }, 400);
 }, function () {
  $(this).find('img').stop().animate({ 'opacity': '0.3' }, 400);
 });
});