PDA

View Full Version : [DHTML] iFrame SSI IV



jscheuer1
01-22-2008, 08:13 AM
1) CODE TITLE: iFrame SSI IV

2) AUTHOR NAME/NOTES: John Davenport Scheuer (jscheuer1)

3) DESCRIPTION: An iframe auto-resize height script. No configuration required, and it works cross browser. This is a total rewrite of the earlier versions of this script, and is coded virtually from scratch. The idea hit me the other day when I was working on importing DOM code from iframes, and as I started working on this script, everything just seemed to fall into place.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/iframe_ssi_iv/

molendijk
01-22-2008, 01:56 PM
Beautiful script.
I'd use something like:
href="javascript:;" onclick="frames[0].location.replace('some2.htm')"
instead of:
href="some2.htm" target="mel"

I'm certainly going to use it.

Arie Molendijk.

jscheuer1
01-22-2008, 06:03 PM
Thanks! It will still have some of the same limitations of other resize iframe scripts. Certain types of styles and layout on either the external or top page can mess it up. But for basic pages, it is very good.

You may use whatever method you like to get pages into the iframe, including links on the pages already in the iframe. I used target, as it works without javascript enabled. I know that using javascript is preferred for validation, but the DOCTYPE's that support iframe, and those that support target aren't that different. However, if using javascript and a link to load pages into the iframe, this is better:


<a href="some2.htm" onclick="frames[0].location.replace(this.href);return false;">Link Text</a>

For both accessibility (non-javascript and non-iframe folks will still see the content), and to avoid the href="javascript: . . . unpleasantness that can occur in IE.

Hell Commander
02-12-2008, 04:06 AM
Thanks a lot for this sweet script, even though i'm really pissed off because am facing a problem and i couldn't solve it yet ... when the links are hyper linked to a local page it works perfect, but when it's linked to for example another website it's causing me a problem.
Anyone knows why or how i can solve this problem please!

Hell Commander
02-12-2008, 04:24 AM
It's alright i solved the problem ...

Even though i do have one lil new problem here and i dunno what is causing it.
One of the pages that's linked to be shown in the iFrame is really long, when i open my site on IE that page works perfect, but when i open it on FireFox it adds a lil scrollbar... all the other pages working perfectly, it's only this page.
Anyone knows how can i fix that?
Best Regards!

jscheuer1
02-12-2008, 04:53 AM
First of all, directly loading a page from an external site into an iframe effectively cuts off the communication between the external and top page required by this script. Some trickery with an intervening iframe page or on the server side could probably overcome this.

If you have a page that is slightly off, you have various options, you could add a fudge factor into the script to lengthen the iframe a little, or set the style of the body of the external page to overflow-y: hidden; or perhaps simply make sure that the margin and padding on the body of the external page are 0. External pages that employ absolute and/or relative positioning can sometimes fool the script as to their actual height, so this is best avoided.

Hell Commander
02-12-2008, 05:04 AM
Thanks for the quick reply mate.
You see the idea here is that it's a phpBB forum so the pages doesn't have <body> code while it's only in one place which is "overall_header" even though i already tried to put the margin to 0 and the overflow and everything you just mentioned, but still couldn't solve it.
i mean all the other pages works perfectly fine it's only this page man i have no clue why is that.
If you want i can attach the templates to you so you can check it for me if that's possible man.

Best Regards!

jscheuer1
02-12-2008, 03:56 PM
All pages have a body, even if there is no body tag. So, style for the body will still be used by the browser. If you are using PHP though, a server-side include would be better than an iframe with javascript.

Hell Commander
02-13-2008, 02:55 AM
Thanks man, i found it and i fixed it, thanks for the help anyways man!

sylteflesk
04-13-2008, 02:45 AM
I have found a safari "issue".

My experience with the script:
FF1+ => Works perfect
IE6+ => Works perfect
Opera => Auto increase perfect but not auto decrease.
Safari => Works perfect (see below).

When pages loaded into the iframe has body style set to height:100% Safari (as the only browser) do not resize the iframe.

Thanks for a fantastic script!!

