CODEWITHSUNDEEP
javascriptjquerycss
rogerp
rogerp

Reputation: 121

Hiding a div using JQuery

I want to hide a div using Javascript, as soon as the page gets loaded in the browser. I am able to do that, if i use the following code :

document.getElementById("div_id").style.display='none';

But, when i try to do the same thing using JQuery,i notice that the div is visible for a couple of seconds after page loads,and then it becomes hidden. The JQuery code i use is

$(document).ready(function() {

$("#div_id").css('display','none');

});

The same thing happens, if i use $("#div_id").hide(); Is this because im using a library,which would slow down the process a bit,instead of directly using document.getElementById ? . Any way to fix this ?

Thank You.

Upvotes: 1

Views: 635

Answers (7)

Bob Aman
Bob Aman

Reputation: 33259

First, use $("#div_id").hide();. It's more idiomatic for jQuery.

Second, it's because you're using $(document).ready. Usually, that event doesn't fire until the DOM is available for use. However, because of the way bindReady() is implemented, it's possible on some browsers for this event to be equivalent to the onload event, which won't fire until everything is loaded. Unfortunately, the only way that I know of to get around this (that doesn't cause problems for disabled users who can't use JavaScript because of a screen reader) is to set a short timeout (say 50ms) and repeatedly check for the existence of $("#div_id") while the page is loading. This is a horrible hack, and I hesitate to recommend it, but it should work. That said, you're almost better off just accepting the flash of content, knowing that most users won't see it.

Upvotes: 2

Russ Cam
Russ Cam

Reputation: 125538

There's an easy solution to this. Set up a CSS class as follows

.js #div_id { display: none; }

Then have the following jQuery

$('html').addClass('js');

$(document).ready(function() {

    /* normal code to run when DOM has loaded here */

});

the <div> will be hidden immediately (no flashes) if users have JavaScript enabled and won't be if they don't (which circumvents possible graceful degradation problems as meder points out in his option c).

This works because when can immediately access the <html> element when the page starts to load.

The reason why document.getElementById("div_id").style.display='none'; is probably working is because you have it in the <body> after the element and therefore the script does not wait for the whole DOM to be loaded before executing.

Upvotes: 9

Steve Wortham
Steve Wortham

Reputation: 22260

I think the reason is that the DOM loads progressively and the $(document).ready event is waiting for the DOM to be fully loaded before executing.

If you really want the element to be invisible when the page loads, can you define that style in your CSS instead?

I haven't tried this, but if you still want the div to be visible for non-Javascript users then I think you could do something like this:

<noscript>
  <style type="text/css">
  #elementid {display: block !important;}
  </style>
</noscript>

Upvotes: 0

justin
justin

Reputation: 1

More likely it's because you are waiting until the document is ready to hide it. This seems more like a job for server side script if you want it hidden by default.

Upvotes: -1

googletorp
googletorp

Reputation: 33285

It might be cause by the way you include the scripts. The browser has to download them before they are run. So if you have a lot of js files this can cause this problem.

Upvotes: 0

TM.
TM.

Reputation: 111137

I think a better option would be to style the div so that it is hidden when the page is written, without any javascript.

Then, whenever you are ready to show it again, use javascript to unhide it:

$('#someId').show();

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186762

You could either

  • a) insert a script element directly after the element to hide it with jQuery:
  • b) have inconsistent Javascript by directly using DOM methods like your first code snippet
  • c) hide it with CSS with the disadvantage that for CSS enabled non-JS users they wouldn't be able to see anything

I would choose between A and C, though I'm not sure exactly what you're hiding.

A:

<div id="foo"></div>
<script>$('#foo').hide()</script>

C:

div#foo { display:none; }

Upvotes: 3

Related Questions