Hide Element Before DOM Loads ?

[nick1]

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:

 

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

 

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.

 

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.

[RichardRotterdam]

 

 

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.

 

 

I think that approach probably would be the best but what do you mean with the div elements would not be visible to a javascript disabled device? can you clearify?

[KevinM1]

 

 

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.

 

 

I think that approach probably would be the best but what do you mean with the div elements would not be visible to a javascript disabled device? can you clearify?

 

He's saying that if the div's are initially set to display: none in the CSS, they won't be visible when the trigger element is interacted with because there's no JavaScript there to handle the event.

 

EDIT: In that case, the OP could put an extra set of those div's in a noscript tag.