CODEWITHSUNDEEP
jqueryfunctionload
Tomas Skovgaard
Tomas Skovgaard

Reputation: 4705

... external page load with jQuery... + then run a function

... I have this simple piece of jQuery code that loads in an external page:

$(document).ready(function(){

    $('#info a').click(function(){

        var href = $(this).attr('href');

        $('#info_show').load(href).fadeToggle();

        return false;

    });
});

After loading the page I wanted to run a function that centers this content into the window...

$(document).ready(function(){

    $('#info').click(function(){

        var href = $(this).attr('href');

        $('#info_show').load(href).fadeToggle();

        return false;

        function move_div(){

            window_width = $(window).width();
            window_height = $(window).height();

            obj_width = $('#holder').width();
            obj_height = $('#holder').height();

            $('#holder').css('top', (window_height / 2) - (obj_height / 2)).css('left', (window_width / 2) - (obj_width / 2));

        }

        $(window).resize(function(){

            move_div();

        });

    });

});

... the 'move_div' does not run... can anyone help solve this... ?

T

Upvotes: 0

Views: 110

Answers (2)

dc5
dc5

Reputation: 12441

The .load function takes a callback parameter that will be called:

... after post-processing and HTML insertion has been performed. \

see: .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

Updated code that moves the return and adds move_div as the load completion callback:

$('#info').click(function(){

    var href = $(this).attr('href');

    function move_div(){

        window_width = $(window).width();
        window_height = $(window).height();

        obj_width = $('#holder').width();
        obj_height = $('#holder').height();

        $('#holder').css('top', (window_height / 2) - (obj_height / 2)).css('left', (window_width / 2) - (obj_width / 2));
    }

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

    // Add move_div as the load complete callback
    $('#info_show').load(href, move_div).fadeToggle();

    return false;
});

Upvotes: 1

fonZ
fonZ

Reputation: 2479

You have a return statement before the declaration of the function. So it is probable that the move_div() function never gets executed.

Try this:

$(document).ready(function(){
    $('#info').click(function(){
        var href = $(this).attr('href');
        $('#info_show').load(href).fadeToggle();

        function move_div(){
            window_width = $(window).width();
            window_height = $(window).height();
            obj_width = $('#holder').width();
            obj_height = $('#holder').height();
            $('#holder').css('top', (window_height / 2) - (obj_height / 2)).css('left', (window_width / 2) - (obj_width / 2));

        }
        $(window).resize(function(){
            move_div();
        });
        return false;
    });
});

Upvotes: 0

Related Questions