Dynamic resource loading is one of the keys to have a performance happy web application. There are generally three different criteria we must address when making a request: cross domain security policies, asynchronous/synchronous (will it block the host page while loading), and whether or not events are triggered when the request completes.

If the resource and host page are on the same domain, obviously XMLHttpRequest works the best. We can control whether or not the resource is loaded asynchronously or synchronously, and we know exactly when it gets done.

If the resource and host page are on different domains (increasingly more common with CDN’s), our options narrow. Loading the JavaScript is a solved problem, just use the onload event on the <script> tag and you’re good to go (onreadystatechange for IE). But CSS is more complicated.

Existing Solutions

In all of the library source code I evaluated, Internet Explorer didn’t cause any issues. It fires both the onload and onreadystatechange events for <link> nodes. Obviously this is ideal behavior, and IE got it right. But what about Firefox and Safari/Chrome?

YUI 2.8.1 and 3.1.1

Original Source

// FireFox does not support the onload event for link nodes, so there is
// no way to make the css requests synchronous. This means that the css 
// rules in multiple files could be applied out of order in this browser
// if a later request returns before an earlier one.  Safari too.
if ((ua.webkit || ua.gecko) && q.type === "css") {
    _next(id, url);
}

I wouldn’t be surprised if the commit log there was from Bon Jovi; that code is living on a prayer.

LazyLoad

Original Source

// Gecko and WebKit don't support the onload event on link nodes. In
// WebKit, we can poll for changes to document.styleSheets to figure out
// when stylesheets have loaded, but in Gecko we just have to finish
// after a brief delay and hope for the best.
if (ua.webkit) {
    p.urls[i] = node.href; // resolve relative URLs (or polling won't work)
    poll();
} else {
    setTimeout(_finish, 50 * len);
}

Better, closer, warmer. This includes a nice method for working with webkit browsers. The poll method compares document.styleSheets, since Webkit has the nice option of only appending to the styleSheets object when the styleSheet has successfully loaded.

So we have working solutions for IE and Safari/Chrome. The only unsolved piece of the puzzle here is Firefox.

This post from the same author as LazyLoad also describes another solution which involves modifying the source CSS and polling against it. But that’s not really ideal. Can we do better?

Solution

Here’s what I came up with (using jQuery for brevity, note that this solution only fixes Firefox, and does not incorporate the above already solved solutions):

var url = 'css.php';
    id = 'dynamicCss' + (new Date).getTime();
 
$('<style/>').attr({
    id: id,
    type: 'text/css'
}).html('@import url(' + url + ')').appendTo(document.getElementsByTagName('head')[0]);
 
function poll()
{
    try {
        var sheets = document.styleSheets;
        for(var j=0, k=sheets.length; j<k; j++) {
            if(sheets[j].ownerNode.id == id) {
                sheets[j].cssRules;
            }
        }
        // If you made it here, success!
        alert('success!');
    } catch(e) {
        // Keep polling
        window.setTimeout(poll, 50);
    }
}
 
window.setTimeout(poll, 50);

See this demo in action. (Firefox only)

Update: After much joy and celebration, I have discovered that an approach similar to the above was written by Oleg Slobodskoi in his xLazyLoader plugin for jQuery. It shouldn’t be surprising that two independent developers might reach the same solution, and is just more proof that software patents are stupid. :)

Generally when exploring a development opportunity, I tend to prioritize my adventures towards things that are supported in Internet Explorer first. This often has the biggest cross-browser payoff, since the other browser vendors tend to have a quicker draw than the Microsoft Team. However, surprisingly enough, this writing-mode study proved the opposite to be true. It seems very interesting that Microsoft has decided to implement a portion of the CSS 3 specification, given its general stance of moving slower than an iceberg to avoid “breaking the web.” But I, for one, welcome our new choose-your-own-adventure standards loving overlords.

