Menu
I'm for years using something like this in my HTML for elements which should be hidden:
<div style="display: none"></div> It's ok, but I can't stand in-line styles anymore.
Hiding elements programatically in JavaScript window.onload event is too late -- it will flash on the screen.
I can create CSS class 'hidden', but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded).
Is there any better way?
733
What I ended up doing is setting all of the initially hidden divs to "visibility: none", then in the pages onLoad() event setting the display: none.
To hide the initiallyHiddenBlock paragraph at the start, add this to your CSS file or into a <style> section in the <head> section of your document. An external CSS file is preferred. Change #initiallyHiddenBlock to the id you've used in your HTML.
The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <ul> element is not visible, but it maintains its position on the page. Removing the hidden attribute makes it re-appear.
As far as I know the class="hidden" method is the best and most commonly used. I suggest you use class="hidden".
"but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded)."
I don't use Opera, but if any browser loaded the page before applying styles then a lot would look wrong, not just your hidden elements. I don't know of any browser doing this.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
