Magnoliyan Minimap

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

• HTML5 Canvas based fast rendering
• Works in browsers without canvas support
• Realistic page preview
• Draggable and resizable navigator panel
• Auto-update on the original content resize
• Easy CSS based customization
• Ability to select elements for faster rendering

Requirements

This plugin uses the following Javascript libraries:

• jQuery
• jQuery UI
• html2canvas (only for realistic option)

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

$("#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.

//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

<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