By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,382 Members | 1,623 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,382 IT Pros & Developers. It's quick & easy.

Interval Problem in Netscape/Mozilla ?

P: n/a
I am on WinXP. The following page works perfectly in IE6. For Netscape
7.0, I have to move off of the image and then back on to get the fade to
take effect, and with Mozilla (latest version) a series of close mouseovers
will cause the screen to go wacko.

Does anyone have input on how to get Netscape/Mozilla to work with a fade
like this?

Thanks!

Joe

Jul 20 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
Here's the page:

http://www.misko.net/public/hilite-fade-in-out-2.htm

"Joseph Misko" <DO*********************@hotmail.com> wrote in message
news:10***************@websense.vermontel.net...
I am on WinXP. The following page works perfectly in IE6. For Netscape
7.0, I have to move off of the image and then back on to get the fade to
take effect, and with Mozilla (latest version) a series of close mouseovers will cause the screen to go wacko.

Does anyone have input on how to get Netscape/Mozilla to work with a fade
like this?

Thanks!

Joe


Jul 20 '05 #2

P: n/a
DU
Joseph Misko wrote:
I am on WinXP. The following page works perfectly in IE6.

Here's the page:

http://www.misko.net/public/hilite-fade-in-out-2.htm For Netscape 7.0, I have to move off of the image and then back on to get the fade to
take effect, and with Mozilla (latest version) a series of close mouseovers
will cause the screen to go wacko.

Does anyone have input on how to get Netscape/Mozilla to work with a fade
like this?

Thanks!

Joe


I'm convinced it is feasible to do a perfectly working cross-browser
(Mozilla and MSIE 5+) page which will validate also (markup only; not
CSS). I think the event properties you should use are relatedTarget
(W3C) and fromElement/toElement (MSIE 5+) instead of event handlers
attributes (onmouseover, onmouseout).

DU
---------------------------
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #3

P: n/a
Joseph Misko wrote:
I am on WinXP. The following page works perfectly in IE6. For Netscape
7.0, I have to move off of the image and then back on to get the fade to
take effect, and with Mozilla (latest version) a series of close mouseovers
will cause the screen to go wacko.

Does anyone have input on how to get Netscape/Mozilla to work with a fade
like this?


First of, I hope you realize you're dealing with stuff which isn't
officially supported yet. So far Opacity handling is done different in
each browser and only included in the latest browsers so there is no
guarantee it will work the way it should be.

Second, onmouseover and onmouseout (which should also be all lower case
;-) ) aren't realy reliable in Mozilla (I'm not realy sure about IE) and
to get around this problem I usually add an ommouseover event to the
surrounding area of the object as well. So not only will the opacity
change if you move of the image but it will also be activated if you go
over the next object.

Prodoc

P.s. ...and you should add a type attribute to the script object
(type="text/javascript") ;-)

Jul 20 '05 #4

P: n/a
DU
Prodoc wrote:
Joseph Misko wrote:
I am on WinXP. The following page works perfectly in IE6. For Netscape
7.0, I have to move off of the image and then back on to get the fade to
take effect, and with Mozilla (latest version) a series of close
mouseovers
will cause the screen to go wacko.

Does anyone have input on how to get Netscape/Mozilla to work with a fade
like this?

First of, I hope you realize you're dealing with stuff which isn't
officially supported yet. So far Opacity handling is done different in
each browser and only included in the latest browsers so there is no
guarantee it will work the way it should be.


Correct but it is 99% sure that opacity will be an official CSS3 property.
Second, onmouseover and onmouseout (which should also be all lower case
;-) )
Only if he uses XHTML; lowercase attribute names are not mandatory in
strict DTD 4.01 ... but lowercase attribute names is certainly
recommendable as this makes a page closer, easier to convert to XHTML.

aren't realy reliable in Mozilla (I'm not realy sure about IE) and to get around this problem I usually add an ommouseover event to the
surrounding area of the object as well.
I'm pretty sure he should use relatedTarget for W3C DOM 2 Events
compliant browsers and fromElement and toElement for MSIE 5+.

So not only will the opacity change if you move of the image but it will also be activated if you go
over the next object.

Prodoc

P.s. ...and you should add a type attribute to the script object
(type="text/javascript") ;-)


I agree with what you say. He should validate his markup entirely and
use a doctype declaration.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #5

