goldenapples / jquery.minimap

A Sublime Text-like "minimap" for in-page navigation.
Other
24 stars 6 forks source link

jQuery minimap

This plugin provides a "minimap" for in-page navigation, similar to that in Sublime Text 2.

View it in action

This came from UX discussions while redesigning Janrain's documentation site. Specifically, we tried to include long-form narrative content as much as possible, with lots of screenshots, tables, and inline graphics. We made good use of jQuery waypoints for in-page navigation, but we felt that even so, users would want a better way to orient themselves to where they are on the page, and an easier way to jump to the section they want.

Usage:

Usage is as simple as possible. Just target the body column element and call the plugin like this:

$('#body_column').minimap();

Or pass the body column to the plugin as an option:

$.minimap({ body_col: '#body_column' });

Options:

Options can be passed to the plugin to override a number of defaults.

Option Meaning Default Value
body_col element to use as the body The current context of this
map_col custom element to draw the map in If not specified, will insert the following element: <aside class="map_col"></aside> before body_col
toggle_btn An element to use to toggle visibility of the minimap None
draggable Whether to use jQuery.ui.draggable controls True if jQuery.ui is loaded, false otherwise
scrollto Whether to use jQuery.scrollTo to animate scrolling True if jQuery.scrollTo is loaded, false otherwise.
map_header Custom content to put in a "header" of the map column
minimap_opacity Opacity of the minimap vis-à-vis the underlying page (between 0 and 1) 1
minimap_left_border Specifies the CSS for the border between the minimap and the page body (e.g. 1px solid black) none
overlay_background_color The background color of the minimap rgba(26, 45, 58, .1)

Utility functions:

The plugin uses a localStorage entry to determine the users' preference for showing or hiding the minimap. The following utility functions update that value as well as showing or hiding the map.

Styling:

View the stylesheet provided for some tips.

Some caveats: