YUI Evolved: YUI3 and Why It’s Good for You Saturday, November 21, 2009
YUI Evolved:YUI3 and Why It’s Good for You
Saturday, November 21, 2009
http://www.flickr.com/photos/valjk/634696442/
Saturday, November 21, 2009
http://www.flickr.com/photos/valjk/634696442/
document.onmousemove = mouseMove;document.onmouseup = mouseUp;var dragObject = null;var mouseOffset = null;
function mouseCoords(ev){ if(ev.pageX||ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop };}
function makeClickable(object){ object.onmousedown = function(){ dragObject = this; }
}function mouseUp(ev){ dragObject = null;}function getMouseOffset(target,ev){ ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};}function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top};}function mouseMove(ev){
ev = ev||window.event; var mousePos = mouseCoords(ev); if(dragObject){dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; return false; }}function mouseUp(){ dragObject = null;}function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; }
Saturday, November 21, 2009
http://www.flickr.com/photos/funadium/2311851858/
Saturday, November 21, 2009
http://www.flickr.com/photos/funadium/2311851858/
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
YUI().use('dd-drag', function(Y) { var dd = new Y.DD.Drag({ //Selector of the node to make draggable node: '#demo' }); });
Saturday, November 21, 2009
Change always comes bearing gi@s‐ Price Pritche*
Lighter Easier
Saturday, November 21, 2009
Change always comes bearing gi@s‐ Price Pritche*
• Finer grained modules, sub‐modules
• Lazy‐loading
• Emphasis on code reuse- common base, plugins,
extensions
Lighter Easier
Saturday, November 21, 2009
Change always comes bearing gi@s‐ Price Pritche*
• Finer grained modules, sub‐modules
• Lazy‐loading
• Emphasis on code reuse- common base, plugins,
extensions
• Sandboxed development
• Consistent API
• Convenience- each, bind, nodelist, queue,
chainability, general sugar
Lighter Easier
Saturday, November 21, 2009
Change always comes bearing gi@s‐ Price Pritche*
• Finer grained modules, sub‐modules
• Lazy‐loading
• Emphasis on code reuse- common base, plugins,
extensions
• Sandboxed development
• Consistent API
• Convenience- each, bind, nodelist, queue,
chainability, general sugar
Lighter Easier
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
yui-min.js
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
yui-min.js
node event
dom selector
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
yui-min.js
node event
dom selector
YUI().use("imageloader", function(Y){ // magic! }
);
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
add ph
ase
use ph
ase
yui-min.js
node event
dom selector
YUI().use("imageloader", function(Y){ // magic! }
);
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
add ph
ase
use ph
ase
yui-min.js
node event oop
dom selector imageloader
YUI().use("imageloader", function(Y){ // magic! }
);
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
add ph
ase
use ph
ase
yui-min.js
node event oop
dom selector imageloader
YUI().use("imageloader", function(Y){ // magic! }
);oop imageloadereventnode
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
add ph
ase
use ph
ase
yui-min.js
node event
YUI().use("anim-base",
function(Y){ // magic! }
);
oop
dom selector imageloader
YUI().use("imageloader", function(Y){ // magic! }
);oop imageloadereventnode
Saturday, November 21, 2009
All in a day’s work(but taking less than a day, hopefully)
add ph
ase
use ph
ase
yui-min.js
node event
YUI().use("anim-base",
function(Y){ // magic! }
);
oopevent-custom
attribute-base
base-base
dom selectoranim-base
imageloader
YUI().use("imageloader", function(Y){ // magic! }
);oop imageloadereventnode oopevent-
customattribute-
basebase-basedomselector
eventnode
anim-base
Saturday, November 21, 2009
Playing in your own sandbox(but invite others too)
add
use ph
ase
yui
node ...
Easier
Saturday, November 21, 2009
Playing in your own sandbox(but invite others too)
add
use ph
ase
yui
node ...
<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">
<script>YUI().use("overlay", function(Y){
Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );
});</script>
Easier
Saturday, November 21, 2009
Playing in your own sandbox(but invite others too)
add
use ph
ase
yui
node ...
<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">
<script>YUI().use("overlay", function(Y){
Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );
});</script>
<script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js">
<script>YUI().use("overlay", function(Y){
new Y.Overlay({ … }).render();
});</script>
Easier
Saturday, November 21, 2009
Playing in your own sandbox(but invite others too)
add
use ph
ase
yui
node ...
<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">
<script>YUI().use("overlay", function(Y){
Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );
});</script>
<script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js">
<script>YUI().use("overlay", function(Y){
new Y.Overlay({ … }).render();
});</script>
Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );
Easier
Saturday, November 21, 2009
Everything where you want them(a.k.a. event façades)
Easier
Event
Saturday, November 21, 2009
Everything where you want them(a.k.a. event façades)
YUI2 YUI3
Easier
Event
Saturday, November 21, 2009
Everything where you want them(a.k.a. event façades)
var Dom = YAHOO.util.Dom;var Event = YAHOO.util.Event;
var linkNode = Dom.get("id");
Event.addListener( linkNode, "click", function(e) {
var target = Event.getTarget(e);
if( Dom.hasClass( target, "selector" )) {
Event.preventDefault(e);
}});
YUI2 YUI3
Easier
Event
Saturday, November 21, 2009
Everything where you want them(a.k.a. event façades)
var Dom = YAHOO.util.Dom;var Event = YAHOO.util.Event;
var linkNode = Dom.get("id");
Event.addListener( linkNode, "click", function(e) {
var target = Event.getTarget(e);
if( Dom.hasClass( target, "selector" )) {
Event.preventDefault(e);
}});
YUI2 YUI3
linkNode.on("click", function(e) {
if(!e.target.hasClass("selector")){ e.preventDefault(); }
});
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.stopImmediatePropagation()
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.stopImmediatePropagation()
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.preventDefault()
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.preventDefault()
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.preventDefault()
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.preventDefault()
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.stopImmediatePropagation()
Easier
Event
Saturday, November 21, 2009
ON
ON
Default Behavior
After
After
After
ON
One moment in Jme(regarding on and aNer moments)
ON
Default Behavior
After
After
After
this.fire("select");
e.stopImmediatePropagation()
Easier
Event
Saturday, November 21, 2009
Too many events spoil the page(a.k.a. event delegaOon)
HTML JS
Easier
Event
Saturday, November 21, 2009
Too many events spoil the page(a.k.a. event delegaOon)
<div id=”menu”> <ul>
<li class=”menuitem”> <em>Open file...</em> </li>
<li class=”menuitem”> <em>Save file...</em> </li>
<li class=”menuitem”> <em>Close file</em> </li>
<li class=”menuitem stop”> <em>Quit</em> </li>
</ul></div>
HTML JS
Easier
Event
Saturday, November 21, 2009
Too many events spoil the page(a.k.a. event delegaOon)
<div id=”menu”> <ul>
<li class=”menuitem”> <em>Open file...</em> </li>
<li class=”menuitem”> <em>Save file...</em> </li>
<li class=”menuitem”> <em>Close file</em> </li>
<li class=”menuitem stop”> <em>Quit</em> </li>
</ul></div>
HTML JS
var menuDiv = Y.one(“#menu”);
menuDiv.delegate("click", function(e){
}, "li.menuitem");
Easier
Event
Saturday, November 21, 2009
Too many events spoil the page(a.k.a. event delegaOon)
<div id=”menu”> <ul>
<li class=”menuitem”> <em>Open file...</em> </li>
<li class=”menuitem”> <em>Save file...</em> </li>
<li class=”menuitem”> <em>Close file</em> </li>
<li class=”menuitem stop”> <em>Quit</em> </li>
</ul></div>
HTML JS
var menuDiv = Y.one(“#menu”);
menuDiv.delegate("click", function(e){
}, "li.menuitem");
Easier
Event
Y.log( this.get(‘innerHTML’) ); // <em>Quit</em>, etc
// this == e.currentTarget // e.container == menuDiv
Saturday, November 21, 2009
Too many events spoil the page(a.k.a. event delegaOon)
<div id=”menu”> <ul>
<li class=”menuitem”> <em>Open file...</em> </li>
<li class=”menuitem”> <em>Save file...</em> </li>
<li class=”menuitem”> <em>Close file</em> </li>
<li class=”menuitem stop”> <em>Quit</em> </li>
</ul></div>
HTML JS
var menuDiv = Y.one(“#menu”);
menuDiv.delegate("click", function(e){
}, "li.menuitem");
Easier
Event
Y.log( this.get(‘innerHTML’) ); // <em>Quit</em>, etc
// this == e.currentTarget // e.container == menuDiv
// but maybe we want to stopY.one(“li.stop”).on(“click”, function(e){ e.stopPropagation(); });
Saturday, November 21, 2009
Menu
ON
Def. Behavior
After
After
NoJficaJon flow: Bubbling(Ony bubbles)
MenuItem
ON
ON
Def. Behavior
After
After
After
ON
ON
Def. Behavior
After
After
After
ON
Def. Behavior
After
After
Easier
Event
Saturday, November 21, 2009
Menu
ON
Def. Behavior
After
After
NoJficaJon flow: Bubbling(Ony bubbles)
MenuItem
ON
ON
Def. Behavior
After
After
After
ON
ON
Def. Behavior
After
After
After
ON
Def. Behavior
After
After
Easier
Event
Saturday, November 21, 2009
Menu
ON
Def. Behavior
After
After
NoJficaJon flow: Bubbling(Ony bubbles)
MenuItem
ON
ON
Def. Behavior
After
After
After
ON
ON
Def. Behavior
After
After
After
ON
Def. Behavior
After
After
Easier
Event
Saturday, November 21, 2009
Menu
ON
Def. Behavior
After
After
NoJficaJon flow: Bubbling(Ony bubbles)
MenuItem
ON
ON
Def. Behavior
After
After
After
ON
ON
Def. Behavior
After
After
After
ON
Def. Behavior
After
After
Easier
Event
Saturday, November 21, 2009
Menu
ON
Def. Behavior
After
After
NoJficaJon flow: Bubbling(Ony bubbles)
MenuItem
ON
ON
Def. Behavior
After
After
After
ON
ON
Def. Behavior
After
After
After
ON
Def. Behavior
After
After
e.stopPropagation()
Easier
Event
Saturday, November 21, 2009
Menu
ON
Def. Behavior
After
After
NoJficaJon flow: Bubbling(Ony bubbles)
MenuItem
ON
ON
Def. Behavior
After
After
After
ON
ON
Def. Behavior
After
After
After
ON
Def. Behavior
After
After
e.stopPropagation()
Easier
Event
Saturday, November 21, 2009
Working with HTML Elements(selectors, sugar, chaining, oh my)
YUI2 YUI3
Easier
Node
Saturday, November 21, 2009
Working with HTML Elements(selectors, sugar, chaining, oh my)
var Dom = YAHOO.util.Dom;var Event = YAOO.util.Event;
var elms = Dom.getElementsByClassName( "task", "li", "actions");
for (var i = 0; i < elms.length; i++) {
var elm = elms[i];
if(Dom.hasClass(elm, "selected")){
Dom.addClass(elm, "current"); Event.on(elm, "click", handler);
}
}
YUI2 YUI3
Easier
Node
Saturday, November 21, 2009
Working with HTML Elements(selectors, sugar, chaining, oh my)
var Dom = YAHOO.util.Dom;var Event = YAOO.util.Event;
var elms = Dom.getElementsByClassName( "task", "li", "actions");
for (var i = 0; i < elms.length; i++) {
var elm = elms[i];
if(Dom.hasClass(elm, "selected")){
Dom.addClass(elm, "current"); Event.on(elm, "click", handler);
}
}
YUI2 YUI3
var elm = Y.Node.get( ".actions li.task.selected");
elm.addClass("current");elm.on("click", handler);
Easier
Node
Saturday, November 21, 2009
Working with HTML Elements(selectors, sugar, chaining, oh my)
var Dom = YAHOO.util.Dom;var Event = YAOO.util.Event;
var elms = Dom.getElementsByClassName( "task", "li", "actions");
for (var i = 0; i < elms.length; i++) {
var elm = elms[i];
if(Dom.hasClass(elm, "selected")){
Dom.addClass(elm, "current"); Event.on(elm, "click", handler);
}
}
YUI2 YUI3
var elm = Y.Node.get( ".actions li.task.selected");
elm.addClass("current");elm.on("click", handler);
Easier
Node
// want something shorter?Y.Node.get(…).addClass("current").on( "click",handler);
Saturday, November 21, 2009
HTML Elements made easier(HTMLElement API improved)
Supports Normalizes Enhances
Easier
Bulk operaOons
Node
Saturday, November 21, 2009
HTML Elements made easier(HTMLElement API improved)
node.appendChild(new)
node.cloneNode(node)
node.scrollIntoView()
node.get("parentNode")
node.set("innerHTML", "Hello world!")
Supports Normalizes Enhances
Easier
Bulk operaOons
Node
Saturday, November 21, 2009
HTML Elements made easier(HTMLElement API improved)
node.appendChild(new)
node.cloneNode(node)
node.scrollIntoView()
node.get("parentNode")
node.set("innerHTML", "Hello world!")
Supports Normalizes Enhances
node.getAttribute("href")
node.contains(node)
node.getText()
node.getStyle("paddingTop")
node.previous()
Easier
Bulk operaOons
Node
Saturday, November 21, 2009
HTML Elements made easier(HTMLElement API improved)
node.appendChild(new)
node.cloneNode(node)
node.scrollIntoView()
node.get("parentNode")
node.set("innerHTML", "Hello world!")
Supports Normalizes Enhances
node.getAttribute("href")
node.contains(node)
node.getText()
node.getStyle("paddingTop")
node.previous()
node.addClass("selectable")
node.toggleClass("enabled")
node.getXY()
node.get("region")
Easier
Bulk operaOons
Node
Saturday, November 21, 2009
HTML Elements made easier(HTMLElement API improved)
node.appendChild(new)
node.cloneNode(node)
node.scrollIntoView()
node.get("parentNode")
node.set("innerHTML", "Hello world!")
Supports Normalizes Enhances
node.getAttribute("href")
node.contains(node)
node.getText()
node.getStyle("paddingTop")
node.previous()
node.addClass("selectable")
node.toggleClass("enabled")
node.getXY()
node.get("region")
Easier
var items = Y.Node.all(".actions li");items.addClass("disabled");items.set("title", "Item Disabled");
items.each(function(node) { node.addClass("disabled); node.set("title", "Item Disabled");});
Bulk operaOons
nodeList.filter(‘a[href]’);nodeList.odd();nodeList.even();
Node
Saturday, November 21, 2009
CreaJon, removal, and ancestry(a couple of last points)
Node creaOon
Node removal
Node ancestry
Easier
Node
Saturday, November 21, 2009
CreaJon, removal, and ancestry(a couple of last points)
var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);
Node creaOon Node removal
Node ancestry
Easier
Node
Saturday, November 21, 2009
CreaJon, removal, and ancestry(a couple of last points)
var html = '<fieldset><input type="checkbox" ... ></fieldset>';
// create the node and appendvar node = Y.node.create( html );form.appendChild( node );
// or do it right awayform.append( html );
var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);
Node creaOon Node removal
Node ancestry
Easier
Node
Saturday, November 21, 2009
CreaJon, removal, and ancestry(a couple of last points)
var html = '<fieldset><input type="checkbox" ... ></fieldset>';
// create the node and appendvar node = Y.node.create( html );form.appendChild( node );
// or do it right awayform.append( html );
var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);
Node creaOon Node removal
var parent = node.parentNode;parent.removeChild( node );
Node ancestry
Easier
Node
Saturday, November 21, 2009
CreaJon, removal, and ancestry(a couple of last points)
var html = '<fieldset><input type="checkbox" ... ></fieldset>';
// create the node and appendvar node = Y.node.create( html );form.appendChild( node );
// or do it right awayform.append( html );
var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);
Node creaOon Node removal
var parent = node.parentNode;parent.removeChild( node );
node.remove();
Node ancestry
Easier
Node
Saturday, November 21, 2009
CreaJon, removal, and ancestry(a couple of last points)
var html = '<fieldset><input type="checkbox" ... ></fieldset>';
// create the node and appendvar node = Y.node.create( html );form.appendChild( node );
// or do it right awayform.append( html );
var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);
Node creaOon Node removal
var parent = node.parentNode;parent.removeChild( node );
node.remove();
Node ancestry
var root = li.ancestor('.root');
<ul class="root"> <li>One</li> <li>Two</li> <li> <ul> <li>Sub One</li> <li>Sub Two</li> </ul> </li></ul>
Easier
Node
Saturday, November 21, 2009
Sugar is sweet(and so are you)
Easier
Saturday, November 21, 2009
oop
Sugar is sweet(and so are you)
Y.log
Y.later
Y.cached
Y.UA
Y.Lang
Easier
Y.Array
Y.Object
Y.mix
Y.merge
Y.clone
Y.aggregate
Y.augment
Y.extend
Y.each
Y.bind
++
Saturday, November 21, 2009
screenshot by me :)
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
http://whimsical.nu/hack/openhacksea.php
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
<div id="show"><div id="current"> <?php echo $show ?></div></div><div id="imageDump" style="display: none;"> <?= $dump ?></div>
The HTML
Datasource
Animation
The HTML
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
Datasource
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});
Datasource
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});var myCallback = { success: function(e){ // magic! // (add stuff to a custom PhotoReel obj) Y.later( 5000, myPhotoReel, myPhotoReel.advance, Array( Y ), true ); }};
Datasource
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});var myCallback = { success: function(e){ // magic! // (add stuff to a custom PhotoReel obj) Y.later( 5000, myPhotoReel, myPhotoReel.advance, Array( Y ), true ); }};
myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { schema: { resultListLocator: "photos.photo", resultFields: ["id", "owner", "secret", "server", "farm", "title","ownername"] }});
Datasource
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
Datasource
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
Y.on( 'domready', function(e){ myDataSource.sendRequest("", myCallback); });
Datasource
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
});
PhotoReel.prototype = { ...
advance : function(Y) {
Y.one( "#show" ).append( '<div id="next" style="opacity:0;">' + this.photos[this.current] + '</div>' );
... }}
Animation
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
PhotoReel.prototype = { ...
advance : function(Y) {
... }}
});
Animation
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
PhotoReel.prototype = { ...
advance : function(Y) {
... }}
});
fadeInAnim = new Y.Anim({ node : "#next", to : { opacity: 1 } }); fadeOutAnim = new Y.Anim({ node : "#current", to : { opacity: 0 } })
Animation
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
PhotoReel.prototype = { ...
advance : function(Y) {
... }}
});
Animation
Saturday, November 21, 2009
Photo slideshow(because pictures are pre*eh)
The HTML
Datasource
Animation
YUI().use("datasource","node","substitute","anim", function(Y){ ...
PhotoReel.prototype = { ...
advance : function(Y) {
... }}
});
fadeInAnim.on( 'run', function(e) { fadeOutAnim.run(); });
fadeInAnim.on( 'end', function(e) {
Y.one( "#current" ).setContent( this.photos[this.current] ); Y.one( "#next" ).remove();
}, this );
fadeInAnim.run();
Animation
Saturday, November 21, 2009
http://www.flickr.com/photos/kandyjaxx/2012468692/
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/
YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/
YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/
YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/
YUI3 Galleryh*p://yuilibrary.com/gallery/
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/
YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/
YUI3 Galleryh*p://yuilibrary.com/gallery/
Saturday, November 21, 2009
Making life easier(for you and for me and the enOre human race)
Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/
YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/
YUI3 Galleryh*p://yuilibrary.com/gallery/
YUI Forumh*p://yuilibrary.com/forum/
Saturday, November 21, 2009
http://www.flickr.com/photos/bzedan/2905906576/
Go forth and hack!
Or, do you have any quesOons?
Angela Sabas
[email protected]://whimsical.nu@angelamaria
Frontend Engineer, Yahoo!
http://whimsical.nu/hack/openhacksea.php
Saturday, November 21, 2009