Question

The new Github HTML5 and CSS3 (HTML5 History API) tree navigation is great:
https://github.com/blog/760-the-tree-slider

Which JQuery Plugin are they using to do the UI slide effect? Or maybe a similar one (Jquery Slide with Ajax loading)

Thanks

Answer 1

I looked through their source code and they are NOT using CSS3 or a plugin. It uses jquery animate. And the code snippets they give on the Github blog are a good start, but the popstate handler is misleading. Try this instead:

$(window).bind('popstate', function (e) {
    if (e.originalEvent.state && e.originalEvent.state.path) {
        $.get(e.originalEvent.state.path, function(data) {
            $('#slider').slideTo(data);      
        });
        return false;
    }
    return true;
}

The actual sliding uses more tricks:

1. set #slider overflow: hidden
2. get the width of the section to animate.
3. create a transfer div twice this width (transfer).
4. copy the contents of the original div to a temp div (current).
5. put the new contents in another temp div (next).
6. put current and next side by side into transfer.
7. remove content from original div and put new transfer div in (should look the same).
8. animate transfer div – new look complete.
9. replace original div contents with new data (looks the same as previous step).

Here’s slide left:

$.fn.slideTo = function(data) {
    var width = parseInt($('#slider').css('width'));
    var transfer = $('<div class="transfer"></div>').css({ 'width': (2 * width) + 'px' });
    var current = $('<div class="current"></div>').css({ 'width': width + 'px', 'left': '0', 'float': 'left' }).html($('#slider').html());
    var next = $('<div class="next"></div>').css({ 'width': width + 'px', 'left': width + 'px', 'float': 'left' }).html(data);
    transfer.append(current).append(next);
    $('#slider').html('').append(transfer);
    transfer.animate({ 'margin-left': '-' + width + 'px' }, 300, function () {
        $('#slider').html(data);
    });
}

And here’s a working example: Slider example. Click on the menu with a browser that supports history. I started to use CSS3, but detecting when the transition/transform is complete is easier with the jquery animate callback.