Sublime Text Like Web Page Minimap Plugin For jQuery

File Size: 428 KB
Views Total: 2653
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sublime Text Like Web Page Minimap Plugin For jQuery

A cool jQuery plugin that creates a Sublime Text-style canvas based minimap alongside the web page to indicate the current content area you're reading.

How to use it:

1. Add the jQuery javascript library and the jQuery minimap plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.minimap.min.js"></script>

2. Initialize the plugin after document ready.

$(document.body).minimap();

2. Customize the minimap via JS options.

$(document.body).minimap({
highlight: 'rgba(135, 206, 250, 0.5)',
lowlight:  'rgba(0, 0, 0, 0.5)',
location:  'top right',
preventSelect: true,
width:     '160px',
zIndex:    '9999'
});

Change log:

v0.0.2 (2014-06-23)

  • minimap is now draggable.

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