Ajax Usability: Tab History

Today’s tip gleaned from my experience in building the latest Circle Six Design website is more of a hint, or suggestion, than a how-to. It’s mostly about javascript, and my javascript is pretty crazy for this, mostly because I’m not very experienced with javascript and it’s kind of hacked. However, what I got working is worth sharing…

Why I’m Obsessing

After I made the initial redesign live, I told my mother about it. One of the first pieces of feedback she gave me was a note of frustration regarding the fact that when she hit the back button from the tabbed portfolio browser, she was unexpectedly dumped from the portfolio page. This has been a sore spot for me with Ajax tabs for a long time, so I set out to fix it.

I found many references to a framework called “Really Simple History” by Brad Neuberg, which was supposed to be located at codinginparadise.org. Which, as of this writing, is unreachable. I finally found a copy of the framework, after hours of searching, and tried to integrate it into wordpress. I eventually got it to work, and it wasn’t as difficult as I made it.

What the framework does is combine the various techniques, many of which stem from Ajax Patterns, for forcing the creation of a history in different browsers. It supports most major browsers except for Safari. There is supposedly some progress being made on that front, but again, the articles are located at Brad’s site and I can’t get to them. Anyway, it uses window.location.hash in Firefox and an iframe trick in Explorer to create the effect of having a history as you tab through an Ajax site. It also has the benefit of making the tabs bookmarkable.

What I had to do to make this work with Wordpress is make the js files into js.php files and add this to the header:

Header Code for dhtmlHistory.js.php

< ?php
ob_start ("ob_gzhandler");
header("Cache-Control: must-revalidate");
$offset = 60*60*24*60;
$ExpStr = "Expires: ".gmdate("D, d M Y H:i:s",time() + $offset)." GMT";
header($ExpStr);
header('Content-Type: text/javascript; charset: UTF-8');

require("../../../../wp-blog-header.php");
?>

Basically, I just needed to get the blog header loaded for what comes next, and set some cache control options (which may be unnecessary). Next step was to find the references in the file to other files and insert a bloginfo command to get the filepaths correct. For example:

bloginfo Replacements

// change the hidden iframe's location if on IE
if (self.isInternetExplorer())
   self.iframe.src = "< ?php bloginfo('template_url');  ?>/framework/blank.html?" + newLocation;

// end of atomic location change block
// for IE

This technique is repeated in several places in the file. I did a lot of customization, both of the RSH library and of the tab interface. The tab interface is built off of Control.Tabs, an unobtrusive tab interface built on Prototype. It’s fairly lightweight, as is its counterpart, Control.Modal, a lightweight and flexible modal window interface that can replace lightbox and handle iframes and other modal windows. I added some Scriptaculous effects to the tab interface and wrote in a quick algorithm to add and remove a prefix to the div IDs to make the bookmark hashes semantic.

The javascript

I’m including the full source of my modified Control.Tabs file at the end of this post. It contains the changes to add a Scriptaculous fade on tab change and to add the current tab to the history with the prefix “work”. You can change “work” in the source code to anything that makes sense. Using this file will require the inclusion of Prototype, Scriptaculous and dhtmlHistory.js (modified as above for Wordpress if necessary) in your header. The first couple of lines in the initialize function restore the div that I hide during the page load (short script in the header to set display:none) to prevent flicker before the div fades in. These lines start with “wc” and can be modified or removed as necessary.

To initialize the scripts, I used this in the beginning of the page. It’s in the page template, not the header, because I only needed it on the main portfolio page. I also use PHP in the header file to conditionally load only the necessary libraries for each page.

Initialize history and tabs

<script type="text/javascript">
function historyChange(newLocation, historyData) {
	ct.setActiveTab(newLocation);
}
Event.observe(window,'load',function(){
	$$('.tabs').each(function(tabs){
		ct = new Control.Tabs(tabs);
	});
	dhtmlHistory.initialize();
	dhtmlHistory.addListener(historyChange);
});
</script>       

The addListern function in the dhtmlHistory library sends two parameters, newLocation and historyData. I’m only using the first in the historyChange function, which passes the newLocation parameter to setActiveTab in Control.Tabs. See the Control.Tabs page for information on how to set up the page structure for tabbing.

Basically, the setActiveTab function in the main tabs javascript file now adds the current tab to the history, with an exception for Safari, with the statement:

Add to History

if (/WebKit/i.test(navigator.userAgent)) { // sniff
	this.containers[link.key].show();
} else {
	dhtmlHistory.add("work" + link.key);
	Effect.Appear(this.containers[link.key]);
}

There’s also a quick function I added to Control.Tabs that’s loaded on initialize to check if there’s a hash (a name following a “#” symbol) in the current page address, indicating that we’re returning to the page from an outside page or bookmark. This sets the current tab based on the hash of the url. It removes the word “work” which I had added because the Really Simple History framework will not accept any identifier that is currently used as an ID on the page. So we had to prepend it to the div name for the history but need to remove it to find the tab now.

setByHash

setByHash: function(){
	cleanHash = window.location.hash.replace('#','');
	link = cleanHash.replace("work","");
	this.setActiveTab(cleanHash);
}	

Some Code to Go

That’s pretty much it. Below is the whole modified Control.Tabs file which, in combination with Prototype, Scriptaculous and the RSH framework, can provide you with a working history in IE, Firefox, Opera and others. Sorry, Safari.

Control.Tabs modified

[The requested file http://blog.circlesixdesign.com/wp-content/uploads/control.tabs.modified.txt could not be found]

AJAX» browsers» design» firefox» ie» interface» javascript» opera» safari» tips» web»