[DHTML] iFrame SSI IV

[JaniU]

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]

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]

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]

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]

Thanks John, the new sizeFrame function works perfectly.

[Gabrelle]

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]

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/s...iframe+loading

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

[mike_hubport]

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]

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 but I am working on this particular issue on 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]

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!