As far as my tests go, the only browser to support the writing-mode property at all is Internet Explorer, which was very surprising. At it’s heart, though, writing-mode is just shorthand for two other properties: direction and block-progression. Luckily, Firefox, Safari, Chrome and IE back through at least version 6 support the direction property and have proprietary options for rotation, which allows for emulation of a few of the unsupported writing-mode‘s, but not all of them. The missing piece of writing-mode emulation belongs to the block-progression property, which isn’t supported by anyone, and would allow elements to flow reverse vertically (start at the bottom of a block and flow upwards).

It’s important to note that while IE8 has really set the bar for implementation here and has chosen to support writing-mode: lr-bt and writing-mode: rl-bt, they aren’t used to display any known language text. They’re just included for completeness, and aren’t a part of the W3C CSS 3 Text Module specification.

View the Demo / Test Page

Compatibility Table

CSS Code for Emulation

// Default

direction: rtl;

// Not possible using W3C spec

// Not possible using W3C spec

// Not possible using W3C spec

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

// Not possible using W3C spec

direction: rtl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Conclusion

Given that 4 of the 6 known writing modes are available or available through CSS emulation means we’re in pretty good shape on the internationalization front. Consulting the Microsoft provided table for common use cases, we’re only in trouble when trying to use the “Mongolian script writing system” and an “Arabic script block quote embedded in Mongolian script document.”

In some far fetched fantasy-world legacy application where a page may use tables for layout, I could see an application team possibly using the direction property to redistribute the tables for a print stylesheet. But that certainly wouldn’t be a common use case, since using CSS for layouts is going to give you much more flexibility in that regard. If you can think of any other off the wall uses for writing-mode or direction, I’d love to hear them!

Related

• Very complete article on CSS 3 writing-mode, including some direction properties that don’t exist in the specification (like ttb, ltr-ttb, and ltr-btt)
• Bugzilla Bug for writing-mode in Firefox
• As of the time of this writing, I was unable to find any results for writing-mode on the Webkit bug tracker.

Take a look at the Dingbats section on fontsquirrel to get your brain going in the same direction.

Webdings is a symbol font designed in 1997 as a response to the need of Web designers for a fast and easy method of incorporating graphics in their pages.
…

Webdings is ideal for enriching the appearance of a Web page. Because it’s a font, it can be installed on the user’s system, (or embedded in the document itself) is fully scaleable [sic] and quick to render. It’s a perfect way of including graphics on your site without making users wait for lots of graphic files to download.

– Source Microsoft Typography

Microsoft was onto something here, and there is a nice parallel that can be drawn between the font and a CSS sprite: namely that multiple images are stored under the guise of a single HTTP request. So, why not create our own font and use it as a CSS sprite? Each character in the font (glyph) will be a single image in the sprite.

Why is this awesome?

• We can change the color of our font using nothing but CSS color. This is a big one. We don’t have to have separate images for hover states! And if we want to change the color scheme, there are no new images to generate and we don’t have to make any changes to the font to do so.
• Don’t have to monkey around with difficult to maintain CSS positioning code.
• Fonts scale, graphics don’t. Zooming in on a graphic will result in a pixelated image, but fonts will be smooth like a 6 blade razor shave. Try zooming on the demo file below.

Why is this not awesome?

• Font glyphs can only contain one color.
• May experience the Flash of unstyled text (FOUT) while the font is loading.
• Extra markup required for IE6 and IE7. While @font-face is supported in all non-extinct versions of IE, each @font-face sprite requires a corresponding text character on the screen. For instance, <span style="font-family: MyCustomFont;">A</span>, the A is required to display the @font-face Sprite stored under the A glyph.
  
  Luckily, in most browsers we can inject a character using CSS :after/:before and the content property. Unfortunately, this is not supported in IE6 or IE7. I haven’t investigated whether or not this might be solved using other means (CSS expressions) yet.
• Safari asks for permission to use the font with a scary popup box, which I assume is a security precaution gleaned from the Windows Vista playbook.

Demo

The following jQuery UI Icons are currently used in jQuery UI and are stored in one big CSS sprite.

It was pretty trivial to create a font with a subset of the jQuery UI icons (only the first 20, just a proof of concept here) using the wonderful FontStruct utility. Then, I took the TTF generated by FontStruct and plugged it into the completely lovely FontSquirrel @font-face Kit Generator. That gave me everything I needed for a fully cross-browser test.

