YUI animation - looping to apply animation to divs - Forums

Board index » YUI 2.x: » General

YUI animation - looping to apply animation to divs

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Saul G

Username: saulg
Joined: Tue Mar 24, 2009 12:36 am
Posts: 2

Tags:

YUI animation - looping to apply animation to divs

Posted: Tue Mar 24, 2009 2:01 am

+0-

I'm playing with the animation component and trying to learn by tweeking the examples. How would I best go about looping over all divs with a given class to add (the same) animation. The code below commented out as "tag2 - this static code works" is fine if its hard coded.

I thought I could make an array of move and changeColor and loop over to add the object, but my javascript is clearly wonky :-(

Any help appreciated

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<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'+i, 'click', function() {
        move[i].animate();
    });

}


// tag2 - this static code works
//    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>

Last edited by saulg on Tue Mar 24, 2009 10:22 am, edited 1 time in total.

K o v a c s

Username: Kovacs
Joined: Wed Feb 11, 2009 8:55 am
Posts: 100
Location: The Biggest Little City in the World

Tags:

Re: YUI animation - looping to apply animation to divs

Posted: Tue Mar 24, 2009 8:47 am

+-1-

There's a typo in your code:

YAHOO.util.Event.on('tag'+1, ...

should be:

YAHOO.util.Event.on('tag'+i, ...

Making the change and re-running the code yields (Firefox/Firebug):

move[i] has no properties
(no name)()animationtest.htm... (line 103)
union(click clientX=0, clientY=0)yahoo-dom-event.j... (line 9)
[Break on this error] move[i].animate();

Saul G

Username: saulg
Joined: Tue Mar 24, 2009 12:36 am
Posts: 2

Tags:

Re: YUI animation - looping to apply animation to divs

Posted: Tue Mar 24, 2009 10:19 am

+0-

thanks for the typo spot Kovacs (amended) but as you say its more fundamentally wrong than that

If I re-write the bottom code as

Code:

// animate tag1

     var move1 = new YAHOO.util.Motion('tag1', attributes);
     var changeColor1 = new YAHOO.util.ColorAnim('tag1', colorAttributes); 
   move1.onStart.subscribe(function() {
      changeColor1.animate();
   });
    YAHOO.util.Event.on('tag1', 'click', function() {
        move1.animate();
    });

it works fine, but as a javascript noob I'm trying to write it in a way that would apply the animation to a potentially variable number of divs of class "tag". I'm probably going about it completely wrong, but thought there must be a way to loop so as to apply the same animation to several objects at once?

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum