opacity fading

[windandwaves]

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;
}


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
div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
Mozilla, CSS3
if(last == false) {
window.setTimeout("repeatFade()", speed);
}
}
}


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

 

[Peter Michaux]

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]

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- 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

 

[haplobaaz]

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.]

wrote on 11 jul 2007 in comp.lang.javascript:

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)

Whose script?

 

[windandwaves]

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

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]

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....

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]

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.

i second that, sorry, that was rather stupid!

 

[haplobaaz]

with the javascript file looking like that:

//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;

}

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
div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
Mozilla, CSS3
if(last == false) {
window.setTimeout("repeatFade()", speed);
}
}

}
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>
<img src="../usergroup/final/images/me6.jpg" alt="fading image"
name="myimage" width="426" height="379" id="myimage"
onmouseover="fadeIn('myimage')" onmouseout="fadeOut('myimage')"/>

</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