jQuery Plugin To Create A Flexible Web Page Minimap - minimap.js

jQuery Plugin To Create A Flexible Web Page Minimap - minimap.js
File Size: 13 KB
Views Total: 11467
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

minimap.js is a jQuery plugin that generates a web page minimap at the edge of the browser screen to provide full page navigation. With this plugin, the visitor can scroll through your whole web page by using the compressed image of your content on the right or left side of the screen. Similar to the Sublime Text Minimap functionality.

See also:

How to use it:

1. Load the jQuery library and the jQuery minimap plugin's script and CSS in the document.

<link rel="stylesheet" href="path/to/minimap.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/minimap.min.js"></script>

2. Call the plugin on the body or any other DOM elements to generate a content minimap.

$('body').minimap();

3. Available options

// ratio of the viewport.
// 0-1
heightRatio : 0.6,
widthRatio : 0.05,
offsetHeightRatio : 0.035,
offsetWidthRatio : 0.035,

// position of the minimap
// left or right
position : "right",

// enable touch support
touch: true,

// enable smooth scroll
smoothScroll: true,

// smooth scroll delay in ms
smoothScrollDelay: 200,

// trigger on viewport is resized
onPreviewChange: fn

4. Public methods.

show() // show minimap
hide() // hide minimap
toggle() // toggle minimap

About Author:

Author: Prince John Wesley

Website: http://www.toolitup.com


This awesome jQuery plugin is developed by princejwesley. For more Advanced Usages, please check the demo page or visit the official website.