473,883 Members | 1,570 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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>Perfec t 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="centerBo x">
<div class="sousimag e">
<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:DXImageT ransform.Micros oft.Alpha(opaci ty=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("inc reaseOpacity()" ,150);
}
var i;
function increaseOpacity () {
i = 0;
if (is_ie6up) {
window.status = "ISIE6UP";
increaseOpacity IE();
}
else if (is_nav6up || is_gecko) {
window.status = "ISNAV6UP OU ISGECKO";
increaseOpacity NS();
}
}
function increaseOpacity NS() {
if (document.logo. style.MozOpacit y < 1) {
document.logo.s tyle.MozOpacity += 0.05;
window.status = (i++) + ". GECKO opacity = " +
document.logo.s tyle.MozOpacity ;
setTimeout('inc reaseOpacityNS( )',150);
}
}
function increaseOpacity IE() {
if (document.logo. filters.item("D XImageTransform .Microsoft.Alph a").opacity
< 100) {
document.logo.f ilters.item("DX ImageTransform. Microsoft.Alpha ").opacity +=
5;
window.status = (i++) + ". IE6 opacity = " +
document.logo.f ilters.item("DX ImageTransform. Microsoft.Alpha ").opacity;
setTimeout("inc reaseOpacityIE( )",150);
}
}
function simplePreload()
{
var args = simplePreload.a rguments;
document.imageA rray = new Array(args.leng th);
for(var i=0; i<args.length; i++)
{
document.imageA rray[i] = new Image;
document.imageA rray[i].src = args[i];
}
}

