ansaurus

Question

Answer 1

+3 A:

The reason you see the hidden element when the page is loading is because you have to wait for the page to be downloaded and for the javascript to be processed before it hits the code that hides that element. If the intial state of the element is hidden then just set the CSS to display none. The style sheet in the head is processed before the html so when the html is rendered it will not display that element.

Set the style in the element in the CSS file:(not using jQuery)

 #someselector{
        display:none;
    }

... or create a hidden class

.hide{
   display:none;
}

<div id="someselector" class="hide">content</div>

... or set inline style ( not recommended )

<div id="someselector" style="display:none;">content</div>

$('#someselector').show(); and $('#someselector').hide(); will still work the same.

Kenneth J 2010-02-16 23:14:13

$('#someSelector').hide() is equivalent to that, and also lets you toggle. http://api.jquery.com/hide/

Raul Agrait 2010-02-16 23:19:37

@Raul - you have to wait for the page to be downloaded and for the javascript to be processed before it hits the code. If the intial state is hidden then just set the CSS to display none. The style sheet in the head is processed before the html so when the html is render it will not display that element.

Kenneth J 2010-02-16 23:24:37

Good point. I'd suggest adding that info to your answer ;)

Raul Agrait 2010-02-16 23:44:22

The only problem with this now is that it doesn't degrade well when JavaScript is disabled. That may or may not be an issue for Ken.

Raul Agrait 2010-02-18 18:21:50

jQuery doesn't work 'well' with javascript disable either. @Raul

Kenneth J 2010-02-18 18:37:31

@Ken. Of course. My point only was that you might not want to hide something CSS initially if you wanted to be able to support disabling JavaScript.

Raul Agrait 2010-02-18 21:58:09

Answer 2

+1 A:

Rather than putting your hiding code at the bottom, put it in a .js file included in the HEAD (or, if your site is small, in inline JS in the HEAD) and delay its occurrence using $(document).ready(). Reading up on the ready event is worthwhile too!

DDaviesBrackett 2010-02-16 23:14:36

putting the js in the head slows down the page by making the rest of the page wait for the js file to be downloaded and compiled. Javascript should always be put at the bottom if you are concerned about performance.

Kenneth J 2010-02-16 23:28:48

...unless having the JS parsed after the content is displayed causes other UI issues like the one the asker is having here! 'Performance' advice like 'always put JS at the bottom' is only useful if you understand *why* you're doing it.

DDaviesBrackett 2010-02-17 01:08:07

$(document).ready() still waits for the page to finish being processed before the code runs. so where ever you put the $(document).ready() the initial state of the page will show the hidden element. Downloading and compiling the js is probably the most expensive part and putting js in the head will stop the html from displaying until the load events are set but that is adding a half second per page before the user can see anything. Either way the page has to load the same amount of stuff. Putting the js at the bottom just make your website more responsive and appear to load faster

Kenneth J 2010-02-17 15:53:38

Answer 3

A:

Try putting it inside a $(document).ready() function. (Which should be in the HEAD)

That way it should get hidden before the page is displayed...

Ganesh Shankar 2010-02-16 23:15:14

Answer 4

A:

When are you calling hide()? Are you doing so in $(document).ready / $(handler)? If so, then you shouldn't see it.

Raul Agrait 2010-02-16 23:16:20

I believe I am placing it inside, properly:$(document).ready(function(){ $(".passwords").hide();});But it's still showing the hidden area for that brief second.I'll try placing it in different places, to see if that makes a difference......

2010-02-16 23:41:47

Answer 5

A:

The quickest way to hide it with Javscript is to put the script immediately after the element in the markup...

<div id="someselector"></div>
<script type="text/javascript">$("#someselector").hide();</script>

You are probably currently using the document ready event, but that does not fire until the entire DOM has been built.

It's not a good idea to use a CSS display:none approach, because the element will never display with Javascript disabled. If that is not a concern for your site, then feel free.

Josh Stodola 2010-02-17 00:19:12

ansaurus

tags:

views:

answers:

jQuery hidden selectors

related questions