Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Proper way to render initially hidden HTML elements

Tags:

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.

  1. Hiding elements programatically in JavaScript window.onload event is too late -- it will flash on the screen.

  2. 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?

like image 733
artvolk Avatar asked Aug 22 '11 13:08

artvolk

People also ask

How do you initially hide an element in HTML?

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.

How do you hide an element initially?

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.

Which method is used to hide shown elements and to show hidden elements?

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.

How do you make a hidden list in HTML?

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.

1 Answers

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.

like image 118
Robin Winslow Avatar answered Sep 19 '22 15:09

Robin Winslow
Sign in to Comment

Related questions

Private inheritance VS composition : when to use which?
Compile and execute Scala code at runtime
Autofac equivalent of Ninject's WhenInjectedInto()
resolving simple svn conflicts
Getting FileSystemException "A required privilege is not held by the client" using Files.createSymbolicLink in Play Framework
Why can't variables defined in a conditional be constructed with arguments?
How to make input field type both numeric and password? [duplicate]
What does HTML Purifier do that secure PHP programming can't?
Why should grails actions be declared as methods instead of closures and what difference does it make?
Call to malloc failing in gdb session
D3 Selecting an element inside an SVG
mysql_affected_rows() returns 0 for UPDATE statement even when an update actually happens

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!