A flash of content hidden with javascript

[belinBill]

I am trying to use js to hide a group of fieldsets in a form. The fieldsets targetted do get hidden, but only after a slight delay during page load when all the fieldsets are shown momentarily. Is this avoidable?


The URL is: http://www.viadesign.co.uk/WillJun25/choose.php

Many thanks

PS I have just noticed that this behaviour is not present on Mac Safari, only on Mac Firefox

[wuckfit]

Hi,
I'm assuming you're waiting for the onload event to fire before the script runs(which after checking your page, you are)... so you need to run the script before the onload event fires.

OnLoad only fires when images/scripts etc. have finished downloading...

So in your script would look like (no window.onload):

function hideAllBarOne() {

var fieldsets = document.getElementsByTagName('fieldset');

for(var i = 1; i < fieldsets.length; i += 1) {

fieldsets[i].className = 'hide';
}
}

var timer = setInterval(function () {
if (document.body) {
clearInterval(timer);
hideAllBarOne();
}
},10);

I haven't got a Mac to test... let me know how it fairs.

Cheers,
WF

[belinBill]

Many thanks for your help, it's much appreciated. I haven't tried your solution yet on my Mac, but I have discovered that the existing script works with a flash of 'hiiden' content on Windows XP too. So it's ok on Mac Safari and Win XP but a problem on Mac Firefox. I will try your solution asap and let you know. Thanks again

[Chroniclemaster1]

There's another option you might try, which definitely takes effect before anything is displayed. You can hide it in the CSS style sheet. Then all your script has to do is reveal them (typically by grabbing the id and resetting the CSS). If you want the page laid out as if the field set doesn't exist use the "display" selector. If you want the page laid out with the field sets in place, just invisible use the "visibility" selector.

e.g.

[code]
#itemIWantToHide {
display:none;
}

[code]

[Chroniclemaster1]

That's what I get for quick positing...

I meant of course

#itemIWantToHide {
display:none;
}

then your script just has to change the display to block (and back if you want to turn them off again).