JavaScript Forum

**nick1** · 07-31-2008, 08:50 PM

Greetings,

The following code hides some DIV elements which can later be displayed depending on user action.

The problem is, the DIV elements are displayed on the web page for a brief moment and then hidden. This is NOT the effect I want. The DIV elements should be hidden, not displayed for a brief moment and then hidden.

window.onload approach:

Code:

/*window.onload = function() {
hideElementsOnLoad();
}

Code:

function hideElementsOnLoad () {
// When the page loads, hide the form type help list and each form type.
var formTypeHelpList = document.getElementById("formtypehelp");
var uniGroupForm = document.getElementById("unigroupform");
var uniAffilForm = document.getElementById("uniaffilform");

formTypeHelpList.style.display="none";
uniGroupForm.style.display="none";
uniAffilForm.style.display="none";
}

So, I looked into using Prototype.js to solve the issue of the DIV elements being displayed for a brief moment then hidden. Using Prototype.js, the code above can be replaced with this. The benefit being, the elements are hidden right after the DOM loads but before images are loaded.

Code:

document.observe("dom:loaded", function() {
// When the page loads, hide the form type help list and each form type.
$('formtypehelp', 'unigroupform', 'uniaffilform').invoke('hide');
});

Unfortunately, Prototype's way still results in the elements being displayed on the page for a brief moment and then hidden. It's the same result the window.onload approach produced. :-(

Another approach would be to hide the DIV elements by default, by using CSS (display:none

. The DIV elements could then be displayed by using JavaScript (display:block

. But I would prefer not to use this approach since the DIV elements would not be visible to a JavaScript disabled device.

Perhaps it is possible to hide the DIV elements as the DOM is loading?

I am seeking suggestions on how to solve this problem. Thank you in advance.

**chrishirst** · 07-31-2008, 09:05 PM

create and load the elements using the DOM, and use the <noscript></noscript> element to duplicate the hidden elements for non-js user agents.

**wayfarer07** · 10:15 PM

Or you could put your script at the bottom of the page instead of in the onload event. That way it will load as soon as the HTML is done, and before the images are finished.

Usually, if I do it this way, I place a single class on the <body> and then create CSS rules that take care of the rest. That way, the results are already cached, and the action is almost instant.