469,275 Members | 1,825 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,275 developers. It's quick & easy.

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

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.Micr osoft.Alpha").opacity
< 100) {
document.logo.filters.item("DXImageTransform.Micro soft.Alpha").opacity +=
5;
window.status = (i++) + ". IE6 opacity = " +
document.logo.filters.item("DXImageTransform.Micro soft.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[i] = new Image;
document.imageArray[i].src = args[i];
}
}

//-->
Oct 24 '05 #1
4 1792
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>
No mandatory type attribute declared.
<script src="scripts/browserCheck.js"></script>
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;
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;
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-HTM...ml#ID-90379117
or
document.images.namedItem["logo"]
http://www.w3.org/TR/DOM-Level-2-HTM...ml#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;
<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.MozOpacit y;
or
.... = document.images["logo"].style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}
function increaseOpacityIE() {
if (document.logo.filters.item("DXImageTransform.Micr osoft.Alpha").opacity
< 100) {
document.logo.filters.item("DXImageTransform.Micro soft.Alpha").opacity +=
5;


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

Also, note that
typeof
ElementReference.filters.item("DXImageTransform.Mi crosoft.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
--
remove blah to email me
Oct 25 '05 #2
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.Micro soft.Alpha").opacity ?

Thank you very much for your help. I can move on now.
Oct 25 '05 #3
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);
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-co.../#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.Micro soft.Alpha").opacity ?


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-deve...l#BrowserIdent

Using Object/Feature detection approach: best and overall most reliable
http://www.mozilla.org/docs/web-deve...jectFeatDetect

A Strategy That Works: Object/Feature Detecting by comp.lang.javascript
newsgroup FAQ notes
http://jibbering.com/faq/faq_notes/n...tect.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
--
remove blah to email me
Oct 26 '05 #4
Laurent Compere wrote:
You got it ! Wonderful !
I never tought MozOpacity could be a string (why ? Weird thing !)
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;
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
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.Micro soft.Alpha").opacity


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

PointedEars
Oct 26 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Geoff | last post: by
1 post views Thread by Todd Cary | last post: by
7 posts views Thread by Gary Kaucher | last post: by
5 posts views Thread by SPE - Stani's Python Editor | last post: by
16 posts views Thread by Dobedani | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.