Scrolling divs "left and right" and "up and down" using jQuery

Question

Hi guys,

I'm working on www.alwaystwisted.com. The page has 4 divs that scroll via the main links down or up depending on what div you're on.

I need this to work within the div, but left or right depending on what div you're on. I can't work it out and it's frying my brain.

<script type="text/javascript">
$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
     if ( (filterPath(location.pathname) == filterPath(this.pathname))
     && (location.hostname == this.hostname)
     && (this.hash.replace(/#/,'')) ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
       var divOffset = $target.parent().offset().top;
       var pOffset = $target.offset().top;
       var pScroll = pOffset - divOffset;
       $(this).click(function() {
        $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
        return false;
       });
      }
     }
  });
});
</script>

I look forward to a helpful answer. Thanks in advance, Stu.

Answer 1

Note:I haven't tested your code for accuracy, nor have I checked if my changes would work. I simply took the code you had, and changed "top" to "left" and basically hoped for the best :)

After doing some reformatting of your code:

$(document).ready(function() { 
    function filterPath(string) 
    { 
     return string.replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,''); 
    } 
    $('a[href*=#]').each(function() { 
     if ( (filterPath(location.pathname) == filterPath(this.pathname)) 
      && (location.hostname == this.hostname) 
      && (this.hash.replace(/#/,'')) ) 
      { 
       var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); 
       var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
       if ($target) 
       { 
        var divOffset = $target.parent().offset().top; 
        var pOffset = $target.offset().top; 
        var pScroll = pOffset - divOffset; 
        $(this).click(function() 
        { 
         $target.parent().animate({scrollTop: pScroll + 'px'}, 600); 
         return false;
        });
       } 
      } 
    }); 
});

I think that yes, in fact, you could probably reuse this code to make the divs move left and right by modifying the lines:

var divOffset = $target.parent().offset().top; 
var pOffset = $target.offset().top; 
$target.parent().animate({scrollTop: pScroll + 'px'}, 600);

To something like:

var divOffset = $target.parent().offset().left; 
var pOffset = $target.offset().left; 
$target.parent().animate({scrollLeft: pScroll + 'px'}, 600);

I'm crossing my fingers on this one ;)

Answer 2

you should put your 4 menu contents in an < ul> each one in a < li>. set exact width and height for them and overflow:hidden, and a float left on the < li>s. this way they'll be in one line, with your container as a viewport. in jquery you should animate the < ul>'s marginLeft property