RIRedinPA Posted November 20, 2008 Share Posted November 20, 2008 I'm trying to modify the fade in/out process from this url: http://www.ilikespam.com/blog/javascript-fade-effects but for some reason I can't seem to pass a variable between functions. In a nut shell you click a link and pass which div you want to fade to the proper fade in/fade out function, this then does a setTimeout on a loop which passes the opacity, duration and div to fade to the setOpacity function. The first two items get passed ok, the div to fade does not. I've debugged the fade in and fade out functions and they are getting the div id, the setOpacity function however returns "undefined" for the variable. What am I doing wrong? Code follows: <!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>Fade Test</title> </head> <script language="javascript"> var duration = 500; /* 1000 millisecond fade = 1 sec */ var steps = 20; /* number of opacity intervals */ function fadein(obj){ for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + i + ")", i * duration, obj); } } function fadeout(obj) { for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + (1 - i) + ")", (i * duration), obj); } } function setOpacity(level, duration, obj) { var element = document.getElementById(obj); element.style.opacity = level; element.style.MozOpacity = level; element.style.KhtmlOpacity = level; element.style.filter = "alpha(opacity=" + (level * 100) + ");"; } </script> <body> <div id="box" style="display: block; width: 300px; height: 100px; background-color: #CCCC66;">Box</div> <p> <a href="javascript:void(0);" onmousedown="fadeout('box');">Fade Out</a> <p> <a href="javascript:void(0);" onmousedown="fadein('box');">Fade In</a> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/133541-solved-function-not-passing-variable/ Share on other sites More sharing options...
rhodesa Posted November 20, 2008 Share Posted November 20, 2008 there is no third argument for setTimeout. you need to pass obj in the quotes. and duration shouldn't be an argument, it's a global variable: <!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>Fade Test</title> </head> <script language="javascript"> var duration = 500; /* 1000 millisecond fade = 1 sec */ var steps = 20; /* number of opacity intervals */ function fadein(obj){ for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + i + ",'" + obj + "')", i * duration); } } function fadeout(obj) { for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + (1 - i) + ",'" + obj + "')", (i * duration)); } } function setOpacity(level, obj ) { var element = document.getElementById(obj); element.style.opacity = level; element.style.MozOpacity = level; element.style.KhtmlOpacity = level; element.style.filter = "alpha(opacity=" + (level * 100) + ");"; } </script> <body> <div id="box" style="display: block; width: 300px; height: 100px; background-color: #CCCC66;">Box</div> <p> <a href="javascript:void(0);" onmousedown="fadeout('box');">Fade Out</a> <p> <a href="javascript:void(0);" onmousedown="fadein('box');">Fade In</a> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/133541-solved-function-not-passing-variable/#findComment-694606 Share on other sites More sharing options...
rhodesa Posted November 20, 2008 Share Posted November 20, 2008 or make it easier and use jQuery: <!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>Fade Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> </head> <body> <div id="box" style="display: block; width: 300px; height: 100px; background-color: #CCCC66;">Box</div> <p><a href="javascript:void(0);" onmousedown="$('#box').fadeOut(500);">Fade Out</a></p> <p><a href="javascript:void(0);" onmousedown="$('#box').fadeIn();">Fade In</a></p> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/133541-solved-function-not-passing-variable/#findComment-694614 Share on other sites More sharing options...
RIRedinPA Posted November 20, 2008 Author Share Posted November 20, 2008 oh duh...I'm too tired today... Quote Link to comment https://forums.phpfreaks.com/topic/133541-solved-function-not-passing-variable/#findComment-694617 Share on other sites More sharing options...
RIRedinPA Posted November 20, 2008 Author Share Posted November 20, 2008 or make it easier and use jQuery: <!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>Fade Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> </head> <body> <div id="box" style="display: block; width: 300px; height: 100px; background-color: #CCCC66;">Box</div> <p><a href="javascript:void(0);" onmousedown="$('#box').fadeOut(500);">Fade Out</a></p> <p><a href="javascript:void(0);" onmousedown="$('#box').fadeIn();">Fade In</a></p> </body> </html> We have this discussion all the time here. I'm of the thought that unless it is just something I cannot accomplish on my own I really don't want to use a library for it. I'm not raising my nose at them, the folks who wrote them did a great job, but I want to know how to write that code as well, not just call someone else's tool. I have the luxury in my current position to learn and tinker, under different circumstances I probably wouldn't feel the same way. But I feel the more I code and learn about coding the more marketable I am. And given the economy today, the more marketable the better. BTW: I forgot to thank you for the help. : D Quote Link to comment https://forums.phpfreaks.com/topic/133541-solved-function-not-passing-variable/#findComment-694620 Share on other sites More sharing options...
rhodesa Posted November 20, 2008 Share Posted November 20, 2008 understandable. and if this world would follow a standard, i would probably code something like this myself. really, i should just have to set the 'opacity' attribute. but since it takes several different ways to make it work across all browsers, i usually don't bother. Quote Link to comment https://forums.phpfreaks.com/topic/133541-solved-function-not-passing-variable/#findComment-694624 Share on other sites More sharing options...
RIRedinPA Posted November 21, 2008 Author Share Posted November 21, 2008 understandable. and if this world would follow a standard, i would probably code something like this myself. really, i should just have to set the 'opacity' attribute. but since it takes several different ways to make it work across all browsers, i usually don't bother. Standards...now that's crazy talk... : D Quote Link to comment https://forums.phpfreaks.com/topic/133541-solved-function-not-passing-variable/#findComment-695342 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.