Sam Croft

Full-stack developer

Introducing Mini-Map, a document visualisation jQuery plugin

  • 0 comments

Filed in: jQuery, mini-map, plugin, Uncategorized

I love the iPad, it’s flipping awesome! I love browsing the Internet with my fingers, it’s a far nicer and casual experience than sat infront of the same screen, in the same place, in the same room. And it’s brilliant to see that designers are now taking into consideration how their sites work on tablets and large screen mobile devices. The advent of the media query makes it a doddle to create a responsive design, that changes according to the device/screen.

But, and this may be a pre-emptive ‘but’, as web designers we still feel compelled to design sites that scroll vertically. We fear the horizontal scroll. We’re terrified of it. Well most of us—there are some brave designers out there that don’t feel intimidated by the horizontal scroll though, the likes of Dom Goodrum, an old friend from University, and Teehan+Lax with their new TweetMag app are more than happy to explore the X axis.

Could we use vertical and horizontal scrolling, on the same site? Gasp.

What a thought, eh?

This got me thinking and I began exploring alternatives to traditional website navigation and the general reluctance at considering vertical navigation AND horizontal navigation.

Desktop browsers have the, albeit ugly, benefit of always-visible scrollbars. One knows where they are in a document, in relation to the top and bottom, left and right of a page by looking at the scrollbars. The same cannot be said with mobile webkit browsers, where the scrollbars elegantly disappear when the display is not being touched. On a traditional vertical axis this isn’t so much of a problem, but considering both… then you could be forgiven for easily becoming lost on your travels.

Meet Mini-Map

Mini-Map, a jQuery plugin for visualising documents

I’ve started developing a navigation aide for this very reason. It’s a small jQuery plugin and it is called Mini-Map. It takes all of your document elements, creates a little map of them in the corner of your screen and displays your current position on this map as you move around the document by scrolling.

It’s very early days but I’m putting it out there now for some feedback. It’s on GitHub, so grab it and have a play. Or even better, fork it, make some changes and send me a pull request.

The current example on the Mini-Map page shows how it works when just considering a vertical axis on a desktop browser, a traditional website scrolling experience. This version will not yet work on iOS browsers, I’m finalising that version right now, but it’s still really useful to see it in this situation. For long articles (and I do love writing long articles) it’s great and being able to show where you are on the page, how far you are from the end and where the code examples are. I’m working on a separate X and Y axis demo that I will put online soon, along with the separate, or merged, iOS compatible version.

I would love to hear any thoughts or feedback on this.

About the author

I'm Sam Croft a full-stack developer with over 15 years experience in web and app development. For the last six years I have been a partner of Running in the Halls, an app and game design studio based in Huddersfield, UK. During this time I have developed many web and applications. Highlights include a node.js/socket.io app to create the worlds largest crowd-based game on the first series of Channel 4's Gadget Man with Stephen Fry and Librarygame, a Library gamification platform for Universities. Librarygame is being played by over 6,000 students at The Open University, The University of Manchester, The University of Glasgow and The University of Huddersfield.

In my spare time I enjoy long distance running, watching all sports (especially F1) and playing video games. I live in the Holme Valley in West Yorkshire with my wife, Alex.

Sometimes I tweet.