/    Sign up×
Community /Pin to ProfileBookmark

Method should call itself via Timeout, but it doesn’t…

Copy linkTweet thisAlerts:
Feb 09.2010

I feel like I’m staring stupidity in the face here, but by golly I just can’t figure it out. The timed method won’t call itself. Anyone got a moment to correct me?

[CODE]
<script type=”text/javascript”>
function fadeInOut(element) {
setTimeout(“fadeInOut(this)”, 1000);
if (element.style.opacity == 1) {element.style.opacity = 0.9;}
else if (element.style.opacity == 0.9) {element.style.opacity = 0.8;}
else if (element.style.opacity == 0.8) {element.style.opacity = 0.7;}
else if (element.style.opacity == 0.7) {element.style.opacity = 0.6;}
else if (element.style.opacity == 0.6) {element.style.opacity = 0.5;}
else if (element.style.opacity == 0.5) {element.style.opacity = 0.4;}
else if (element.style.opacity == 0.4) {element.style.opacity = 0.3;}
else if (element.style.opacity == 0.3) {element.style.opacity = 0.2;}
else if (element.style.opacity == 0.2) {element.style.opacity = 0.1;}
else if (element.style.opacity == 0.1) {element.style.opacity = 0;}
}
</script>
[/CODE]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Vince616Feb 09.2010 — This should work for you
[CODE]
setTimeout("fadeInOut("+element+")",1000)
[/CODE]

Hope this helps

V
Copy linkTweet thisAlerts:
@SilverwindauthorFeb 09.2010 — Hmm... I reckon I'm mucking something up elsewhere. I think the method calls itself alright now, but the opacity only changes on the first call. What do you think, am I referencing the element's ID incorrectly?

Here's the whole build if it helps:

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript">
var timer;
var fadeInLock = 0;
var fadeOutLock = 0;

function fadeIn(element) {
if (fadeOutLock == 0) {
fadeInLock = 1;
timer = setTimeout("fadeIn("+element+")", 20);
if (element.style.opacity == 0) {element.style.opacity = 0.1;}
else if (element.style.opacity == 0.1) {element.style.opacity = 0.2;}
else if (element.style.opacity == 0.2) {element.style.opacity = 0.3;}
else if (element.style.opacity == 0.3) {element.style.opacity = 0.4;}
else if (element.style.opacity == 0.4) {element.style.opacity = 0.5;}
else if (element.style.opacity == 0.5) {element.style.opacity = 0.6;}
else if (element.style.opacity == 0.6) {element.style.opacity = 0.7;}
else if (element.style.opacity == 0.7) {element.style.opacity = 0.8;}
else if (element.style.opacity == 0.8) {element.style.opacity = 0.9;}
else if (element.style.opacity == 0.9) {element.style.opacity = 1;clearTimeout(timer);fadeInLock = 0;}
}
}

function fadeOut(element) {
if (fadeInLock == 0) {
fadeOutLock = 1;
timer = setTimeout("fadeOut("+element+")", 20);
if (element.style.opacity == 1) {element.style.opacity = 0.9;}
else if (element.style.opacity == 0.9) {element.style.opacity = 0.8;}
else if (element.style.opacity == 0.8) {element.style.opacity = 0.7;}
else if (element.style.opacity == 0.7) {element.style.opacity = 0.6;}
else if (element.style.opacity == 0.6) {element.style.opacity = 0.5;}
else if (element.style.opacity == 0.5) {element.style.opacity = 0.4;}
else if (element.style.opacity == 0.4) {element.style.opacity = 0.3;}
else if (element.style.opacity == 0.3) {element.style.opacity = 0.2;}
else if (element.style.opacity == 0.2) {element.style.opacity = 0.1;}
else if (element.style.opacity == 0.1) {element.style.opacity = 0;clearTimeout(timer);fadeOutLock = 0;}
}
}
</script>

</head>

<body>

<div id="div1" style="position:absolute; height:100px; width:100px; top: 10px; left:10px; background-color:#3333FF; opacity:1"
onmouseover="fadeOut(div1)" onmouseout="fadeIn(div1)"/>

</body>
</html>

[/CODE]
Copy linkTweet thisAlerts:
@mrhooFeb 09.2010 — You are clearing the timeout every time -

put the final else statement in a {block} including the clearTimeout.

This example may give you an idea of how to make the code simpler,

with an optional call back function when the effect has completed.


