1

I call hide() function when document ready on a specific <div> that has display:block and visibility:visible by default (we show it by default, and we try to hide it with jQuery).

Sometimes when I refresh the page the <div> appears during a fraction of a second then disappears according to the hide() function.

My question: is there a way to avoid this <div> twinkling ?

Thanks

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
JojoLapin45
  • 139
  • 2
  • 11
  • Is there a reason you are not hidding your element with css first to stop the fliker you can just change visibility:visible to visibility:hidden – Dominic Green Dec 31 '11 at 13:31
  • Often you don't want to do this so it works for users without JS, or so search engines can work out what's going on. – Rich Bradshaw Dec 31 '11 at 13:32
  • Sounds like it's a "you do not have js enabled"-like warning. In that case he cannot show it using JS but has to hide it... but noscript would be an alternative. – ThiefMaster Dec 31 '11 at 13:32
  • No i understand that I allways go for graceful degradation I was just asking to to see if this is the case :) – Dominic Green Dec 31 '11 at 13:34

2 Answers2

1

It's the time between rendering the element and executing your JS code. The way to avoid this is not putting the code in the DOM-ready event but right after the element:

<div id="whatever">...</div>
<script>$('#whatever').hide();</div>

Anything else such a registering event handlers can still go into your DOM-ready function of course.

Oh, and you don't need to use visibility at all - show() and hide() will only use the display property anyway.

In case the element you want to hide is a "please enable JavaScript" warning, consider using <noscript>...</noscript> - then it will never show up unless JS is disabled.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • Thanks a lot for this answer. Yes i don't use display:none to non penalize guys that have js disabled. Thanks all. – JojoLapin45 Dec 31 '11 at 15:07
  • 1
    @Jojo If this answer helped you solve your problem, be sure to mark it as accepted. This helps other people coming along with the same problem to find their answer quickly and easily. – gobernador Jul 18 '12 at 14:25
0

Yes, default visibility:hidden, and show() the ones you want. Alternatively, call hide() immediately after loading the html with $('...').hide() right after the relevant html.

The'twinkling' happens because the block is loaded as soon as the html hits the browser, but the jquery to hide it isn't executed until after all the html is loaded by the browser and the DOM is ready.

CNeo
  • 736
  • 1
  • 6
  • 10