Tuesday, March 1, 2011

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

Hi,

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

$(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

Thanks.

From stackoverflow

  • 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.

    Doug Neiner : 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.

  • 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.

  • 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; }
    Doug Neiner : @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.
    Gregory : That's very clever
    orip : @Gregory - it's not my idea, I've seen this technique used by others. I also thought it was very clever :)
    orip : @dcneiner - that's cool, I didn't think of that. Like you mentioned, this way you could put it in `` if you like.
    Matt Sherman : That's *very* clever (@dcneiner's too) -- I had become accustomed to waiting for jQuery's document.ready. This degrades well.

  • 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?

    bobince : No, the JavaScript is loaded at the top of the body, before any of the hidden content is loaded.
    Doug Neiner : @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.
    orip : like @bobince said, the point of adding the class immediately after opening `` is that nothing has been rendered yet.

  • 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.

    Doug Neiner : 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.
    David : @dcneiner: just stating an example here. Of course you need to include the jQuery library before using jQuery. Your example works too.

  • 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.

Posted by Mu Cat at 7:28 AM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)