471,616 Members | 1,954 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,616 software developers and data experts.

filters.alpha is not a object error

TJO
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>

var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

//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);
}
}

//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">
<input id="Button2" type="button" value="On"
onclick="fadeIn('mydiv', 0, 10)" />
<input id="Button1" type="button" value="Off"
onclick="fadeOut('mydiv', 100, 10)" />&nbsp;<br />

<div id="mydiv">
<label for="Text1"></label>
<input id="Text1" type="text" />
<input id="Button3" type="button" value="button" />
</div>
</form>
</body>

Feb 8 '06 #1
6 6226

TJO wrote:
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>
The language attribute is deprecated, just stick with the type
attribute:

<script type = "text/javascript">
if(ie5) document.getElementById(divID).filters.alpha.opaci ty =
StartOpacityLevel;
For Internet Explorer, I have tried the following and it works for me:

var oElem = document.getElementById("yourID");
oElem.style.filter = "alpha(opacity=" + opacityValue + ")";
<form id="form1" runat="server">


The form element does not have an attribute called runat

URL:http://www.w3.org/TR/REC-html40/inte...ms.html#h-17.3

Feb 9 '06 #2
TJO
Solved:

It appears that IE *requires* your div tag to have a style attribute
defined. I found that you must have width, height, filter and
-moz-opacity defined in order for my code to work.

style="width:100px; height:100px; filter:
alpha(opacity=0);-moz-opacity:0;"

Feb 9 '06 #3
VK

TJO wrote:
Solved:

It appears that IE *requires* your div tag to have a style attribute
defined. I found that you must have width, height, filter and
-moz-opacity defined in order for my code to work.


<http://msdn.microsoft.com/workshop/author/filter/filters.asp>
<quote>
Almost any object can have filters applied to it. However, the object
that the filter is applied to must have layout before the filter effect
will display. Put simply, having layout means that an object has a
defined height and width. Some objects, like form controls, have layout
by default. All other filterable objects gain layout by setting the
height or width property, setting the position property to absolute,
setting the writingMode property to tb-rl, or setting the
contentEditable property to true.
</quote>

Note that it's "or...or", not "and...and"

You could set only width of your DIV to make alpha filter to work.

-moz-opacity is really an outdated temporary property. You can use for
Gecko the official CSS3 "opacity" property instead.

Feb 9 '06 #4
TJO wrote:
[...] Can anyone help see why the if(ie5)
document.getElementById(divID).filters.alpha.opaci ty lines are not
working ?
"Does not work" is a useless error description. [psf 4.11]

<URL:http://jibbering.com/faq/#FAQ4_43>
[...]
<script type="text/javascript" language=javascript>
The language attribute is deprecated; it can be safely
omitted as long as the `type' attribute value is present.
var ie5 = (document.all && document.getElementById); ^^^^^^^^^^^^ var ns6 = (!document.all && document.getElementById); ^^^^^^^^^^^^^ //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;


1. Your markup is not Valid.

<URL:http://validator.w3.org/>

2. Your feature test is flawed.

For example, Opera and recent Gecko-based browsers (probably including
Netscape 8+) support document.all from the IE DOM to a certain extent
and they support document.getElementById() from W3C DOM Level 2 Core.
Yet they would classify as IE(5) in your feature test although they do
not support the `filters' property.

<URL:http://pointedears.de/scripts/test/whatami#inference>

3. Your referencing is error-prone.

document.getElementById() can return `null' or an undefined value for
any given ID string, yet you would attempt `filters' property access
in that case which would result in a ReferenceError (e.g.: "null has
no properties").

<URL:http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId>
However, you use a more recent version of Internet Explorer. Although
I have no explanation as to why, I could be that Internet Explorer 4.0
compatible filters are no longer supported there. You should try the
DirectX filters for IE 5.5+ instead, and if that works, use them as
another alternative with previous feature test.

Another reason might be that the IE 6 SP2 DOM implemented the IE4-compatible
filters with their DirectX names, and since ECMAScript implementations,
including JScript as implemented in Internet Explorer, are case-sensitive,
the filter's name and identifier could be `Alpha', not `alpha' there.

<URL:http://msdn.microsoft.com/workshop/author/filter/filters.asp>
<URL:http://msdn.microsoft.com/workshop/a...nlevel_Support
<URL:http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp>
<URL:http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha.asp>

Or your timeout is simply too short; values below 50 (_milliseconds_)
are known to be unreliable.

Please keep us posted which suggestion helped as existing scripts may have
to be changed to continue working in IE 6 SP2 and not everybody may have a
Windows XP system to test with at hand.
PointedEars
Feb 9 '06 #5
Thomas 'PointedEars' Lahn said the following on 2/9/2006 11:10 AM:
TJO wrote:
[...]
<script type="text/javascript" language=javascript>
The language attribute is deprecated; it can be safely
omitted as long as the `type' attribute value is present.
var ie5 = (document.all && document.getElementById);

^^^^^^^^^^^^


<snip>
2. Your feature test is flawed.

For example, Opera and recent Gecko-based browsers (probably including
Netscape 8+) support document.all from the IE DOM to a certain extent
and they support document.getElementById() from W3C DOM Level 2 Core.
Yet they would classify as IE(5) in your feature test although they do
not support the `filters' property.


Recent Gecko based browsers do not pass an if(document.all) test even
though they sparsely implement document.all

In the future, rather than pointing and post scripting things, please
endeavor to interleave your replies. It makes reading and following much
simpler.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Feb 9 '06 #6
TJO wrote :
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>
Drop language; just use type.

var ie5 = (document.all && document.getElementById);
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 &lt; and &amp; 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.
var ns6 = (!document.all && document.getElementById);

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
//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);
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.
}
}

//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">
As mentioned by others, runat is not valid here.
<input id="Button2" type="button" value="On"
onclick="fadeIn('mydiv', 0, 10)" />
<input id="Button1" type="button" value="Off"
onclick="fadeOut('mydiv', 100, 10)" />&nbsp;<br />

<div id="mydiv">
<label for="Text1"></label>
This is weird. The label node is empty; so it's useless, it's unusable,
impossible to use.
<input id="Text1" type="text" />
<input id="Button3" type="button" value="button" />
</div>
</form>
</body>


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
Feb 9 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Bryan Harrington | last post: by
7 posts views Thread by Federico G. Babelis | last post: by
3 posts views Thread by instruo | last post: by
1 post views Thread by Pedja | last post: by
8 posts views Thread by Dooglo | last post: by
6 posts views Thread by tommaso.gastaldi | last post: by
2 posts views Thread by maya | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.