beginner javascript, trying to put objects in array stupidity

Saulg · March 23rd, 2009, 11:34 AM

I'm playing with the Yahoo UI animation stuff, trying to animate divs. I have it working OK but I'm a noob at javascript so struggling with the idea of looping over to populate and array with objects. The code block thats commented out (tag2) works fine if its hardcoded but I'm trying to generate 10-20 keyword divs that can be animated to the input field (well they will fly towards it, fade to white before arrival and then I will populate the input with the text in the div...or so i had planned )

Any help appreciated.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 
<title>Animating Motion</title> 
 
<style type="text/css"> 
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style> 
 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" /> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script> 
 
 
<!--begin custom header content for this example--> 
<style type="text/css"> 
.tag {
	display: block;
	float: left;
	padding:1px;
	margin:0 0 0 3px;
	text-decoration: none;
	text-align:center;
	background-color:#cccccc;
	border:silver 0px solid;
	cursor:pointer;
}

.tag a:link , .tag a:visited{
	text-decoration: none;
}

#spacer {
    background:#ccc;
    margin-bottom:1em;
    height:200px;
    width:100px;
}
</style> 
 
<!--end custom header content for this example--> 
 
</head> 
 
<body class=" yui-skin-sam"> 


<div align="center">
<form>
<input type="text" id="input" name="tags" value="" size="30" tabindex="1">
</form>
</div>

<div id="spacer"></div>

<div class="tag" id="tag1"><a href="#">guidelines</a></div>
<div class="tag" id="tag2"><a href="#">policy</a></div>
<div class="tag" id="tag3"><a href="#">finance</a></div>
<div class="tag" id="tag4"><a href="#">PCT</a></div>
<div class="tag" id="tag5"><a href="#">immunisation</a></div>

<script type="text/javascript">

(function() {
var x = YAHOO.util.Dom.getX('input')+2;
var y = YAHOO.util.Dom.getY('input')+2;

    var totalTagDivs = YAHOO.util.Dom.getElementsByClassName('tag', 'div').length; 
 
   var attributes = {
        points: { to: [x,y] }
    };
	
	var colorAttributes = { 
        color: { to: '#06e' }, 
        backgroundColor: { to: '#fff' } 
    }; 
// tag1

var move=new Array();
var changeColor=new Array();

for(i=1; i<totalTagDivs+1; i++)
{

     move[i] = new YAHOO.util.Motion('tag'+i, attributes);
     changeColor[i] = new YAHOO.util.ColorAnim('tag'+i, colorAttributes); 
	move[i].onStart.subscribe(function() {
		changeColor[i].animate();
	});
    YAHOO.util.Event.on('tag'+1, 'click', function() {
        move[i].animate();
    });

}


// tag2
//    var move2 = new YAHOO.util.Motion('tag2', attributes);
//    var changeColor2 = new YAHOO.util.ColorAnim('tag2', colorAttributes); 
//	move2.onStart.subscribe(function() {
//		changeColor2.animate();
//	});
//    YAHOO.util.Event.on('tag2', 'click', function() {
//        move2.animate();
//    });

	
})();
</script>

</BODY> 
</HTML>