P: n/a
Thanks DU and Prodoc for the feedback. Is there any input why setInterval
does not work in current browsers? Is there a webpage that describes what
parts of JavaScript don't work well in browsers, since I haven't seen one,
or is this information just sort of out there floating around in the brains
of you all?

Thanks again,
Joe

"Joseph Misko" <DO*********************@hotmail.com> wrote in message
news:10***************@websense.vermontel.net...
I am on WinXP. The following page works perfectly in IE6. For Netscape
7.0, I have to move off of the image and then back on to get the fade to
take effect, and with Mozilla (latest version) a series of close mouseovers will cause the screen to go wacko.

Does anyone have input on how to get Netscape/Mozilla to work with a fade
like this?

Thanks!

Joe


Jul 20 '05 #6

P: n/a
"Joseph Misko" <DO*********************@hotmail.com> writes:
Is there any input why setInterval does not work in current
browsers?


I believe setInterval works perfectly in all browsers since Netscape
4. That function is not the problem.

The problem is the transparency/opacity.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7

P: n/a
DU
Joseph Misko wrote:
Thanks DU and Prodoc for the feedback. Is there any input why setInterval
does not work in current browsers? Is there a webpage that describes what
parts of JavaScript don't work well in browsers, since I haven't seen one,
or is this information just sort of out there floating around in the brains
of you all?

Thanks again,
Joe

I think the problem has nothing to do with setInterval and
clearInterval. I tried with setTimeout and clearTimeout and, for a
reason beyond my understanding, Mozilla 1.4 does not add, does not
compute the opacity value when in a recursive call. I think the
-moz-opacity css property is buggy.

http://www10.brinkster.com/doctorunc...icOpacity.html

That page works without a glitch with MSIE 6 for windows.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #8

P: n/a
DU <dr*******@hotREMOVEmail.com> writes:
I think the -moz-opacity css property is buggy.


Not at all, the bug is in your code. You write
....style.MozOpacity += 0.05;
However, the type of MozOpacity, like all normal[1] properties of the
style element, is string, so the "+" is seen as string concatenation.

If you change it to

var estyle = ....style;
estyle.MozOpacity = +estyle.MozOpacity + 0.05;

then it works fine.

/L
[1] I.e., non Microsoft.
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #9

P: n/a
DU
Lasse Reichstein Nielsen wrote:
DU <dr*******@hotREMOVEmail.com> writes:

I think the -moz-opacity css property is buggy.

Not at all, the bug is in your code. You write
....style.MozOpacity += 0.05;
However, the type of MozOpacity, like all normal[1] properties of the
style element, is string, so the "+" is seen as string concatenation.

If you change it to

var estyle = ....style;
estyle.MozOpacity = +estyle.MozOpacity + 0.05;

then it works fine.

/L
[1] I.e., non Microsoft.


You've got an excellent point there: I did not know that. I modified the
code accordingly. I still can't reach limit values though ("0" and "1").
I'll check this with the javascript Venkman debugger.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #10

P: n/a
DU <dr*******@hotREMOVEmail.com> writes:
You've got an excellent point there: I did not know that.
It is a very commen error to make. Believe me, I know. :)
I modified the code accordingly. I still can't reach limit values
though ("0" and "1"). I'll check this with the javascript Venkman
debugger.


It seems to work for me. I saved the page locally and made the change,
and it goes to opacity 0 and what looks like opacity 1 (although it is
hard to be sure).

You could check that your floating point arithmetic does hit 1.0 and
0.0 exactly. You add 0.05 which is not representable exactly as a
double precission floating point number.

If I evaluate
var x=0.0; for(var i = 0; i < 20; i++){ x += 0.05;}; x
the result is not 1.0, but 1.0000000000000002.

You could avoid this by writing:
var newOpacity = + elem.style.MozOpacity + 0.05;
elem.style.MozOpacity = (newOpacity>1.0)?1.0:newOpacity;

Personally, I would keep the current opacity in a variable myself
instead of reading MozOpacity and filter.alpha.opacity, but that is
just for simplicity.
A few comments on the code:
You write
if(glbInc != null) {clearTimeout(glbInc);};
You could add "hlbInc = null" after the clearTimeout to prevent
calling it again (ditto for glbDec).

