minimap - A jQuery Plugin
A preview of full webpage or its DOM element with flexible positioning and navigation support

Demo Page

Getting Started

Download the latest code

Fork this repository or download js/css files from dist directory.

Including it on your page

<link rel="stylesheet" href="minimap.min.css" />
<script src="jquery.js"></script>
<script src="minimap.min.js"></script>
Basic Usage

//Desired dom element
var previewBody = $('body').minimap();
Properties

heightRatio

height ratio of the view port. ratio can be in the range [0.0, 1.0). (default: 0.6)
widthRatio

width ratio of the view port. ratio can be in the range [0.0, 0.5). (default: 0.05)
offsetHeightRatio

Margin top ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: 0.035)
offsetWidthRatio

Margin left or right(based on position property) ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: 0.035)
position

position of the minimap. Supported positions are:
'right' (default)
'left'
touch

touch support. (default: true)
smoothScroll

linear animation support for scrolling. (dafault: true)
smoothScrollDelay

Smooth scroll delay in milliseconds. (default: 200ms)
Setters

function setPosition(position)

Set position property. position can be either 'left' or 'right'
function setHeightRatio(ratio)

Set heightRatio property.
function setWidthRatio(ratio)

Set widthRatio property.
function setOffsetHeightRatio(ratio)

Set offsetHeightRatio property.
function setOffsetWidthRatio(ratio)

Set offsetWidthRatio property.
function setSmoothScroll(smooth)

Set smoothScroll property
function setSmoothScrollDelay(duration)

Set setSmoothScrollDelay property.
Callback

function onPreviewChange()

onPreviewChange callback will be triggered for the below cases:
View port is resized.
Calling setter functions.
Other functions

function show()

Show preview
function hide()

Hide preview
function toggle()

Toggle Preview
Default Settings

Mini-map with default values

var previewBody = $('body').minimap(
heightRatio : 0.6,
widthRatio : 0.05,
offsetHeightRatio : 0.035,
offsetWidthRatio : 0.035,
position : "right",
touch: true,
smoothScroll: true,
smoothScrollDelay: 200,
onPreviewChange: function() {}
});
CSS classes

Use the below css classes for customization

.minimap - Mini-map area

.miniregion - Mini-map view area
Caveats

Browser's find gives result in both the page & its preview
Async updates to the dom elements after minimap was created may not reflect in the preview.