gridscrolling.js

Have an article with a clear structure, but lots of <aside>?
Meet gridscrolling.js, your new best friend!

Visit the github page for the code or the jQuery plugin page.

Press arrow down, for more info.

First Comes First

You focus on your article. Section following section, and asides in between.

gridscrolling.js takes care of layouting, by giving you a clear path thru the mains, and the easy option to dig in the asides if wanted.

Navigation

Have a look at the top and bottom: An arrow indicates if cursor keys can be used to skip to the next section.

An arrow on the right-hand side means, there is an aside to explore.

Go have a look by pressing the right-arrow key.

No Javascript?

You don't have Javascript enabled?

No worries! Degrading with style, the article can be read linearly (almost) as nice.

Your links work just as well as in the 90s.

How to Use

Get jQuery
Get the .js and the .css file from github.
Include them in your page.
When the document is loaded and ready, initialize gridscrolling.js (see snippet)

Initialize gridscrolling.js

    $(function() {
	$('body').gridscrolling("init");
    });

Tailoring

Style the looks of the overview map or the arrows to blend in.

Javascript options can be used to customize gridscrolling.js behavior according to your needs.

Custom colors

The minimum necessary modification is probably to adapt the colors to your color scheme. Here are the respective css properties to do so. Also, have a look at the stylesheet of this site.

#gridscrolling-overview { border-color: #BBB; }
.gridscrolling-overview-square { background-color: #BBB; }
.gridscrolling-looking-at { background-color: #48F; }
#gridscrolling-top-marker { border-bottom-color: #357; }
#gridscrolling-bottom-marker { border-top-color: #357; }
#gridscrolling-left-marker { border-right-color: #357; }
#gridscrolling-right-marker { border-left-color: #357; }

Customize behavior

The following options can be used to change the behavior of gridscrolling.js:

	$('body').gridscrolling("init", {
	    animationSpeed: 400,
	    showMarker: true,
	    showOverviewMap: true
	});