Show full Blog

  • Javascript solution for the Github tree slider

    Want to know how neonguru.net does the dynamic page transitions? Here’s a post I put on stackoverflow answering how they do it on Github:

    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.

    leave a comment