The Blog of Chris Saylor

Search Results

    Scrolltab: Dynamic Page Navigation Tool

    November 16, 2010 engineering Chris Saylor

    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 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.

    	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.

    Download the script | View the source | View a demo

    Related Posts

    Interop in PHP Should Not Be Exceptional December 22, 2020

    In many ways, PHP has come a long way to becoming a competent, typed language. With the newly minted PHP 8, strong types have eliminated a whole host …

    Managing Polylingual Side Projects July 19, 2020

    Like many engineers, I have a life-long passion for learning. I satiate this need by creating side projects that explore new concepts, languages, and …

    Ruminate More June 30, 2020

    Do you remember back to your school days of writing a paper, giving it a once over, and turning it in only to be surprised on return of bad editing …

    Deploying CSRF Protection to an Active Site December 18, 2019

    At Zumba, I implemented CSRF protection to all our state-changing user inputs. With a large and complicated site, implementing CSRF is a very tricky …