iframe scaling width issue

Question

I am using a zoom /scaling to resize an iframe:

{
-ms-zoom: 0.80;
-moz-transform: scale(0.80);
-o-transform: scale(0.80);
-webkit-transform: scale(0.80);
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}

This works well for what I want, however where the width is resized it leaves margins where 100% stays as -20%. I could theoretically detect the width of the parent and then use jQuery after the resize to set it, or maybe zoom the inside page instead, but I am hoping someone can give me a more elegant solution that does'nt involve using jquery for styling?

http://jsfiddle.net/ablueman/8uvz0fzf/

[edit] Similiar issue: Scrolling when using css scale

Answer 1

So heres what I did to bodge a working version, I will either link this to a slider so you can zoom in and out (using var bob) or perhaps make it dynamic with a responsive iframe but heres what I have so far:

<script>
function mainiframe(){
var bob = "0.90";
$('iframe#mainiframe, iframe#injectIframe').contents().find('body').css({
            "margin" : 0,
      "zoom": bob,
            "-moz-transform": "scale(" + bob + ")",
            "-webkit-transform": "scale(" + bob + ")",
            "-o-transform": "scale(" + bob + ")",
            "-o-transform-origin": "0 0",
            "-moz-transform-origin": "0 0",
            "-webkit-transform-origin": "0 0"
    });
};
</script>

Then in the body of the document.

<button onclick="mainiframe()">Click me</button>

Obviously this wont work cross domain, and as you can see I actually zoom out 2 iframes at once. If I can link this to the responsive Iframe with some kind of ratio I may be able to make a responsive iframe with zoom, but the problems complicated.

Doesnt work perfectly due to JSfiddles page setup but : http://jsfiddle.net/ablueman/w4e8zu52/

[Edit] New bodge with slider: http://jsfiddle.net/ablueman/8uvz0fzf/ It only affects:

"Error 404 We're truly sorry, but there is no such page."

But shows working, obviously this wouldnt be an issue with a normal iframe page.

Answer 2

As via css it is only possible to affect the iframe itself, not the iframe contents (eg iframe body ), you can't do this with css. That being said, you can access the contents of an iframe via javascript. With jQuery it would be something like:

$('iframe').contents().find(body).css('zoom', yourvalue);