An introduction to YUI and some examples of how to use it to solve daily problems in web design. A talk given at the University in Bucharest and partly re-hashed on the flight from my Ajax Experience talk.
50. The sidebar is a predefined
width, the main section takes
up the rest of the space.
51. You define the overall width
of the document with an ID
and the location and width of
the sidebar with a class on
the containing DIV.
52. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
<meta http-equiv=quot;Content-Typequot;
content=quot;text/html; charset=utf-8quot; />
<title>Here’s my title</title>
<link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;>
</head>
<body>
<div id=quot;docquot; class=quot;yui-t4quot;>
<div id=quot;hdquot;>Header</div>
<div id=quot;bdquot;>
<div id=quot;yui-mainquot;>
<div class=quot;yui-bquot;>
Main section
</div>
</div>
<div class=quot;yui-bquot;>
Sidebar
</div>
</div>
<div id=quot;ftquot;><p>Footer</p></div>
</div>
</body>
</html>
53. ID and width class, side and width
#doc = 750px .yui-t1 = left 160px
#doc2 = 950px .yui-t2 = left 180px
#doc3 = 100% .yui-t3 = left 300px
#doc4 = 974px .yui-t4 = right 180px
.yui-t5 = right 240px
.yui-t6 = right 300px
54. You can add grid units inside
the main section to divide it
into horizontal columns.
94. YAHOO.util.Event.onDOMReady(function(){
var YD = YAHOO.util.Dom;
var r1 = YD.getRegion('region-one');
var r2 = YD.getRegion('region-two');
var i = r1.intersect(r2);
var u = r1.union(r2);
var intersect = document.createElement('div');
document.body.appendChild(intersect);
YD.setStyle(intersect,'position','absolute');
YD.setStyle(intersect,'background','#c0c');
YD.setStyle(intersect,'width',i.right-i.left + 'px');
YD.setStyle(intersect,'height',i.bottom-i.top + 'px');
YD.setStyle(intersect,'z-index',100);
YD.setXY(intersect,i);
95. var union = document.createElement('div');
document.body.appendChild(union);
YD.setStyle(union,'position','absolute');
YD.setStyle(union,'background','#000');
YD.setStyle(union,'opacity',.5);
YD.setStyle(union,'width',u.right-u.left + 'px');
YD.setStyle(union,'height',u.bottom-u.top + 'px');
YD.setStyle(union,'z-index',90);
YD.setXY(union,u);
});
110. Every single YUI component
has a lot of Custom Events you
can subscribe to.
111.
112. Say for example you want to
make sure to securely chain
animation sequences...
113. //This is the first animation; this one will
//fire when the button is clicked.
var move = new YAHOO.util.Anim(quot;animatorquot;, {
left: {from:0, to:75}
}, 1);
//This is the second animation; it will fire
//when the first animation is complete.
var changeColor = new YAHOO.util.ColorAnim(
quot;animatorquot;, { backgroundColor:
{from:quot;#003366quot;, to:quot;#ff0000quot;}
}, 1);
//Here's the chaining glue: We subscribe to the
//first animation's onComplete event, and in
//our handler we animate the second animation:
move.onComplete.subscribe(function() {
changeColor.animate();
});
114. //Here we set up our YUI Button and subcribe to
//its click event. When clicked, it will
//animate the first animation:
var start = new YAHOO.widget.Button(quot;startAnimquot;);
start.subscribe(quot;clickquot;, function() {
//reset the color value to the start so that
//the animation can be run multiple times:
YAHOO.util.Dom.setStyle(quot;animatorquot;,
quot;backgroundColorquot;,
quot;#003366quot;);
move.animate();
});
115. //You can also make use of the onStart and onTween
//custom events in Animation; here, we'll log all
//of changeColor's custom events and peek at their
//argument signatures:
changeColor.onStart.subscribe(function() {
YAHOO.log(quot;changeColor animation is starting.quot;,
quot;infoquot;, quot;examplequot;);
});
changeColor.onTween.subscribe(function(s, o) {
YAHOO.log(quot;changeColor onTween firing with these
arguments: quot; + YAHOO.lang.dump(o),
quot;infoquot;, quot;examplequot;);
});
changeColor.onComplete.subscribe(function(s, o) {
YAHOO.log(quot;changeColor onComplete firing with
these arguments: quot; + YAHOO.lang.dump(o),
quot;infoquot;, quot;examplequot;);
});
116. Knowing when something
happens and being able to
react to it is much safer than
assuming it worked.
136. function move(e){
y = YAHOO.util.Event.getXY(e);
if(y[1] > size){
render(y);
}
};
function render(y){
var d = YAHOO.util.Dom;
var real = y[1] - d.getDocumentScrollTop();
d.setStyle(top,'height',real-size+'px');
d.setStyle(bottom,'top',real+size+'px');
var h = d.getViewportHeight() - real + size;
d.setStyle(bottom,'height',h + 'px');
};