Fade out particular DIV

[coolmark18]

Hey guys,

This is my first post.
Can somebody look over this code and tell me why its not working? When I uncomment //Itemnumber = 1;, it seems to work fine.

<script language="JavaScript">

//fades layer out
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac2 = 100;

function fadeOut(itemnumber) {
	//document.write(opac2);
	//itemnumber = 1;
	var idname = "fade" + itemnumber;
		if(opac2 > 0){
		opac = 0;
		opac2-=1;
			if(ie5) document.getElementById(idname).filters.alpha.opacity = opac2;
			if(ns6) document.getElementById(idname).style.MozOpacity = opac2/100;
		setTimeout('fadeOut()', 0);
		//document.write(itemnumber);
	}
}
</script>

<input type="button" value="Delete This User " onClick="fadeOut(1);" >
<a href="
<input type="button" value="Delete This User " onclick="fadeOut(2)" />
<input type="button" value="Delete This User " onclick="fadeOut(3)" />
<input type="button" value="Delete This User " onclick="fadeOut(4)" />


<div id="fade1"> fade 1 here</div>
<div id="fade2"> fade 2 here</div>
<div id="fade3"> fade 3 here</div>
<div id="fade4"> fade 4 here</div>

Cheers guys,

Mark

[skywalker2208]

Change this

setTimeout('fadeOut()', itemnumber);

to

setTimeout('fadeOut()', 0);

[coolmark18]

Change this

setTimeout('fadeOut()', itemnumber);

to

setTimeout('fadeOut()', 0);

Do you mean the other way around?

I just tried that with no success.


This version has the buttons more nicely formatted:

<script language="JavaScript">

//fades layer out
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac2 = 100;

function fadeOut(itemnumber) {
	//document.write(opac2);
	itemnumber = 1;
	var idname = "fade" + itemnumber;
		if(opac2 > 0){
		opac = 0;
		opac2-=1;
			if(ie5) document.getElementById(idname).filters.alpha.opacity = opac2;
			if(ns6) document.getElementById(idname).style.MozOpacity = opac2/100;
		setTimeout('fadeOut()', 0);
		//document.write(itemnumber);
	}
}
</script>

<input type="button" value="Delete This User " onClick="fadeOut(1);" >
<input type="button" value="Delete This User " onClick="fadeOut(2);" >
<input type="button" value="Delete This User " onClick="fadeOut(3);" >
<input type="button" value="Delete This User " onClick="fadeOut(4);" >



<div id="fade1"> fade 1 here</div>
<div id="fade2"> fade 2 here</div>
<div id="fade3"> fade 3 here</div>
<div id="fade4"> fade 4 here</div>

[skywalker2208]

Try this

setTimeout('fadeOut('+itemnumber+')', 0);

Also, you are going to want to clear the setTimeout at some point when the item is completely fade or else you will have a never ending loop.

[coolmark18]

Try this

setTimeout('fadeOut('+itemnumber+')', 0);

Also, you are going to want to clear the setTimeout at some point when the item is completely fade or else you will have a never ending loop.

Aw sweet. How would I go about clearing that.

Using that code works perfectly. My only problem is when I click one, and then click another. Nothing happens. Would this be solved by clearing it?

[skywalker2208]

Aw sweet. How would I go about clearing that.

Using that code works perfectly. My only problem is when I click one, and then click another. Nothing happens. Would this be solved by clearing it?

I think that is the problem. Take a look at http://www.w3schools.com/js/js_timing.asp