JaniU
05-06-2008, 08:52 AM
I am working a certain pages where I would really need to have this resizing iframe SSI system working and I have gotten this one (IV) to work and also the version II in IE. Works just fine. But not with Firefox :(

http://www.jmroy.fi/uudet/

That's the page I am working on, don't mind the finnish language ;)
So anyways, ETUSIVU, YRITYS, PROJEKTIT... will change the page on the iframe (there's nothing real yeat, just testing) and it should resize. It does... but it is easier if you just check what it does with FF rather than me trying to explain it all...
First of it doesn't work properly when sizing down from longer page, it leaves weird white space there... and then the background of the whole page doesn't work properly either when going back...
All these works just fine with IE damned... and I personally like FF better!

Please, any ideas???

JaniU
05-06-2008, 09:36 AM
And by the way, if you resize your FF browser window just a little bit, it will correct everything... it kinda refreshes something.


UPDATE: Okey, I got it working, the problem was obviously elsewhere, something to do with the tables... as I did everything again and again all started working, so sorry to bother!

Great script thought!

mlcampbe
05-28-2008, 08:08 PM
I've implemented this and it seems to work great. However, in my case I have 3 iframes defined. I only need to have the resize take affect on 1 of them. In essence I have a header frame, a main body frame, and a footer frame. I am seeing that all 3 frames resize on every change of the main body frame. How can I make the header and footer frames so that they do not resize???

jscheuer1
05-28-2008, 08:21 PM
Give your iframes that you want excluded a class="exclude" attribute, and use this function sizeFrame in place of the existing one:


function sizeFrame(){
if(document.getElementsByTagName('frameset').length||!document.getElementsByTagName('iframe').length)
return;
var frEls=document.getElementsByTagName('iframe'), s='scrollHeight',
frObs=window.frames, o='offsetHeight', b='body', de='documentElement';
for (var cs, hb, hd, d='document', i = frEls.length-1; i > -1; --i)
if (!/exclude/.test(frEls[i].className)){
if(frObs[i][d][b].style.overflow)
cs=frObs[i][d][b].style.overflow;
frObs[i][d][b].style.overflow='hidden';
frEls[i].height=10;
frEls[i].height=Math.max(frObs[i][d][b][o], Math.max(frObs[i][d][de][o],
(hd=frObs[i][d][de][s]) != (hb=frObs[i][d][b][s])? Math.max(hd, hb):0))+
(frEls[i].height==frEls[i].offsetHeight&&frEls[i].getAttribute('frameborder',0)!=='0'?4:0);
frObs[i][d][b].style.overflow=typeof cs=='string'? cs : '';
};
if(!sizeFrame.setup){
for (var i = frEls.length-1; i > -1; --i)
if (!/exclude/.test(frEls[i].className))
sizeFrame.loadup(frEls[i]);
sizeFrame.setup=true;
}};

mlcampbe
05-28-2008, 09:05 PM
Thanks John, the new sizeFrame function works perfectly.

Gabrelle
06-08-2008, 12:16 PM
I'm trying to use the iFrame SSI IV script and it works fine in FF and IE, and only sometimes in Safari. All the pages I'm loading into the iframe are pretty simple html so it's not clear why certain pages get resized and other don't??? And all the pages going into the iframe are on the same server. Any Safari specific help?

williamstam
06-09-2008, 07:30 AM
could this script be put on the dynamic drive's script site? the version there is II... IV is way more superior

on the main reaon why im posting... is there a way to get a loading image to apear while the ifram is loading?

http://www.dynamicdrive.com/forums/showthread.php?t=33079&highlight=iframe+loading

havent tested it but doesnt look like it will work with IV in anycase :P

mike_hubport
09-19-2008, 12:53 PM
hi jscheuer1,

Does your script could be modified and runs like an auto iframe resizer of facebook?
There is only one iframe on the page. If the user click any links of that iframe it will auto resize its height based on the page content's height loaded. I'm wondering of using timers window.setInterval. Any ideas how to implement it using your script?

muincat
05-05-2009, 04:17 AM
Hi!
I just registered for this site because I found it when I ran a search for "iframe height." After many years of not doing any web design at all, I have a neighbor that has hired me to design a basic website for her business. I've set the page up with an iframe because I figured then I would only have to update menu links on that main page and then there'd be less chance of missing a link somewhere along the way as new updates are added. I know this could probably be accomplished with .css, but I don't know how to do that either!

My problem, like everyone else in this thread, is that the iframe won't adjust height to allow for the longer pages without adding scroll bar. My neighbor doesn't want it to look like its a separate box at all, so no borders and no scrolling can be used. I've tried the various solutions I've found here and either they do nothing or then stretch the page that's loading in the frame to ridiculous proportions AND still adds a scroll bar.

As I said, I haven't designed in several years and I never learned JavaScript at all. I suspect my problem is probably due to not understanding which bits of code I need to change to my iframe name. The IFrame SSI IV totally confuses me. :-)

My iframe name is, quite simply, "content" and the first page I want loaded (when someone first visits the site) is "whatisreiki.html" (my neighbor does Reiki on animals). The site is www.lovingtheanimals.com (http://www.lovingtheanimals.com) but I am working on this particular issue on www.lovingtheanimals.com/iframetest.html (http://www.lovingtheanimals.com/iframetest.html) so that I don't totally screw up the site where visitors might be affected.

I do want to take the time to learn how to do all of this stuff correctly and update my web design skills, but time is of the essence for this particular site since I'm getting paid for it. Once its out of the way, I can take all the time in the world to play around and learn everything for myself.

Anyone willing to jump in and give me either a quick fix or a crash course? It would be MUCH appreciated!

Thanks!
Deana

p51mustang
06-01-2009, 07:17 PM
I had the same problem with a scroll bar.

I figured out my problem. Not to say this is everyone's problem.

If you use tables, make sure that your page's margin width and height are set to 0 in the actual page. I had the iframe margin width and height set to 0 but my page in GoLive was set to 0 width margin and 20 height margin. This is what caused the scroll bar.

I hope this helps!

HighContrast
12-31-2011, 12:20 AM
Give your iframes that you want excluded a class="exclude" attribute, and use this function sizeFrame in place of the existing one:


function sizeFrame(){
if(document.getElementsByTagName('frameset').length||!document.getElementsByTagName('iframe').length)
return;
var frEls=document.getElementsByTagName('iframe'), s='scrollHeight',
frObs=window.frames, o='offsetHeight', b='body', de='documentElement';
for (var cs, hb, hd, d='document', i = frEls.length-1; i > -1; --i)
if (!/exclude/.test(frEls[i].className)){
if(frObs[i][d][b].style.overflow)
cs=frObs[i][d][b].style.overflow;
frObs[i][d][b].style.overflow='hidden';
frEls[i].height=10;
frEls[i].height=Math.max(frObs[i][d][b][o], Math.max(frObs[i][d][de][o],
(hd=frObs[i][d][de][s]) != (hb=frObs[i][d][b][s])? Math.max(hd, hb):0))+
(frEls[i].height==frEls[i].offsetHeight&&frEls[i].getAttribute('frameborder',0)!=='0'?4:0);
frObs[i][d][b].style.overflow=typeof cs=='string'? cs : '';
};
if(!sizeFrame.setup){
for (var i = frEls.length-1; i > -1; --i)
if (!/exclude/.test(frEls[i].className))
sizeFrame.loadup(frEls[i]);
sizeFrame.setup=true;
}};

Im sorry to wake up an old thread.

First of, thank you so much for this script! I've tried bunch of scripts and this is the only one that works on all browsers!

But since I don't know javascript I have one question.

I wonder if it's possible to make this code the other way around, so that only iframes with class="include" are resized.

Problem is that I have a chatbar (facebook look-a-like) that uses iframes. The chat windows don't expand correctly when I add this script to the site. I can't edit the code for the chatbar so I'm not able to add class="exclude" to the code.

I only need to resize one iframe so I was wondering if it would be possible to make this script only target that one frame.

Thank you.

djr33
12-31-2011, 07:52 AM
Here's a quick guess. Save a backup of your page before trying this, but here's how I'd approach it:

Find all lines like this:
if (!/exclude/.test(frEls[i].className)){

I see two of them in the code you quoted above, and there might be more places.

Then replace them with this:
if (/include/.test(frEls[i].className)){

Or similar logic. The ! symbol means "not", so just remove the ! then change "exclude" to "include", and that should, I hope, work for you.
(In the case that you find "exclude" without !, then you might need to add one so it's !+include. I'm guessing you won't find that though.)

HighContrast
12-31-2011, 11:21 AM
Works like charm :)

Thank you djr33!

Happy new year!

molendijk
01-06-2012, 12:10 AM
For an alternative to the iFrame SSI IV script, see THIS (http://www.dynamicdrive.com/forums/showthread.php?t=66796).
===
Arie Molendijk.

anybloodyid
05-21-2012, 12:06 PM
This is still working to date but in IE9 it cuts the last line in half.
How can I get it to show the complete line.

Thanks

BloodSyphon
06-24-2012, 01:46 PM
Could this be used in a wordpress site? I'm trying to get it running but without any luck. it seems to shrink the iframe to about 100 pixels every time.