views:

28

answers:

1

Hi, I have a page index.html that extends base.html (django) and each of them has a $(document).ready defined. Now, I was expecting the one in base.html to go of first, but I was wrong, the one in index is first and the one in base.html starts after. I guess this is because index finishes loading before base, and not some default behavior of jquery, to have children execute before the parent. Can I do something to change this order? Because the parent decides (depending on window size) if the menu should be vertical or horizontal, and the child scales a div to occupy the rest of the window. Now I would like the scaling to occur after I have the menu in place.

A: 

You could theoretically change this by manipulating the jQuery.readyList array and moving things around, but you'd be poking a bit blind in there. Instead I'd recommend switching your script that needs to run after the others from document.ready to window.onload, like this:

$(window).load(function() {
  //code to run after the others
});

It seems you'd want this anyway, since you're dealing with window size and scaling, and this happens after the images are loaded, so your scale would be correct, not still changing.

Nick Craver
Not really, I have an editor, and I am placing a transparent gray layer over it while the content is loading. This is happening in index.html. In base.html I show a vertical or horizontal menu depending on the window size, so the content div containing index.html will be resized when base.html finishes loading. So the problem is that index finishes first and puts the overlay and then the editor is resized and the overlay no longer fits over, and looks really bad. But if I wait for window.load than it will all be loaded so no longer any point in showing the overlay.
Virgil Balibanu