Introducing

Mini-Map

a document visualisation jQuery plugin

Alpha

A little note

This is a very early alpha release. I'm putting Mini-Map on GitHub now as I know if I don't it will get buried and I'll get swamped with work and it will never surface again. That would be a shame as I can see so many practical and experimental uses for this plugin.

Beta release progress

Have a look at the current and upcoming features

What is Mini-Map?

Mini-Map is a petite jQuery plugin that creates a map-overview of your HTML documents. It's particularly useful for long blog posts, enabling your readers to easily see where they are in relation to the start and end of your interesting article.

Have a scroll on this page to see it in action.

How does it work?

Mini-Map uses jQuery to speedily look through your document and creates a smaller, but proportional, visualisation of your HTML markup. It considers your basic CSS properties to ensure that margins and padding are taken into consideration.

A game-like window view of your current viewport area of the document is displayed on the Mini-Map and moves up and down, using the jQuery .scroll event, as you scroll through the article.

How do I use it?

Mini-Map is really easy to setup and use.

<head>
	<link rel="stylesheet" href="mini-map.css" />
	
	<script src='jquery.min.js'></script>
	<script src='jquery.Mini-Maps.min.js'></script>
</head>
			

Include the Mini-Map CSS file, the jQuery library and the Mini-Map plugin file in the head of your document.

<div id="wrapper">
	<header>
		<h1></h1>
	</header>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
	<section>
		<h1></h1>
		<p></p>
		<p></p>
	</section>
	<article>
		<h1></h1>
		<h2></h2>
		<p></p>
		<p></p>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<footer></footer>
	</article>
	<aside>
		<ol>
			<li></li>
			<li></li>
		</ol>
	</aside>
	<footer>
		<p></p>
	</footer>
</div>				
			

Mini-Map works on the assumption that your document conforms to basic principles of semantics regarding how you format your HTML. At this stage it relies on a parent wrapper/container that the plugin is applied to. The wrapper/container then must have child elements that contain your markup.

$(document).ready(function(){
	$('#wrapper').minimap();
});
			

Initialise the Mini-Map by attaching it the parent element of the document you would like to visualise. In the example above, this would be <div id="wrapper">.

miniMap.css({'height':miniMapHeight+'px', 'left':(elPosition.left+90)+'px', 'top':elOffset.top+'px'});				
			

You may need to make a change to line 59 of jquery.mini-map.js. This line creates a left value based on the wrapper/container element's position. In my example I am using the 960.gs CSS grid and have positioned the map to appear in column to the left of my document.

Will it work in every browser?

Yes! Well, for the most part.

Mini-Map was specifically built to ensure interoperability. While there are some fancy vendor specific CSS3 properties, the basic framework for Mini-Map will work across the board. But of course, it looks its best when viewed on Safari, Chrome or Firefox.

What about on my shiny new iPad 2?

It will do soon. I have a separate version specifically for iOS/mobile webkit browsers and I am working on integrating the two.

I love the iPad and in fact I built Mini-Map with the iPad in mind. It was based around my willingness to explore alternatives to traditional website navigation and the general reluctance at considering horizontal navigation.

While the lack of always-visible scrollbars on iOS devices is a nice visual touch, it is dependant on users understanding that documents flow vertically. But documents that flow vertically and horizontally allow for a greater freedom of document creativity. But, with the lack of visible scrollbars one could easily become lost if a document was say 6000 x 6000 pixels. Using Mini-Map in this kind of scenario and you would have easier document exploration adventures.

There is, however, a minor issue with use on iOS devices. The jQuery .scroll event only triggers after you have finished moving the page with your finger, unlike with desktop browsers—where the event fires constantly while you are scrolling.

A road-map for Mini-Map

Even my humble Mini-Map jQuery plugin needs a road-map, here's where I'm at...

Fork Mini-Map on GitHub