CODEWITHSUNDEEP
jqueryhtmlscroll
stu robson
stu robson

Reputation:

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

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.

Upvotes: 3

Views: 8298

Answers (2)

soda01
soda01

Reputation: 43

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

Upvotes: 0

Carl
Carl

Reputation: 1726

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

Upvotes: 1

Related Questions