//-->
Oct 24 '05 #1
4 2031
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>Perfec t 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="centerBo x">
<div class="sousimag e">
<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:DXImageT ransform.Micros oft.Alpha(opaci ty=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("inc reaseOpacity()" ,150);
}
var i;
function increaseOpacity () {
i = 0;
if (is_ie6up) {
window.status = "ISIE6UP";
increaseOpacity IE();
}
else if (is_nav6up || is_gecko) {
window.status = "ISNAV6UP OU ISGECKO";
increaseOpacity NS();
}
}
function increaseOpacity NS() {
if (document.logo. style.MozOpacit y < 1) {
document.logo.s tyle.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.getEle mentById.

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 ElementReferenc e.style.MozOpac ity 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.s tyle.MozOpacity ;
<img id="LogoImg" src="images/Logo1b.gif" style="-moz-opacity: 0;
opacity: 0; filter: progid:DXImageT ransform.Micros oft.Alpha(opaci ty=0);
-khtml-opacity: 0;">
....
.... = document.getEle mentById("LogoI mg").style.MozO pacity;
or
.... = document.images["logo"].style.MozOpaci ty;
setTimeout('inc reaseOpacityNS( )',150);
}
}
function increaseOpacity IE() {
if (document.logo. filters.item("D XImageTransform .Microsoft.Alph a").opacity
< 100) {
document.logo.f ilters.item("DX ImageTransform. Microsoft.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
ElementReferenc e.filters.item( "DXImageTransfo rm.Microsoft.Al pha").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 increaseOpacity NS() {
opacity = parseFloat(docu ment.logo.style .MozOpacity);
if (opacity < 1) {
opacity += 0.05;
document.logo.s tyle.MozOpacity = "" + opacity;
window.status = (i++) + ". GECKO opacity = " +
document.logo.s tyle.MozOpacity ;
setTimeout('inc reaseOpacityNS( )',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.MozOpacit y) ... or
if document.logo.f ilters.item("DX ImageTransform. Microsoft.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 increaseOpacity NS() {
opacity = parseFloat(docu ment.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(docu ment.images.nam edItem("logo"). style.MozOpacit y);
or
realOpacity = parseFloat(docu ment.images["logo"].style.MozOpaci ty);
if (opacity < 1) {
opacity += 0.05;
document.logo.s tyle.MozOpacity = "" + opacity;
window.status = (i++) + ". GECKO opacity = " +
document.logo.s tyle.MozOpacity ;
setTimeout('inc reaseOpacityNS( )',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.MozOpacit y) ... or
if document.logo.f ilters.item("DX ImageTransform. Microsoft.Alpha ").opacity ?


Feature detection is by using this way of checking:

if(typeof objImageToModif y.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 objImageToModif y.style.MozOpac ity == "string")
{
....block of code for browsers supporting style.MozOpacit y like older
Mozilla releases and NS 7.x ...
}
else if("filters" in objImageToModif y && typeof
objImageToModif y.filters.alpha .opacity == "number")
{
....block of code for browsers supporting filters.alpha.o pacity like MSIE
6 ...
}
else if(typeof objImageToModif y.style.getProp ertyValue("-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.javas cript
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 increaseOpacity NS() {
opacity = parseFloat(docu ment.logo.style .MozOpacity);
if (opacity < 1) {
opacity += 0.05;
document.logo.s tyle.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.MozOpaci ty = opacity;

works OK here.
window.status = (i++) + ". GECKO opacity = " +
document.logo.s tyle.MozOpacity ;
setTimeout('inc reaseOpacityNS( )',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.MozOpacit y) ... 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.MozOpaci ty != "undefined" )

It would be prudent to assign

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

before (and test for document.images collection and the HTMLImageElemen t
object as well.)
if document.logo.f ilters.item("DX ImageTransform. Microsoft.Alpha ").opacity


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

PointedEars
Oct 26 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
5033
by: Geoff | last post by:
When trying to focus a field in Firefox, I get the following error: Error: " nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: file:///C:/Documents%20and%20Settings/Edd/Desktop/test.html :: valText :: line 24" data: no] Source File: file:///C:/Documents%20and%20Settings/Edd/Desktop/test.html Line: 24 Anyone have any ideas as to why this is happening?
9
3738
by: pablo | last post by:
Dear NGers, I would like to change the alt-text with the changing of the image during a mouseover action. Can document.images.altView be changed dynamically? TIA, pablo
1
12291
by: Todd Cary | last post by:
In my previous post, I stated that some JavaScript I inherited does not work in Firefox but does work in IE 6 . I have now isolated a line where it fails in Firefox; the line with the property of "children". function InitMenu() { if (document.all) { } else
1
2152
by: RC | last post by:
I know DTD (Document Type Definition) is supported by Netscape/Firefox and IE. But I typed some examples from http://www.w3schools.com/schema/default.asp Seems no effect on those browsers.
1
2602
by: Jordan | last post by:
I set the cursor property to change to the "hand" when the user performs an "onmouseover" event on a hyperlink object. This does work correctly with Internet Explorer, however, with Netscape and Firefox, the cursor is just the "vertical line." Does anyone know why this isn't working with Netscape or Firefox? Thanks!
7
6338
by: Gary Kaucher | last post by:
At the top of the page on my website http://www.itemlook.com I have an animated gif called "eyeline.gif". It has worked fine in the past, but recently I am unable to get it to work using IE6. All that I get is a box with nothing in it. It almost seems as if the file will not open on my page, let alone animate. It still works fine with my Netscape browser. I am using Windows 98. Any ideas would be appreciated. Thanks,
5
3125
by: SPE - Stani's Python Editor | last post by:
Hi, During optimizing SPE for Ubuntu, I found something strange. I have Ubuntu 5.10 "The Breezy Badger" and unfortunately this code is not working: >>> import webbrowser >>> webbrowser.open("http://www.python.org") It does not throw an exception, but is not able to launch a browser.
16
14774
by: Dobedani | last post by:
Dear All, I found the code added below at: http://simplythebest.net/sounds/sound_guide.html Unfortunately, the code doesn't seem to work in Firefox. These are the error messages I can see in my Javascript Console: Error: self.document.guitar.IsReady is not a function Error: self.document.guitar.stop is not a function
60
8054
by: FAQ server | last post by:
----------------------------------------------------------------------- FAQ Topic - How do I prompt a "Save As" dialog for an accepted mime type? ----------------------------------------------------------------------- It is not possible with client-side JavaScript. Some browsers accept the Content-Disposition header, but this must be added by the server. Taking the form:- ` Content-Disposition: attachment; filename=filename.ext `
0
9943
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11151
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10858
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10419
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7974
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5996
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4619
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4225
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3237
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.