57. Wouldn’t it be cool to not
know when to use which size
of the grid automatically?
58. This is where the next YUI gem
comes in: DOM.
http://developer.yahoo.com/
yui/dom
59. Using the DOM component, I
can read out what happens in
the browser.
60. I can get the dimensions of the
window, the dimensions of the
browser, and the dimensions
of any element in the
document – regardless of its
positioning.
61. Using DOM, I can create a YUI
grid that works with all kind of
different browsers sizes.
76. 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);
77. 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);
});
93. Every single YUI component
has a lot of Custom Events you
can subscribe to.
94.
95. Say for example you want to
make sure to securely chain
animation sequences...
96. //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();
});
97. //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();
});
98. //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;);
});
122. 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');
};