Scrolling divs left and right and up and down using jQuery

Question

I am working on www.alwaystwisted.com . There are 4 divs on the page that scroll down or up through the main links depending on which div you are on.

I need this to work in a div, but left or right depending on which div you are on. I can't handle it, and it fries 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 hearing. Thanks in advance, Stu.

Answer 1

Note. I did not check your code for accuracy and did not check whether my changes would work. I just took the code that you had and changed the “top” to “left” and basically hoped for the best :)

After some reformatting 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 yes, in fact, you could reuse this code so that divs move left and right by changing lines:

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

Sort of:

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

I cross my fingers on this;)

Answer 2

you must put your 4 menu contents in <ul> each in <li>. set the exact width and height and overflow for them: hidden and float remaining on <li> s. Thus, they will be in one line, and your container will be specific. in jquery you have to animate the <ul> marginLeft property