[tip] Non-obtrusive hiding of elements to work with scriptaculous effects and IE

I was building my page animation with script aculous and it was working pretty well in FF when I decided to test it in IE... Ouch!

Everything was screwed : elements that I was hiding just before starting the animation flashed on the screen before the animation started or simply stayed there and visible. I found that quick thing 5 minutes ago and it makes things perfect in IE and FF (and it’s even better now in FF).

When you want some of your stuff to start hidden (so you can use effects like ’BlindDown’, ’Appear’ or ’Grow’), simply put that line just after the element opening tag :



It makes thing hidden both in IE and FF and avoid flashing (that also happen in FF when the bandwidth is low).

Hope it helps someone!

bye,

Blaise

Thanks for the tip. It will be helpfull for those who play with script.aculous

regards,

zi

Quote from: grunt_lord at Mar 30, 2006, 09:40 PM

When you want some of your stuff to start hidden (so you can use effects like ’BlindDown’, ’Appear’ or ’Grow’), simply put that line just after the element opening tag

You can also just set the element to display: none; inline, like so:

<div id="thisdivishidden" style="display: none;">
...
</div>

it has to be inline or else it won’t appear when scriptaculous tells it to.

But if you set the style inline, then a user with Javascript turned off (or unavailable) cannot use your page, unless they can also turn off CSS. Unobtrusive Javascript always starts with a functional, if not fancy/pretty, page then adds your Javascript "goodies".

Garry just tipped me about this : exactly what I was looking for, thanks !

I had tried to use something like <div id="thisdivhidden" onload="Element.hide(’thisdivhidden’);> but it didn’t work...