The page consists of four sections at present:
- header
- "What's New" headlines
- quick links
- brief introduction
dt and the related story in the dd. If an image was also used, it would be placed in another dd above the story.The next step was to style the list for browsers that aren't DOM-compliant (since I use the DOM extensively in the creation of active portions of the menu). What I wanted was fairly simple, the headline having a background color spanning the width of the content area with the entire area clickable. Below the headline and indented much like a normal definition list is the associated story. If an image is present it would be floated to the left of the story. I was able to achieve the design I wanted in modern browsers and most of the based CSS is used in the interactive version as well. In Nav4 the menu looks pretty much like a normal definition list, but I decided to hide the images because Nav4's styling capability made it difficult to get the desired effect.
The script runs once the page is loaded. Since this is a first version, the structure expected is pretty strict (I expect I'll be able to clean it up when I work on future versions). The script applies a class to the menu so that the styling used for the interactive elements is added. The script creates a styled unordered listed (
ul) for the headlines. The headlines are pulled dynamically from the dts and so no extra work beyond filling out the definition list is required when implementing. I used a lot of DOM coding to generate the list such as createElement, appendChild, and insertBefore.I have yet work on the printable view, but I'll probably hammer it out while I'm documenting the code.
Multi-Column List
The design for the quick links was fairly advanced when considering the capabilities of current web browsers ... a two-column list. While I could have easily used a table or two lists and floating or some other mechanism, the desire to maintain a semantically meaningful structure made these options undesireable.
With this in mind I tried to find a method of spreading a list across two columns that would not require breaking the list into parts. Plus I wanted to keep the amount of work required to edit the list at a minimum. After a bit of searching I found an article about multi-column lists on builder.au that gave me a good start (later ALA published their own article on this topic as well). I ran into a few problems during development ... mostly with IE (see below). The multi-column list feature I ended up with isn't nearly as robust as I had hoped to make it, but it performs the intended function pretty well.
The list script relies on a standard list (
ul or ol). The user doesn't need to do any prep-work beyond applying a class to the list, attaching the JavaScript, and attaching the base stylesheet. Of course extra styling can be done by the user, and I had to do this for the home page so that I could make the multi-column list function flexible enough for library code.Once the page loads the script looks for any list with the required class. Once a list is found a second class is added that provides the base styling needed for multiple columns (though I'm thinking of moving some of this functionality to the script ... we'll see once I start working on the documentation). The script determines the height of each list item and then uses that information to decide where to divide the list (right now the script can only handle a two-column list). The first element of the second column is given a top and left margin so that it sits next to the first column. The following list items are then given a left margin. Finally, the last element of the list is given a height value so that elements following the list don't overlap it.
There are a couple of issues and enhancements I'd definitely like to make. Currently I have the list item markers disabled due to various browser problems. The list doesn't handle width resizing at all (can I use percentage for the positioning?). I had to use a recursive function to watch the height of the list to handle height resizing (there may not be any other way around this, but maybe percentages or ems can help here as well).
Again, I have yet to work on the printable view, but I'll probably work on it while I'm documenting the code.
References
IE quirks
Unrelated to this work I came across an article that provided some information that helped during development. On the MSDN site there's an article about the
hasLayout property. The property seems fairly innocuous, but reading up on it is important for understanding some of the styling weirdness that can be encountered in IE. Even better, there's a link to another article that gives a lot of good info, including how styling a list with layout can get ugly.Now that I'm done with the home page I'll be spending a few days documenting the scripts for the code library.
