...

View Full Version : What is the problem in this code (setTimeout function Does not work)



lionking2
07-29-2010, 04:56 AM
Hello everybody
I need your help in this problem

At first, this is the code used

HTML Code


<input type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div><br />
<input type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div>

JavaScript Code


function fadeIn(elem){
element = elem.nextSibling;
elemOpacity = element.style.opacity;
element.innerHTML = elemOpacity;
if (elemOpacity < 1.0)
element.style.opacity = parseFloat(elemOpacity) + 0.1;
timeIn = setTimeout(fadeIn, 100);
}


I have used the opacity property to make fading element like fadeIn() function in jquery , and i have used onfocus event to execute the code .
Problem exists in setTimeout function, this function Does not work But the code works without this function

What is the cause of the problem , Please help me

Beagle
07-29-2010, 08:00 AM
The problem is that the fadeIn function you are using in the timeout needs an argument (elem) but setTimeout doesn't provide it. Try this:


timeIn = setTimeout(function() {fadeIn(elem);}, 100);


For cleaner code, I would recommend making your fadeIn function take the element that is to be faded, not the sibling of the element.


function fadeIn(element){
elemOpacity = element.style.opacity;
element.innerHTML = elemOpacity;
if (elemOpacity < 1.0)
element.style.opacity = parseFloat(elemOpacity) + 0.1;
timeIn = setTimeout(fadeIn, 100);
}

I would then either pass this.nextSibling:


<input type="text" onfocus="fadeIn(this.nextSibling)" /><div class="box" style="opacity: 0.0"></div><br />

or create an event handler:


function focus_fadeHandler(elem) {
fadeIn(elem.nextSibling);
}

<input type="text" onfocus="focus_fadeHandler(this);" /><div class="box" style="opacity: 0.0"></div><br />

Dormilich
07-29-2010, 10:10 AM
with only some marginal changes, an adorable bit of elegance.

function fadeIn() {
var element = this.nextSibling,
elemOpacity = element.style.opacity;
element.innerHTML = elemOpacity;
if (elemOpacity < 1.0) {
element.style.opacity = parseFloat(elemOpacity) + 0.1;
timeIn = setTimeout(fadeIn.bind(this), 100);
}
}
requires to be attached by JavaScript, not by HTML

document.getElementById().addEventListener("click", fadeIn, false);
and of course an implementation of .bind()

Function.prototype.bind = function (obj) {
var fn = this;
return function () {
return fn.apply(obj, arguments);
}
};

Beagle
07-29-2010, 03:28 PM
Hey, .bind()!

Great idea, will save me much cruft!

Dormilich
07-29-2010, 03:31 PM
yea, .bind() is awesome.

Kor
07-29-2010, 04:32 PM
I used to think that opacity does not work in IE... And I'm sure it still does not :)

Dormilich
07-29-2010, 04:34 PM
I wouldn’t be surprised, if it didn’t work, either. it’s IE, after all.

Kor
07-29-2010, 05:07 PM
It doesn't. Furthermore, IE8 has now another syntax. Moreover, IE8-as-IE7 does not see it as IE7 in some circumstances :D

http://www.quirksmode.org/css/opacity.html

lionking2
07-29-2010, 11:37 PM
Thank You Mr Beagle and Mr Dormilich I thank everyone and I thank everyone who help me!

the easy way for me


timeIn = setTimeout(function() {fadeIn(elem);}, 100)


work fine



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum