TJO wrote :[color=blue]
> Below is some sample code that fades div tags that is not working in IE
> 6.0.29 on xp sp2. Can anyone help see why the if(ie5)
> document.getElementById(divID).filters.alpha.opaci ty lines are not
> working ? I cannot find a solution yet.
> THanks
>
> <script type="text/javascript" language=javascript>[/color]
Drop language; just use type.
[color=blue]
>
> var ie5 = (document.all && document.getElementById);[/color]
One point about the use of & in XHTML: you need to properly escape the
script block in XHTML, otherwise you'll run into problems.
"In XHTML, the script and style elements are declared as having #PCDATA
content. As a result, < and & will be treated as the start of markup,
and entities such as < and & will be recognized as entity
references by the XML processor to < and & respectively."
4.8. Script and Style elements
http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8
So, here, you need to address this first if you're using XHTML.
[color=blue]
> var ns6 = (!document.all && document.getElementById);
>[/color]
Your browser detection here is bad, not reliable and not specific. What
you should be detecting is the property support like
- the filters property support
- style.MozOpacity
- style.opacity
- style.getPropertyValue("-khtml-opacity")
That way, you can make your code working for all browsers which
implement the CSS 3 color module opacity property or their own
proprietary opacity property.
More on this:
Using Object/Feature detection approach: best and overall most reliable
http://www.mozilla.org/docs/web-deve...jectFeatDetect
[color=blue]
> //fades DIV tag IN
> function fadeIn(divID, StartOpacityLevel, fadeStep)
> {
> if(StartOpacityLevel >= 0 && StartOpacityLevel < 100)
> {
> StartOpacityLevel += fadeStep;
> if(ie5) document.getElementById(divID).filters.alpha.opaci ty =
> StartOpacityLevel;
> if(ns6) document.getElementById(divID).style.MozOpacity =
> StartOpacityLevel/100;
>
> setTimeout('fadeIn(\'' + divID + '\',' + StartOpacityLevel + ',' +
> fadeStep + ')', 5);[/color]
5 milliseconds is way too fast and way too demanding for lots of graphic
cards in use. Anyway, the human eye can not catch, can not distinguish
such fast change, that is, if a graphic card can update opacity as such
fast interval.
[color=blue]
> }
> }
>
> //fades a DIV Tag IN
> function fadeOut(divID, StartOpacityLevel, fadeStep)
> {
> if(StartOpacityLevel > 0 && StartOpacityLevel <= 100)
> {
> StartOpacityLevel -= fadeStep;
> if(ie5) {document.getElementById(divID).filters.alpha.opac ity =
> StartOpacityLevel;}
> if(ns6) document.getElementById(divID).style.MozOpacity =
> StartOpacityLevel/100;
>
> setTimeout('fadeOut(\'' + divID + '\',' + StartOpacityLevel + ',' +
> fadeStep + ')', 5);
> }
> }
> </script>
> </head>
> <body>
> <form id="form1" runat="server">[/color]
As mentioned by others, runat is not valid here.
[color=blue]
> <input id="Button2" type="button" value="On"
> onclick="fadeIn('mydiv', 0, 10)" />
> <input id="Button1" type="button" value="Off"
> onclick="fadeOut('mydiv', 100, 10)" /> <br />
>
> <div id="mydiv">
> <label for="Text1"></label>[/color]
This is weird. The label node is empty; so it's useless, it's unusable,
impossible to use.
[color=blue]
> <input id="Text1" type="text" />
> <input id="Button3" type="button" value="button" />
> </div>
> </form>
> </body>
>[/color]
Here's a full cross-browser working example:
Continuous modification of an image's opacity
http://www.gtalbot.org/DHTMLSection/DynamicOpacity.html
which will work in NS 6.2, NS 7.x, NS 8.x, MSIE 6, Opera 9, Safari 2.x,
Firefox 1.x, Seamonkey 1.x, Mozilla 1.x, Konqueror 3.x, K-meleon 0.8+,
etc. It won't work in MSIE 7 beta 2 because of an already reported bug.
Gérard
--
remove blah to email me
