|
sizing nested IFRAMEs
I have pages that nest iframes and I am trying to get the iframes to dynamically resize when the browser is resized. The only iframe I ever want to have a scrollbar is the innermost. My code now looks something like this:
Page1.htm function resize() {document.all.mainFrame.height = document.body.offsetHeight - document.all.mainFrame.offsetTop - 5; } <body onload=resize() onresize=resize()> <iframe name=mainFrame id=mainFrame src=Page2.htm scrolling=no> Page2.htm function resize() {document.all.mainFrame.height = document.body.offsetHeight - document.all.mainFrame.offsetTop - 5; } <body onload=resize() onresize=resize()> <iframe name=mainFrame id=mainFrame src=Page3.htm> When resizing the browser window, the outermost frame appears to resize just fine (no scrollbars on the browser window). But the inner frame doesn't so that when shrinking the browser window the inner frame sinks below the bottom of the outerframe and out of view. I hope that makes some kind of sense. The object is to get the edges of the frames to look something like this: | | |_______________________| | | | |_________________________| | |___________________________| For any size of the browser window (outside border in diagram). Thanks for any help. Jeho[/u] Back to top |
|||||
|
That's an interesting problem, and you presented it unusually clearly, which is helpful, most people just say, hey, my page doesn't work, how do I fix it? There's a few things you should clean up no matter what, you're using document.all, which is only supported by MSIE, this script won't work in any other browser, it's easy to change that however.
Personally, I'd dump all the javascript and just size the iframes with CSS, using percent based sizing, which always works, and doesn't require any javascript to handle resizing. It is an interesting question though, but I have to ask, why on earth are you using such a convoluted system? Just out of curiousity though, what could justify using an iframe inside of an iframe, are you sure there isn't a better way to do this? I might take a look at this later on, but I don't want to rewrite your javascript so I can actually test the method, there's no reason to spend time on something this complicated that only works in one browser. Back to top |
|||||
|
Thanks for your reply. I am working on a legacy app that uses a multilevel tab menu to navigate thru the application. The structure is kinda like this
Tab1|Tab2|Tab3 IFRAME----------------| | Tab1|Tab2| Tab3 | | IFRAME-----------| | | | data data data | | | |____________| | |______________| Each tab populates its child IFRAME with either a page containing more tabs or data (at the lowest level). Clicking on Tab1 might get you a page with another level of tabs and then data under that, but clicking on Tab2 could populate the same IFRAME with a page of data. IFRAMEs containing data should scroll, but those containing further navigation should not. I hope that clarifies the reason for the use of nested IFRAMEs. We are planning to overhaul this menuing system in the near future. Right now, I'm not sure how else to implement this hierarcichal tab structure withought using the nested IFRAME approach to some degree. As you said, it's an interesting problem. I had experimented with using percentages via CSS styles and I don't recall that it worked, but it might be worth revisiting. I am aware of how sadly inoperable this app is in anything but IE. Unfortunately, with over a thousand mixed .asp, and .aspx pages making up the app, making it operational across browsers hasn't been high enough priority for management to push through. Thanks again for your feedback. I'm glad some of what I posted was at least understandable ; ) Back to top |
|||||
|
Since it's a legacy app, why don't you just switch it to frames, which would work 100% perfectly. Given that you can't change the core page structures, you could very easily change the basic containers for the frames.
Given that iframes and frames present almost identical technical drawbacks, but iframes also are far less flexible than frames in terms of layout, you could with the greatest of ease simply dump all this into frames, here's an example: :: Code :: <frameset cols="100%" rows="80,*" frameborder="0" border="0" framespacing="0">
<frame src="topnav.html"> <frame src="tab1-subframe.html"> </frameset> <noframes> seo links to content </noframes> // and then the tab-subframe frame page would have this: <frameset cols="100%" rows="80,*" frameborder="0" border="0" framespacing="0"> <frame src="contentnav.html"> <frame src="data.html"> </frameset> This is assuming you have tab navigation bars 80 pixels high. This would load everything correctly, size correctly, and wouldn't be that hard to implement, when you click on tab 1, it loads tab1 subframe, tab 2, tab2 subframe, and so on. Clicking on subframe tab1 would load subframe tab 1 data, etc. This would resolve all sizing issues, frames are the only way to get automatic resizing that works in all browsers if you have to mix pixel and wildcard dimensions, tables also can do it quite well, but if you have so many legacy pages that probably wouldn't be practical, but it would create a much more elegant and user friendly, and also search engine friendly site. Given that your current setup is a total disaster re seo, that's probably not high on your list of concerns though. Back to top |
|||||
|
Thanks for all your help. I will definitely look into switching to frames as a substitute for iframes.
Back to top |
|||||
|
All times are GMT - 8 Hours
|
|||||