Reply To: Resizing Grid

Million Dollar Script Forums General Resizing Grid Reply To: Resizing Grid



OK, so here is what you can try to see if it works for you. Hopefully I got it all here but if you have issues just let me know.

In the file /include/area_map_functions.php around line 249 below the <head> tag add in this:

	<script src=""></script>
	<script src="/mds/image-scale.min.js"></script>
	<script src="/mds/jquery.rwdImageMaps.min.js"></script>
	 * Get frame for document
	 * @see
	 * @param document
	 * @returns {*}
	function getFrameForDocument(document) {
		var w= document.defaultView || document.parentWindow;
		var frames= w.parent.document.getElementsByTagName('iframe');
		for (var i= frames.length; i-->0;) {
			var frame= frames[i];
			try {
				var d= frame.contentDocument || frame.contentWindow.document;
				if (d===document)
					return frame;
			} catch(e) {}
	// document loaded
	$(document).ready(function() {
		var gridframe = $(getFrameForDocument(document));
		var gridwidth = gridframe.innerWidth();
		var gridheight = gridframe.innerHeight();
		// iframe loaded
			var gridimg = $('#theimage');
			var gridmap = $('#main');
			var parentWindow = window.parent;

			// adjust some CSS
			$('html').css('width', '100%').css('height', '100%');
			$('body').css('width', '100%').css('height', '100%').css("background", "none").css('position', 'relative');
			$('#bubble').css("z-index", 999);
			gridframe.css("width", "calc(100vw - 22px)");

				scale: "best-fit",
				align: "top",
				rescaleOnResize: true


			// adjust iframe height

			// wait a second and trigger a window resize event
			}, 1000);
			// adjust iframe height whenever the window resizes
			$(parentWindow).resize(function() {

			// trigger a window resize event

			// gets the iframe height which is equal to the window height minus the height of other elements above the iframe on the page
			function getIframeHeight() {
				return $(parentWindow).innerHeight() - $(".top_wrap", parentWindow.document).innerHeight();

			// set the iframe height
			function setIframeHeight() {

Be sure to download the scripts and adjust the paths to them appropriately. You have to get these 2 scripts:

The first one is for scaling the image. The second is for scaling the image map coordinates.

There is a bunch of javascript as well that I added and found online.

In your MDS index.php file adjust the iframe code like so:

<iframe id="gridframe" style="margin:0 auto;" width="1001" height="1001" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" scrolling="no" allowtransparency="true" src="display_map.php?BID=1"></iframe>

In your /html/header.php file add a wrapper around the heading and menu elements like so:

		<div class="inner">
			<div class="top_wrap">
				<div class="heading">

			<div class="container">