//
[CODE]function fadeOut(element, dur, step, cb){
dur=dur || 100; step=step || .1;
if(!document.timer) element.style.opacity= '1';
var o= Number(element.style.opacity)-step;
element.style.opacity= o;
if(o> 0){
document.timer=
setTimeout(function(){fadeOut(element,dur, step,cb)},dur);
}
else{
document.timer= null;
if(cb) return cb(element,dur,step);
}
}[/CODE]
[CODE]function fadeIn(element, dur, step, cb){
dur=dur || 1000; step=step || .1;
if(!document.timer) element.style.opacity= '0';
var o= Number(element.style.opacity)+step;
element.style.opacity= o;
if(o<1){
document.timer=
setTimeout(function(){fadeIn(element,dur, step,cb)},1000);
}
else{
document.timer= null;
if(cb) return cb(element,dur,step);
}
}[/CODE]
fadeOut(el) // uses default time and opacity change

fadeOut(el, 500, .05, fadeIn)// fades an element out and back in
Copy linkTweet thisAlerts:
@Vince616Feb 09.2010 — Hi bud

I couldn’t see where you were getting the actual element from I don’t think that you can pass the element object as a param, but I could be wrong.

However a more reliable way of doing it would be to just get the object

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript">
var timer;
var fadeInLock = 0;
var fadeOutLock = 0;

function fadeIn(ele) {
element = document.getElementById(ele)
if (fadeOutLock == 0) {
fadeInLock = 1;
timer = setTimeout("fadeIn('"+element.id+"')", 20);
if (element.style.opacity == 0) {element.style.opacity = 0.1;}
else if (element.style.opacity == 0.1) {element.style.opacity = 0.2;}
else if (element.style.opacity == 0.2) {element.style.opacity = 0.3;}
else if (element.style.opacity == 0.3) {element.style.opacity = 0.4;}
else if (element.style.opacity == 0.4) {element.style.opacity = 0.5;}
else if (element.style.opacity == 0.5) {element.style.opacity = 0.6;}
else if (element.style.opacity == 0.6) {element.style.opacity = 0.7;}
else if (element.style.opacity == 0.7) {element.style.opacity = 0.8;}
else if (element.style.opacity == 0.8) {element.style.opacity = 0.9;}
else if (element.style.opacity == 0.9) {element.style.opacity = 1;clearTimeout(timer);fadeInLock = 0;}
}
}

function fadeOut(ele) {
if (fadeInLock == 0) {
element = document.getElementById(ele)
fadeOutLock = 1;
timer = setTimeout("fadeOut('"+element.id+"')", 20);
if (element.style.opacity == 1) {element.style.opacity = 0.9;}
else if (element.style.opacity == 0.9) {element.style.opacity = 0.8;}
else if (element.style.opacity == 0.8) {element.style.opacity = 0.7;}
else if (element.style.opacity == 0.7) {element.style.opacity = 0.6;}
else if (element.style.opacity == 0.6) {element.style.opacity = 0.5;}
else if (element.style.opacity == 0.5) {element.style.opacity = 0.4;}
else if (element.style.opacity == 0.4) {element.style.opacity = 0.3;}
else if (element.style.opacity == 0.3) {element.style.opacity = 0.2;}
else if (element.style.opacity == 0.2) {element.style.opacity = 0.1;}
else if (element.style.opacity == 0.1) {element.style.opacity = 0;clearTimeout(timer);fadeOutLock = 0;}
}
}
</script>

</head>

<body>
<div id="div1" style="position:absolute; height:100px; width:100px; top: 10px; left:10px; background-color:#3333FF; opacity:0"
onmouseover="fadeIn(this.id)" onmouseout="fadeOut(this.id)"/>

</body>
</html>
[/CODE]

and I am sure you know that it doesn’t work in IE…..

but anyway

Hope this helps

V
Copy linkTweet thisAlerts:
@mrhooFeb 10.2010 — I apologize if this is of no use to you, but there may be some bits you can use in your own code.

Once I started, I couldn't stop.

//
[CODE]if(document.addEventListener){
fx={
fadeOut: function(element, op, cb){
if(!fx.timer) op= 1;
op-=.02;
element.style.opacity= op;
if(op> 0){
fx.timer=
setTimeout(function(){fx.fadeOut(element, op, cb)},100);
}
else{
delete fx.timer;
if(cb) return cb(element);
}
},
fadeIn: function(element, op, cb){
if(!fx.timer) op= 0;
op+=.02;
element.style.opacity= op;
if(op<1){
fx.timer=
setTimeout(function(){fx.fadeIn(element, op, cb)},100);
}
else{
delete fx.timer;
if(cb) return cb(element);
}
}
}
}

