Story and Section Nav Scripts

You may have noticed that the navigation within sections and the navigation between stories in a section are displayed via a couple of very similar javascripts.

These scripts (setflips, flipblock, flipsect, and setflipsect) are what I call my section and story nav list scripts. They are generated by a template in Bricolage (the CMS I use to generate this site) and updated every time a story is published within their scope. For example. Every time I create a new subsection within the Scripting section of this site, /includes/scriptingnavlist/scriptingnavlist.php is updated with information about the new subsection.

The two sets of scripts are very similar, because they do very similar tasks, but have subtle diffrences in their output. Rather than complicate my life by tryig to make one really big script that does everything, I chose to make two simillar smaller sets of scripts that are easier to work with.

The include file contains stylesheet, javascript, and html code. I will write about the CMS back-end elsewhere. I'm focusing on the javascript code here.

Viewing the navlist.php files shows that the generated scripts vary depending on the number of html pages in a section. In fact, if there are less than 5 stories in a section, there is no javascripting (or css) in the file, just a set of text links.

However, when there are 5 or more links, a set of javascript codes are included that create multiple blocks of text links that are turned on or off based on what page is currently loaded, and whether or not you've clicked on a left or right arrow link to display another block of links.

Script example

The function Setflips is called by an onload event handler. It goes through and sets up the titlesarray, and compares the names in that array with the title of the current page. If the two match, the block that corresponds with the loop number is set to display.

How, you may be asking, does this include have a static text bit that is the title of the page that is calling it? I must have forgot to mention these are php includes. This allows me to set a variable, Nav scripts in the main story, and have it appear in an included javascript as static text.

If after looping through all the titles in the array, there is no match, as shown by the displayed flag being set to 0, block1 is set to display. This default behavior exists because section index pages also display a list of stories within the section, and their titles never match the titles array.

Blocks of Four

When a user clicks on any of the arrow links that surround each block of links, they invoke the Flip function. Flip then goes through and turns off all blocks that don't match the number passed to it via an onclick event handler, and turns on the block that matches.

By using Javascript to turn on and turn off blocks of nav links, a page can neatly display any number of links to related pages without having a bloated looking navbar that wastes a lot of screen realestate, and all the pages in a given section can use one include to navigate between them.