Javascript Event Hierarchy in Prototype framework

Question

Hi there,
is there any event to be handled between the dom:loaded and load using Prototype javascript framework?
I've implemented a preloader using prototype which is looking like this:

Event.observe(window,"load",preload);
function preload(){
    if($('wrapper'))
     $('wrapper').setStyle({"display":"block"});
    if($('loading'))
     setTimeout('$("loading").fade({duration: 5.0});',4000);
}

then I've an another handler using for column height fixatioan which is:

Event.observe(window,"load",function(){ 
    var bottomExtraOffset = (Prototype.Browser.IE) ? 100 : 130;
    if(parseInt($$('.col1')[0].getStyle('height')) > parseInt($$('.col2')[0].getStyle('height')))
     $('wrapper').setStyle({'height' : parseInt($$('.col1')[0].getStyle('height'))+bottomExtraOffset+'px'}); 
    else
     $('wrapper').setStyle({'height' : parseInt($$('.col2')[0].getStyle('height'))+bottomExtraOffset+'px'});
});//observe

It's working pretty nice in any browser but IE! It seems that IE is not appending the second handler to the onload handlers list, so when the first one is trying to get height of any of columns it returns 0 coz it's still displayed as none.

is there any other event than load & dom:loaded to be handled and get me outta this!?

Answer 1

Can you simply call the second function after you've finished preload() ?

Or if you dont want to directly call it after preload() then you could do something like set a flag and then set a timeout in the section function to wait until the first is done to execute.

If order is important you need to communicate between the functions.

Answer 2

As I know there's no such an event, and even this dom:loaded event is implemented by Prototype developers and that's not a default event in Javascript.
So, as a solution let's use this code as the second handler which will delay the performing of the handler for a one msecond, So the first one handler will be performed first:

function foo(){ 
    var bottomExtraOffset = (Prototype.Browser.IE) ? 100 : 130;
    if(parseInt($$('.col1')[0].getStyle('height')) > parseInt($$('.col2')[0].getStyle('height')))
        $('wrapper').setStyle({'height' : parseInt($$('.col1')[0].getStyle('height'))+bottomExtraOffset+'px'}); 
    else
        $('wrapper').setStyle({'height' : parseInt($$('.col2')[0].getStyle('height'))+bottomExtraOffset+'px'});
    }//foo()

function bar(){setTimeout(foo,1)} //1 msecond delay
Event.observe(window,"load",bar); //or window.observe("load",bar);

Also, you can check if the user agent is some hell like IE, then use this method and your said method otherwise.