else if(window.attachEvent){
fx={
fadeOut: function(element, op, cb){
if(!fx.timer) op= 100;
op= op-5;
element.style.filter= 'alpha(opacity='+op+')';
if(op> 0){
fx.timer=
setTimeout(function(){fx.fadeOut(element, op, cb)},200);
}
else{
delete fx.timer;
if(cb) return cb(element);
}
},
fadeIn: function(element, op, cb){
if(!fx.timer) op= 0;
op= op+1;
element.style.filter= 'alpha(opacity='+op+')';
if(op<100){
fx.timer=
setTimeout(function(){fx.fadeIn(element, op, cb)},100);
}
else{
delete fx.timer;
if(cb) return cb(element);
}
}
}
}[/CODE]

[B]// fade an element out and back in

fx.fadeOut(el,'', fx.fadeIn)[/B]


Note: versions of IE before 8 need the element to be filtered to have [B]layout[/B], as they call it, with a position or zoom property set, among other choices.
Copy linkTweet thisAlerts:
@rpg2009Feb 10.2010 — Note: versions of IE before 8 need the element to be filtered to have layout, as they call it, with a position or zoom property set, among other choices. [/QUOTE]

So do you have to use hasLayout and if false set a property? trying to get my head round that.

Maybe related, but had difficulty trying to get a current opacity property for IE. What's the score there.

I had a blast at this myself last night. Likewise went for a callback. Have since gone for wrapping it .

[CODE]var anim = {
timer : null,

iD : function(id){return document.getElementById(id)},

getStyle : function(styleType) {
var el = this.el;
var styleVal = (el.currentStyle)
? el.currentStyle[styleType]
: document.defaultView.getComputedStyle (el,null).getPropertyValue(styleType);
return styleVal;
},

fade : function(elem, dir, time, fn){
var o = this;
o.el = elem;
o.opac = parseInt(o.getStyle("opacity"))
o.opac = (o.opac>=0)? o.opac : 1; // If Nan (IE) set to 1.
o.cbFn = fn || null;
o.step = (dir=="in") ? (10/time) : -(10/time);
if (o.timer) { clearInterval(o.timer); }
o.timer = setInterval(o.fadeExec,10);
},

fadeExec : function(){
var o = anim; // reset this;
var elSt = o.el.style;
elSt.opacity = o.opac;
elSt.filter = "alpha(opacity="+(o.opac*100)+")";
o.opac = o.opac+o.step;
if (o.opac <= 0 || o.opac >= 1) {
clearInterval(o.timer); o.el = o.timer = null;
if (o.cbFn) { o.cbFn(); }
return o;
}
}

} [/CODE]

[code=php]This a full example with a simple box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FadeInOut</title>
<style type="text/css">
#box {
position: absolute;
top: 200px; left: 200px;
width: 200px; height: 200px;
background: red;
}
</style>
<script type="text/javascript">
var anim = {
timer : null,

iD : function(id){return document.getElementById(id)},

getStyle : function(styleType) {
var el = this.el;
var styleVal = (el.currentStyle)
? el.currentStyle[styleType]
: document.defaultView.getComputedStyle (el,null).getPropertyValue(styleType);
return styleVal;
},

fade : function(elem, dir, time, fn){
var o = this;
o.el = elem;
o.opac = parseInt(o.getStyle("opacity"))
o.opac = (o.opac>=0)? o.opac : 1; // If Nan (IE) set to 1.
o.cbFn = fn || null;
o.step = (dir=="in") ? (10/time) : -(10/time);
if (o.timer) { clearInterval(o.timer); }
o.timer = setInterval(o.fadeExec,10);
},

fadeExec : function(){
var o = anim; // reset this;
var elSt = o.el.style;
elSt.opacity = o.opac;
elSt.filter = "alpha(opacity="+(o.opac*100)+")";
o.opac = o.opac+o.step;
if (o.opac <= 0 || o.opac >= 1) {
clearInterval(o.timer); o.el = o.timer = null;
if (o.cbFn) { o.cbFn(); }
return o;
}
}

}
function init(){
var box = anim.iD('box');
anim.fade(box, "out", 2000, function(){anim.fade(box, "in", 2000)}); //
}
window.onload = init;
</script>
</head>
<body>
<div id="box">Box</div>
</body>
</html>[/code]

