minimap - A jQuery Plugin

A preview of full webpage or its DOM element with flexible positioning and navigation support #####Demo Page

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

Include jQuery and this plugin on a page.

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

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

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

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

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

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 of the minimap. Supported positions are:

1. 'right' (default)
2. 'left'

touch support. (default: true)

linear animation support for scrolling. (dafault: true)

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

Set position property. position can be either 'left' or 'right'

Set heightRatio property.

Set widthRatio property.

Set offsetHeightRatio property.

Set offsetWidthRatio property.

Set smoothScroll property

Set setSmoothScrollDelay property.

onPreviewChange callback will be triggered for the below cases:

1. View port is resized.
2. Calling setter functions.

Show preview

Hide preview

Toggle Preview

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() {}
});

Use the below css classes for customization

.minimap - Mini-map area

.miniregion - Mini-map view area

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

This plugin is licensed under the MIT license.

Copyright (c) 2014 Prince John Wesley