ansaurus

Question

Answer 1

A:

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>

Steve Wortham 2009-10-16 20:48:07

Not the entire page, just the DOM.

Bob Aman 2009-10-16 20:49:25

Good point, I corrected my statement.

Steve Wortham 2009-10-16 20:52:04

Thanks for the reply Steve. But, why is it that the same problem does not happen when i use document.getElementById instead ?Also, i can set the style using css. But of the clients browser has javascript disabled then there would be no way he could see the div.Am i right ?

rogerp 2009-10-16 20:55:45

samj, when you called document.getElementById() were you calling it inside the $(document.ready) event? If so, then I don't know why it would be any different really.

Steve Wortham 2009-10-16 20:59:23

And you are right about non-Javascript users. Although you could specify an overriding CSS property inside the noscript tag to handle that.

Steve Wortham 2009-10-16 21:00:41

Answer 2

+3 A:

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; }

meder 2009-10-16 20:48:12

Answer 3

A:

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();

TM 2009-10-16 20:48:56

This is bad if you're trying to do graceful degradation for users with no JavaScript.

Bob Aman 2009-10-16 20:50:50

@BobAman true but he mentions no such requirement / desire. What if the core functionality of his site requires javascript? It's a pretty common case these days.

TM 2009-10-16 20:58:44

Perhaps no, but it's something that he should be aware of, regardless.

Bob Aman 2009-10-16 21:07:26

Answer 4

A:

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.

googletorp 2009-10-16 20:49:00

Answer 5

A:

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.

justin 2009-10-16 20:49:36

Answer 6

+8 A:

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.

Russ Cam 2009-10-16 20:53:39

Thanks a lot Russ. That worked ! :)

rogerp 2009-10-16 21:05:45

No problem. I'm interested to know however, why you first accepted my answer and then accepted another answer, which IMHO, is a much hackier way of achieving your end goal.

Russ Cam 2009-10-16 21:22:44

@Russ I was wondering the same thing. To me this is a better answer.

TM 2009-10-16 21:24:22

+1 This is a much better answer than mine, and should be changed back to the accepted answer.

Bob Aman 2009-10-16 21:53:22

@Bob - There's really no need to say that, I'm just curious why the OP changed their mind that's all :)

Russ Cam 2009-10-16 21:54:06

Only thing I'd add is, change the name of that class. `hidden` makes more sense to me than `js` for the class name.

Bob Aman 2009-10-16 21:54:47

or maybe `hide` ?

Russ Cam 2009-10-16 21:55:32

@Russ - sure there is... it's true. I didn't even consider this trick, and it's a great one: The `html` element is guaranteed to be available in the DOM if scripts are running, so there's never any need to put that line inside an event handler.

Bob Aman 2009-10-16 21:57:00

+1 on your answer

Gutzofter 2009-10-16 23:04:13

Pretty nice solution.. +1

meder 2009-10-17 01:22:59

Answer 7

+2 A:

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.

Bob Aman 2009-10-16 21:05:06

Hey, I **did** say it was a horrible hack. :-P

Bob Aman 2009-10-16 21:50:03

ansaurus

tags:

views:

answers:

Hiding a div using JQuery

related questions