filters.alpha is not a object error

T

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.opacity 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.opacity =
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.opacity =
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>
 
W

web.dev

TJO said:
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.opacity lines are not
working ? I cannot find a solution yet.
THanks

<script type="text/javascript" language=javascript>
Click to expand...

The language attribute is deprecated, just stick with the type
attribute:

if(ie5) document.getElementById(divID).filters.alpha.opacity =
StartOpacityLevel;
Click to expand...

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">
Click to expand...

The form element does not have an attribute called runat

URL:http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.3
 
T

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;"
 
V

VK

TJO said:
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.
Click to expand...

<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.
 
T

Thomas 'PointedEars' Lahn

TJO said:
[...] Can anyone help see why the if(ie5)
document.getElementById(divID).filters.alpha.opacity lines are not
working ?
Click to expand...

"Does not work" is a useless error description. [psf 4.11]

[...]
<script type="text/javascript" language=javascript>
Click to expand...

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.opacity = ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
StartOpacityLevel;
Click to expand...

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/author/filter/filters.asp#Downlevel_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
 
R

Randy Webb

Thomas 'PointedEars' Lahn said the following on 2/9/2006 11:10 AM:
TJO said:
[...]
<script type="text/javascript" language=javascript>
Click to expand...

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);
Click to expand...
^^^^^^^^^^^^
Click to expand...

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.
Click to expand...

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.
 
G

Gérard Talbot

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.opacity lines are not
working ? I cannot find a solution yet.
THanks

<script type="text/javascript" language=javascript>
Click to expand...

Drop language; just use type.
var ie5 = (document.all && document.getElementById);
Click to expand...

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);
Click to expand...

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-developer/upgrade_2.html#ObjectFeatDetect
//fades DIV tag IN
function fadeIn(divID, StartOpacityLevel, fadeStep)
{
if(StartOpacityLevel >= 0 && StartOpacityLevel < 100)
{
StartOpacityLevel += fadeStep;
if(ie5) document.getElementById(divID).filters.alpha.opacity =
StartOpacityLevel;
if(ns6) document.getElementById(divID).style.MozOpacity =
StartOpacityLevel/100;

setTimeout('fadeIn(\'' + divID + '\',' + StartOpacityLevel + ',' +
fadeStep + ')', 5);
Click to expand...

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.opacity =
StartOpacityLevel;}
if(ns6) document.getElementById(divID).style.MozOpacity =
StartOpacityLevel/100;

setTimeout('fadeOut(\'' + divID + '\',' + StartOpacityLevel + ',' +
fadeStep + ')', 5);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
Click to expand...

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>
Click to expand...

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>
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Fading effect between play and play-over and pause and pause-over 0
How do I hide the modal after 5 seconds? 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image not changing between "mute" & "un-mute" images. 5
I am trying to make an audio player, how do I get the selected file to be playable? 5
How can I remove the specific error message after regex validation is done? 1
Help With a Script 5
How do I fix this issue in sqaurespace code block? 1

Members online

No members online now.
Total: 38 (members: 0, guests: 38)
Robots: 72

Forum statistics

Threads
473,951
Messages
2,570,113
Members
46,698
Latest member
alexxx

Latest Threads

Top