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:
GoToDiv(FindDivIndex(PostDivID)+1), etc.
After a bit of debugging, it all works great. Here is a picture of the blog showing the new elements:

Labels: Blogger