ansaurus

Question

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

Answer 1

+2 A:

~~Yes, it's certainly acceptable to do it in your CSS~~

The other respondents are correct. It's not a good practice to make things only visible with JS. I guess I was just thinking technically : changing your CSS this way would solve the issue.

EMiller 2009-12-06 17:44:27

I realize less an less people have JS disabled, but if functionality is going to be *enabled* with JS, then content should also be *hidden* using something triggered by JS. It is fine if the JS simply adds a class, but hiding by default in CSS is not a good idea.

Doug Neiner 2009-12-06 19:52:33

Answer 2

A:

Always try to imagine what users who have JS turned off will see. If you use the CSS solution, the non-first DIVs will not be shown for them either, but if you change slides programmatically, they will see only the first one, obviously. It's best to give them a "No JS" option. Then, if you can be sure the user has JS enabled, you can hide the divs using CSS and show them using JS.

AttishOculus 2009-12-06 17:45:48

Answer 3

+11 A:

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

orip 2009-12-06 17:50:56

@orip. I do something similar, but do it in the head, and use `document.documentElement.className += " js"` to apply it to the `html` element. I put that in a script block before all my other scripts.

Doug Neiner 2009-12-06 19:55:17

That's very clever

Gregory 2009-12-06 20:46:24

@Gregory - it's not my idea, I've seen this technique used by others. I also thought it was very clever :)

orip 2009-12-06 21:10:15

@dcneiner - that's cool, I didn't think of that. Like you mentioned, this way you could put it in `<head>` if you like.

orip 2009-12-06 21:15:56

That's *very* clever (@dcneiner's too) -- I had become accustomed to waiting for jQuery's document.ready. This degrades well.

Matt Sherman 2009-12-07 01:25:13

Answer 4

A:

Thanks for the quick replies, is my problem common I was just wondering if I have been coding it wrong.

@orip won't this still have the same problem as the class won't be added until the javascript is loaded thus causing the split second delay i'm getting already?

Thomas Carter 2009-12-06 17:53:22

No, the JavaScript is loaded at the top of the body, before any of the hidden content is loaded.

bobince 2009-12-06 18:38:40

@Thomas, you will also get faster responses from the folks answering your questions if you comment vs adding a new "answer" They are notified if you comment on their answers.

Doug Neiner 2009-12-06 19:54:24

like @bobince said, the point of adding the class immediately after opening `<body>` is that nothing has been rendered yet.

orip 2009-12-06 21:13:31

Answer 5

+1 A:

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.

David 2009-12-06 18:32:21

Obviously this example won't work unless you put the jQuery script tag before your other tag. I would recommend just using `document.documentElement.className += ' js'` to avoid the jQuery dependancy that early in the game.

Doug Neiner 2009-12-06 19:56:27

@dcneiner: just stating an example here. Of course you need to include the jQuery library before using jQuery. Your example works too.

David 2009-12-06 20:23:18

Answer 6

A:

They are being shown because on default the divs are likely set to be shown. Since it can take a few seconds for the "ready" event to be fired on the page, the .hide() method calls won't hit until everything on the page is loaded and ready.

If I remember right the .hide() method will just set the "display" attribute of the element to "none". So by default setting the div to be hidden through CSS allows them to always be hidden, and you get the added bonus of users without JS not seeing them either.

MadcapLaugher 2009-12-06 19:58:35

ansaurus

tags:

views:

answers:

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

related questions