element.html revision d98d5e2bbc3fcf2015c549dd94c4c0371b3fdbe7
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<html>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<head>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <meta http-equiv="content-type" content="text/html; charset=utf-8">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<title>Chaining Animations Using <code>onComplete</code></title>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<style type="text/css"> body { margin:0; padding:0; } </style>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css" />
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (typeof loadFirebugConsole == 'function') {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass loadFirebugConsole();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/oop/oop-debug.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/dump/dump.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/substitute/substitute.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/event/event-debug.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/dom/dom-debug.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/node/node-debug.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="/build/compat/compat-debug.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</head>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<body class=" yui-skin-sam">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass//create a new instance of Element wrapping
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass//'foo', which isn' yet on the page
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassvar el = new YAHOO.util.Element('foo');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass//add a click event handler to 'foo'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassel.on('click', function(e) { alert('clicked'); });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass//when 'foo' is loaded on the page, we'll fire
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass//an anonymous function that alerts the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass//number of list items in 'foo', which is a
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass//<ul> element:
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassel.on('contentReady', function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var items = el.getElementsByTagName('li');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass alert(items.length);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass});
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<!--markup for foo-->
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<div id="foo">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <ul>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <li>lorem</li>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <li>ipsum</li>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <li>dolor</li>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <li>sit</li>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass </ul>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</body>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</html>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass