Note: This is an article restored from archives. MSNBC have abandoned long-form text articles since this was written. I still think this is a neat model to essentially have a table of contents that is always visible with little screen realestate utilized.
I first stumbled upon a unique visual navigation scheme while browsing MSNBC.com. The concept is to have static navigation for different sections of a page that references the position of that content relative to the scrollbar. It does this by dynamically adding “pins” to the right side of the screen, seemingly attached to the scrollbar. This allows for the user to quickly move about the page in distinct orderly fashion.
Using MSNBC’s model as an inspiration, I decided to enhance this functionality in the form of a jQuery plugin that is both easy to style and easy to integrate. I wanted to have a system that would readily reposition itself not only when the window resizes, but also when objects in the DOM were moved or removed. Secondly, I wanted to allow for event attachments and triggers, so the developer is free to utilize their own events based on how the user utilizes their page. Finally, I wanted to make them dynamically controllable by being part of the jQuery DOM’s object. I didn’t want the developer to have to worry about keeping up with pin names or IDs, so the pins are controllable directly through the object they’re attached to.
$('#content').scrolltab({
hoverin: function() {
$(this).stop().animate({width: '200px'}, 500);
},
hoverout: function() {
$(this).stop().animate({width: '50px'}, 500);
},
classname: 'scrolltab-content',
title: 'Content'
});
A very simple example of attaching a Scrolltab pin to an object. This will add mouseover events, name the class of the pin, and set a title (ie what is displayed on the inside of the pin).
This jQuery plugin is under the MIT license and is free to use personally and commercially.
