property MozOpacity won't update under Firefox 1.0.7 nor Netscape 8.0

L

Laurent Compere

Hi all,

I try to make a logo fade in. I wrote the code below that is simple and
supposed to be compatible with IE6,Firefox and Netscape.
It works pretty well under IE6 but under Firefox and Netscape, I have the
same problem : It seems that the property MozOpacity doesn't want to update
itself though I cand read its value with the same object reference. Can
Anybody try to explain me why ? As a log, I sent several values on the
status bar (see code below). Under Firefox and Netscape, The counter
increments like it should but the opacity still remains the same (not
updated) then I have an infinite loop ...
Thanks for your help ...

----------------------------------------------------

<html>
<head>
<title>Perfect Design</title>
<script src="scripts/splash.js"></script>
<script src="scripts/browserCheck.js"></script>
<link type="text/css" rel="stylesheet" href="styles/splash.css">
</head>
<body onLoad="init()">
<div class="centerBox">
<div class="sousimage">
<img name="fond" src="images/Logo1a.jpg" width="600" height="450">
</div>
<div class="surimage">
<img name="logo" src="images/Logo1b.gif" style="-moz-opacity: -0.05;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
</div>
</div>
</body>
</html>

----------------------------------------------------

//<!--

function init() {
window.status = "IE6UP ? " + is_ie6up + " NAV6UP ? " + is_nav6up + " MOZ ?
" + is_moz + " IS_GECKO ? " + is_gecko;
simplePreload( 'images/Logo1a.jpg', 'images/Logo1b.gif' );
setTimeout("increaseOpacity()",150);
}
var i;
function increaseOpacity() {
i = 0;
if (is_ie6up) {
window.status = "ISIE6UP";
increaseOpacityIE();
}
else if (is_nav6up || is_gecko) {
window.status = "ISNAV6UP OU ISGECKO";
increaseOpacityNS();
}
}
function increaseOpacityNS() {
if (document.logo.style.MozOpacity < 1) {
document.logo.style.MozOpacity += 0.05;
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}
function increaseOpacityIE() {
if (document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity
< 100) {
document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity +=
5;
window.status = (i++) + ". IE6 opacity = " +
document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity;
setTimeout("increaseOpacityIE()",150);
}
}
function simplePreload()
{
var args = simplePreload.arguments;
document.imageArray = new Array(args.length);
for(var i=0; i<args.length; i++)
{
document.imageArray = new Image;
document.imageArray.src = args;
}
}

//-->
 
G

Gérard Talbot

Laurent Compere wrote :
Hi all,

I try to make a logo fade in. I wrote the code below that is simple and
supposed to be compatible with IE6,Firefox and Netscape.
It works pretty well under IE6 but under Firefox and Netscape, I have the
same problem : It seems that the property MozOpacity doesn't want to update
itself though I cand read its value with the same object reference. Can
Anybody try to explain me why ? As a log, I sent several values on the
status bar (see code below). Under Firefox and Netscape, The counter
increments like it should but the opacity still remains the same (not
updated) then I have an infinite loop ...
Thanks for your help ...

----------------------------------------------------

<html>
<head>
<title>Perfect Design</title>
<script src="scripts/splash.js"></script>
Click to expand...

No mandatory type attribute declared.
<script src="scripts/browserCheck.js"></script>
Click to expand...

No mandatory type attribute declared.
<link type="text/css" rel="stylesheet" href="styles/splash.css">
</head>
<body onLoad="init()">
<div class="centerBox">
<div class="sousimage">
<img name="fond" src="images/Logo1a.jpg" width="600" height="450">
</div>
<div class="surimage">
<img name="logo" src="images/Logo1b.gif" style="-moz-opacity: -0.05;
Click to expand...

Firefox 1.0.7 also supports CSS 3 opacity.
NS 8.0.x also supports CSS 3 opacity.
Both -moz-opacity and opacity must be positive values, within the
[0.0,1.0] range; -0.05 is not a legal value, so the declaration has to
be dropped.
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
</div>
</div>
</body>
</html>

----------------------------------------------------

//<!--

function init() {
window.status = "IE6UP ? " + is_ie6up + " NAV6UP ? " + is_nav6up + " MOZ ?
" + is_moz + " IS_GECKO ? " + is_gecko;
simplePreload( 'images/Logo1a.jpg', 'images/Logo1b.gif' );
setTimeout("increaseOpacity()",150);
}
var i;
function increaseOpacity() {
i = 0;
if (is_ie6up) {
window.status = "ISIE6UP";
increaseOpacityIE();
}
else if (is_nav6up || is_gecko) {
window.status = "ISNAV6UP OU ISGECKO";
increaseOpacityNS();
}
}
function increaseOpacityNS() {
if (document.logo.style.MozOpacity < 1) {
document.logo.style.MozOpacity += 0.05;
Click to expand...

Wrong script access to the image. logo is a name attribute. In order to
get a reliable script access to that image, you must identify the
element with an id attribute and then use it with document.getElementById.

Or you could use tyhe document.images collection like this:

document.images["logo"]
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117
or
document.images.namedItem["logo"]
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-21069976

Also, note that ElementReference.style.MozOpacity is string, not number.
So, what you try to do should eventually will throw a javascript console
error report in Mozilla-based browsers.
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
Click to expand...

<img id="LogoImg" src="images/Logo1b.gif" style="-moz-opacity: 0;
opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-khtml-opacity: 0;">
....
.... = document.getElementById("LogoImg").style.MozOpacity;
or
.... = document.images["logo"].style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}
function increaseOpacityIE() {
if (document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity
< 100) {
document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity +=
5;
Click to expand...

Again, you have to access that image by using DOM 2 method getElementById
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-getElBId

Also, note that
typeof
ElementReference.filters.item("DXImageTransform.Microsoft.Alpha").opacity
is number: that's why you can do that assignment for Mozilla-based browsers.

There is no need to do browser sniffing in your script; your usage of
is_ie6up, is_nav6up and is_gecko can be prevented by using the more
reliable feature support detection. Your script becomes much more
reliable and performant that way since it does not need to be updated
when new browsers or new browser versions start to support CSS 3 opacity.

Gérard
 
L

Laurent Compere

You got it ! Wonderful !
I never tought MozOpacity could be a string (why ? Weird thing !)
Rewriting the following function was enough to make it work :

function increaseOpacityNS() {
opacity = parseFloat(document.logo.style.MozOpacity);
if (opacity < 1) {
opacity += 0.05;
document.logo.style.MozOpacity = "" + opacity;
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}

Now that it works, I'm going to take all your other remarks into account...
By feature detection, you mean ? Something like :
if (document.logo.style.MozOpacity) ... or
if document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity ?

Thank you very much for your help. I can move on now.
 
G

Gérard Talbot

Laurent Compere wrote :
You got it ! Wonderful !
I never tought MozOpacity could be a string (why ? Weird thing !)
Rewriting the following function was enough to make it work :

function increaseOpacityNS() {
opacity = parseFloat(document.logo.style.MozOpacity);
Click to expand...

I would not recommend this way of declaring a variable ("opacity").
Remember that opacity as a CSS3 color module property name *is* valid,
correct and official.

CSS 3 color module: opacity:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency

How about:
fltOpacity = parseFloat(document.images.namedItem("logo").style.MozOpacity);
or
realOpacity = parseFloat(document.images["logo"].style.MozOpacity);
if (opacity < 1) {
opacity += 0.05;
document.logo.style.MozOpacity = "" + opacity;
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}

Now that it works, I'm going to take all your other remarks into account...
By feature detection, you mean ? Something like :
if (document.logo.style.MozOpacity) ... or
if document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity ?
Click to expand...

Feature detection is by using this way of checking:

if(typeof objImageToModify.style.opacity == "string")
/*
CSS3 color module compliant; Mozilla 1.7alpha and higher, Safari 1.2
*/
{
....block of code for browsers supporting style.opacity...
}
else if(typeof objImageToModify.style.MozOpacity == "string")
{
....block of code for browsers supporting style.MozOpacity like older
Mozilla releases and NS 7.x ...
}
else if("filters" in objImageToModify && typeof
objImageToModify.filters.alpha.opacity == "number")
{
....block of code for browsers supporting filters.alpha.opacity like MSIE
6 ...
}
else if(typeof objImageToModify.style.getPropertyValue("-khtml-opacity")
== "string")
{
.... block of code for browsers supporting -kthml-opacity like Safari 1.1
and lower ...
}

That way, you do not query the userAgent string but instead, you verify
and check the support of the browser for a particular and specific property.

Browser identification approach (aka "browser sniffing"): not best, not
reliable approach
http://www.mozilla.org/docs/web-developer/upgrade_2.html#BrowserIdent

Using Object/Feature detection approach: best and overall most reliable
http://www.mozilla.org/docs/web-developer/upgrade_2.html#ObjectFeatDetect

A Strategy That Works: Object/Feature Detecting by comp.lang.javascript
newsgroup FAQ notes
http://jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD

Browser detection - No; Object detection - Yes by Peter-Paul Koch
http://www.quirksmode.org/js/support.html

Feature detection is future proof, forward-compliant, independent of the
userAgent string. If, say, MSIE 7 beta 2 or final release becomes CSS3
compliant (color module) and supports opacity, then the above code will
work accordingly.

Gérard
 
T

Thomas 'PointedEars' Lahn

Laurent said:
You got it ! Wonderful !
I never tought MozOpacity could be a string (why ? Weird thing !)
Click to expand...

It is not at all weird if you consider the valid values for it which include
"inherit".
Rewriting the following function was enough to make it work :

function increaseOpacityNS() {
opacity = parseFloat(document.logo.style.MozOpacity);
if (opacity < 1) {
opacity += 0.05;
document.logo.style.MozOpacity = "" + opacity;
Click to expand...

Although returned as a string, it is not necessary or prudent to convert
the value to string before assignment if it is a number. Furthermore, you
should refrain from using proprietary references.

document.images["logo"].style.MozOpacity = opacity;

works OK here.
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}

Now that it works, I'm going to take all your other remarks into
account... By feature detection, you mean ? Something like :
if (document.logo.style.MozOpacity) ... or
Click to expand...

No. If the property value would be empty or convertible to 0, it would
evaluate to `false' even though the property is supported. Use

if (typeof document.images["logo"].style.MozOpacity != "undefined")

It would be prudent to assign

var img = document.images["logo"];

before (and test for document.images collection and the HTMLImageElement
object as well.)
if document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity
Click to expand...

if (img.filters && ... && typeof ... != "undefined")


HTH

PointedEars
 

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

Image not changing between "mute" & "un-mute" images. 5
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Need help fixing code 1
I Need Help with making a function that draws in a canvas using location data. 1
Help with my responsive home page 2
Thumbnail Viewer adjusting 11
Image opacity flicker and getElementById 1
Image opacity and 0

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 455

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top