MiniMap – jQuery Plugin

MiniMap – jQuery Plugin

It will help you to visualize content you want to highlight in your long page or a panel on a MiniMap

MiniMap jQuery Plugin

MiniMap jQuery Plugin

Requires :

jquery-1.7.2.min.js (older versions should also work)
simpleMinimap.jquery.js (5KB)
jquery.scrollTo-1.4.2-min.jquery.js (2KB)
vtip.js (1KB) – Optional, to show content of marker line in tooltip
simpleMinimap.css (few bytes)

Javascript :

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
        var minimap = $("#logPanel").simpleMiniMap({
            afterBuildMap : function(elem, map)
            {
                vtip(map); //Only if vtip is added and you want to show tooltip on markers
            }
        });
        minimap.buildMap(); //This builds markers and shows, every time when you update content of the element and want to reload markers, call this method.
    });
// ]]></script>

Options :

$.simpleMiniMap.defaultOptions = {
    filterElem : ".highlight", //Can be filtered by any possible jquery selector
    showScrollButtons : true, //To show/hide scroll to top/bottom buttons
    noTitleOnMarker : false, //No title/tooltip for markers
    titleBuilder : false, //If you want to customize title of marker, this is function, function(marker)
    beforeBuildMap : false, //method to call before building maf, function(mainElement, miniMapWrapper)
    afterBuildMap : false, //method to call after building maf, function(mainElement, miniMapWrapper)
    markerCSSClass : "marker", //CSS class for marker on minimap
    highlightBGColor : "#574E4E", //After scrolling to marker reference it highlights the parent item of it, this color will be used to highlight(as background color)
    highlightItemDuration : 1000 //0 will disable highlighting, duration of animation
};

Live Demo :

http://www.labs.urvatechlabs.com/miniMap/

Download :

http://www.labs.urvatechlabs.com/miniMap/demo.zip

Disclaimer :  This is the first, untested version, it requires specific ordered/styled HTML to generate map properly and has very minimal options right now. I may improvise this code as I get time, but it is usable if followed same HTML/CSS as this page. You can send me your queries or issues at vipul[dot]limbachiya[at] gmail (format to valid email address).

Licence : You can use it as you own it! (Licence for other libraries stays as they have defined.)

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather