saylornotes

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

    Download the script | View the source | View a demo

    Related Posts

    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 …

    Meta: How this blog is built and deployed April 11, 2019

    It is an unspoken rule that if you utilize something other than Wordpress for a blog that you must include an article on how it is built. This is that …

    Building a Chess bot for Slack August 23, 2018

    With Atlassian’s announcement suspending development of Stride and dropping support for Hipchat in favor of Slack, I decided that the time was right …