Reply To: Resizing Grid

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

#2615

Ryan
Keymaster

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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="/mds/image-scale.min.js"></script>
	<script src="/mds/jquery.rwdImageMaps.min.js"></script>
	<script>
	/**
	 * Get frame for document
	 *
	 * @see http://stackoverflow.com/questions/3592230/getting-a-reference-to-the-parent-iframe
	 *
	 * @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
		gridframe.load(function(){
			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)");

			// https://github.com/GestiXi/image-scale
			gridimg.imageScale({
				scale: "best-fit",
				align: "top",
				rescaleOnResize: true
			});

			// https://github.com/stowball/jQuery-rwdImageMaps
			gridimg.rwdImageMaps();

			// adjust iframe height
			setIframeHeight();

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

			// trigger a window resize event
			$(window).trigger("resize");

			// 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() {
				gridframe.height(getIframeHeight());
			}
		});
	});
	</script>

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

https://github.com/GestiXi/image-scale
https://github.com/gestixi/image-scale/raw/master/image-scale.min.js

https://github.com/stowball/jQuery-rwdImageMaps
https://github.com/stowball/jQuery-rwdImageMaps/raw/master/jquery.rwdImageMaps.min.js

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>
			</div>
			<div class="container">