Grow your CSS skills. Land your dream job.

jQuery Dynamic content loading issue…

  • # May 30, 2012 at 8:52 pm

    Here is the rundown: Loading content dynamically with no problem, animations execute as needed, however, once the content from the dynamic pages is cached, the content is loading BEFORE the animation completes…In this case, when you click a navigation item, the content area slides up if open, then slides down to reveal the new content, if you have one open already and you click another you can see it load the content before executing the slideUp animation…any clues on how i can solve this?

    I’m sure this is a standard issue and i am assuming i am just loading at the wrong time…here is the code:


    var newHash = '',
    $mainContent = $('.content');
    $mainContent.hide();
    $('nav').delegate('a', 'click', function() {
    window.location.hash = $(this).attr('href');
    return false;
    });
    $(window).bind('hashchange', function() {
    newHash = window.location.hash.substr(1);
    $mainContent.slideUp(300).delay(400).load(newHash, function() {
    $mainContent.slideDown(700, 'easeInOutExpo');
    });
    });​
    # May 31, 2012 at 8:20 am

    It would help to see a demo of this, but I think the problem is the delay is only working for animation and “load” is not included. So, I think the easiest solution would be to load the new content into a hidden div, then move it into the $mainContent in the load callback function; like this:

    var newHash = '',
    $cache = $('
    ').hide().appendTo('body'),
    $mainContent = $('.content').hide();
    $('nav').delegate('a', 'click', function() {
    window.location.hash = $(this).attr('href');
    return false;
    });
    $(window).bind('hashchange', function() {
    newHash = window.location.hash.substr(1);
    $mainContent.slideUp(300);
    $cache.load(newHash, function() {
    $mainContent.html( $(this).html() ).slideDown(700, 'easeInOutExpo');
    });
    });​
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".