RLM
Copy linkTweet thisAlerts:
@SilverwindauthorFeb 10.2010 — Thanks kindly for the help fellas! I got it working with the following:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript">
var timer;
var fadeInLock = 0;
var fadeOutLock = 0;
var methodElement

function fadeIn(element) {
if (fadeOutLock == 0) {
fadeInLock = 1;
methodElement = element;
timer = setTimeout("fadeIn(methodElement)", 20);
if (element.style.opacity == 0) {element.style.opacity = 0.1;}
else if (element.style.opacity == 0.1) {element.style.opacity = 0.2;}
else if (element.style.opacity == 0.2) {element.style.opacity = 0.3;}
else if (element.style.opacity == 0.3) {element.style.opacity = 0.4;}
else if (element.style.opacity == 0.4) {element.style.opacity = 0.5;}
else if (element.style.opacity == 0.5) {element.style.opacity = 0.6;}
else if (element.style.opacity == 0.6) {element.style.opacity = 0.7;}
else if (element.style.opacity == 0.7) {element.style.opacity = 0.8;}
else if (element.style.opacity == 0.8) {element.style.opacity = 0.9;}
else if (element.style.opacity == 0.9) {element.style.opacity = 1;clearTimeout(timer);fadeInLock = 0;}
}
}

function fadeOut(element) {
if (fadeInLock == 0) {
fadeOutLock = 1;
methodElement = element;
timer = setTimeout("fadeOut(methodElement)", 20);
if (element.style.opacity == 1) {element.style.opacity = 0.9;}
else if (element.style.opacity == 0.9) {element.style.opacity = 0.8;}
else if (element.style.opacity == 0.8) {element.style.opacity = 0.7;}
else if (element.style.opacity == 0.7) {element.style.opacity = 0.6;}
else if (element.style.opacity == 0.6) {element.style.opacity = 0.5;}
else if (element.style.opacity == 0.5) {element.style.opacity = 0.4;}
else if (element.style.opacity == 0.4) {element.style.opacity = 0.3;}
else if (element.style.opacity == 0.3) {element.style.opacity = 0.2;}
else if (element.style.opacity == 0.2) {element.style.opacity = 0.1;}
else if (element.style.opacity == 0.1) {element.style.opacity = 0;clearTimeout(timer);fadeOutLock = 0;}
}
}
</script>

</head>

<body>

<div id="div1" style="position:absolute; height:100px; width:100px; top: 10px; left:10px; background-color:#3333FF; opacity:1"
onmouseover="fadeOut(this)" onmouseout="fadeIn(this)"/>

</body>
</html>
[/CODE]
I'm more intrigued by your routines though. I didn't know how to reference the current value of a style. Cheers for the help!
Copy linkTweet thisAlerts:
@rpg2009Feb 10.2010 — I'm more intrigued by your routines though. I didn't know how to reference the current value of a style. Cheers for the help! [/QUOTE]

Yes two read-only methods

[B]currentStyle[/B] for internet explorer.

[B]document.defaultView.getComputedStyle[/B] for firefox, safari, opera or chrome.

You might use them in a utitlity function like this

[CODE] function getStyle(element, property) {
el = document.getElementById(element);
if (el.currentStyle){ // Is it Internet Explorer
return el.currentStyle[property];
} else if (window.getComputedStyle) { //mozilla
return document.defaultView.getComputedStyle(el, null)[property];
}
}[/CODE]

Here's an example here. You'll see there are variations. Like with colours for instance. IE might give you the color's name, where as firefox goes with an RGB value.

[code=php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default</title>
<style type="text/css">
#box {
position: absolute;
left:100px; top:100px;
width: 200px; height: 200px;
background: red;
}
</style>
<script type="text/javascript">
function init(){

function getStyle(element, property) {
el = document.getElementById(element);
if (el.currentStyle){ // Is it Internet Explorer
return el.currentStyle[property];
} else if (window.getComputedStyle) { //mozilla
return document.defaultView.getComputedStyle(el, null)[property];
}
}

alert ("Width of box is "+getStyle("box","width")); // width of box is 200px
alert ("The left position of the box is "+getStyle("box","left")); // The left position of the box is 100px
alert ("The colour of the box is "+getStyle("box","backgroundColor"));
// in Mozilla: The colour of the box is rgb(255,0,0)
// in IE: The colour of the box is red
}
window.onload = init;
</script>
</head>
<body>
<div id="box">A box</div>
</body>
</html>[/code]
×

Success!

Help @Silverwind spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...