Avatar billede b3k-0ne Nybegynder
25. april 2006 - 16:38 Der er 22 kommentarer og
2 løsninger

Automatisk tilpasning af iframe, i forhold til indhold.

Hej Eksperter...!
Jeg har en side som indeholder noget tekst, men jeg vil ikke have scrollbaren på siden, iframen skal bare blive længere ned af.

Kan man lave det?

// Marck Christensen
Avatar billede roenving Novice
25. april 2006 - 16:41 #1
F.eks. inde i iframen:

<script language="javascript" type="text/javascript">
window.onload = function(){
var t=document.body.scrollHeight;
if(parent!=window)parent.document.getElementById('IFRAMEID').style.height=t+22+'px';
}
</script>

-- iframen skal så selvfølgelig have:

<iframe id="IFRAMEID" ...>
Avatar billede olebole Juniormester
25. april 2006 - 16:46 #2
<ole>

*LoL* sad lige og ledte efter en af dine utallige besvarelser i E's elendige søgefunktion  ;D

/mvh
</bole>
Avatar billede roenving Novice
25. april 2006 - 16:49 #3
Tjah, den må nok findes mange hundrede gange !-)
Avatar billede olebole Juniormester
25. april 2006 - 16:53 #4
Yups - men den lokale søgefunktion er godtnok vældig effektiv, når det gælder om at skjule nyere informationer ... den ros skal E zq ha' ...!  ;oD

- det lykkedes dog til sidst  =)
Avatar billede mclemens Nybegynder
25. april 2006 - 19:22 #5
Kan man ikke også lave det på selve framen?

<iframe onload="this.height=(document.all)?content.document.body.scrollHeight:contentDocument.body.scrollHeight;" id="content" SRC="control.php" NAME="content_banner" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" border="no"></iframe>

( http://www.eksperten.dk/spm/702689#rid6208359 )
Avatar billede mclemens Nybegynder
25. april 2006 - 19:23 #6
Edit: Det kan godt være at (document.all)? burde være (content.document.body.scrollHeight)? ...
Avatar billede mclemens Nybegynder
25. april 2006 - 19:24 #7
Nysgerrig: Hvorfor 22 px ekstra?
Avatar billede b3k-0ne Nybegynder
26. april 2006 - 08:56 #8
Jeg kan ikke få et til at virker. Er her ikke en der kan sætte det ind for mig, så det VIRKER... :P
Her er min kode og mit css :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="author" content="#" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Botha Foto</title>
</head>
<body>
<div class="wrap clearfix">
  <div class="header"><strong></strong></div>
  <div class="topnav" id="nav">
    <ul>
      <li><a target="midt" href="forside.htm">Forside</a></li>
      <li><a target="midt" href="virksomhedsbeskrivelse.html">
        Virksomhedsbeskrivelse</a></li>
      <li><a target="midt" href="ansatte.htm">Ansatte </a></li>
      <li><a target="midt" href="computer.htm">Computere</a></li>
      <li><a target="midt" href="info.htm">Infomation
        itl lærerne</a></li>
      <li></li>
    </ul>
  </div>

  <div class="container clearfix" style="width: 760px; height: 276px">

    <p>
<iframe src="forside.htm" height="133%" width="100%" name="midt" frameborder=0></iframe> 
</p>
  </div>
  <div class="footer" id="footer"> <font face="Verdana" size="1">Copyright ©
    2006, All rights reserved.<br>
    Gruppe 4, Ringkøbing Handelsskole.</font></div>
</div>
</body>
</html>



-----------

/******* structure and layout *******/
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
background: #B4B8B7;
margin:10px 0 0 0;
padding:0 0 0 0;
background: #8E979C url(images/bg.gif);
text-align:center;
}

.wrap {
position:relative;
width:780px;
margin:0 auto;
padding:0 0 0 0;
text-align:center;
background: #ffffff url(images/header.jpg) no-repeat;
border-left:1px solid #f1b75f;
border-right:1px solid #f1b75f;
border-top:1px solid #f1b75f;
}

.header {
position:relative;
clear:none;
width:770px;
height:25px;
margin:100px 0 0 0;
padding:0 0 0 0;
background:transparent;
color:#ffffff;
text-align:right;
}

