Magnoliyan Minimap

Magnoliyan Minimap

see the forest for the trees

Overview

Magnoliyan Minimap or mgMiniMap is Photoshop Navigator Panel like jQuery plugin. Say you have a page which long content goes out of the visible part of the browser's window - viewport. mgMiniMap shows minimizes and simplified preview of the full page content with clearly marked draggable viewport. While you scroll the page, minimap automatically updates the preview. Also, while you drag the viewport frame, the original content gets scrolled as well.

mgMinimap can be applied either to the window object or any scrollable elements. For example, you can apply it to a div which content exceeds its dimensions.

mgMinimap automatically updates its preview when original content gets resized, but also you can manually call its update method when, let's say, the original content dynamically updates.

mgMinimap suits perfectly in use cases like: Web apps for managing complex workflows, drag and drop components, but can work nice in any page as a fast visual navigation tool.

Features

Requirements

This plugin uses the following Javascript libraries:

Installation

Step 1: link required files

mgMiniMap depends on the jquery and jquery ui (draggable), thus we need to include those:

<!-- jQuery, local or CDN link -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery UI with a theme css, local or CDN link -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Step 2: link mgMiniMap

For mgMiniMap itself you have to include css and javascript file. You can find those two files in source directory in this package, so copy them in your project and link properly. Feel free to update or overwrite CSS rules in order to customize look and feel:

<link rel="stylesheet" href="mgMiniMap/mgMiniMap-1.3.0.css">
<script type="text/javascript" src="mgMiniMap/mgMiniMap-1.3.0-min.js"></script>

Step 3: call mgMiniMap

All this is left is to initiate mgMiniMap plugin in when document window is loaded :

$(window).load(function(){
    $(window).mgMiniMap();
});

Alternativly you can apply it to a div :

$(window).load(function(){
    $("#someDivId").mgMiniMap();
});

and apply some custom options:

$(window).load(function(){
    $("#someDivId").mgMiniMap({
        draggable: true,
        resizable: true,
        html2canvas: true
    });
});

Options

option description default possible values
elements CSS of the elements which should be rendered on the mgMiniMap, if false provider will render all first children. CSS selector is applied starting from the element on which minimap is attached. false String|False
draggable If minimap panel should be draggable false Boolean
resizable If minimap panel should be resizable false Boolean
realistic If all elements realistic preview should be rendered in minimap. In this case elements is ignored. This option is available on if html5 canvas is supported. Also html2canvas script must be included: http://html2canvas.hertzen.com Note that depending on the page complexity this option might downgrade minimap performance. false Boolean
navigatorClass CSS class of the mgMiniMap div "mgNavigator" String
viewportClass CSS class of the mgMiniMap viewport frame div "mgViewport" String
defaultBgColor Default color of elements to be rendered on minimap if background color in original element is not present. '#AAA' String
scrollbarWidth Browser's scrollbar width in pixels 20 Integer
maxHeight Max height in px for rendered minimap null Integer
debug Show some debug info in the console false Boolean
update Manually call update of an existing minimap
$("#scrollarea").mgMiniMap('update');
 

Examples

Window with Complex Workflow Components

This example showcases the usage of mgMiniMap for visually complex web apps. It features jsplumbtoolkit. It's not required for mgMiniMap to work, but nicely presents next generation web apps and possible mgMiniMap role.

VIEW
//init jsPlumb toolkit
jsPlumb.bind("ready", function() {
    jsPlumb.setRenderMode(jsPlumb.SVG);
    jsPlumbDemo.init();
    // make all the element divs draggable
    jsPlumb.draggable(jsPlumb.getSelector(".element"), {
        stop: function( event, ui ) {
            //update MiniMap after an element is moved
            $(window).mgMiniMap('update');
        }
    });
});
$(window).load(function(){
    //init MiniMap
    $(window).mgMiniMap({elements: '.element',draggable: true});
});

Scrollable Div with Complex Workflow Components

This is almost the same example but this time mgMiniMap is applied to a div

VIEW
<div id="scrollarea" style="position: relative; width: 400px; height: 400px; overflow: auto">
    <div class="element" id="element1"><strong>1</strong></div>
    <div class="element" id="element2"><strong>2</strong></div>
    <div class="element" id="element3"><strong>3</strong></div>
    <!-- ... -->
</div>

In $(window).load we initiate the mgMiniMap:

$(window).load(function(){
    //init MiniMap
    $("#scrollarea").mgMiniMap({elements: '.element',draggable: true});
});

Realistic Minimap

This is example is implemented directly in this page. You can see realistic mgMiniMap on the right hand side. Script html2canvas is required in order to support this feature:


<script src="js/html2canvas.min.js"></script>
$(window).load(function(){
    $(window).mgMiniMap({draggable: true, resizable: true, realistic: true});
});

Warning: html2canvas might have some bugs and limitations. You might need to check newer (beta) version for some bug fixes: https://github.com/niklasvh/html2canvas