Jump to content

[SOLVED] Function not passing variable

RIRedinPA

By RIRedinPA
in Javascript Help

 Share

Recommended Posts

RIRedinPA Advanced Member

RIRedinPA

Posted
Posted

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>

Link to comment
Share on other sites
rhodesa Newbie

rhodesa

Posted
Posted

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>

Link to comment
Share on other sites
rhodesa Newbie

rhodesa

Posted
Posted

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>

Link to comment
Share on other sites
RIRedinPA Advanced Member

RIRedinPA

Posted
  • Author
Posted

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

Link to comment
Share on other sites
rhodesa Newbie

rhodesa

Posted
Posted

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.

Link to comment
Share on other sites
RIRedinPA Advanced Member

RIRedinPA

Posted
  • Author
Posted

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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.