ansaurus

Question

JQuery. Hide elements before they rendered. Best practice

Answer 1

A:

You can try to perform a .hide() before .ready() is fired. Like

<script>
   (function($){
      $('#element').hide();
   })(jQuery);

   $(document).ready(function(){
     // ...
   });
</script>

jAndy 2010-05-10 07:43:49

I suspect if script section is loaded with delay - user will see hidden area :)

Andrew Florko 2010-05-10 07:46:36

Answer 2

A:

I usually set a .js class to my element to set the proper property when javascript is enabled.

I then can set the CSS depending on if javascript is present or not.

ex:

<html class="js">
<body>
<div id="foo"></div>
</body>
</html>

my css :

html.js #foo
{
    display: none;
}

and javascript

$(document).ready(
   function()
   {
     $(html).addClass('js');
   }
);

Boris Guéry 2010-05-10 07:44:00

Andrew Florko 2010-05-10 07:59:33

The interest is to keep usability and accessibility for people who doesn't have javascript, if you match your block with its id, it's likely to be hidden for ppl who don't have javascript enabled. You wanted to know best practices, it **IS** a best practice.

Boris Guéry 2010-05-10 08:35:46

Answer 3

+3 A:

There's absolutely nothing wrong with setting an intial display property of an element, especially if you encapsulate it in a css class.

James H 2010-05-10 07:44:01

If you go this way, a browser with disabled javascript will never render these elements

Stephane 2010-05-10 08:00:28

Never, ever, ever, ever. This is bad practice.

Marko 2010-10-02 22:55:20

Answer 4

A:

you can apply "display: none" in a CSS class.

Because the order which a browser have to read some HTML code in order for the JavaScript to find the Element. You have to mark the element hidden, as the browser reads your HTML.

How ever you can also insert the HTML in your JavaScript, and you can call hide before it is rendered.

Darkerstar 2010-05-10 07:49:37

Thank you, i decided to apply "display: none" with CSS

Andrew Florko 2010-05-10 07:57:42

Answer 5

+1 A:

I struggled with this too, especially in IE, and I found this very helpful: http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/

tester testers 2010-10-02 22:51:48

Answer 6

A:

@Andrew,

I know the answer has already been accepted, but using display: none; will be a nightmare to users without Javascript.

Using inline Javascript, you can hide an element without it ever blinking. Users without Javascript will still be able to see it.

Consider a few divs that should be hidden when the page loads.

<head>
    <script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
    <div id="hide-me">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me").hide();
    </script>

    <div id="hide-me-too">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me-too").hide();
    </script>
</body>

The inline Javascript will run as soon as the element is rendered, thus hiding it from the user.

Marko 2010-10-02 22:59:37

ansaurus

tags:

views:

answers:

JQuery. Hide elements before they rendered. Best practice

related questions