Why Needed?
After looking through a number of javascripts, it was not possible to find one that had the fundamental behaviour required. Essentially I was looking for scalability and maintainability. If I created a new section, I wanted to be able to define a single menu for that section, that could be included in higher-order menus if required.
For more detail on how the navigation scripts were developed check out the development log.
This requirement to be able to include menus defined non-locally was key in that it would avoid maintenance problems associated with copying data between many files.
The scripts and required style sheets and images can be downloaded from here. They are presented in the form of a sample site so you should be able to begin playing immediately.
How To Use
The top of this file looks like this :
<HTML>
<HEAD>
<TITLE>Website Navigator</TITLE> -- window title
</HEAD>
<script type="text/javascript"> -- global parameterization
var jspath="../";
var mnupath = "../";
var thisDoc = "software/sitenav.html";
</script>
<script src="../ctcmnu.js" type="text/javascript"></script>
<body bgcolor='#AAAAAA'>
<script type="text/javascript">
ctctitle("Website Navigator");
swmnu();
</script>
In the ../ctcmnu.js file are the menu definitions for this site and
a utility method ctctitle that wraps a call to a function jtitle
that sorts out the heading and mail/feedback box at the top of each page :
document.write("<:script src=\"" + jspath +"js/ctcutils.js\" _
type=\"text/javascript\">:<:/script>:");
function ctctitle(title) {
jtitle(title, "cut the crap", "in pursuit of truth", _
"feedback@cutthecrap.biz");
}
function ctcmenu() {
startMenu("Cut The Crap", "");
jh1("What it's all about", "./index.html");
dsmnu();
swmnu();
mememnu();
jsubheader("Current Affairs");
jh1("P N A C", "./pnac/index.html");
endMenu();
}
function dsmnu() {
startMenu("Design", "index.html");
jh1("This Unscientific Age", "design/unscientific.html");
jh1("Idioms and Paradigms", "design/idioms.html");
jsubheader("Ontological Design");
jh1("Overview", "design/ontologicaldesign.html");
jh1("Readiness To Hand", "design/readytohand.html");
jh1("Breakdown", "design/breakdown.html");
jh1("Blindness", "design/blindness.html");
jh1("Applicability", "design/applicability.html");
endMenu();
}
The first line is a method to include the ctcutils.js file that is needed by the functions
defined here. By placing this line in this file, there is no need to include the file in the content
html file as would otherwise have been needed.
By providing all the menu definitions in a single javascript file, this can be downloaded once, and content pages should load faster. If a menu needs to be modified, it is modified in one place. Equally, menus are shared amongst several content files, so each content file is also simpler.
To set up a content file to use the navigator it is simply necessary to set up the variable
jspath and mnupath which tell the script how to find files for inclusion
and how to interpret relative links to documents in the menus.
At the bottom of this page is the following :
<script type="text/javascript">
jstop();
</script>
</body>
</HTML>
This completes the page formatting.
Element Structure and Themes
A few irritating inconsistencies remain.
If anyone can help to resolve these then please let me know.
The navigator element structure is basically :
<div class='mitem0' style="margin-left:10"
onMouseOver="setOver('imgN');"
onMouseOut="setOff('imgN');"
onClick="jumpTo('someURL');">
<table>
<tr><td width=20><img id='imgN'
src="../images/closed-menu.gif">
<td class='mitem'>Some Text</td></tr>
</table>
</div>
where the setOff and setOver modify the image element.
Themes
Using cascading stylesheets some support for different themes is provided - spurred on by early criticism of the appearance of the website, I am seeking to emphasise how easily it is possible to modify this, so here are three themes which demonstrate this and at the same time allow testing of the element feedback in different browsers.
|
|
|
- select them to test how well your browser handles dynamic style updates.
You can also double click on the page title area above, try it and see what happens. This will work on any page.
Note that the style for 'mItem0' is defined as :
.mitem0 {
cursor:pointer;
margin-left:5;
line-height:1.1;
padding-left:2;
border-style:groove;
border-color:#CCCCCC;
background-color:#CCCCFF;
border-width:2;
}
So the border you see is the border of the element that is supposed to process the
rollover events and modify the cursor. This works fin in all browsers other than IE. In IE versions
< 6.0, the correct cursor is not displayed, but more erroneous is that the rollover events
are not correctly generated for the visible element boundary.
Any suggestions/explanations welcome.
So far as I can tell it is related to the size being set in a parent element - in this case the enclosing table column element. Although the display is correctly expanded to fit the parent element the event processing is not. So it is the common problem of too much code, where the microsoft engineer has one calculation for rendering the correct element size, and another to determine the boundary for event processing... very sad..
Another possible evolution path for the error is that the display used to be wrong to, but this was fixed with an ugly hack... simply fixing the reported symptom ... even more sad.
Customized Theme
While playing around with the theme idea I thought it might be neat to allow the user to save a preferred scheme as a cookie. This seemed to work pretty well so I provided general support.
This can be accessed by double-clicking on the page "title" area - NOT the window title bar.
Have a play and see what you think.
Has anyone seen this kind of thing before? Its not hard to do, but I can't remember seeing this feature on another site.