jQuery Canvas Minimap

Container Minimap is a plugin that creates a minimap of the desired container scaled down and styled so you can highlight the overall position of the contents of the container element.

by jrdiaz

HTML

<div id="container">
        <div id="chessboard">
            <!-- Board -->
            <div>
                <div class="white_square" id="KR8"></div>
                <div class="black_square" id="KN8"></div>
                <div class="white_square" id="KB8"></div>
                <div class="black_square" id="K8"></div>
                <div class="white_square" id="Q8"></div>
                <div class="black_square" id="QB8"></div>
                <div class="white_square" id="QN8"></div>
                <div class="black_square" id="QR8"></div>
            </div>
            <div>
                <div class="black_square" id="KR7"></div>
                <div class="white_square" id="KN7"></div>
                <div class="black_square" id="KB7"></div>
                <div class="white_square" id="K7"></div>
                <div class="black_square" id="Q7"></div>
                <div class="white_square" id="QB7"></div>
                <div class="black_square" id="QN7"></div>
                <div class="white_square" id="QR7"></div>
            </div>
            <div>
                <div class="white_square" id="KR6"></div>
                <div class="black_square" id="KN6"></div>
                <div class="white_square" id="KB6"></div>
                <div class="black_square" id="K6"></div>
                <div class="white_square" id="Q6"></div>
                <div class="black_square" id="QB6"></div>
                <div class="white_square" id="QN6"></div>
                <div class="black_square" id="QR6"></div>
            </div>
            <div>
                <div class="black_square" id="KR5"></div>
                <div class="white_square" id="KN5"></div>
                <div class="black_square" id="KB5"></div>
                <div class="white_square" id="K5"></div>
                <div class="black_square" id="Q5"></div>
                <div class="white_square" id="QB5"></div>
                <div class="black_square" id="QN5"></div>
...

CSS

.white_square, .black_square  { display: table-cell; width: 50px; height: 50px; }
    .white_square                 { background-color: white; }
    .black_square                 { background-color: black; }
    .piece                        { position: absolute; top: 0; left: 0; z-index: 100; width: 50px; cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

    #container                    { float: left;  border: 1px solid black; padding: 10px; }
    #chessboard                   { display: table-cell; border: 1px solid black; }
    #minimap1                     { float: left; padding: 10px; cursor: pointer; }

JavaScript

/**
 * jquery.minimap-0.1.js - Container Minimap Plugin
 * ==========================================================
 * (C) 2011 José Ramón Díaz - [email protected]
 *
 * http://3nibbles.blogspot.com/jquery-canvas-minimap.html
 * http://plugins.jquery.com/project/CanvasMinimap
 *
 * Container Minimap is a plugin that creates a minimap of the desired container
 * scaled down and styled so you can highlight the overall position of the
 * contents of the container element.
 *
 * Scale is calculated based on the minumum of width or height of the canvas used
 * to draw the minimap. So, using only CSS or attributes you can modify the scale
 * adjusting it to the desired size of the container.
 *
 * INSTANTIATION
 * Call the minimap method over the selector of the canvas where the minimap is
 * going to be drawn
 *
 *     var minimapInstance = $('#myCanvas').minimap( $('myContainer') [, options] );
 *
 * The only HTML needed is the target canvas and the container to be drawn.
 *
 * OPTIONS
 *     - container : document.    Defaults to whole page. Otherwise is a
 *                                selector of the desired container to be mapped.
 *     - styles    : [ OutlineStyle, ... ]    array with the styles to apply.
 *
 * The OutlineStyle style must be in the following format (Same format than Fracs):
 *
 *     OutlineStyle {
 *         // selector to use for that style
 *         selector: String / HTMLElement / [HTMLElement, ...] / jQuery
 *
 *         // border stroke width
 *         strokeWidth: float / undefined / 'auto'
 *
 *         // border color
 *         strokeStyle: String / undefined / 'auto'
 *
 *         // fill color
 *         fillStyle: String / undefined / 'auto'
 *     }
 *
 * strokeWidth, strokeColor, fillColor may have the special values
 * undefined to ignore and 'auto' to fetch values from css.
 *
 * PUBLIC API
 *     -  $.minimap.redraw()    Redraws the minimap
 *
 * Legal stuff
 *     Based on jQuery plugin named Fracs, but modified to...