#flexible positioning

New Post has been published on http://www.htmluse.com/minimap-a-preview-of-the-full-web-page/

Minimap - A preview of the full web page

Download   Demo

This jquery plugin Minimap is a preview of full webpage or its DOM element with flexible positioning and navigation support.

1. INCLUDE CSS AND  JS FILES

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

2. JAVASCRIPT

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

3. 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)

4. 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.

5. CALLBACKS

function onPreviewChange(): onPreviewChange callback will be triggered for the below cases:

View port is resized.

Calling setter functions.

6. 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