How to show load first on every click and than the content

Question

I have a four link menu (home | about | solutions | contact) using jquery scroll technology with every click {Flesler's scrollTo code : http://demos.flesler.com/jquery/serialScroll/} with {TKYK history plugin http://tkyk.github.com/jquery-history-plugin/}. Ok my situation is when I click on the second link "about" it display home first than a setTimeout() later it displays the correct content. Is there anyway to hide the previous content and display sometype of "loading" and then show the new content?

Here is my init.js code:

function resize() {
         var wdt = 1000;
             var hgt = 500;
         width   = $(window).wdt;
         height  = $(window).hgt;
         mask_width = width * $('.item').length;
         $('#debug').html(width  + ' ' + height + ' ' + mask_width);
         $('#container,.item').css({width: width, height: height});
         $('#mask').css({width: mask_width, height: height});
         $('#container').scrollTo($('a.selected').attr('href'),0);
}

$(document).ready(function() {
            // scroll x-axis content
            $('a.panel').click(function() {
                $('a.panel').removeClass('selected');
                $(this).addClass('selected');
                current = $(this);
                $('#container').scrollTo($(this).attr('href'),1000,{ easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy' });
                         return false;

        });
        $(window).resize(function() { resize(); });


    // hash history
    function load(num) { $('.content').load(num); }
                 $.history.init(function(url) { load(url == "" ? "home" : url); });
                 $("a[rel='history']").click(function(e) {
                 var url = $(this).attr('href');
                 url = url.replace(/^.*#/,"!/");
         setTimeout(function() {
                 $.history.load(url);
             },1000);
                 return false;
        });

});

Bernardo Mendes Bernardo Mendes · Accepted Answer · 2011-05-25T19:02:27

I didnt got the problem for sure but i think this will help you:

$('a.panel').click(function() {
    $('a.panel').removeClass('selected');
    $(this).addClass('selected');
    $('a.panel').not($(this)).each(function() {
        $($(this).attr("href")).hide();
    });
    // show your loading here
    current = $(this);
    $(current.attr("href")).show()
    $('#container').scrollTo($(this).attr('href'),1000,{ easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy', onAfter: function() { //hide your loading here } });
    return false;
});

This consist on hidding all the containers from the links on your menu, show a loading, show the container that you meant to show and then hide the loading.

Edit:

Maybe you dont even need the loading... just remove the onAfter from scrollTo options.

How to show load first on every click and than the content

1 Answers