Hidden divs - reduce latency with display style none + javascript
I usually use hidden divs in my pages until they are hidden from javascript. I also did the initial hiding with javascript, but now gone to hide them with css to ensure it is hiding (js is disabled in the browser). Also there was a lag issue when hiding js (waiting for js to load).
My problem is that there is still latency with css and so I end up including styling with markup like below and I hate doing it making me feel like I am doing something wrong ..
<div style="display:none;">
content
</div>
How often do you do this? and is there a way i can get the css or js to load somehow BEFORE the rest of the markup?
Thank you in advance
source to share
Include the css in the inline style block at the top of the page:
<style>
.hidden: { display: none; }
</style>
Then annotate your div with the following class:
<div class="hidden"> ... </div>
The result of this approach is that you don't need to set the display to to render an element block
, you can simply add / remove a class from the element with JavaScript. This works better because not every element needs display = block (tables and inline elements have different display modes).
Despite what the other poster said, it's not a bad practice. You have to split your CSS into a presentation and functional layout - the functional logic controls such things as , or does not display anything, presentation simply defines how to show it. There is no problem embedding inline CSS to avoid page skipping.
source to share
I can get behind this, but in many applications, when I want to avoid this delay, I use inline script tags right after the content, like this:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
$('#hidden-div').hide();
</script>
Or, if you are not using jQuery:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
document.getElementById('hidden-div').style.display = 'none';
</script>
This seems awkward at first; however, there are several reasons why I take this approach:
- Hide immediately (no waiting for the entire DOM to load)
- People with JavaScript disabled will still see the content, whereas if we hide it with CSS, there is no way for non-JS to make it visible again.
Hope this helps!
source to share
I would suggest moving your screen: no rule at the top of the stylesheet, so the first or first of several parsing, although honestly this will really depend on how many HTTP / media requests you have.
You can try throwing the js in front of the body tag and make sure the css is at the top and the CSS stylesheet that hides those elements is the very first one linked.
source to share
Depends on the browser. Opera, WebKit and Konqueror load CSS and JavaScript in parallel (all CSS is loaded before they are applied, however).
display:none
is the best solution, but you can use inline-css (as in your description), which is directly loaded by the page if you want to be more careful, but its bad practice.
source to share