jQuery Plugin To Create A Flexible Web Page Minimap - minimap.js
| File Size: | 13 KB |
|---|---|
| Views Total: | 11782 |
| 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.
