Yesterday I had to dust-off my frameset and Javascript knowledge for a project we are undertaking at work. We are putting together a DVD where the navigation system is in HTML while the contents may be HTML pages, PDF's, Flash animations or movies. Now, most of my coding is server-side scripts, primarily in PHP, but there is no such luxury for this DVD.
It was decided that framesets would be used to provide a navigation banner at the top of the page while the contents load into a frame below. I thought frames had gone out with HTML 4, but apparently there is a DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The design brief was to provide a link to the home page and one to the current "section" page in the top navigatin frame. Each section of the DVD exists in a directory one level down from root, simplifying things greatly. The navigation frame would look like:
HOME » Section
Originally it was proposed that a separate navigation frame file be created for each section. I thought it would be more elegant (and easier to update) if we used a single navigation file and used Javascript to automatically generate the navigation links based upon the current section directory that the main content is loaded from. What I wrote looked like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript">
// Define navigation menu items
var menuArr = Array();
menuArr['dir1'] = "Section 1";
menuArr['dir2'] = "Section 2";
menuArr['dir3'] = "Section 3";
function generateMenu()
{
var contentUrl = parent.contentFrame.location.href; // contentFrame is the name of the main content frame
var urlArr = contentUrl.split('/');
var dirIdx = urlArr.length - 2;
var outputStr = '<p><a href="../" target="_top">HOME</a>';
if (urlArr[dirIdx]) {
outputStr = outputStr + ' » <a href="../' + urlArr[dirIdx] + '/" target="_top">'
+ menuArr[urlArr[dirIdx]] + '</a></p>';
}
// Fill in the navigation div with the link contents.
navDivObj = document.getElementById('navigation');
navDivObj.innerHTML = outputStr;
}
</script>
</head>
<body onload="generateMenu();">
<div id="navigation"><p><a href="../index.htm" target="_top">HOME</a></p></div>
</body>
</html>
The script could be extended to handle a directory tree or other, more complex situations. I can't see myself using frames online due to usability issues, but for a data DVD targetted at a select audience they have provided a quick and simple solution for a navigation system that will still show when non-HTML content is displayed.