Bruce Hayden: Look and Feel of blog (#6)

Another couple of tweaks to the look and feel of my Blog. First, and easiest, I added links to Dillon weather and Summit County (CO) webcams. Only problem was tweaking the size of the webcam icon so both would fit side by side.

The big change though is that I added Mozilla navigation to the blog. Mozilla browsers offer an additional "Site Navigation Bar" that can be enabled through the "View" menu:

It works by looking for HTML <LINK> elements in the document <HEAD> section that have a "REL" parameter matching the Site Navigation Bar buttons. The bar has the following buttons: Top; Up; First; Previous; Next; Last; Document; and More, and the "More" button has submenus that include: Help; Copyright; and "user defined". Each <LINK> element also has an HREF parameter, and if the HREF parameter points at an HTML link, Mozilla will jump there if that button is selected. Similarly, if the HREF parameter is Javascript, that script is executed when the corresponding button is clicked.

Using that mechanism plus some more Javascript, I implemented the following buttons (and subbuttons) for the Site Navigation Bar: Top; First; Previous; Next; Last; Help; Copyright; and Home. The Home and Help buttons were implemented via HTTP links to the appropriate documents. The remainder were implemented through Javascript functions.

The key elements required for this were already in place. First, I had put <DIV> elements around each post, giving each one a unique ID and a common NAME. And I was already utilizing the "getElementsByName" function to get a list of these post <DIV> elements. I optimized this by saving off the list, and only built it the first time I needed it (via function SetGlobalDivs()) (and moved this into my previously implemented code for global post mode changes). I thus was working with a static array of <DIV> elements (PostDivs), one per post, sorted as displayed.

First and Last were thus easy to implement. First jumps to PostDivs[0] and Last jumps to PostDivs[PostDivs.length-1] (note, Javascript uses zero based arrays). This is implemented as before (with more shared code now) by scrolling to the post <DIV> element's offsetTop attribute. Thus, a generic "goto post#" routine could be:

var post = PostDivs[post#]; self.scrollTo(0,post.offsetTop);

This works fine for First and Last buttons, but more is needed for Previous and Next buttons. In particular, these require situational awareness: where the user is in the Blog. This is accomplished by use of the "ONMOUSEOVER" parameter assigned to each post <DIV> element, which assigns the post <DIV> element's ID to a local variable: PostDivID. The resulting core code is thus this function:

function GoToDiv(index) { SetGlobalDivs(); if (index < 0) { self.scrollTo(0,0); PostDivID = ""; } else { var length = PostDivs.length; if (index >= length) index = length-1; var post = PostDivs[index]; PostDivID = post.id; if (post.offsetTop>0) self.scrollTo(0,post.offsetTop); } }

There is also a function (FindDivIndex) that translates a posts DIVision ID into its index into the PostDivs array. And, thus, Next could be implemented as: