Update: Here is a full set of release notes on the platform preview (called that as it is more of a shell than a browser.

Rey Bango (Ajaxian and now Microsoft employee) will do a post that rounds up the news from MIX today where the IE9 team shared a first preview release of IE9 that comes with new features from HTML5+ (video, SVG, CSS3, addEventListener, JavaScript compilation spread across multicore, and more). All of this is hardware accelerated. Yum. Missing was news on canvas and I didn’t see deets on CSS transforms and the like (which would be awesome with hardware acceleration too).

John Resig just got on stage to talk about the collaboration between jQuery and Microsoft and how Microsoft is now contribution resources and code. For example, templates (all on GitHub which gives you:….MORE

Get the code

YAHOO.lang.augmentObject(
  YAHOO.widget.DataTable.prototype, {
    _selectAllTrEls : function() {
      var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_EVEN, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsEven , YAHOO.widget.DataTable.CLASS_SELECTED);
      var selectedRowsOdd = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_ODD, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsOdd, YAHOO.widget.DataTable.CLASS_SELECTED);
    },
  /* Selects all rows. * * @method selectAllRows */
  selectAllRows : function() {
    // Remove all rows from tracker
    var tracker = this._aSelections || [];
    for(var j=tracker.length- 1; j>-1; j--) {
      if(YAHOO.lang.isString( tracker[j] )){
        tracker.splice( j,1);
      }
    }
    // Update tracker
    this._aSelections = tracker;
    // Update UI
    this._selectAllTrEls();
    // Get all highlighted rows and make yahoo aware they are selected
    var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_SELECTED, "tr",this._elTbody);
    for (i=0;i
<selectedRowsEven.length; i++){
      this.selectRow(i);
    }
  }
});

// set up YUI loader
var loader = new YAHOO.util.YUILoader({
    require: ["container","connection",
              "cookie",
              "animation",
              "button",
              "dom","event"
              ],
   loadOptional: true,
   onSuccess: function() {
	Yevent = YAHOO.util.Event;
	Yconnect = YAHOO.util.Connect;
	Ydom = YAHOO.util.Dom;
	Ycook = YAHOO.util.Cookie;
// fire of init() function once the document has finished loading and the dom is ready
    YAHOO.util.Event.onDOMReady(init);
	},
	timeout: 10000,
	allowRollup: true,
	base: '/scripts/yui/build/',
	combine: false
});
loader.insert();

function init() {

 // Create a dialog box to put the login form into
  	    stdDialog = new YAHOO.widget.SimpleDialog("dlgstd", {
	    width: "auto",
	    fixedcenter:true,
	    modal:false,
	    visible:false,
	    close: false,
	    constraintoviewport: true
	  });
	     stdDialog.setHeader("Login:");
	     stdDialog.render(document.body);

  var buttons=[{ text:"Login", handler: function(){
  var loginCallback = {
       cache:false,
       success: function(o){
         response = o.responseText.split(",");
         if(response[0] == "ok"){
          stdDialog.setHeader("Login: Success");
          YAHOO.util.Cookie.set(response[1], response[2], {});
document.location.href = "dashboard.pl";
						}
						else {
							stdDialog.setHeader("Login: Failed, Please Try Again");
						}
	    				},
	    				failure: function(o){
	    					alert('ERROR! Connection to server failed! Please try again.');
	    					}
	    		    };
		var formObject = document.getElementById('login');
		YAHOO.util.Connect.setForm(formObject);
		var username = formObject.username.value;
		var password = formObject.password.value;
		if(username == ""){
			stdDialog.setHeader("Login: Username field is empty");
			var error = 1;
		}
		else if(password == ""){
			stdDialog.setHeader("Login: Password field is empty");
			var error = 1;
		}
		if(!error){
		var cObj = YAHOO.util.Connect.asyncRequest('POST', 'login.pl', loginCallback);
		}

	}, isDefault:true }];
		stdDialog.cfg.setProperty("buttons", buttons);
		stdDialog.cfg.setProperty("postmethod", 'async');
	    stdDialog.cfg.setProperty("text",'
<form id=login method=post action=login.pl>
<table>
<tr>
<td><b>Username:</b></td>
<td>
<input type=text name=username id=username></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<input type=password name=password id=pass>
<input type=hidden name=action value=login></td>
</tr>
</table>
</form>

');

		stdDialog.show();

}

Perl Script [login.pl]

#!/usr/bin/perl
use CGI qw(:standard);
$query = new CGI;

if($query->param('action') eq 'login'){
print "Context-type: text/html \n\n";
# Here is where we define the username and password for authent
 if($query->param('username') eq 'username' && $query->param('password') eq 'password'){
 print "ok,someRandomKeyShouldGoHere," . $query->param('username');
 }
 else {
  print "no";
 }
 exit;
}

  print header;
  print start_html(-title=>'Login',
                   -style=>{src=>'/scripts/yui/build/fonts/fonts.css'},
                   -script=>[{-type => 'text/javascript',-src =>'yui/build/yuiloader/yuiloader-min.js'},
{-type => 'text/javascript',-src =>'login.js'}],
                   -class=>'yui-skin-sam'
                   );
 print end_html;

With YUICalendar.js you can include the file and simply specify a class name to an imput field and instantly produce a pop-up calendar. Check out the project page on Google at http://code.google.com/yuicalendar/ for more details.

Here is a working example: EXAMPLE

In this example my task is to create a footer element that will stay on the bottom of the browser window during re-size and scroll events.View the completed project\n

CSS

First you will need to specify the position and size of your element.

#screenFooter {
  position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 25px;}

HTML

Assign your element an ID!