• View the Demo

Let me know what you think!

Read more about @font-face support from Paul Irish.

1. If you want to change videos dynamically by loading a new video into an existing player, you must use the Chromeless player (which requires an API key). The loadVideoById() method is only available in the Chromeless player. Whatever you do, don’t try to dynamically destroy and create a new player, this will cause JavaScript errors in Internet Explorer (although not Firefox).
2. CSS properties: When the player has the css display: none applied, it will not play. When the css visibility: hidden is applied, the video will still play, but will not be shown on the screen. If you wanted a headless player, like what the music search engine Songza does, you’d want to take this approach. Word of warning, there’s some tricky shit going on when you try to dynamically change these properties on a player and run commands on the player at the same time (or close to the same). For instance, I got into a sticky situation where I’d try to show the player and load a new video into the player in the same method. I had to separate these with a timeout to get both to run without error.
3. To load, you must play. Unfortunately, I wanted to pre-load the video without actually playing the video. This is unsupported. To handle this, I had to play, then pause after a timeout (using window.setTimeout). Not the prettiest, but it seems to work. Obviously the API in this case has very low cohesion, as the loadVideoById method ALSO plays the video, not simply doing ONLY what the method name suggests.
4. Forcing a global? When the player first loads after you’ve used the SWFObject embedSWF() command, it will call the function onYouTubePlayerReady(), which you can’t customize. It must be that function name, and it must be in the global namespace. Keep in mind that onYouTubePlayerReady() is called every time the player is shown (when it was otherwise hidden using the css display: none)

Unfortunately, there is some voodoo going on here that I don’t fully understand. I’m not a flash guru, nor have I ever claimed to be. But there have been a few bugs in my experience with the API that have led me to believe that it’s not quite there yet. Maybe my use cases were a bit unique, but they weren’t that extreme. I should be able to hide and show the player without error. I should be able to destroy the player without error. I should be able to load a video without playing it.

But hey, it works.

JavaScript

Looking at the source code of the Flickr home page is actually pretty strange. For one, there is only one JavaScript source code file (other than the advertising scripts), a solution for PNG Alpha Transparency in Internet Explorer, included as an HTML Component. The source for the PNG Behavior script (credit to Erik Arvidsson) is unchanged, with the exception of the removal of some extraneous comments, but curiously enough no whitespace removed (a suggestion to save them a few bucks in bandwidth). Looking at their HTML source, they seem to emphasize whitespace and readability over bandwidth savings, which seems fine to me. At least their visitors (you and I) can more easily learn something from their code.

CSS
They’ve taken the same route as one of the tips from Jonathan Snook, and declared all styles for an element on a single line. They use your standard css to reset to a base starting point, much like YUI’s Reset CSS we’re all familiar with. One interesting declaration I noticed prominently inside of their CSS was the .Butt css class, declared on their primary Search form button. I’m curious to know the semantic meaning behind that one.

They use the tan hack as well to isolate a CSS declaration for IE browsers:

* html #featured-image cite {bottom: -1px;}

This is to workaround for an IE limitation to absolutely positioning content at the bottom of a relatively positioned div, in this case the black box containing the credits (or citation, hence the cite tag) inside of the feature image.

Another interesting CSS Hack they’ve employed involves the line-height for <a> tags containing Unicode characters to select different languages. It starts out like Dustin Diaz’s min-height hack, but throws a loop.

height: 0px !important;
height /**/:13px;

I’m not familiar with the /**/ syntax, and would really appreciate any information someone has on what platform this is targeting. A comment would be nice!

HTML

Standard here, and they have some nice meta tags for the I-phone:

<meta name="viewport" content="width=950" />

All in all, it’s short and sweet code for a home page. It’s nice to see such clean code with an eye towards standards on a commercially successful site, many props to their programmers. I’m scared to do my next in the series, because I’m 100% sure it won’t be as nice of a read as Flickr was.

#theChurch {}
#theChurch #theSteeple {}
#theChurch .door[state="open"] .people { visibility: visible; }
#theChurch #theParson { display: none; }
#theChurch > .upstairs #theParson:active { display: block; }
#theChurch #theParson:lang(prayers) { display: block; }

