Safari onload problem

[smctainsh]

Hello all,

I am beginning to get frustrated with Safari and its timing of the onload event. I am working on a project called Transit at the moment, and when attempting to load the page in Safari, several divs are not hidden correctly. An example of this is the black div, which covers the browser area, even after loading has completed.

What I would like to know is, what is the most effective solution for this? I have used Google to try and find some answers, but I am still a little unsure about the best solution.

Any help would be greatly appreciated.

Thanks,

Smctainsh

[raskren]

I feel your pain.

I've had to set a delay in whatever function I'm using with window.onload. Let me see if I can find a code snippet when I get back to work.

[smctainsh]

  raskren said:

I feel your pain.

I've had to set a delay in whatever function I'm using with window.onload. Let me see if I can find a code snippet when I get back to work.

Yes, it is rather annoying. Glad to know I'm not the only one feeling frustrated at this. :) A code snippet on how to resolve this would be greatly appreciated.

Smctainsh

[raskren]

  smctainsh said:

Yes, it is rather annoying. Glad to know I'm not the only one feeling frustrated at this. :) A code snippet on how to resolve this would be greatly appreciated.

Smctainsh

I used the setTimeout method in JavaScript.

setTimeout("document.getElementById('TollFree').focus();",100);

This was used to set focus to a specific form field after a 100ms delay. You'll probably need to play with the timeout value to obtain the desired result. Obviously, the lower, the better.

setTimeout is recognized by all modern browsers.

Hope this helps.

[Rob Veteran]

I typically use Javascript libraries a lot as I build whole web applications, and find that the custom events such as JQuery's "DocumentReady" event to be invaluable - gets round so many of the browser-specific issues by abstracting out the compatibility code.

[the evn show]

The issue with using window.onload is that it doesn't gaurntee the DOM is in a coherent state before triggering the event.

The correct method is to wait until the DOM is fully loaded before proceeding (which the "delay" method is a ghetto way of accomplishing).

Most of the modern javascript frameworks provide some method of detecting a sane dom (mostly wrappers around DOMContentLoaded()/domcontentready()/onDOMReady())

JQuery provides the JQuery.ready() method, Prototype has Event.observe(window, 'ondomready', function()), and mootools has window.addevent('domready',function())

Keep in mind that a ready DOM doesn't mean that the browser is finished rendering - only that all of the elements are loaded and the DOM is sane - that doesn't mean that rendering is done so the height/position/etc locations of elements cannot be counted on to be complete.

[gigapixels Veteran]

I've only really used mootools, but I do agree that using these "third-party" events and methods are far more accurate than relying on window.onload. Even if you only use them for that, it would still make things much easier and consistent, though I would recommend looking through their capabilities to see what else you can use.

[smctainsh]

Thanks to everyone for the help. :) I've redesigned the aforementioned project now, so now the previously mentioned problems are no longer existent. If I run into this problem in the future, I'll definitely look into what was suggested. :D

Thanks,

Smctainsh