<div id="screenFooter">YuiCoder.com</div>

Javascript

Insert the following code to the bottom of the page just before the body tag.
In this example I am using the YUI Loader to speed up deployment of my examples. You do not need to user YUI Loader but remember you will need to load the yahoo, dom and event scripts from the YUI Library in order for this to work.

<!--
var loader = new YAHOO.util.YUILoader({
    require: ["dom","event"],
    loadOptional: true,
    onSuccess: function() {
    Ydom = YAHOO.util.Dom;

// Start LoadFooter Code
// Fires of the LoadFooter function when the browser dom is ready
Yevent.onDOMReady(LoadFooter);

// Scroll event listner
YAHOO.util.Event.addListener(window, 'scroll',
    function(){
       var Ydom = YAHOO.util.Dom;
       Ydom.setStyle(Ydom.get('screenFooter'),'visibility','hidden');
       LoadFooter();
      }
);

YAHOO.util.Event.addListener(window, 'resize', LoadFooter );
},
    timeout: 10000,
    combine: true
});
loader.insert();

function LoadFooter(){
// Get the footer element as an object
var footer = Ydom.get('screenFooter');
// Get the element loaded BEFORE the footer
var footer2 = Ydom.getPreviousSibling(footer);

    // Create an element just before the footer. This will ensure the footer does not hide anything
	//on the bottom of your page
    if(!Ydom.inDocument('footerBreak') ){
      var b = document.createElement('div');
          b.style.height = '37px';
          b.id = 'footerBreak';
       Ydom.insertAfter(b,footer2);
    }

    // Get the document scroll TOP position
    var sfS = Ydom.getDocumentScrollTop();
	// Get the document ViewPort size - subtract the footer size then add the scroll top position
    var sfH = Ydom.getViewportHeight() - 37 + sfS;
	// Note if you are dealing with an element that is smaller than 100% of the document viewport
	// add calculations for the getViewportWidth() for horizonal scrolling detection

	// Here we set the style properties of the footer
    Ydom.setStyle(footer,'position','absolute');
    Ydom.setStyle(footer,'top',sfH+'px');
    Ydom.setStyle(footer,'visibility','visible');
}

-->

//lets find the elements we need by finding all body elements that have the class yui-skin-sam
var elements = YAHOO.util.Dom.getElementsByClassName('yui-skin-sam', 'body');
//if you body does not have an ID then generate one usign the generateID method.
    var bodyid = YAHOO.util.Dom.generateId(elements[0],'body');
// Get the last child element of the body by searching for the body id we just created above.
    var bodyLastChild = YAHOO.util.Dom.getLastChild(bodyid);

// Now we create a DIV element using the standard javascript method createElement
		var b = document.createElement('div');
// Let YUI create and assign the new div elements id.
		var bottomid = YAHOO.util.Dom.generateId(b,'bottom');
    	b.href='#';
// Put some html in your div
		b.innerHTML = 'TESTER';
// Assign your div a class name of newClass so you can reference it in a style sheet.
		b.className = 'newClass';
// Attach the new DIV id to the element you are creating
		b.id = bottomid;
// Use YUI to insert the new div element afer the last child element of the body tag.
		YAHOO.util.Dom.insertAfter(b ,YAHOO.util.Dom.get(bodyLastChild));

Now to learn more on how to create ELEMENTS like divs and paragraphs check out the tutorials at W3cshools. This is sure to be a fun project to play and learn. Give it a try!

// First get the record set from the datatable.
var records = DATATABLE.getRecordSet();

// Let's count how many records we found
var len = records._records.length-1;
var total = 0;
// Loop through the record set getting the data from the coulumn and setting its value to "value"

for(i=0;i<=len;i++){
 //create the value you need so you can handle the data
var value = records._records[i]._oData.COLUMNNAME;
// now all you need to do is add up your values
total+=value;
}
//log it to the FireBug console
console.log(total);

Once you have found the value for the column from that point you can manipulate the data to your will.

AlertDialog = new YAHOO.widget.SimpleDialog("dlg1", {
  width: "200px",
  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.15},
  fixedcenter:true,
  modal:true,
  visible:false,
  close: true,
  constraintoviewport: true,
  buttons: [ { text:"close", handler: function(){this.hide();}, isDefault:true }],
  draggable:false,
                effect: [
                      { effect:YAHOO.widget.ContainerEffect.FADE,duration:0.1 }]
});

AlertDialog.setHeader("Alert");
AlertDialog.render(document.body);
window.alert = function(text) {
  AlertDialog.cfg.setProperty("text",text);
  AlertDialog.show();
};

Click HERE for an example:

A permanent solution!

If you would like to override the alert box throughout your entire site or application, save the code to your server in a public script folder. Example: as alertBox.js. Then load the script using YUI Get with-in the YUI Loader BEFORE firing off your init() routine. Here is an example.

Verify Installation:

I have included a console function that will send a warning to your FireBug application telling you that everything has loaded correctly. If you run this code and see the warning message in your FireBug console, then your code is installed correctly.

Adding your own code:

Replace the following line with your code and your ready to run.

console.warn('YUI Loaded');

Adding resources from YUI:

In order to use specific parts of the YUI framework you will need to request the files from the YUI CDN. To do this simply add the required YUI library to the require array as shown below.

"require: ["get","dom","event","datatable","animation"],

Things to remember

The YUI Loader may cause problems when working with older browsers such as IE6. Be sure to wrap you loader using the onDOMReady method like so.

Yevent.onDOMReady(init);

This will ensure that the browser has finished loading the DOM before firing off your scripts.

UPDATED (2009-07-22): “missing > in code and removed Yevent shortcuts”