/    Sign up×
Community /Pin to ProfileBookmark

iframe length

What Can I change sow my page in general is longer or smaller according to the length of the content in my IFrame

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>De Tuinengel</title>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”style.css”>

<script language = “javascript” src=”tejs.js”>
</script>

</head>

<body>
<div id=”main”>

LOGO<br>
LOGO<br>
LOGO<br>
<table border=”0″ width=”100%” heigth=”100%”>
<tr>
<td width=”15%” heigth=”100%” valign=”top”>
<!– BEGIN Menu –>
<dl id=”menu”>
<dt onmouseover=”javascript:show(‘smenu1’);” onmouseout=”javascript:show();”><a href=”homepage.html” target=”content”>HOMEPAGINA</a></dt>
<dt onmouseover=”javascript:show(‘smenu2’);” onmouseout=”javascript:show();”><a href=”historiek.html” target=”content”>HISTORIEK</a></dt>
<dt onmouseover=”javascript:show(‘smenu3’);” onmouseout=”javascript:show();”><a href=”#” target=”content”>WORKSHOPS</a></dt>
<dd id=”smenu3″ onmouseover=”javascript:show(‘smenu3’);” onmouseout=”javascript:show();”>
<ul>
<li><a href=”#” target=”content”>Inhoud</a></li>
<li><a href=”#” target=”content”>Overzicht</a></li>
<li><a href=”#” target=”content”>Nieuw</a></li>
<li><a href=”recept.html” target=”content”>Recepten</a></li>
</ul>
</dd>

<dt onmouseover=”javascript:show(‘smenu4’);” onmouseout=”javascript:show();”><a href=”fotos.html” target=”content”>FOTOS</a></dt>
<dt onmouseover=”javascript:show(‘smenu5’);” onmouseout=”javascript:show();”><a href=”#” target=”content”>INSCHRIJVINGEN</a></dt>

</dl>
<!– END Menu –>
</td>
<td width=”80%” heigth=”100%”>
<iframe name=”content” src=”x.htm” width=”100%” height=”900px” frameborder=”0″ class=”iframe” scrolling=no></iframe>
</td>
</tr>
</table>

<table border=”0″ width=”100%” heigth=”100%”>
<tr>
<td width=”15%” heigth=”100%” valign=”top”>d</td>
<td width=”70%” heigth=”100%”>d</td>
<td width=”15%” heigth=”100%” valign=”top”>d</td>
</tr>
</table>

</div>
</body>
</html>
</html>

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@welshJan 18.2006 — not sure, javascript may be able to do this but you run into the problem of it depends on what resolution is the person using or if they have the window maximized or not. you should generally make your iframe a certain width. then make the other pages fit into that certain iframe.
Copy linkTweet thisAlerts:
@ray326Jan 18.2006 — I'd switch to a div and load it using the Inner Browsing technique described by Netscape.
Copy linkTweet thisAlerts:
@CGGauthorJan 23.2006 — How does that work, do you have some examples or where can I found this, because when I open a page in my iframe it show a scrollbar if the page is to long, I would like that it automatticly ajusts to the length of the page in my iframe

view code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>De Tuinengel</title>

<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

<style>

body {

font-family: sans-serif;

font-size: 70%;

margin-top: 0px;

margin-bottom: 10px;

margin-left: 10%;

margin-right: 10%;

color: black;

background: #E4E4E4;

}

#main {

width: 740px;

height: 100%;

border-left: solid 1px #990000;

border-right: solid 1px #990000;

border-bottom: solid 1px #990000;

margin: 0 10px;

padding: 10px;

background: #FFFFFF;

}

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu {

top: 2em;

left: 2em;

width: 10em;

z-index:1;

}

#menu dt {

cursor: pointer;

background: #990000;

height: 20px;

font-weight: bold;

line-height: 20px;

text-align: left;

text-indent: 5px;

border-color: #FFFFFF #666666 #666666 #FFFFFF;

background-color: #E4E4E4; border-style: solid;

border-top-width: 1px; border-right-width: 1px;

border-bottom-width: 2px; border-left-width: 1px;

}

#menu dd {

position: absolute;

z-index: 100;

left: 20em;

margin-top: -1.4em;

width: 10em;

background: #E4E4E4;

border: 1px solid gray;

}

#menu ul {

padding: 2px;

}

#menu li {

text-align: left;

height: 18px;

line-height: 18px;

}

#menu li a, #menu dt a {

color: #FFFFFF;

text-decoration: none;

display: block;

}

#menu li a:hover {

background: #990000;

font-weight: bold;

}

#menu dt a:hover {

background: #990000;

text-indent : 15px;

}

.iframe {

left: 125px;

top: 50px;

z-index:0;

}

</style>



<script language = "javascript" src="tejs.js">

</script>



</head>

<body>

<div id="main">

<img src="pictures/logo.jpg">

<table border="0" width="100%" heigth="100%">

<tr>

<td width="15%" heigth="100%" valign="top">

<!-- BEGIN Menu -->

<dl id="menu">

<dt onmouseover="javascript:show('smenu1');" onmouseout="javascript:show();"><a href="homepage.html" target="content">HOMEPAGINA</a></dt>

<dt onmouseover="javascript:show('smenu2');" onmouseout="javascript:show();"><a href="historiek.html" target="content">HISTORIEK</a></dt>

<dt onmouseover="javascript:show('smenu3');" onmouseout="javascript:show();"><a href="#" target="content">WORKSHOPS</a></dt>

<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show();">

<ul>

<li><a href="#" target="content">Inhoud</a></li>

<li><a href="#" target="content">Overzicht</a></li>

<li><a href="#" target="content">Nieuw</a></li>

<li><a href="recept.html" target="content">Recepten</a></li>

</ul>

</dd>

<dt onmouseover="javascript:show('smenu4');" onmouseout="javascript:show();"><a href="fotos.html" target="content">FOTOS</a></dt>
<dt onmouseover="javascript:show('smenu5');" onmouseout="javascript:show();"><a href="#" target="content">INSCHRIJVINGEN</a></dt>

</dl>

<!-- END Menu -->

</td>

<td width="80%" heigth="100%">

<iframe name="content" src="homepage.html" width="100%" height="900px" frameborder="0" class="iframe" scrolling=no></iframe>

</td>

</tr>

</table>


<table border="0" width="100%" heigth="100%">

<tr>

<td width="15%" heigth="100%" valign="top"></td>

<td width="70%" heigth="100%">CGG</td>

<td width="15%" heigth="100%" valign="top"></td>

</tr>

</table>


</div>

</body>

</html>

</html>
Copy linkTweet thisAlerts:
@ray326Jan 24.2006 — For Inner Browsing the iframe is hidden. It's a transfer buffer.

http://devedge-temp.mozilla.org/viewsource/2003/inner-browsing/index_en.html
×

Success!

Help @CGG spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...