Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Hide DIVs, they are Showing for a Split Second on page Load

Tags:

jquery

element

I have made a very quick jQuery slideshow, and I'm using this to hide the DIVs which shouldn't be shown until it's their turn:

$(document).ready(function() {
  //Hide All Div's Apart From First
  $('div#gall2').hide();
  $('div#gall3').hide();
  $('div#gall4').hide();

But on loading the page you can see DIV's gall2 gall3 and gall4 for a split second before they are hidden.

Would it be OK to just add inside my CSS:

#gall2, #gall3, #gall4{ display:none;}

This would solve the problem of them showing for a split second, just want to know if it's acceptable

like image 787
Thomas Carter Avatar asked Dec 06 '09 17:12

Thomas Carter


People also ask

How do you hide elements with them taking space on the page?

visibility: hidden means it will be hidden, BUT will remain in the flow of the website. Essentially, visibility: hidden will not show the element, but will retain the space it takes up. Whereas display: none completely removes it.

How do I hide part of a div in HTML?

To hide an element, set the style display property to “none”. document. getElementById("element"). style.

How do I hide a div but keep the space?

The visibility: hidden rule, on the other hand, hides an element, but the element will still take up space on the web page. If you want to hide an element but keep that element's space on the web page, using the visibility: hidden; rule is best.

How do I hide a section in JavaScript?

The visibility property in JavaScript is also used to hide an element. The difference between the style. display and style. visibility is when using visibility: hidden, the tag is not visible, but space is allocated.


2 Answers

Disabling in CSS is fine, but then users without JS will never see them.

To disable for users with JS only, mark the body and appropriate CSS:

<body>
  <script type="text/javascript">
    document.body.className += " js";
  </script>

CSS:

.js #gall2, .js #gall3, .js #gall4 { display: none; }
like image 71
orip Avatar answered Oct 10 '22 09:10

orip


As an alternatie to orip's answer, you can do the following if you don't like adding scripts in the <body>:

<html>
<head>
  <script src="jquery.js"></script>
  <script>
    $('html').addClass('js');
    $(function() {
      // do DOM ready stuff
    });
  </script>
  <style>
  .js #gall2, .js #gall3, .js #gall4 { display: none; }
  </style>
</head>

You will avoid flickering this way because you are adding a class name to the HTML before DOM ready.

like image 43
David Hellsing Avatar answered Oct 10 '22 08:10

David Hellsing