Avoid iframe-scrollbars with squeezeFrame.js
I know, this seems to have become an obsession of mine, but here I am again with a follow-up on my iframes-tips blogpost. You might remember I advised against disabling scrollbars on iframes, because;
Disabling them will render the iframe partially inaccessible for some of your users, because the size your iframe-content needs, depends on things outside your control such as operating system & versions (e.g. font & screen resolution), browser (e.g. css-implementation) and browser configuration (e.g. non-default font-size).
But what if you could resize (generally: zoom out) the iframe-content to perfectly fit the available width and height, thus avoiding vertical and especially horizontal scrollbars? Well, that is exactly what squeezeFrame.js tries to do (using css zoom and -moz-transform:scale in Firefox)! Just include the javascript-file in the iframe-content page and set a few options if you want to change the default behavior (which is: zoom in/out for width only, max. + or – 5%).
squeezeFrame.js was tested successfully in Firefox 3.6, IE6, Safari4 and Chrome4, but does not work in Opera 10.5. More info (including some “known issues”) can be found on the demo-page and in the javascript-code off course.
As always; reply in the comments or contact me if you find bugs or have problems.
Izzy
12 Nov 10 at 21:52
thanks dude
Chris
4 Apr 11 at 02:55
Works great but auto redirects you to the iframe page when using IE.
frank
4 Apr 11 at 06:12
that’s … unusual
it worked in IE6 and 8 at the time I wrote this. what version of IE were you using? did you test on the example I created, or with a page of your own?
frank
5 Apr 11 at 10:24
just tested my own example-page in IE9, works like a charm Chris. Unless prove otherwise, I’ll consider this a problem with your implementation of my ohterwise perfect code :-p
Chris
5 Apr 11 at 21:39
It’s a <= IE8 bug I think. The issue might be when referencing external sites.
Check it out here:
kvp.net/iFrame.html <— site with the iframe
corian123.net/iframe.html <—- redirects you to here^^
frank
7 Apr 11 at 10:15
don’t have access to a PC with IE<9 right now, but let me describe what is supposed to happen:
1. when going to kvp.net/iFrame.html, you should stay on that page which contains the iframe with http://www.corian123.net/iframe.html inside it
2. when going to kvp.net/sitemockup.html, you’re should stay on that page which contains the same iframed http://www.corian123.net/iframe.html
3. when going to corian123.net/iframe.html (the page which is supposed to be in an iframe, you will indeed to be redirected to http://kvp.net/sitemockup.html
the reason for the redirect is in the code of squeezeFrame (and can easily be changed):
1. in iframe.html you have
myContainer="http://www.kvp.net/sitemockup.html";2. in squeezeFrame.js there is:
if (self !== top) { ... } else {if (typeof myContainer==="string") { window.location=myContainer; }
}
so if you don’t like the redirect, you could leave “myContainer” empty, or put the line in the “else”-block in comment.
hope this helps!
David
9 Jun 11 at 08:26
Yeah baby!!!! I got it! I’m amazing!
Ok, so the squeeze thing wasn’t working for me, and this way is far from foolproof, but…
Use CSS3 Transforms, Scale! Beautiful!
So I make the iFrame approx 120%, or whatever will fully encapsulate the entire site. Then, make the whole iFrame scaled. So add it to a class with this:
-moz-transform: scale(.7);
-webkit-transform: scale(.7);
-o-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7);
You can use anywhere from .5 to 2.0
Fun fun! Ok, so I just got it working 20s ago, so I’m sure there’s lots of quirks to work out, but it sure is a start! Whoopee!
frank
9 Jun 11 at 08:51
great, keep me posted on your progress!
(squeezeFrame.js uses -moz-transform:scale as well (as it didn’t do “zoom”), I found that I also had to declare -moz-transform-origin: 0 0; to make this work, might come in handy for you as well)
David
10 Jun 11 at 01:57
I was working with the wordpress plugin wp pretty photo – absolutely amazing btw, as it supports images, vids, all media, iframes, and any html code. Love it.
Anyway I got it working great in Firefox. Chrome required me to add that css to the actual site, which fortunately I did have control over. I think it was just a quirk with wp pretty photo and how I was working it all. Anyway, I decided putting the featured template/site in an iframe wasn’t worth the effort at the moment as there are far more pressing matters.
I think it’s very doable, I just wasn’t up for tweaking it on each browser and didn’t have time.
The only final adjustment would be to detect the user’s browser, and if it supports zooming. Depending on whether the zoom is for aesthetics or function, the appropriate actions, if any, would need to be taken. But of course you know all that.
If I ever come back to it, I’ll let you know.
Cheers!
Richie
21 Sep 11 at 22:15
Hi!
Ok… If i have an iframe that shows another website that i have no control over. What would the code look like then? I have treid a million differnt ways but i cant get it to work. Maybe i´m an idiot….
Cheers!
frank
23 Sep 11 at 21:35
i’m afraid that’s not possible richie, the code needs to be inserted in the iframed page itself.
Ivan
30 Sep 11 at 17:30
Will squeezeFrame.js work on non-related sites? Any site on the web which we have no control over?
frank
30 Sep 11 at 18:31
i’m afraid not; you need to add the JS to the page being iframed.