Question

I apologize that I am very much a novice with javascript. I have sort of picked up aspects of JQuery to augment my website designs but I never properly learned the fundamentals or syntax.

Here is what I want to do: When a user clicks on a a link in the list #nav the div #content will be animated up off the top of the screen by the height of #content. Then #content will be hidden. Then #content will be replaced by new content loaded in from the page that is linked to with the link the user clicked on in #nav. #content needs to remain hidden then move below the screen by the height of the viewport. Then #content will be made visible and animated back to its original location. Below is the code I mocked up but it isn’t working properly.

Thanks!

$(document).ready(function() {

$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';

    var oldHeight = $('#content').css("height");

    var viewportHeight = $(window).height();

    $('#content').animate({
        top: "-" + oldHeight
    }, 'slow');

    $('#content').hide();

    $('#content').load(toLoad);

    $('#content').animate({
        top: viewportHeight + "px"
    });

    $('#content').show();

    $('#content').animate({
        top: "0px"
    }, 'slow');

    return false;

});

});

Answer 1

What you’re asking it to perform everything after your load() only when it loads something …

load() is async and you can see the full signature of the method in jQuery website, where it says that you can append a function that will fire when the load as completed.

from your example just put everything after your load() inside that method…

the final result should look like:

var clickedAnchors = [];

$(document).ready(function() {

    $('#nav li a').click(function() {

        var toLoad = $(this).attr('href')+' #content';        
        var oldHeight = $('#content').css("height");        
        var viewportHeight = $(window).height();

        $('#content').animate({
            top: "-" + oldHeight
        }, 'slow', function() {

          $('#content').hide();        
          $('#content').load(toLoad, function() {


            $('#content').animate({
               top: viewportHeight + "px"
            });

            $('#content').show();        
            $('#content').animate({
                top: "0px"
            }, 'slow');

          }); // close load

        }); // close animate

        return false;

    }); // close selector
}); // close document.ready

Remember that one of the nicer features of jQuery is cascading, so your code could actually look like this:

var clickedAnchors = [];

$(document).ready(function() {

    $('#nav li a').click(function() {

      var currentId = $(this).attr('id');

      if($.inArray(currentId, clickedAnchors) < 0) {
        // this anchor was not yet clicked

        var toLoad = $(this).attr('href')+' #content',        
            oldHeight = $('#content').css("height"),        
            viewportHeight = $(window).height();

        $('#content').animate({ top: "-" + oldHeight }, 'slow', function() {

            // after animated is completed
            $('#content')
                .hide()
                .load(toLoad, function() {    

                    $(this).animate( { top: viewportHeight + "px" }, function() {

                        // after animation has completed
                        $(this)
                           .show()
                           .animate({ top: "0px" }, 'slow');

                    });
                });
        });

        // remove this anchor from being clicked again,
        // so let's add it's id into the array
        clickedAnchors.push(currentId);
      }

      return false;

    });
});