Changing how to use the plugin. The method will now be invoked on the element that will become the miniview. An element will be passed which will act as the source parent element for the map.

Author: John Bai

README.md

@@ -1,10 +1,10 @@
 # jquery-minimap
-A jQuery plugin that creates an interactive minimap of a parent element and its children.
+A jQuery plugin that creates an interactive minimap of an element and its children.
 
 ##Demo
 https://john-bai.github.io/jquery-minimap
 
 ##Usage
 ```javascript
-$parent.minimap( $children );
+$( "#minimap" ).minimap( $element );
 ```

demo.html

@@ -37,12 +37,12 @@
 				z-index: 1;
 			}
 
-			.mini {
+			.minimap-node {
 				position: absolute;
 				background-color: rgb(96, 122, 134);
 			}
 
-			.port {
+			.minimap-viewport {
 				position: absolute;
 				box-sizing: border-box;
 				background-color: rgba(79, 111, 126, 0.4);
@@ -57,10 +57,11 @@
 		<div id="parent"></div>
 
 		<script>
-			$( function () {
-				var $parent = $( "#parent" );
+			$(function () {
+				// First, lets build an interesting example of parent and child DOM elements...
 
 				// Add children to the parent.
+				var $parent = $( "#parent" );
 				var childrenFragment = document.createDocumentFragment();
 				var left = 0;
 				var top = 0;
@@ -82,9 +83,11 @@
 					} );
 				} );
 
-				// Initialize the minimap plugin.
-				$parent.minimap( $children );
-			} );
+
+				// Now invoke the minimap method on the element you'd like to become the minimap,
+				// passing a reference to the element you'd like the map to be based on.
+				$( "#minimap" ).minimap( $parent );
+			});
 		</script>
 	</body>
 </html>

jquery-minimap.js

@@ -1,18 +1,17 @@
 (function( $ ) {
-	$.fn.minimap = function( children ) {
+	$.fn.minimap = function( $mapSource ) {
 		var x, y, l, t, w, h;
-		var $parent = this;
 		var $window = $( window );
-		var $minimap = $( "#minimap" );
+		var $minimap = this;
 		var minimapWidth = $minimap.width();
 		var minimapHeight = $minimap.height();
-		var $viewport = $( "<div></div>" ).addClass( "port" );
+		var $viewport = $( "<div></div>" ).addClass( "minimap-viewport" );
 		$minimap.append( $viewport );
 		synchronize();
 
 		$window.on( "resize", synchronize );
-		$parent.on( "scroll", synchronize );
-		$parent.on( "drag", init );
+		$mapSource.on( "scroll", synchronize );
+		$mapSource.on( "drag", init );
 		$minimap.on( "mousedown touchstart", down );
 
 		function down( e ) {
@@ -67,13 +66,13 @@
 			l += dx;
 			t += dy;
 
-			var coefX = minimapWidth / $parent[ 0 ].scrollWidth;
-			var coefY = minimapHeight / $parent[ 0 ].scrollHeight;
+			var coefX = minimapWidth / $mapSource[ 0 ].scrollWidth;
+			var coefY = minimapHeight / $mapSource[ 0 ].scrollHeight;
 			var left = l / coefX;
 			var top = t / coefY;
 
-			$parent[ 0 ].scrollLeft = Math.round( left );
-			$parent[ 0 ].scrollTop = Math.round( top );
+			$mapSource[ 0 ].scrollLeft = Math.round( left );
+			$mapSource[ 0 ].scrollTop = Math.round( top );
 
 			redraw();
 		}
@@ -83,10 +82,10 @@
 		}
 
 		function synchronize() {
-			var dims = [ $parent.width(), $parent.height() ];
-			var scroll = [ $parent.scrollLeft(), $parent.scrollTop() ];
-			var scaleX = minimapWidth / $parent[ 0 ].scrollWidth;
-			var scaleY = minimapHeight / $parent[ 0 ].scrollHeight;
+			var dims = [ $mapSource.width(), $mapSource.height() ];
+			var scroll = [ $mapSource.scrollLeft(), $mapSource.scrollTop() ];
+			var scaleX = minimapWidth / $mapSource[ 0 ].scrollWidth;
+			var scaleY = minimapHeight / $mapSource[ 0 ].scrollHeight;
 
 			var lW = dims[ 0 ] * scaleX;
 			var lH = dims[ 1 ] * scaleY;
@@ -111,19 +110,19 @@
 		}
 
 		function init() {
-			$minimap.find( ".mini" ).remove();
+			$minimap.find( ".minimap-node" ).remove();
 			//creating mini version of the supplied children
-			children.each( function() {
+			$mapSource.children().each( function() {
 				var $child = $( this );
-				var mini = $( "<div></div>" ).addClass( "mini" );
+				var mini = $( "<div></div>" ).addClass( "minimap-node" );
 				$minimap.append( mini );
-				var ratioX = minimapWidth / $parent[ 0 ].scrollWidth;
-				var ratioY = minimapHeight / $parent[ 0 ].scrollHeight;
+				var ratioX = minimapWidth / $mapSource[ 0 ].scrollWidth;
+				var ratioY = minimapHeight / $mapSource[ 0 ].scrollHeight;
 
 				var wM = $child.width() * ratioX;
 				var hM = $child.height() * ratioY;
-				var xM = ($child.position().left + $parent.scrollLeft()) * ratioX;
-				var yM = ($child.position().top + $parent.scrollTop()) * ratioY;
+				var xM = ($child.position().left + $mapSource.scrollLeft()) * ratioX;
+				var yM = ($child.position().top + $mapSource.scrollTop()) * ratioY;
 
 				mini.css( {
 					width : Math.round( wM ),