Favourite Host


Install Service

Premium Support


Forum breadcrumbs - You are here:ForumForum: GeneralResizing Grid
Login or register to post.

Resizing Grid

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.

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.

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!

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.

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 loadedgridframe.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-scalegridimg.imageScale({scale: "best-fit",align: "top",rescaleOnResize: true});// https://github.com/stowball/jQuery-rwdImageMapsgridimg.rwdImageMaps();// adjust iframe heightsetIframeHeight();// wait a second and trigger a window resize eventsetTimeout(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 pagefunction getIframeHeight() {return $(parentWindow).innerHeight() - $(".top_wrap", parentWindow.document).innerHeight();}// set the iframe heightfunction 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-scalehttps://github.com/gestixi/image-scale/raw/master/image-scale.min.jshttps://github.com/stowball/jQuery-rwdImageMapshttps://github.com/stowball/jQuery-rwdImageMaps/raw/master/jquery.rwdImageMaps.min.jsThe 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">

Brilliant!! Thanks for this, Ryan. Sorry for late reply, I was indisposed yesterday. Will modify as shown and report back. Thanks again!

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

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 eventsetTimeout(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.