opacity fading

W

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

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);
Click to expand...

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
Click to expand...

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
Click to expand...

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

}
Click to expand...

Peter
 
W

windandwaves

Hi Folk
Click to expand...
This could be useful for some of you:
Click to expand...
//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
Click to expand...
//other variables
var speed; //in milliseconds
var opacity; //starting point
var step; //interval for each one
var div;
var startOpacity;
Click to expand...
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);
Click to expand...

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
Click to expand...

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
Click to expand...

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);
}
}
Click to expand...
}
Click to expand...

Peter- Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -
Click to expand...

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
 
H

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
 
E

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)
Click to expand...

Whose script?
 
W

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
Click to expand...

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
 
D

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....
Click to expand...

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

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.
Click to expand...
i second that, sorry, that was rather stupid!
 
H

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

creating a class 5
Fading effect between play and play-over and pause and pause-over 0
Javascript Opacity - Fading In and Out 0
Image not changing between "mute" & "un-mute" images. 5
IE and the Opacity 7
CSS Image swap not working. 1
Image opacity and 0
Image opacity flicker and getElementById 1

Members online

No members online now.
Total: 43 (members: 0, guests: 43)
Robots: 86

Forum statistics

Threads
473,999
Messages
2,570,246
Members
46,840
Latest member
BrendanG78

Latest Threads

Top