The above code poem is released under the BSD license. To use in production environment without error, do not include an element with an id attribute of “theChurch”. Obviously I’m kidding, don’t use this code. Not even for enterprise software.

PHING! Party on Wayne. Party on Garth!

If you’ve never used Phing, it’s an automation tool for PHP that is a port of Java’s ANT Build tool. But it’s not just for building (obviously, that’d be silly). You can hook all kinds of tasks into Phing: unit tests for your PHP code (you’re doing test driven development, aren’t you?), building your documentation, etc. But today, let’s look at automation of my favorite front end development tasks: packing (minimizing) our JavaScript and CSS.

To do this, I’m going to hook you up with two Filters for Phing that will use the PHP port of Dean Edwards JavaScript Packer, and the PHP class CSSTidy.

Here’s what you’ll be responsible for:

1. Download both CSSTidy and the PHP port of Packer using the links above.
2. Download Phing if you don’t already have it, and install it. Note the following change I had to make to my Phing \bin\phing.bat file to get it working: Change set PHP_CLASSPATH="%PHING_HOME%\classes" to remove the quotes: set PHP_CLASSPATH=%PHING_HOME%\classes
3. Download the two Filters I made for Phing: JSPackerFilter.phps and CssTidyFilter.phps, change the extensions to .php and copy into your phing directory \classes\phing\filters\
4. Change the path in the include_once declaration at the top of each of the files to point to the csstidy and packer libraries you downloaded above:

   include_once "C:\Lib\packer.php-1.0\class.JavaScriptPacker.php";
   

   include_once "C:\Lib\csstidy-1.3\class.csstidy.php";

5. Get a working build file set up to point the directories your project is using. Here is a sample I made:

   <project name="testProject" default="pack-all">
   	<target name="pack-all" depends="pack-javascript,pack-css"/>
   	<target name="pack-javascript">
   		<copy todir="./Web/js" overwrite="true">
   			<fileset dir="../Web/js">
   				<include name="*.js" />
   			</fileset>
    
   			<filterchain>
   				<filterreader classname="phing.filters.JSPackerFilter">
   				  <param name="encoding" value="62"/><!-- 0,10,62,95 or 'None', 'Numeric', 'Normal', 'High ASCII'. -->
   				  <param name="fastDecode" value="true"/><!-- include the fast decoder in the packed result -->
   				  <param name="specialCharacters" value="false"/><!-- have you flagged your private and local variables in the script -->
   				</filterreader>
   			</filterchain>
   		</copy>
   	</target>
   	<target name="pack-css">
   		<copy todir="./Web/css" overwrite="true">
   			<fileset dir="../Web/css">
   				<include name="*.css" />
   			</fileset>
    
   			<filterchain>
   				<filterreader classname="phing.filters.CssTidyFilter">
   					<param name="remove_last_;" value="true"/>
   					<param name="preserveCss" value="false"/>
   					<param name="template" value="high_compression"/>
   				</filterreader>
   			</filterchain>
   		</copy>
   	</target>
   </project>

   Templates for CssTidy include: low_compression, default, high_compression (declarations are limited to one line apiece), highest_compression (everything is put on one line).

   The above build file is set up to work with the following directory structure:

   • Build
     • Web
       • css
       • js
     • build.xml
   • Web
     • css
     • js

   Files are copied from the source in /Web to the /Build/Web directory. I hope that you can see from the build.xml file above that the target directory is specified in the copy tag, todir attribute.

   <copy todir="./Web/js" overwrite="true">

   and the source directory is specified in the fileset tag, dir attribute.

   <fileset dir="../Web/css">
   	<include name="*.css" />
   </fileset>

And then, all you need to do is navigate to the directory holding your build.xml and run the phing command (if you have phing in your path. If not, you can use an absolute link to phing, for example c:\software\phing\bin\phing). Your minimized javascript and css will be in the Build directory!

