DOM and IE Filter Opacity

[ubh]

Ok so I am playing with the "motion tween" lib that utilizes FF and IE css opacity's to fade in or out elements.

problem is that if I use DOM to insert my opacity styles:

element.style.opacity="0"; FF
element.style.opacity="alpha(opacity='0')";IE

onto my elements before preforming my fade calls, IE throws an error at me in the middle of the fading:


Line 51
Char: 16
Error:'filters.alpha' is null or not an object
Code: 0


However if I leave the opacity css style inline with out DOM inserting them, then I get no error and everything is fine.
My rock and a hard spot is that if I leave the opacity styles inline on each element then people who have JavaScript turned off will never see my content fade in.

So my question is, am I setting the IE opacity with DOM incorrectly or what?
BTW line 51 is in the actual opacityTween.js lib:

if(t.filters) t.filters.alpha['opacity'] = v;


Here is my site:
http://www.devinrolsen.com

NOTE: the fade in effect is a based on a cookie session so you will only see the fade in effect on the first time you enter the site, unless you delete your cookies (IE also requires you to restart the browser).

Thanks!

[rangana]

Replace highlighted:

element.style.opacity="alpha(opacity='0')";


...with filter

For further reading
http://www.w3schools.com/Css/css_image_transparency.asp

Hope that helps.

[ubh]

sorry that was a typo.

it in fact is
element.style.filter="alpha(opacity='0')";//For IE

[rangana]

Which is the typo? Did'nt the suggestion met your desire?

[ubh]

Sorry, I made a typo in my first post.
I indeed did have it setup like:

element.style.opacity="alpha(opacity='0')";

Either way, looks like unless you declare the opacity's inline you will be getting an error from IE not matter what.

So what I did was, declared them inline and set them to 100.
If the user has JavaScript enabled we then while the page is loading use DOM to reach in and set them all down to 0 and preform our fade in effect.

Of course the fade in effect only happens if the user also has cookies enabled.
If not we avoid the fade in effect.

If so, we set a cookie, this way the next time the user visits/hits refresh we avoid the fade in effect altogether.

Wow see what a little sleep can do for a guy!

Thanks rangana for your time on this one!