.topnav {
position:relative;
clear:both;
width:780px;
height:21px;
margin:0 0 0 0;
padding:0 0 0 0;
background:#cccccc;
font-size:8pt;
}

.container {
position:relative;
clear:both;
width:760px;
margin:10px 10px 0 10px;
padding:0 0 0 0;
background:#ffffff;
color:#000000;
text-align:left;
}

.news_right {
position:relative;
float:right;
clear:both;
width:200px;
margin:0 0 5px 10px;
padding:0 10px 0 10px;
background:#D0DEF6;
color:#465670;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
}

.news p {
margin:10px 10px;
}

.news_cnr_top {
background:url(images/cnr_tr.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}

.news_cnr_bottom {
background:url(images/cnr_br.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}

img.cnr {
width:8px;
height:8px;
border:none;
display: block !important;
}

.footer {
position:relative;
clear:both;
width:780px;
margin:20px 0 0 0;
padding:4px 0 4px 0;
background:#ffffff;
font-size:8pt;
text-align:center;
border-top:1px solid #f1b75f;
border-bottom:1px solid #f1b75f;
}


/******* top navigation *******/
#nav ul{
padding:0 0 0 0;
margin:0 0 0 0;
white-space: nowrap;
font-size:8pt;
color:#ffffff;
float:left;
width:100%;
background:#ffffff url(images/topnav_bg_grey.gif);
list-style:none;
}

#nav ul li{
display:inline;
list-style:none;
}

#nav ul li a{
margin: 0 0 0 0;
padding: .25em 2em .3em 1em;
background:#ffffff url(images/topnav_bg_grey.gif);
color: #000000;
text-decoration:none;
float: left;
border-right:1px solid #cccccc;
}

#nav ul li a:hover{
background:#8DA8D5 url(images/topnav_bg.gif);
color: #ffffff;
text-decoration:none;
border-right:1px solid #cccccc;
}




/******* links *******/

a {
color:#D3812D;
text-decoration:underline;
}

a:hover {
color:#E39243;
text-decoration:none;
}

#news a {
color:#D3812D;
text-decoration:underline;
}

#news a:hover {
color:#E39243;
text-decoration:none;
}

#footer a {
color:#f1b75f;
text-decoration:none;
}

#footer a:hover {
color:#D3812D;
text-decoration:none;
}

/******* fonts and colors *******/

.header strong {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:13pt;
letter-spacing:.7em;
}

.news_title {
font-family:Arial, Helvetica, sans-serif;
color:#465670;
font-size:10pt;
font-weight:bold;
}

.page_title {
font-family:Arial, Helvetica, sans-serif;
color:#4669A4;
font-size:10pt;
font-weight:bold;
padding: 0 0 0 0;
margin: 0 0 -8px 0;
}


/******* images *******/

img {
border:none;
}

.right img{
position:relative;
float:right;
padding:0 0 0 0;
margin:5px 2px 2px 5px;
}

.left img{
position:relative;
float:left;
padding:0 0 0 0;
margin:0 5px 0 2px;
}



/******* workarounds and hacks *******/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Avatar billede mclemens Nybegynder
26. april 2006 - 09:37 #9
Nåh, så fandt jeg ud af det med de 22 px... :D

- prøv denne her:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="author" content="#" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Botha Foto</title>
</head>
<body>
<div class="wrap clearfix">
  <div class="header"><strong></strong></div>
  <div class="topnav" id="nav">
    <ul>
      <li><a target="midt" href="forside.htm">Forside</a></li>
      <li><a target="midt" href="virksomhedsbeskrivelse.html">
        Virksomhedsbeskrivelse</a></li>
      <li><a target="midt" href="ansatte.htm">Ansatte </a></li>
      <li><a target="midt" href="computer.htm">Computere</a></li>
      <li><a target="midt" href="info.htm">Infomation
        itl lærerne</a></li>
      <li></li>
    </ul>
  </div>

  <div class="container clearfix" style="width: 760px; height: 276px">

    <p>
<iframe onload="if(document.all){this.height=midt.document.body.scrollHeight+22+'px';}else{this.height=contentDocument.body.scrollHeight+22+'px';}" src="forside.htm" height="133%" width="760" name="midt" frameborder=0></iframe>
</p>
  </div>
  <div class="footer" id="footer"> <font face="Verdana" size="1">Copyright ©
    2006, All rights reserved.<br>
    Gruppe 4, Ringkøbing Handelsskole.</font></div>
