jQuery hidden selectors

When I hide a selection:

$("#someselector").hide();

I usually put it on the bottom. When that webpage shows up, for a brief moment I see the hidden selection. Then it disappears, as it should.

That's not quite what I wanted to see.

Is there a way to stop that quick开发者_开发问答 view of the "hidden" selection?

---

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.

---

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!

---

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

---

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

---

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.