Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript / CSS: set (firefox) zoom level of iframe?

I'd like to create a page with multiple iframes displaying different pages - a sort of "browse multiple pages side-by-side" type thing. The trouble is that in doing so, the viewports are pretty small and I can only see the top-left corner of each page.

Is there a way to set the iframe to effectively do firefox's zoom-out (ctrl-minus) a few times so that the whole page is visible? I don't particularly care if the text is legible, only if I can basically see what the page looks like.

I don't need this to be cross-browser (for my purposes it only needs to work in the latest firefox) although obviously a cross-browser solution would be preferable for the sake of anyone else who needs this and stumbles across this question.

like image 255
Mala Avatar asked Jan 11 '11 17:01

Mala


People also ask

How do I zoom in iframe content?

In my experience, with the zoom function trying to scale the iframe div of #frame , it would scale the iframe size and not the content within it (which is what you're going for). Looks like this. Works for me on IE8, Chrome and FF. Use zoom in IE8 Standards Mode, use -ms-zoom in quirks mode.

How do I scale down an iframe?

Just multiply the original dimensions by the zoom ration you want to use. For example, if you want to scale to 71% as shown in the example below, 1000px x 2000px becomes 710px x 1420px. The zoom factor is input for the zoom , -moz-transform , -o-transform , and -webkit-transform properties.

How do you make a zoom level in CSS?

Divide outerWidth by innerWidth Since outerWidth is measured in screen pixels and innerWidth is measured in CSS pixels, we can use that to use the ratio between them to determine the zoom level. Then browserZoomLevel is proportional to how much we zoom in or out.

How do I zoom the same element size?

min-width: 100%; This will freeze the width, you can do the same for height too.


1 Answers

You can apply css transforms to iframes:

iframe {     -moz-transform: scale(0.25, 0.25);      -webkit-transform: scale(0.25, 0.25);      -o-transform: scale(0.25, 0.25);     -ms-transform: scale(0.25, 0.25);     transform: scale(0.25, 0.25);      -moz-transform-origin: top left;     -webkit-transform-origin: top left;     -o-transform-origin: top left;     -ms-transform-origin: top left;     transform-origin: top left;     border: solid #ccc 10px; } 

http://jsfiddle.net/6QMcX/

The transform origin property allows it to be scaled without changing its position.

This works for Webkit, Opera, FF and IE9 (untested). Text looks great and is still legible at very small sizes.

like image 127
methodofaction Avatar answered Oct 12 '22 01:10

methodofaction