Help needed with an ie opacity change loop

[bluebomber]

Hello - I've only just started learning Javascript and am having a few problems - I'm using the following function to change the opacity of a DIV element named "test". function fadein(){if (opac <= 10){document.getElementById('test').style.opacity = finalopacity;opac++;finalopacity = opac/10;setTimeout("fadein()",10); }I'm well aware that this probably isn't "great" code but right now I'm just happy if I can get things behaving as they should - this loop works fine on Chrome and Firefox - the variable opac is gradually increased from 0 to 10 and the final opacity is calculated from this as a fraction and then applied to the opacity style of the test element.Can someone explain to me how to get this opacity change working in internet explorer?I understand that I need to reference .style.filter = alpha(opacity=xx) for IE and that the opacity scale goes from 0-100 as opposed to 0-1 but right now I'm having a lot of trouble getting anything to work in IE8.I can successfully set opacity in IE8 via CSS with "filter: alpha(opacity=100);" but I'm having no luck getting this to work in a javascript loop.Thanks.

[abdelelbouhy]

Hello - I've only just started learning Javascript and am having a few problems - I'm using the following function to change the opacity of a DIV element named "test". function fadein(){if (opac <= 10){document.getElementById('test').style.opacity = finalopacity;opac++;finalopacity = opac/10;setTimeout("fadein()",10); }I'm well aware that this probably isn't "great" code but right now I'm just happy if I can get things behaving as they should - this loop works fine on Chrome and Firefox - the variable opac is gradually increased from 0 to 10 and the final opacity is calculated from this as a fraction and then applied to the opacity style of the test element.Can someone explain to me how to get this opacity change working in internet explorer?I understand that I need to reference .style.filter = alpha(opacity=xx) for IE and that the opacity scale goes from 0-100 as opposed to 0-1 but right now I'm having a lot of trouble getting anything to work in IE8.I can successfully set opacity in IE8 via CSS with "filter: alpha(opacity=100);" but I'm having no luck getting this to work in a javascript loop.Thanks.

first in IE you set the opacity not using the style property that how you do itdocument.getElementById('test').filters.alpha.opacity = value between 1 and 100

[bluebomber]

Thank you for the response - I think my syntax was wrong - I have changed my function:function fadein(){if (opac <= 10){document.getElementById('test').style.opacity = finalopacity;document.getElementById('test').filters.alpha.opacity = ieopacity;opac++;finalopacity = opac/10;ieopacity = opac*10;setTimeout("fadein()",10); }...and now it works fine in IE8.However - this new code now stops it from working in Chrome and Firefox.Is there a way for me to make the code browser specific to fix this?

[abdelelbouhy]

Thank you for the response - I think my syntax was wrong - I have changed my function:function fadein(){if (opac <= 10){document.getElementById('test').style.opacity = finalopacity;document.getElementById('test').filters.alpha.opacity = ieopacity;opac++;finalopacity = opac/10;ieopacity = opac*10;setTimeout("fadein()",10); }...and now it works fine in IE8.However - this new code now stops it from working in Chrome and Firefox.Is there a way for me to make the code browser specific to fix this?

var elm = document.getElemntById('test');first get the opacity typeif(typeof elm.style.opacity != 'undefined'){ var otype = 'w3c'; }else if (typeof elm.style.MozOpacity != 'undefined'){ otype = 'moz'; }else if (typeof elm.style.KhtmlOpacity != 'undefined'){ otype = 'khtml'; }else if(typeof elm.filters == 'object'){ otype = (elm.filters.length > 0 && typeof elm.filters.alpha == 'object' && typeof elm.filters.alpha.opacity == 'number')? 'ie' : 'none'; }else{ otype = 'none'; }then use switch switch(otype){ case 'khtml': elm.style.KhtmlOpacity = value; breake; case 'ie' : elm.filters.alpha.opacity = value * 100; break; case 'moz' : elm.style.opacity = (value == 1 ? 0.99999999:value); break; default: elm.style.opacity = (value == 1 ? 0.9999999 : value); }and that works in all browsers good luck

[bluebomber]

Ouch.... this is too complicated for me sorry.I appreciate your help though!As I'm still learning I'm trying to understand all of the code I use.

[dsonesuk]

try using document.getElementById('test').style.filter="alpha(opacity="+ieopacity+")";the other method seems to cause problems even in IE.

[bluebomber]

dsonesuk - that seems to work, thanks very much!