 |  |  |  |  |  |  |  |
iFrame resize - sort of repeat issue
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
Okay, i just want to get this out of the way. I do know that this subject has been tackled a couple times and I'm not cutting to the end without reading what has been already written. I can't seem to find the explanation that i'm looking for and a lot of the codes out there didn't seem to work for me. So, sorry if this is repeated and annoying, but I think it would be wonderful to find a good standard for this issue.
I like many others am trying to fit a forum script inside an iFrame to keep with my design and really make the page come together. Page loads no problem in the iFram, but then if you click a link on the forum, some pages will vary in height. I want to resize the iFrame dynamically to match the page and let my footer set within a table float.
So, I think I have two issues here. Letting the table resize dynamically and the iFrame also.
Anyone have help. I am putting here one of the codes that I tried. Seems to just add scrollbars or if I set for no scrolling, hides larger content pages.
All pages are on same domain, so that shouldn't be an issue. If i really have too much hassle with the iFram, I'd really like to at least get the table to resize dynamically for other pages.
I did find and article on resizing the frames by having to actually load a script in each page you are trying to load also, ugghhh, that could be a headache, but might be worth it in the end.
Help!!!
I like many others am trying to fit a forum script inside an iFrame to keep with my design and really make the page come together. Page loads no problem in the iFram, but then if you click a link on the forum, some pages will vary in height. I want to resize the iFrame dynamically to match the page and let my footer set within a table float.
So, I think I have two issues here. Letting the table resize dynamically and the iFrame also.
Anyone have help. I am putting here one of the codes that I tried. Seems to just add scrollbars or if I set for no scrolling, hides larger content pages.
All pages are on same domain, so that shouldn't be an issue. If i really have too much hassle with the iFram, I'd really like to at least get the table to resize dynamically for other pages.
I did find and article on resizing the frames by having to actually load a script in each page you are trying to load also, ugghhh, that could be a headache, but might be worth it in the end.
Help!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Johnny and the Producers - Sloppy*Poppy*Punk*Rock</title> <script language="JavaScript"> <!-- function calcHeight() { //find the height of the internal page var the_height= document.getElementById('the_iframe').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height= the_height; } //--> </script> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <link href="producers-style.css" rel="stylesheet" type="text/css" /> </head> <body bgcolor="#000000" text="#CCCCCC" link="#722B12" vlink="#722b12" alink="#FFFFFF" onload="MM_preloadImages('images/links_over.gif','images/home_over.gif','images/bio_over.gif','images/media_over.gif','images/studio_over.gif','images/forum_over.gif','images/contact_over.gif')"> <table width="200" border="0" align="center"> <tr> <td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="700"> <!-- fwtable fwsrc="J and the P Landing Page.png" fwpage="Page 1" fwbase="J and the P Landing Page.jpg" fwstyle="Dreamweaver" fwdocid = "1688605713" fwnested="0" --> <tr> <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="52" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="60" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="35" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="69" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="22" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="70" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="16" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td colspan="15"><img name="JandthePLandingPage_r1_c1" src="images/index_r1_c1.jpg" width="700" height="131" border="0" id="JandthePLandingPage_r1_c1" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="131" border="0" alt="" /></td> </tr> <tr> <td colspan="13"><img name="JandthePLandingPage_r2_c1" src="images/index_r2_c1.jpg" width="584" height="1" border="0" id="JandthePLandingPage_r2_c1" alt="" /></td> <td rowspan="2"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','images/links_over.gif',1);"><img name="Links" src="images/Links.jpg" width="58" height="30" border="0" id="Links" alt="" /></a></td> <td rowspan="4"><img name="JandthePLandingPage_r2_c15" src="images/index_r2_c15.jpg" width="58" height="35" border="0" id="JandthePLandingPage_r2_c15" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td rowspan="3"><img name="JandthePLandingPage_r3_c1" src="images/index_r3_c1.jpg" width="58" height="34" border="0" id="JandthePLandingPage_r3_c1" alt="" /></td> <td rowspan="2"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.gif',1);"><img name="home" src="images/home.jpg" width="58" height="30" border="0" id="home" alt="" /></a></td> <td rowspan="3"><img name="JandthePLandingPage_r3_c3" src="images/index_r3_c3.jpg" width="26" height="34" border="0" id="JandthePLandingPage_r3_c3" alt="" /></td> <td rowspan="2"><a href="bio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bio','','images/bio_over.gif',1);"><img name="Bio" src="images/Bio.jpg" width="52" height="30" border="0" id="Bio" alt="" /></a></td> <td rowspan="3"><img name="JandthePLandingPage_r3_c5" src="images/index_r3_c5.jpg" width="26" height="34" border="0" id="JandthePLandingPage_r3_c5" alt="" /></td> <td rowspan="2"><a href="media.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Media','','images/media_over.gif',1);"><img name="Media" src="images/Media.jpg" width="60" height="30" border="0" id="Media" alt="" /></a></td> <td rowspan="3"><img name="JandthePLandingPage_r3_c7" src="images/index_r3_c7.jpg" width="26" height="34" border="0" id="JandthePLandingPage_r3_c7" alt="" /></td> <td rowspan="2"><a href="studio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Studio','','images/studio_over.gif',1);"><img name="Studio" src="images/Studio.jpg" width="66" height="30" border="0" id="Studio" alt="" /></a></td> <td rowspan="3"><img name="JandthePLandingPage_r3_c9" src="images/index_r3_c9.jpg" width="35" height="34" border="0" id="JandthePLandingPage_r3_c9" alt="" /></td> <td rowspan="2"><a href="forum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forum','','images/forum_over.gif',1);"><img name="Forum" src="images/Forum.jpg" width="69" height="30" border="0" id="Forum" alt="" /></a></td> <td rowspan="3"><img name="JandthePLandingPage_r3_c11" src="images/index_r3_c11.jpg" width="22" height="34" border="0" id="JandthePLandingPage_r3_c11" alt="" /></td> <td rowspan="2"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.gif',1);"><img name="Contact" src="images/Contact.jpg" width="70" height="30" border="0" id="Contact" alt="" /></a></td> <td rowspan="3"><img name="JandthePLandingPage_r3_c13" src="images/index_r3_c13.jpg" width="16" height="34" border="0" id="JandthePLandingPage_r3_c13" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td> </tr> <tr> <td rowspan="2"><img name="JandthePLandingPage_r4_c14" src="images/index_r4_c14.jpg" width="58" height="5" border="0" id="JandthePLandingPage_r4_c14" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td><img name="JandthePLandingPage_r5_c2" src="images/index_r5_c2.jpg" width="58" height="4" border="0" id="JandthePLandingPage_r5_c2" alt="" /></td> <td><img name="JandthePLandingPage_r5_c4" src="images/index_r5_c4.jpg" width="52" height="4" border="0" id="JandthePLandingPage_r5_c4" alt="" /></td> <td><img name="JandthePLandingPage_r5_c6" src="images/index_r5_c6.jpg" width="60" height="4" border="0" id="JandthePLandingPage_r5_c6" alt="" /></td> <td><img name="JandthePLandingPage_r5_c8" src="images/index_r5_c8.jpg" width="66" height="4" border="0" id="JandthePLandingPage_r5_c8" alt="" /></td> <td><img name="JandthePLandingPage_r5_c10" src="images/index_r5_c10.jpg" width="69" height="4" border="0" id="JandthePLandingPage_r5_c10" alt="" /></td> <td><img name="JandthePLandingPage_r5_c12" src="images/index_r5_c12.jpg" width="70" height="4" border="0" id="JandthePLandingPage_r5_c12" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="4" border="0" alt="" /></td> </tr> </table></td> </tr> <tr> <td height="34"> </td> <td width="347" valign="top"> </td> <td width="88" valign="top" halign="center"><img src="images/forum_tab.jpg" width="88" height="32" alt="Forum" /></td> <td width="169" valign="top" halign="left"> </td> <td> </td> </tr> <tr> <td width="42" height="402"><img src="images/side_spacer.jpg" width="40" height="30" alt="spacer" /></td> <td colspan="3" valign="top" halign="center"> <iframe width="100%" id="the_iframe" onLoad="calcHeight();" src="http://www.johnnyandtheproducers.com/forum/index.php" scrolling="NO" frameborder="0" height="400"> An iframe capable browser is required to view this web site. </iframe> </td> <td width="40"><img src="images/side_spacer.jpg" width="40" height="30" alt="spacer" /></td> </tr> <tr> <td height="14" colspan="5"><img src="images/tracer_bottom.jpg" width="700" height="38" alt="copyright" /></td> </tr> </table> </body> </html>
What you can do is have a javascript onload on the body of the forum pages. Use something like this:
I didn't test it and some of the properties might be different, but that should give you an idea. Ask me if you have any questions.
javascript Syntax (Toggle Plain Text)
I didn't test it and some of the properties might be different, but that should give you an idea. Ask me if you have any questions.
I did see something like this while searching, seems to be the best answer. Luckily it's a script on my site, so i have complete access to the pages. I'll give it a shot and let you know how it turns out.
•
•
•
•
Originally Posted by fizzix 
What you can do is have a javascript onload on the body of the forum pages. Use something like this:
javascript Syntax (Toggle Plain Text)
I didn't test it and some of the properties might be different, but that should give you an idea. Ask me if you have any questions.
|
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Downsizing image load time
- Next Thread: Current Java probs on my personal site
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest JavaScript / DHTML / AJAX Posts
- Today's Posts
- Unanswered Threads
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser captchaformproblem checkbox child close codes css debugger decimal dependent disablefirebug dom download editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php player position problem programming prototype redirect regex runtime safari scale scriptlets search security select size software sql textarea unicode w3c window windowofwords windowsxp wysiwyg \n