opacity fading

windandwaves

unread,

Jul 5, 2007, 8:30:53 PM7/5/07

to

Hi Folk

This could be useful for some of you:

//you can set these variables
var totalTime = 1000;//in milliseconds
var startOpacity = 0.00; // starting point for fade
var stopOpacity = 99.9990; //end point for fade
var numberOfSteps = 30; //number of steps

//other variables
var speed; //in milliseconds
var opacity; //starting point
var step; //interval for each one
var div;
var startOpacity;

function startFade(elName){
startOpacity = parseFloat(document.forms[0].elements[0].value);
stopOpacity = (document.forms[0].elements[1].value);
numberOfSteps = parseFloat(document.forms[0].elements[2].value);
totalTime = parseFloat(document.forms[0].elements[3].value);
opacity = startOpacity;
step = (stopOpacity - startOpacity) / numberOfSteps;
speed = totalTime / numberOfSteps;
div = document.getElementById(elName);
repeatFade();
return true;
}

See http://www.sunnysideup.co.nz/j/opacity/ for an example...

> Nicolaas

Peter Michaux

unread,

Jul 5, 2007, 8:53:47 PM7/5/07

to

On Jul 5, 5:30 pm, windandwaves <nfranc...@gmail.com> wrote:
> Hi Folk
>
> This could be useful for some of you:
>
> //you can set these variables
> var totalTime = 1000;//in milliseconds
> var startOpacity = 0.00; // starting point for fade
> var stopOpacity = 99.9990; //end point for fade
> var numberOfSteps = 30; //number of steps
>
> //other variables
> var speed; //in milliseconds
> var opacity; //starting point
> var step; //interval for each one
> var div;
> var startOpacity;
>
> function startFade(elName){
> startOpacity = parseFloat(document.forms[0].elements[0].value);
> stopOpacity = (document.forms[0].elements[1].value);
> numberOfSteps = parseFloat(document.forms[0].elements[2].value);
> totalTime = parseFloat(document.forms[0].elements[3].value);

Not a good idea to refer to forms and element by number. If the HTML
changes it all breaks.

> opacity = startOpacity;
> step = (stopOpacity - startOpacity) / numberOfSteps;
> speed = totalTime / numberOfSteps;
> div = document.getElementById(elName);
> repeatFade();
> return true;
>
> }
>
> function repeatFade() {
> opacity += step;
> var last = false;
> if(Math.abs(stopOpacity - opacity) < Math.abs(step)) {
> opacity = stopOpacity;
> last = true;
> }
> if(opacity >= 0 && opacity <= 100) {
> div.style.filter = "alpha(opacity="+Math.round(opacity)+")";// IE/
> Winfilter: alpha(opacity=50)
> div.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror

Did you personally test if it is "KHTMLOpacity" or "KhtmlOpacity" or
"KHtmlOpacity"? I don't have old Safari to check and seen what must be
the right and wrong way repeated around the web.

The Konq developers tell me that only the very recent or upcoming Konq
(v4?) will be the first to support opacity and it will be the regular
"opacity" property. None of this kthml stuff. Strange but that is what
they tell me.

> div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
> div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
> Mozilla, CSS3

If you have a large number of steps for smooth opacity transitions
then you may have something like 0.0000005 which is converted to 5e-7
for the string value of the CSS property. This is not a valid value
for the CSS property. before setting the style do something like this

if (opacity < 1e-4) {opacity = 0;}

I can't remember if it should be 1e-4 or 1e-3 or what but you need a
lower limit and everything lower is just zero.

> if(last == false) {
> window.setTimeout("repeatFade()", speed);
> }
> }
>
> }

Peter

windandwaves

unread,

Jul 5, 2007, 9:01:39 PM7/5/07

to

> Peter- Hide quoted text -
>
> - Show quoted text -- Hide quoted text -
>
> - Show quoted text -

Hi Peter

Totally agree with your points and I did not test it on Kong (never
used the thing ;-))

I added this line to get around the e business:
opacity = Math.round(opacity * 1000) / 1000;
That is one I can understand ;-)

Thanks

Nicolaas

hapl...@o2.pl

unread,

Jul 11, 2007, 2:44:02 AM7/11/07

to

Hi
what i'm trying to do is to have the script in an external
file, linked to the html file. on mouseover and mouseout the
image would fade in/out. I'd greatly appreciate any tips on
how to implement your script in an html page, bearing in mind
that any sort of scripting is stil daunting to me. thanks a lot for
any help 8)

Mariusz

Evertjan.

unread,

Jul 11, 2007, 3:06:58 AM7/11/07

to

Whose script?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

windandwaves

unread,

Jul 11, 2007, 5:50:01 PM7/11/07

to

Hi Mariusz

This is what you do:
--- create an html file ----
<html>
<head>
<title>my page</title>
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>
<img src="myimage.gif" alt="fading image" id="myimage" />
<a href="" onmouseover="fadeIn('myimage');"
onmouseout"fadeOut('myimage');">
</body>
</html>

--- create javascript.js in the same folder ----

Copy the script above into the javascript file.

Add the following functions (to the bottom of the file)

fadeIn(elname) {

totalTime = 1000;//in milliseconds

startOpacity = 0.00; // starting point for fade

stopOpacity = 99.9990; //end point for fade

numberOfSteps = 30; //number of steps

startFade(elname);
}

fadeOut(elname) {

totalTime = 1000;//in milliseconds

startOpacity = 99.999; // starting point for fade
stopOpacity = 0; //end point for fade

numberOfSteps = 30; //number of steps

startFade(elname);
}

------

see if that works. If is does not then use Firefox with the firebug
extension or any other javascript debugging tool to work out what the
hell is going wrong....

Good luck

Nicolaas

David Mark

unread,

Jul 12, 2007, 7:32:50 AM7/12/07

to

It clearly won't work. Try this instead:

<img src="myimage.gif" alt="fading image" id="myimage"

onmouseover="fadeIn('myimage')" onmouseout"fadeOut('myimage')">

And the original script needs to store the timeout so the handlers can
clear it before starting a new fade effect.

windandwaves

unread,

Jul 12, 2007, 6:49:27 PM7/12/07

to

i second that, sorry, that was rather stupid!

hapl...@o2.pl

unread,

Jul 15, 2007, 5:39:08 PM7/15/07

to

with the javascript file looking like that:

}

fadeIn(elname) {
totalTime = 1000;//in milliseconds
startOpacity = 0.00; // starting point for fade
stopOpacity = 99.9990; //end point for fade
numberOfSteps = 30; //number of steps
startFade(elname);

}

fadeOut(elname) {
totalTime = 1000;//in milliseconds
startOpacity = 99.999; // starting point for fade
stopOpacity = 0; //end point for fade
numberOfSteps = 30; //number of steps
startFade(elname);

}

and the html file looking like that:

</body>

i'm getting following errors:

missing ; before statement
[Break on this error] fadeIn(elname) {\n
javascript.js (line 48)
fadeIn is not defined
onmouseover(mouseover clientX=0, clientY=0)index.html (line 1)
[Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.or...
index.html (line 1)
fadeOut is not defined
onmouseout(mouseout clientX=0, clientY=0)index.html (line 1)
[Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.or...
index.html (line 1)

any ideas ? thanks a million

David Mark

unread,

Jul 16, 2007, 5:39:10 PM7/16/07

to

<hapl...@o2.pl> wrote in message
news:1184535548.0...@w3g2000hsg.googlegroups.com...

Apparently the poster of the code did not test it. For one, the functions
are not declared properly. Change these two lines and try it again.

function fadeIn(elname) {

function fadeOut(elname) {