You could save a lot of code by binding the element to a variable early
var elem=document.getElementById("idImageToBeModified" );
You refer to this slement six times in each function, and find it the
hard way each time.

You write
glbDec = setTime("DecreaseOpacity()",64);
You can just write
glbDec = setTime(DecreaseOpacity,64);
It should save the parsing of the string.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #11

P: n/a
DU
Lasse Reichstein Nielsen wrote:
DU <dr*******@hotREMOVEmail.com> writes:

You've got an excellent point there: I did not know that.

It is a very commen error to make. Believe me, I know. :)

I modified the code accordingly. I still can't reach limit values
though ("0" and "1"). I'll check this with the javascript Venkman
debugger.

It seems to work for me. I saved the page locally and made the change,
and it goes to opacity 0 and what looks like opacity 1 (although it is
hard to be sure).


I checked with the javascript Venkman debugger (the watches window) and
it never reached opacity 1, despite many tries with versions of modified
code. It gets to 0.950000001 or something like that.

I would not be surprised at all if there was a bug with -moz-opacity
after all.
You could check that your floating point arithmetic does hit 1.0 and
0.0 exactly. You add 0.05 which is not representable exactly as a
double precission floating point number.

I tried toPrecision(3) and toPrecision(2) here and there and finally
removed these.
In the latest code uploaded, I resorted to parseFloat() simply because I
can better monitor the values in Venkman.

If I evaluate
var x=0.0; for(var i = 0; i < 20; i++){ x += 0.05;}; x
the result is not 1.0, but 1.0000000000000002.

You could avoid this by writing:
var newOpacity = + elem.style.MozOpacity + 0.05;
elem.style.MozOpacity = (newOpacity>1.0)?1.0:newOpacity;

I used a local var NewOpacity mostly to be able to debug with Venkman.
Personally, I would keep the current opacity in a variable myself
instead of reading MozOpacity and filter.alpha.opacity, but that is
just for simplicity.


Well, the code already implies recursive calls. I think resorting to
setTimeout is better than setInterval but if I could have just use a
while loop, then it would be even better... but this does not seem
possible.
A few comments on the code:
You write
if(glbInc != null) {clearTimeout(glbInc);};
You could add "hlbInc = null" after the clearTimeout to prevent
calling it again (ditto for glbDec).

Hmm... I don't know why I should set glbInc|glbDec to null after using
clearTimeout(glbInc|glbDec). Is this extra precaution really justified?
Just asking. I really don't know.

I'm not accustomed to clearTimeout method, what it does exactly. I'm
definitively not a "fan" of setTimeout and setInterval: these methods
are always dangerous, can always abuse user's system resources, create
infinite loops...

I'm certainly learning several points with that file.
You could save a lot of code by binding the element to a variable early
var elem=document.getElementById("idImageToBeModified" );
You refer to this slement six times in each function, and find it the
hard way each time.

Yes, I changed that. Thanks.
You write
glbDec = setTime("DecreaseOpacity()",64);
You can just write
glbDec = setTime(DecreaseOpacity,64);
It should save the parsing of the string.

/L


Here, on this, the javascript console warns about excessive recursive
calls... I don't recall the exact message error and I modified the code
many times.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #12

P: n/a
JRS: In article <3c**********@hotpop.com>, seen in
news:comp.lang.javascript, Lasse Reichstein Nielsen <lr*@hotpop.com>
posted at Sat, 19 Jul 2003 13:47:21 :-

You could check that your floating point arithmetic does hit 1.0 and
0.0 exactly. You add 0.05 which is not representable exactly as a
double precission floating point number.

If I evaluate
var x=0.0; for(var i = 0; i < 20; i++){ x += 0.05;}; x
the result is not 1.0, but 1.0000000000000002.

You could avoid this by writing:
var newOpacity = + elem.style.MozOpacity + 0.05;
elem.style.MozOpacity = (newOpacity>1.0)?1.0:newOpacity;

True. But the result is only by chance greater than 1.0;
var x=0.0 ; for (var i = 0; i < 10 ; i++) { x += 0.1 } ; x
gives 0.9999999999999999.

Better IMHO to work in units of, say, centi- or milli- opacity; do the
arithmetic on their integer values, getting exactly 100 or 1000 for full
scale, then divide by 100 or 1000. If necessary, micro- or pico-
opacity would work; and femto- but not atto-.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
Jul 20 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.