1

I am working with a dashboard (background image with a series of controls and charts/graphs) that was originally rendered at 1920x1080. This dashboard needs to be viewed within the contents of an iFrame (so that it can be embedded into 3rd party portal page).

Rigth now, on the HTML doc that has the iFrame (depending on what resolution a client is using), I am using the following code:

<style>
#wrapper { width: 1440px; height: 910px; padding: 0; overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto; }
#scaled-frame { width: 1930px; height: 1200px; border: 0px; }
#scaled-frame {
zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame  { zoom: 1;  }
}
</style>
<div id="wrapper"><iframe id="http://url-to-iFramepage.html"></iframe></div>

I keep a number of different iterations of this file for various resolutions (scaling more and more for lower resolutions), so when a user wants to embed the dashboard into their portal page, I refer them to the appropriate .html file (each file having different scaling settings).

Is there any way to perform the type of scaling above in a more dynamic way? In a perfect world, depending on the iFrame size, the scaling factors would automatically adjust. It doesn't matter if the solution is css or javascript or whatever...if I can get that to work, it would save a lot of headaches.

I have looked at a TON of different posts (which gave me the initial code I'm using, but I can't seem to get any of the suggested dynamic methods to work with this content. I am also not very handy with HTML and JavaScript, so an answer may well be readily available but I just don't see it.

Thank you in advance for any help.

Buckwheattb
  • 181
  • 1
  • 2
  • 12

1 Answers1

2

I built a little javascript that I'm using in my website to autoscale multiple iframes, including a sidebar widget. I have adjusted it a bit to your case and added some comments. If using this multiple times in a document then the wrappers must be class based!

Simply style your wrapper and the frame should follow. I did comment my own script to not set width to 100%, but use auto instead. Don't recall what that was about, maybe just related to my own website. Also be aware that margin/padding between iframe and wrapper may cause miscalculations.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
    $("#wrapper").each(function() {
        var $wrap = $(this);
        function iframeScaler(){
            var wrapWidth = $wrap.width(); // width of the wrapper
            var wrapHeight = $wrap.height();
            var childWidth = $wrap.children("iframe").width(); // width of child iframe
            var childHeight = $wrap.children("iframe").height(); // child height
            var wScale = wrapWidth / childWidth;
            var hScale = wrapHeight / childHeight;
            var scale = Math.min(wScale,hScale);  // get the lowest ratio
            $wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" });  // set scale
        };
        $(window).on("resize", iframeScaler);
        $(document).ready( iframeScaler);
    });
});
</script>
yezzz
  • 2,990
  • 1
  • 10
  • 19
  • First off...thank you..Ok...so a very junior question for you. How would i integrate the two together? I am not strong with the web programming kung-fu – Buckwheattb Mar 05 '16 at 20:58
  • Depends on the site that generates the html. Wordpress by any chance? – yezzz Mar 05 '16 at 21:06
  • How are you currently integrating the style and div you're showing above? – yezzz Mar 05 '16 at 21:07
  • The dashboard is actually presented by jasperreports...it is on the same system I'm running the html file on, and yes, that is literally the entire contents of the html file I'm using. Hope that helps – Buckwheattb Mar 05 '16 at 22:34
  • Maybe the page will only do vanilla js, so you may need to include jquery as well. – yezzz Mar 05 '16 at 23:33
  • Actually it's very likely the page will do js only, so I added jquery source for you and changed some code. As for the styles, keep the fixed sizes of the iframe, the zoom and scale can go. Make the wrapper responsive eg. width:100% or auto, so the script can do its job. If you have access to the whole document you may want to put the scripts and styles between the tags.... see http://stackoverflow.com/questions/1362039/style-and-script-tags-in-html-body-why-not . Also your frame needs a src attribute ;) – yezzz Mar 06 '16 at 10:33
  • That did the trick! Thank you yezzz....one follow-up though...If I needed to fit both height and width, what would I change in your code? Or is that not an option? Thank you again though...I have been banging my head on this for a while. – Buckwheattb Mar 06 '16 at 11:11
  • Would it need to retain aspect ratio, or just use different scale for vertical component? – yezzz Mar 06 '16 at 11:34
  • good question...let's say that we wanted to keep the aspect ratio, rather than just squeeze it up...unless that is a major pain to do. I don't see this being needed often, but it could occur at times for poorly formatted dashboards. – Buckwheattb Mar 06 '16 at 11:38
  • Now it tests width and height, then uses the lowest ratio. Hope that was the correct logic. Make sure to set wrapper heigth to auto or similar. Give it a shot, check for any bugs in your browser console. – yezzz Mar 06 '16 at 13:18
  • That seems to work perfect. I don't have a dashboard that is not sized right available right now, but in my browser re-sizing tests, it looks like it is keeping both. Thank you so much yezzz...greatly appreciated the help! – Buckwheattb Mar 06 '16 at 13:44