| View previous topic :: View next topic |
| Author |
Message |
oy
Joined: 20 Jun 2006
Posts: 71
|
 Posted: Sat Nov 25, 2006 7:49 am Changing Table Cell Size Depending On Iframe Size. |
 |
|
|
Is there a way of making a table cell adapt to the contents of an Iframe so you will never experience scrolling in the Iframe.
I am trying to create a page where the table will change size and the Iframe will change size so the contents of the Iframe will always fit on the page or in the cell. Where no scrolling is necessacery. Here is my code for the page I am working on. Please no one steal my code.
Also here is a link to the page it self on my server. http://www.oyoystudios.frih.net/test.html
| Code: |
<!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=iso-8859-1" />
<title>Template 1</title>
<style type="text/css">
<!--
.style2 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<table width="100%" border="0" bgcolor="#00FF66" cellspacing=0 cellpadding=0>
<tr>
<td width="2" height="2" background="images/corner1.gif"></td>
<td></td>
<td width="2" height="2" background="images/corner2.gif"></td>
</tr>
<tr>
<td></td>
<td height="75" valign="middle"><h1>Title Goes Here</h1></td>
<td></td>
</tr>
<tr>
<td width="2" height="2" background="images/corner3.gif"></td>
<td></td>
<td width="2" height="2" background="images/corner4.gif"></td>
</tr>
</table>
<br />
<table width="100%" border="0" bgcolor="#00FF66" cellspacing=0 cellpadding=0>
<tr>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner1.gif" /></td>
<td width="150" cellspacing="0" cellpadding="0"></td>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner2.gif" /></td>
<td width="18" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"></td>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner1.gif" /></td>
<td width="628" cellspacing=0 cellpadding=0></td>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner2.gif" /></td>
</tr>
<tr>
<td cellspacing="0" cellpadding="0"></td>
<td cellspacing="0" cellpadding="0" valign="top" align="center">
<!--
Nav Bar
-->
<br />
<a href="home.html" target="page">Link 1</a><br />
<a href="" target="page">Link 2</a><br />
<a href="" target="page">Link 3</a><br />
<a href="" target="page">Link 4</a><br />
<a href="" target="page">Link 5</a><br />
<a href="" target="page">Link 6</a><br />
<a href="" target="page">Link 7</a><br />
<a href="" target="page">Link 8</a><br />
<a href="" target="page">Link 9</a><br />
<a href="" target="page">Link 10</a><br />
</td>
<td height="2" width="2" cellspacing=0 cellpadding=0></td>
<td bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"></td>
<td height="2" width="2" cellspacing=0 cellpadding=0></td>
<td height="500" cellspacing="0" cellpadding="0" valign="top" align="center">
<!--
Body
-->
<br /><IFRAME NAME="page" SRC="home.html" ALLOWTRANSPARENCY="true" height="475" width="620" frameborder="0" scrolling="no">
</IFRAME>
</td>
<td cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner3.gif" /></td>
<td cellspacing="0" cellpadding="0"></td>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner4.gif" /></td>
<td cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"></td>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner3.gif" /></td>
<td cellspacing=0 cellpadding=0></td>
<td height="2" width="2" cellspacing=0 cellpadding=0><img src="images/corner4.gif" /></td> </tr>
</table>
</body>
</html>
|
|
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA
|
| Posted: Sat Nov 25, 2006 7:53 am |
|
|
|
|
Changing the size will rely on percentages, but if I understand what you are really talking about - pulling the values from one page, etc then you would need to use a server side language to determine those values.
_________________
Corey
Merchant Account Blog | Merchant Accounts |
|
oy
Joined: 20 Jun 2006
Posts: 71
|
| Posted: Sat Nov 25, 2006 4:10 pm |
|
|
|
Ya, I was wondering if there is a way of turning the height of the page that is to be displayed in the iframe into a variable then use that variable as the iframe and table cell size. But I am not sure how to code this could someone help me with that.
Thanks Oy. |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA
|
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Tue Feb 06, 2007 5:35 pm |
|
|
|
I know what you need. I figured this out last year. You need a peice of javascript to tell the iFrame to change it's size to 100%.
Heres the code you need:
Goes in the head section of your page.
| Code: |
<script type="text/javascript">
var iframeids=["Main_page"]
var iframehide="yes"
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>
|
And this part goes where you want the iFrame to go.
| Code: |
<iframe id="Main_page" src="news.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none">
If you can see this, your browser doesn't understand and use IFRAME's. However, we'll still <A HREF="news.htm">link</A> you to the file.</iframe>
|
Enjoy  !
Rob |
|
usbpforever
Joined: 14 Sep 2007
Posts: 2
|
| Posted: Fri Sep 14, 2007 8:43 pm UNAVAILABLE |
|
|
|
UNAVAILABLE
Last edited by usbpforever on Sat Jan 05, 2008 12:26 pm; edited 1 time in total |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA
|
| Posted: Sat Sep 15, 2007 7:08 am |
|
|
|
It is always best to create a new question usbpforever especially in the proper zone
I am not sure what you are asking because your target is superheros. Is that the name of your HTML Frame?
_________________
Corey
Toll Free Numbers | SiteMaps for Search Engines |
|
usbpforever
Joined: 14 Sep 2007
Posts: 2
|
| Posted: Sat Sep 15, 2007 8:54 am UNAVAILABLE |
|
|
|
UNAVAILABLE
Last edited by usbpforever on Sat Jan 05, 2008 12:26 pm; edited 1 time in total |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