</div>
</body>
</html>
Avatar billede mclemens Nybegynder
26. april 2006 - 09:39 #10
Og så i den fil der vises i iframen enten dit stylesheet
med 0px padding og margin eller denne lille css...

<style type="text/css">
html,body{margin:0px;padding:0px;}
</style>
Avatar billede mclemens Nybegynder
26. april 2006 - 09:45 #11
det kan jo også sættes via iframe tagget...
<iframe onload="if(document.all){this.height=midt.document.body.scrollHeight+22+'px';midt.document.body.style.padding='0px';midt.document.body.style.margin='0px';}else{this.height=contentDocument.body.scrollHeight+22+'px';contentDocument.body.style.padding='0px';contentDocument.body.style.margin='0px';}" src="forside.htm" height="133%" width="760" name="midt" frameborder=0></iframe>
Avatar billede mclemens Nybegynder
26. april 2006 - 09:55 #12
Hov en css relateret fejl i FF... :P
Avatar billede b3k-0ne Nybegynder
26. april 2006 - 09:57 #13
Der kommer også en fejl...
Avatar billede mclemens Nybegynder
26. april 2006 - 10:25 #14
Fejlmelding i FF Javascript-konsol:

I bunden af css skal:
.clearfix {display: inline-table;}

Rettes til:
.clearfix {display: inline;}

... der er dog stadig den css mæssige detalje med footeren ...
Avatar billede mclemens Nybegynder
26. april 2006 - 10:37 #15
Noget i denne stil ca.



/******* structure and layout *******/

body {
font-family:Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
background: #B4B8B7;
margin:10px 0 0 0;
padding:0 0 0 0;
background: #8E979C url(images/bg.gif);
text-align:center;
}

.wrap {
position:relative;
width:780px;
margin:0 auto;
padding:0 0 0 0;
text-align:center;
background: #ffffff url(images/header.jpg) no-repeat;
border-left:1px solid #f1b75f;
border-right:1px solid #f1b75f;
border-top:1px solid #f1b75f;
}

.header {
position:relative;
clear:none;
width:770px;
height:25px;
margin:100px 0 0 0;
padding:0 0 0 0;
background:transparent;
color:#ffffff;
text-align:right;
}

.topnav {
position:relative;
clear:both;
width:780px;
height:21px;
margin:0 0 0 0;
padding:0 0 0 0;
background:#cccccc;
font-size:8pt;
}

.container {
position:relative;
clear:both;
width:760px;
margin:10px 10px 0 10px;
padding:0 0 0 0;
background:#ffffff;
color:#000000;
text-align:left;
}

.news_right {
position:relative;
float:right;
clear:both;
width:200px;
margin:0 0 5px 10px;
padding:0 10px 0 10px;
background:#D0DEF6;
color:#465670;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
}

.news p {
margin:10px 10px;
}

.news_cnr_top {
background:url(images/cnr_tr.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}

.news_cnr_bottom {
background:url(images/cnr_br.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}

img.cnr {
width:8px;
height:8px;
border:none;
display: block !important;
}

.footer {
position:relative;
clear:both;
width:780px;
margin:0px;
padding:4px 0px;
background:#ffffff;
font-size:8pt;
text-align:center;
border-top:1px solid #f1b75f;
border-bottom:1px solid #f1b75f;
}


/******* top navigation *******/
#nav ul{
padding:0 0 0 0;
margin:0 0 0 0;
white-space: nowrap;
font-size:8pt;
color:#ffffff;
float:left;
width:100%;
background:#ffffff url(images/topnav_bg_grey.gif);
list-style:none;
}

#nav ul li{
display:inline;
list-style:none;
}

#nav ul li a{
margin: 0 0 0 0;
padding: .25em 2em .3em 1em;
background:#ffffff url(images/topnav_bg_grey.gif);
color: #000000;
text-decoration:none;
float: left;
border-right:1px solid #cccccc;
}

#nav ul li a:hover{
background:#8DA8D5 url(images/topnav_bg.gif);
color: #ffffff;
text-decoration:none;
border-right:1px solid #cccccc;
}




/******* links *******/

