Category: Javascript

Sticky Navigation Bars

A key consideration I make when designing intranets is how the navigation must always be easily accessible because users can land on any page and each user will have a different set of aims when using the site. Links are sent over email all the time and I can’t expect the sender to clean up a URL to remove things like anchor references or variables.

The solution: sticky navigation bars.

The effect is simple. When a user scrolls down the page the navigation is seemingly ‘lifted’ out of it’s placeholder and flows down the page with them, allowing them to click through to any other part of the site (so long as it is held within the primary navigation system).

The method was also remarkably simple, thanks to a jQuery plugins called Waypoints.

I’m using WordPress for my intranet project, so the code I use in my header.php file is:

The vital thing here is the containing element being set to use the nav HTML tag and the menu class being set to nav-bar.

Then in footer.php we call the Waypoints plugin. I put these JS calls in the footer because if they hang or fail the user can still use the website, albeit without the sticky nav. I’ve also added my site-specific code to a separate JS file because I like to keep things tidy. Don’t forget this is all jQuery so you’ll need to call the core files too.

I also do some really simple css.

Then, inside stickynav.js I do this:

Easy, huh? Credit where it’s due, this is not my own solution it’s my implementation of a tutorial here.

Generate a table of contents using JQuery

One of the under-used features of our company’s CMS is Virtual Documents: these are actually large HTML documents that can also be displayed and managed within the Media Manager in the same way as a “physical” file (such as Word or PDF). However, one of the ways that Virtual Documents could be made far more useful is through the ability to generate a table of contents.

Virtual Documents came about because one of our customers had a huge document library in Lotus Notes: they wanted to import these documents into our CMS, but maintain all of the permissions and access rights already applied.

The entire library was exported as XML-based PDFs, and we then wrote a parser to interpret and import the content (complete with styles), and also to gather and apply all of the access rights. The resulting imports became known as Virtual Documents.

A number of our customers have been interested in Virtual Documents, but felt that some features were lacking; one of these was pagination, but this could be by-passed by creating a table of contents that was derived automatically from the headings—as, indeed, Word and Pages do.

There has not been enough demand for us to devote heavy resources to this aim within the product itself, so I started looking around for front-end solutions. And I found a post by Janko at Warp Speed which details how to built a table of contents in JQuery.

It will need some tweaking to get it to behave with our current structure, but I believe that it is a very decent solution—especially the final scaled and fixed table of contents demo.