Horizontal scrolling site with jquery. Single Cell Jumps?

Question

Hi, Am trying to build a site that is a horizontal scrolling website. When I click a hash(#) link it should scroll to that part.

I can do this much, however I just want it so that if I click a link, it will only scroll one cell across. A good example to show you would be here: http://www.serialcut.com/

It doesnt matter what link on the left you click, it would only travel one cell instead of 3 or 4.

Thanks for you help,

Pad

Answer 1

To me, it looks like the content is being loaded via AJAX on each click. So, what is probably happening is it's adding a content div before or after the current content div, and then scrolling to that.

HTML

<div id="container">
    <div id="current">... content...</div>
</div>

JavaScript

$('id').click(function() {
    // ... get content via ajax

    var cur = document.getElementById('current');
    var prev = document.createElement('div');

    prev.innerHTML = 'content';
    prev.marginLeft = '-600px'; // or whatever width is needed        

    $(prev).insertBefore($(cur)).animate({'margin-left': '0'}, 2000);
    $(cur).attr('id', '').remove;
    $(prev).attr('id', 'current');

    $(cur).remove();
});

This particular handler only scrolls left, but it wouldn't be tough to modify it such that you can scroll either way, dependent on the index of the link.

The main concept to grasp is the DOM manipulation. If you want to scroll left, insert an element before the current element and animate from a negative margin to 0. If you want to scroll right, insert an element after the current element and animate the current element from 0 to a negative margin. Make sure you remove the elements after they're moved off the screen, to save on memory, and you should be all set.