Let’s take a look at what it takes to put a simple unordered list on a page with a refresh button to refresh the list without doing and page reload and then we’ll spruce it up a bit:

1. First we’ll need a URL that should return the content of the list and say we’re working in a crusty old CGI environment so we’ll call it /cgi-bin/friends_online.cgi and say it returns the list of your friends that are online:

<ul>
<li>Mr Bigglesworth</li>
<li>Austin Powers</li>
</ul>

2. Now on the page where we want to include the list of our friends that are online we’ll need to include prototype.js in the head section of the page:

<script src="/js/prototype.js" type="text/javascript"></script>

3. Let’s look at how simple this can be:

<div id="friends_online">
... friends online ...
</div>
<a href="javascript:var x=new Ajax.Updater('friends_online','/cgi-bin/friends_online.cgi')">Refresh</a>

When you hit the refresh button the contents of the friends_online div will be replaced with the output from friends_online.cgi, it’s that easy! Now let’s spruce it up a bit.

4. Since we’re not concerned with server load in this example we’ll populate the dynamic list using Ajax the first time the page loads as well. While we’re at it let’s also hide the Refresh button and friends_online div while the refresh is happening and display an animated loading gif. Here’s what that would look like:

<div id="friends_online"></div>
<img id="loading" src="loading.gif" alt="Loading"/>
<a id="refresh" href="javascript:friendsOnline()">Refresh</a>

<script type="text/javascript">
function friendsOnline() {
	$('friends_online').style.display = 'none';
	$('refresh').style.display = 'none';
	$('loading').style.display = 'inline';
	new Ajax.Updater('friends_online', '/cgi-bin/friends_online.cgi', {
		parameters: 'key=value&key2=value2',
		method: 'get',
		onComplete: function () {
			$('friends_online').style.display = 'block';
			$('refresh').style.display = 'inline';
			$('loading').style.display = 'none';
		}
	});
}
Event.observe(window, 'load', friendsOnline, false); // This calls friendsOnline on page load
</script>

I put in the parameters just to illustrate how to pass parameters with the URL. If I were to take this one step further I’d put the Javascript into a separate .js file and use Script.aculo.us Effects.js BlindUp and BlindDown to animate hiding and un-hiding the friends_online div. Hopefully you can see how much power Prototype gives you and how easy it can be to Ajax enable a legacy web application!

To address this I wrote a simple javascript solution. Here’s how it works:

1. I put my deferredcontent.js code that I wrote in the head tag
<script type=”text/javascript” src=”/js/deferredcontent.js”></script>
2. I added an onload=”relocateDeferredContent();” to the body tag
3. I put an empty div tag where I ultimately wanted the content to end up. E.g <div id=”adleaderboard”></div>
4. I put the deferred content in a display:none div just before the closing body tag at the very end of the page and put each block of code I wanted to relocate in a div with an id of defer-IDFROMSTEP3

<div style=”display:none”>
<div id=”defer-adleaderboard”>
[Ad code goes here]
</div>
</div>

If you want to see it in action you can see it on this San Francisco schools page.

CSS offers us a lot of power to style and decorate our pages with images, however, replacing text with an image is one gap not well addressed by CSS such that you often see sites doing:

<a href=”/”><img alt=”Home” src=”home.gif”/></a>

which is obviously bad for 2 reasons:

1. It violates the separation of content and design by including a design element in your HTML
2. Your SEO will suffer because image alt tags don’t carry as much weight as real text

As a result a number of people have come up with clever image replacement techniques in CSS. It began in 2003 with the Fahrner Image Replacement technique (or Classic FIR), however, the technique I currently favor is the Mike Rundle’s Phark revised method which:

1. Works well cross browser (but be sure to test in IE 5 for possible issues if you’re still supporting it)
2. Works with a screen reader such as JAWS for accessibility
3. Works well for SEO (many techniques style the text with display:none which likely won’t work with the next generation of crawlers such as Google’s new Mozilla based crawler)

Taking the example above, the correct approach would be as follows:

<a id=”home” href=”/”>Home</a>

Then apply the Phark revised method via CSS:

#home {
  display: block;
  text-indent: -9000px;
  background: url(/images/home.gif) no-repeat;
  height: 25px;
  width: 100px;
}

Here’s the result:

About Us

Now we’ve replaced the text with an image yet still kept the separation of content and design clean. I stated that it’s bad design to use image tags in your HTML but I’d like to qualify that, it’s fine if your “content” is an image such as a product photograph in a web catalog, a graph, or a headshot in your user profile. Also I think it’s fine to bail on image replacement if you start wasting a lot of time in CSS layout land, it’s just good to start with the clean text based approach first and use it until it becomes impractical.