Do you want to fit more content onto your DataTable, but don’t know how? Do you wish that you had fewer columns, or more horizontal screen-estate? Well now you can enlarge your table easily with these simple functions! Instead of adding more information into additional columns, we have used our patented method of not actually patenting anything to bring you a secret formula that will allow you to dynamically insert rows into your table, designed for holding additional, non-constrained customizable content!

Do you mean to tell me that your formula will give that special lady in your life the DataTable that she has always wanted?

Of course! In fact, we guarantee this DataTable to satisfy all of the women you know and don’t know in the world or we’ll give you a full refund of the purchase price!

Wow! How does it work?

When you click on a row in the DataTable, it inserts a child row beneath the row with an HTML string passed in to populate the dynamic content. When you click on the parent row or the new row that was inserted, the content disappears! It’s that easy! You don’t have to apply any gross awful smelling creams, or take any large horse-sized pills for this to work! You literally only use the following code to do it:

Usage Code:

var myDataTable = new YAHOO.widget.DataTable("myContainer",myColumnSet,myDataSource);  
myDataTable.subscribe("cellClickEvent", myDataTable.onEventSelectRow); // make sure you're firing the row selection event
myDataTable.subscribe("cellClickEvent", function( e ) {
   var myCustomHtml = 'Hello, this is my expanded content.<br />:-)<br />'; // generate the string, could use an ajax call if you wanted.
   YAHOO.ymod.datatable.clickAndExpand.call( this, e, myCustomHtml ); // if you do use an ajax call, this function returns a reference to the newly created div that you can put the ajax results into.
} );

Library Code:

YAHOO.namespace( 'YAHOO.ymod.datatable' );
YAHOO.ymod.datatable.clickAndExpand = function( e, expandedHtml )
{
	var selectedRows = this.getSelectedRows();
	if( selectedRows.length > 0 )
	{
		if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'ymod-expandedData' ) )
		{
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ].previousSibling, 'expanded' );
			selectedRows[ 0 ].parentNode.removeChild( selectedRows[ 0 ] );
		} else if( !YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'ymod-expanded' ) ) {
			var newRow = document.createElement( 'tr' );
			var newCell = document.createElement( 'td' );
			var newDiv = document.createElement( 'div' );
			YAHOO.util.Dom.addClass( newDiv, 'ymod-expandedDataContent' );
			if( expandedHtml != null ) newDiv.innerHTML = expandedHtml;
			newCell.appendChild( newDiv );
			newCell.colSpan = selectedRows[ 0 ].childNodes.length;
			newRow.appendChild( newCell );		
			YAHOO.util.Dom.addClass( newRow, 'ymod-expandedData' );
			if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'yui-dt-odd' ) ) YAHOO.util.Dom.addClass( newRow, 'yui-dt-odd' );
			else if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'yui-dt-even' ) ) YAHOO.util.Dom.addClass( newRow, 'yui-dt-even' );
			YAHOO.util.Dom.addClass( selectedRows[ 0 ], 'ymod-expanded' );
			selectedRows[ 0 ].parentNode.insertBefore( newRow, selectedRows[ 0 ].nextSibling );
			YAHOO.util.Event.addListener( newRow, 'click', function( e )
			{
				YAHOO.ymod.datatable.collapseRow( this );
				YAHOO.util.Event.stopEvent( e );
			} );
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'yui-dt-selected' );
			YAHOO.util.Event.stopEvent( e );
			return newDiv;
		} else {
			selectedRows[ 0 ].parentNode.removeChild( selectedRows[ 0 ].nextSibling );
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'ymod-expanded' );
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'yui-dt-selected' );
			YAHOO.util.Event.stopEvent( e );
		}
	}
};
 
// pass in the expanded content, NOT the parent row.
YAHOO.ymod.datatable.collapseRow = function( row )
{
	YAHOO.util.Dom.removeClass( row.previousSibling, 'ymod-expanded' );
	YAHOO.util.Dom.removeClass( row.previousSibling, 'yui-dt-selected' );
	row.parentNode.removeChild( row );
};

Customize the CSS, if desired.

.yui-dt-table tr.ymod-expandedData { background-color: #bdcede; cursor: pointer; }
.yui-dt-table tr.ymod-expandedData td { padding-right: 5px; padding-bottom: 5px; white-space: normal; overflow: visible; }
.yui-dt-table tr.ymod-expanded { background-color: #bdcede; }
.yui-dt-table tr.ymod-expanded td { border-bottom: 0; }
.yui-dt-table div.ymod-expandedDataContent { background-color: #f4f4f4; border: 1px inset #aaa; padding: 2px 5px; white-space: normal; zoom: 1; overflow: hidden; }

You might even want to put a little + and – into the first column of each row to give a visual cue that there is more information for display available on click.

Earlier I published an article entitled Problems with the YUI DataTable. Now we’re going to work out those problems together, through better communication and more effective problem solving techniques. We’re going to save your marriage.

Earlier I had stated that there were a few problems with the DataTable, in its current form. Let’s review (but not play the blame game).

• Bug #1: Table headers weren’t lining up correctly in Firefox (personal ignorance on Box Models)
• Bug #2: Single Select bug where multiple rows were being selected when column was sorted (All browsers, Sortable and SingleSelect Tables)
• Bug #3: Header displayed out of document flow when the window was resized (IE6, Scrollable Tables)
• Bug #4: Content was being displayed approximately 60-70 pixels inside the bottom table boundary. (Firefox, Scrollable Tables) Note the position of the ‘Top’ links in the test document below.
• Bug #5: More of a limitation than a bug, the DataTable does not allow a fixed width table with horizontal overflow. Say you have a table that you have fixed column widths for, but if the width of the real estate available for the table is less than this minimum, the table should overflow with a scroll bar, but at the same time showing the column headers if you scroll vertically. A picture is better:
  

See the following test document for relevant table tests. (Note that for the purposes of testing, I’ve decided to test all combinations of the Top 3 DataTable features: scrolling, nested table headers, and sorting)

Just like your favorite professor, now I’m going to post the Solutions:

Bug #1: What is your Box Model?

Use the following JavaScript code to tell if you’re in Standards Mode or Quirks Mode:

alert( document.compatMode=='CSS1Compat' ? 'Standards Mode' : 'Quirks Mode' );

Standards mode forces your document into using the W3C Box Model, which is currently the standard. The W3C Box Model means any width declarations you make in your CSS code will not include padding, border, or margins. So if you put padding on your table cells and headers, it will need to be added on separately to the total width of your table.

Bug #2: Someone has posted the solution on the Sourceforge Bug Tracker here. (This is included in the DataTable javascript file below)

Bug #3, #4, and #5: I have produced an alternate DataTable file that fixes these bugs using JavaScript code. All lines that were added or changed are commented with //ADDED or //CHANGED

Developed in and last tested with YUI version 2.2.2.

Download it here:
Full (169 KB): ymod-datatable-beta.js
Minimized using JSMIN (67 KB): ymod-datatable-beta-min.js

The original and minimized YUI DataTable files are 166 KB and 66 KB respectively.

See the fluid width DataTables in action here.

A few notes on doing a fixed width DataTable using the code provided above. The total width of the table body must be 16px less than the width of the header, if you have vertical scrolling (to account for the scrollbar). So, if the total width of your header is 800px, the total width of your body must be 784px (put the last table cell as 16px smaller).

Here’s the CSS to go along with a horizontal scrolling DataTable:

.yui-dt-table th, .yui-dt-table td { padding: 2px 0 2px 5px; vertical-align: top; }
.yui-dt-table th, .yui-dt-table tr.yui-dt-first td { width: 100px; } /* table header and only the first row (for drag and drop) */
.ymod-scrollingBody .yui-dt-table tr.yui-dt-first td.yui-dt-last { width: 84px; } /* last table cell (for crappy scrollbar problem) */
.yui-dt-table .yui-dt-even {background-color:#fff;}
.yui-dt-table .yui-dt-odd {background-color:#e0dfe0;}
.yui-dt-table .yui-dt-selected {background-color:#bdcede;}
.yui-dt-table thead {background-color:#933;color:#fff;}
.yui-dt-table th a {color:#fff ! important;}
.ymod-scrollingHeader {
	width: 100%;
	height: 20px;
	overflow: hidden;
	position: relative;
}
.ymod-nestedHeaders {
	height: 40px; /* gotta set this manually, unfortunately */
}
.ymod-scrollingHeader table {
	position: absolute;
	top: 0;
	left: 0;
}
.ymod-scrollingBody {
	width: 100%;
	overflow: auto;
	height: 160px;
}
.ymod-scrollingHeader table { width: 800px; } /* Set your widths! */
.ymod-scrollingBody table { width: 784px; }

Typically, when creating an I-Frame shim, you’re going to create the i-frame dynamically using document.createElement. Let’s start out with some successful code.

var iframeShim = document.createElement( 'iframe' );
iframeShim.setAttribute( 'src', 'javascript:"";' );
iframeShim.setAttribute( 'frameBorder', '0' );

Now for some caveats you might have encountered with code not matching the above:

I-Frame frameBorder attribute
Are you trying to get rid of that nasty i-frame border in Internet Explorer 6 (IE6)? Tried CSS properties? Tried setting the frameBorder attribute? It turns out that when setting the frameBorder attribute, the name of the attribute is case sensitive. Using frameborder will not work correctly, but using frameBorder (with a capital B) will give the desired result. [Source: FlashApe]

HTTPS and I-Frame src attribute
Is your page hosted on a secure domain (https instead of just http)? Is the dynamically created iframe causing the following error message in Internet Explorer?

This page contains both secure and nonsecure items. Do you want to display the nonsecure items?

Some have suggested that changing the src attribute to point to a blank html page with no content is the solution, but that’s an extra http request on your page that is unnecessary. Others have suggested that that changing the src attribute to javascript:false works. It does, in fact, but writes the text ‘false’ to your iframe content. Others have suggested javascript:void(0) as your src attribute value [Source: ewbi.develops], but some Internet Explorer clients still have secure and nonsecure items alert popup. I have not figured out the factors that separate these Internet Explorer clients.

Update: The correct solution is in face setting “javascript:false;document.write(“”);” as your src value, as I found in the jQuery BlockUI plugin. This is a silver bullet fix that will avoid all the problems I have encountered.

Update Again: I have revisited this problem and it looks like (as mentioned in the comments) there is a problem with the solution presented in the first update (infinite load). After researching some DOMContentLoaded solutions, I thought to try the “//:” source they were attempting for their deferred script source. Alas, it didn’t work. However, javascript:""; does work, so the above solution has been modified. Keep in mind, the whole point of this solution is to avoid an additional unnecessary HTTP request.

#modules .yui-b{position:static;display:block;margin:0 0 1em 0;float:none;width:auto;overflow:hidden;}
.yui-gb .yui-u{float:left;margin-left:2%;*margin-left:1.895%;width:32%;}
.yui-gb div.first{margin-left:0;}
#modules,.yui-gb{zoom:1;}

This code includes identical Class names taken from the Yahoo User Interface library Grids CSS component. Here is the source in the grids.css file from Yahoo (truncated for simplicity).

#yui-main .yui-b{position:static;}
.yui-t7 #yui-main .yui-b {
	display:block;margin:0 0 1em 0;
}
#yui-main .yui-b {float:none;width:auto;}
.yui-gb .yui-u{float:left;margin-left:2%;*margin-left:1.895%;width:32%;}
.yui-gb div.first{margin-left:0;}
#bd,.yui-gb{zoom:1;}

Obviously, it’s the same code, with a few minor differences.

The interesting thing to note is that the YUI Grids CSS source code is licensed under a BSD license, which includes the following provisions:

Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.

The copyright notice they’re referring to is not included anywhere on the Google Personalized Homepage (and would seem to be a violation of the license). Now this may seem like a small infraction when we’re just talking about 4 lines of CSS code. But really, if they think the code is good enough that they will use it in such a prominent way and not write it from scratch using their own means, they should follow the licensing agreements stipulated.

Update
Google has added the BSD license statement and attribution to Yahoo in their CSS file (ig.css):

/* ===============BEGIN BSD LICENSED PORTION============= */
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.0
*/
 
#modules .yui-b {
  position:static;
  display:block;
  margin:0 0 1em 0;
  float:none;
  width:auto;
  overflow:hidden;
}
.yui-gb .yui-u {
  float:left;
  margin-left:2%;
  *margin-left:1.895%;
  width:32%;
}
.yui-gb div.first {
  margin-left:0;
}
#modules,.yui-gb {
  zoom:1;
}
/* ===============END BSD LICENSED PORTION============= */

Sorry to everyone visiting the page for the extra millisecond or two it will take to load these comments.

Minimum Feature Set:

• Client-Side Sorting: I don’t want it to do an XMLHttpRequest to sort the data, I want it to be done all clientside.
• Simple inline editing: Edit a field in the table right there on the table. I hadn’t established what types of data I would need to edit yet.
• Data Sources: load from a native JavaScript array or a XMLHttpRequest returning XML or JSON.
• Data Type Sort Algorithms: at the very minimum different sorting algorithms for numeric columns and string columns.
• Hierarchical Columns: group column headers together under a parent header.
• Easily customizable: must be able to customize the look and feel of the grid easily using CSS and not by editing Javascript.
• Header Freeze: If I have overflow on my table vertically causing a scroll bar, I want the table headers to remain shown at the top of the table while I scroll from top to bottom.
• Custom Cell Rendering: I have the data I’m loading, but I want to change how it looks when it is rendered to the table. Common for date formatting.

Luxury Feature Set:

• Resizeable Columns: change the width of a column by dragging on the column header’s right border.
• Movable Columns: dragging a column will cause it to be moved on the table (TIBCO General Interface supports this).
• Custom Sort Algorithm: write my own algorithm to specify how data is sorted, or provide a way to do multi-column sorting (sort within one column, ties are sorted by another column, and so on).
• Dynamic Paging (don’t make me click numbered links, load the data automatically when I scroll) both on the client (dynamically insert only what I’m looking at and remove what I’ve scrolled past) and using the server (load more data through an XMLHttpRequest)
• Column Freeze: if the table is going to scroll horizontally, allow the developer to freeze a column or multiple columns so that they are shown when scrolling from left to right.

Evaluation of Options: How does the YUI DataTable stack up?

Basic Items: Client-Side Sorting, Simple inline editing, Data Sources, Data Type Sort Algorithms (stock types not yet implemented out of the box), Hierarchical Columns, Header Freeze (buggy), Custom Cell Rendering, and is easily customizable with CSS.

Luxury Items: Resizeable Columns, Movable Columns (not supported), Custom Sort Algorithms are supported (you can right your own Data Type Sort Algorithms with this feature), Dynamic Paging (manually, not dynamic), Column Freeze (not supported)

Problems:

• Any sort of fixed width table is going to be problematic. Putting a fixed width on the table causes the table headers to be misaligned with the associated table data. It’s a mess. The only viable option here is to let the table do it’s own width calculations. You can’t even set the column widths manually using the {width} variable as suggested when using a fixed width table.
• Data Type Sort Algorithms supposedly work from the column type, but this feature is documented in the code as being a TODO. All columns are sorted by a string datatype, meaning that if your column is numeric and you had the following rows: { 3, 7, 40 }, the sort result would be { 3, 40, 7 }.
• Header Freeze was problematic. Implementing the {scrollable=true} feature as recommended by the documentation causes the table headers to be misaligned with the data in a fixed width table.
• Paging uses the old school numbers method. This wasn’t a deal breaker, since I classified this feature as a luxury item.

Granted, the DataTable in it’s current form is a beta component, but that 0.5 MB ExtJS hit is looking pretty nice right now.

Minor Update: to do a fixed width table that will overflow horizontally, this is the method you can use:

div#dataTableId { /* change this to whatever id you're using to hold the dataTable */
	width:520px; /* put in your own fixed width */
	overflow-x:auto;
	overflow-y:hidden;
}
.yui-dt-headtext, .yui-dt-headcontainer {
	position: static; /* without this declaration, the headers weren't horizontally scrolling with the data in IE6 */
}