Resizing Grid

Million Dollar Script Forums General Resizing Grid

This topic contains 7 replies, has 2 voices, and was last updated by  Ryan 3 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2611

    mattybonbon
    Participant

    Hi Ryan,

    Been chipping away on a project using the your grid code, I posted a while back asking about GID’s. I’m now trying to resize the grid iframe dynamically to current screen size(Using Bootstrap code to transition fullscreen to mobile) but not having much success. The grid squares will not resize and stay at their default size/value even when at mobile phone screen sizes. Only property that has successfully resized the grid was a css3 transform property ( -webkit-transform: scale() ) but sadly is a purely static option. I’m a bit of a web code beginner so sorry if what I’ve said is confusing. I’m aware this is beyond the intended purpose of your script but if you have any advice that would be great.

    #2612

    Ryan
    Keymaster

    Hi there,

    If you resize the iframe, the image displayed inside it will have to be resized as well or you could add scroll bars.

    I’m not sure the javascript would have to be adjusted if you can scale the image map.

    Luckily earlier this week I worked on a very similar thing where I implemented scaling hotspots overtop of videos within iframes. I will see if I can work with that and give you some code in a bit.

    #2613

    mattybonbon
    Participant

    Thanks for the quick reply,

    That would be great if you could point me in the right direction. Nearest solution i found was to set the iframe id=myframe, remove height and width from iframe and then call it from this piece of js:

    $(document).ready(function() {
    setMyFrame();
    $(window).resize(function() {
    setMyFrame();
    });
    function setMyFrame() {
    var w = $(“#myframe”).innerWidth();
    var h = (1400 * w) / 1400;
    $(“#myframe”).innerHeight(h);
    }
    });

    With a line of css:

    #myframe { width:100%; }

    didn’t work however.

    Thanks for taking a look into this for me!

    #2614

    Ryan
    Keymaster

    Just thought I’d let you know that I think I’ve figured it out and have some code to add but I’ll post it in a bit, just going to get some supper and finish it up.

    #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">
    
    #2616

    mattybonbon
    Participant

    Brilliant!! Thanks for this, Ryan.

    Sorry for late reply, I was indisposed yesterday.

    Will modify as shown and report back.

    Thanks again!

    • This reply was modified 3 months, 3 weeks ago by  mattybonbon.
    #2618

    mattybonbon
    Participant

    It worked!

    Only code I had to edit was to change paths slightly and remove:

    
    gridframe.css("width", "calc(100vw - 22px)");
    
    

    Only removed it as it was off-centering my grid to the right of screen.

    Added some screens of it in action and has dynnamically resized correctly.

    My only worry is that zooming in to see grid on mobile only zooms everything but the grid. I think this is because the grid is being told to stay the same size dependent on the screen size. This was the behaviour I noticed when zooming on browser but perhaps will be different when actually tested on a mobile screen. It’s a minor issue.

    Thanks again for taking the time to write some code for it as was frustrating the hell out of me.

    One other question I have is I set the opacity through the ‘area_map_functions.php’ file as it seemed to now override the ‘style.css’ code i had from iframe once i added in your new code. I used:

    
    .css('opacity', '0.85')
    
    

    This set opacity for the grid and the ads on it. Is there anyway to independently set the opacity for the ads?

    Thanks again for the help,

    Matt

    Attachments:
    You must be logged in to view attached files.
    #2621

    Ryan
    Keymaster

    Hello,

    The grid won’t zoom like that because it’s set to scale to best-fit in the iframe by the image scale script and the iframe is set to scale to the height of the window minus the height of the top elements above such as logo and menu. You would have to probably try to detect page zoom somehow and change the javascript to adjust the iframe element height how you want which might get tricky and you might have to play around with it to get it to do what you want.

    You also don’t need this code below which I noticed I had above before and have now edited out. I did have the window resize event in there before but realized it was just in the wrong spot and moved it below to where it is now:

    // wait a second and trigger a window resize event
    			setTimeout(function(){
    			}, 1000);

    If you mean the opacity of the ads in the grid separate from the grid the way you could do that is using the built in blending feature in the MDS admin under Pixel Inventory > Manage Grids > Backgrounds: https://milliondollarscript.com/article/alpha-blending-tutorial/

    You can use paint.net or your favourite image editing app and edit the properties of the layer and adjust the opacity there and save it as a 32bit PNG file (which paint.net should auto detect) and then upload to MDS.

    • This reply was modified 3 months, 3 weeks ago by  Ryan.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.