a {
color:#D3812D;
text-decoration:underline;
}

a:hover {
color:#E39243;
text-decoration:none;
}

#news a {
color:#D3812D;
text-decoration:underline;
}

#news a:hover {
color:#E39243;
text-decoration:none;
}

#footer a {
color:#f1b75f;
text-decoration:none;
}

#footer a:hover {
color:#D3812D;
text-decoration:none;
}

/******* fonts and colors *******/

.header strong {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:13pt;
letter-spacing:.7em;
}

.news_title {
font-family:Arial, Helvetica, sans-serif;
color:#465670;
font-size:10pt;
font-weight:bold;
}

.page_title {
font-family:Arial, Helvetica, sans-serif;
color:#4669A4;
font-size:10pt;
font-weight:bold;
padding: 0 0 0 0;
margin: 0 0 -8px 0;
}


/******* images *******/

img {
border:none;
}

.right img{
position:relative;
float:right;
padding:0 0 0 0;
margin:5px 2px 2px 5px;
}

.left img{
position:relative;
float:left;
padding:0 0 0 0;
margin:0 5px 0 2px;
}



/******* workarounds and hacks *******/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Avatar billede mclemens Nybegynder
26. april 2006 - 10:37 #16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="author" content="#" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Botha Foto</title>
</head>
<body>
<div class="wrap clearfix">
  <div class="header"><strong></strong></div>
  <div class="topnav" id="nav">
    <ul>
      <li><a target="midt" href="forside.htm">Forside</a></li>
      <li><a target="midt" href="virksomhedsbeskrivelse.html">
        Virksomhedsbeskrivelse</a></li>
      <li><a target="midt" href="ansatte.htm">Ansatte </a></li>
      <li><a target="midt" href="computer.htm">Computere</a></li>
      <li><a target="midt" href="info.htm">Infomation
        itl lærerne</a></li>
      <li></li>
    </ul>
  </div>

<iframe onload="if(document.all){this.height=midt.document.body.scrollHeight+'px';midt.document.body.style.padding='0px';midt.document.body.style.margin='0px';}else{this.height=contentDocument.body.scrollHeight+'px';contentDocument.body.style.padding='0px';contentDocument.body.style.margin='0px';}" src="forside.htm" height="133%" width="760" name="midt" frameborder="0" style="margin:10px auto;"></iframe>

  <div class="footer" id="footer"> <font face="Verdana" size="1">Copyright ©
    2006, All rights reserved.<br>
    Gruppe 4, Ringkøbing Handelsskole.</font></div>
</div>
</body>
</html>
Avatar billede b3k-0ne Nybegynder
26. april 2006 - 11:12 #17
Okay er virker perfekt... :D
Her kan du se siden: http://web.ringkhs.dk/hg205%2D6/3

Vil du ikke ha' point?
Avatar billede mclemens Nybegynder
26. april 2006 - 11:56 #18
ok :)
Avatar billede mclemens Nybegynder
26. april 2006 - 13:15 #19
hov, kast 50% til roenving og 50% til mig...
Avatar billede b3k-0ne Nybegynder
26. april 2006 - 13:55 #20
så skal roenving lige smide et svar.. :)
Avatar billede roenving Novice
26. april 2006 - 17:11 #21
Velbekomme '-)
Avatar billede mclemens Nybegynder
26. april 2006 - 17:55 #22
Kom lige til at kigge i Firefox... det skulle jeg måske have gjort lidt før... den minimerede ikke vinduet igen - brug denne iframe istedet (hvis du definerer padding og margin til 0px på iframe sider kan du slette de 4 js tildelinger af disse styles)


<iframe onload="if(document.all){this.style.height=midt.document.body.scrollHeight+'px';midt.document.body.style.padding='0px';midt.document.body.style.margin='0px';}else{this.height=contentDocument.body.offsetHeight+16+'px';contentDocument.body.style.padding='0px';contentDocument.body.style.margin='0px';}" src="123_files/forside.htm" name="midt" style="margin: 10px auto;" frameborder="0" height="133%" width="760"></iframe>
Avatar billede mclemens Nybegynder
28. april 2006 - 13:23 #23
tak for point :)
Avatar billede roenving Novice
02. maj 2006 - 00:41 #24
-- og jeg takker også for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester