[HTML] Uitvullen Iframe

Pagina: 1
Acties:
  • 206 views sinds 30-01-2008
  • Reageer

  • Twhomp
  • Registratie: Oktober 2001
  • Laatst online: 05-05 00:50

Twhomp

Stayin' Alive

Topicstarter
Heb zelf al meerdere HTML handleidingen doorgenomen en gegoogled, maar ik kom er niet uit. Verder hoop ik dat dit subforum de juiste plek is, ipv P&W.

Het probleem:

Ik heb een site met een menustructuur bestaande uit plaatjes. Centraal in die pagina zit een iframe. Met het menu kan ik de inhoud van het iframe bepalen. Die inhoud komt uit (simpele) HTML files. So far so good dus.

Maar als de inhoud van bepaalde HTML filetjes te groot is, dan "verlengd" de gehele pagina niet. Als je geen iframe gebruikt, maar de inhoud van de "content-HTML's" gewoon in de hoofd-HTML gooit, dan verlengd de pagina wel naar beneden.

Waarom wil ik een iframe? Omdat ik dan 1 centrale opmaak kan gebruiken en de content waar het om gaat wel dynamisch is.
Waarom wil ik dat de pagina verlengd? Omdat 2 scrollbarren op 1 pagina heel irritant is (zeker bij gebruik scrollwheel).

De code:

Nog ff de code zoals ik m nu gebruik:

Knop uit menu. Ik gebruik een href zodat er een handje onstaat wanneer je boven de knop hoovert. Vandaar ook de -return false-, want de javascriptcommando doet het echte werk: inhoud veranderen in het iframe (genoemd "hetframe"). Is in het echt één regel uiteraard, maar voor de layout ff opgebroken

code:
1
2
3
<a href="dummyfile.html" onClick="document.getElementById
('HetFrame').src='contentfile.html';return false;">
[img]"knop.gif"[/img]</a><br />



De iframe. Zit in een tabel (site is opgebouwd met tabellen).
code:
1
2
3
4
5
6
7
8
<td width="744" valign="top" background="background.gif" align="left">

<iframe src="start_contentfile.html" FRAMEBORDER="0" 
scrolling="auto" width="744" height="100%" id="HetFrame">

</iframe>

</td>


Alle tabellen geef ik alleen een width mee, geen height, zodat de inhoud de lengte van de tabellen bepaald (zoals ik wil). Alleen de iframe geef ik height=100% zodat hij de volledige lengte van het scherm pakt. Maar die 100% is niet variabel lijkt wel.

Wat wil ik?:

Is er een manier in HTML (het liefst HTML, geen beschikking over php op die webspace) om te zorgen dat de inhoud van dat iframe bepalend is voor de lengte van de gehele pagina?

De hele pagina is statisch qua opmaak, alleen de content in dat iframe is bepalend (en dynamisch qua grootte) voor de lengte van de pagina (althans, zou wil ik dat).

.

Weet van alles een beetje en van een beetje alles!


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 10:07

crisp

Devver

Pixelated

Twhomp schreef op 10 October 2003 @ 00:30:
[...]
Wat wil ik?:

Is er een manier in HTML (het liefst HTML, geen beschikking over php op die webspace) om te zorgen dat de inhoud van dat iframe bepalend is voor de lengte van de gehele pagina?

De hele pagina is statisch qua opmaak, alleen de content in dat iframe is bepalend (en dynamisch qua grootte) voor de lengte van de pagina (althans, zou wil ik dat).

.
afaik is er maar 1 manier mogelijk; namelijk javascript gebruiken om je iframe qua hoogte aan te passen aan de inhoud daarvan. Dat kan ook alleen maar op het moment dat de inhoud van het iframe volledig geladen is.

Intentionally left blank


  • Twhomp
  • Registratie: Oktober 2001
  • Laatst online: 05-05 00:50

Twhomp

Stayin' Alive

Topicstarter
crisp schreef op 10 October 2003 @ 00:35:
[...]

afaik is er maar 1 manier mogelijk; namelijk javascript gebruiken om je iframe qua hoogte aan te passen aan de inhoud daarvan. Dat kan ook alleen maar op het moment dat de inhoud van het iframe volledig geladen is.
Hmm, dat klinkt idd wel goed. Wat is het javascript commando daarvoor?

(javascript lukt me ook wel op die webspace ;) Da's toch clientside)

Weet van alles een beetje en van een beetje alles!


  • André
  • Registratie: Maart 2002
  • Laatst online: 04-05 16:01

André

Analytics dude

Twhomp schreef op 10 October 2003 @ 00:40:
[...]


Hmm, dat klinkt idd wel goed. Wat is het javascript commando daarvoor?

(javascript lukt me ook wel op die webspace ;) Da's toch clientside)
Javascript is clientside ja, dus dat kun je wel gebruiken. Het commando kun je opzoeken.

  • Skaah
  • Registratie: Juni 2001
  • Niet online
Wat een aparte manier van de bron van een iframe heb je trouwens.

Overweeg eens iets als dit

HTML:
1
2
3
<a href="pagina.html" target="iframedoel">Klikplekje</a>

<iframe name="iframedoel"></iframe>

  • Twhomp
  • Registratie: Oktober 2001
  • Laatst online: 05-05 00:50

Twhomp

Stayin' Alive

Topicstarter
Skaah schreef op 10 October 2003 @ 11:34:
Wat een aparte manier van de bron van een iframe heb je trouwens.

Overweeg eens iets als dit

HTML:
1
2
3
<a href="pagina.html" target="iframedoel">Klikplekje</a>

<iframe name="iframedoel"></iframe>
Ghehe, dat kan natuurlijk ook :D
(dit is zo gekomen omdat ik met javascript eerst die iframe-verwijzing had gedaan en later met href het "handje" terugkreeg. Jouw manier is inderdaad efficienter)
André schreef op 10 October 2003 @ 01:06:
[...]

Javascript is clientside ja, dus dat kun je wel gebruiken. Het commando kun je opzoeken.
Hmm, okee. Wat is het sleutelwoord van dat commando dan? De precieze structuur zal ik zelf opzoeken :)

Weet van alles een beetje en van een beetje alles!


  • OnTracK
  • Registratie: Oktober 2002
  • Laatst online: 10:09
zoiets als:

iframe-hoogte = iframe-html-hoogte
dat zet je dan in een onLoad in de iframe-html (dus de subpagina).
geef je iframe zelf een ID.
dan kan je dus zoiets maken:

de index
code:
1
2
3
<HTML><BODY shit>
<IFRAME width=300 height=1 id="inhoud"></IFRAME>
</BODY></HTML>
de iframe
code:
1
2
3
4
5
6
7
8
9
10
11
12
<SCRIPT language="JavaScript" type="text/javascript">
     function iframehoogte()
     {    window.top.document.getElementByID('inhoud').height
               = window.self.height //kan dat op deze manier?
     }
</SCRIPT>

<HTML><BODY onLoad="iframehoogte()">

[..]

</BODY></HTML>
offtopic:
of zit ik nou weer helemaal fout te denken

[ Voor 18% gewijzigd door OnTracK op 10-10-2003 14:06 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.


  • André
  • Registratie: Maart 2002
  • Laatst online: 04-05 16:01

André

Analytics dude

Twhomp schreef op 10 oktober 2003 @ 12:46:
Hmm, okee. Wat is het sleutelwoord van dat commando dan? De precieze structuur zal ik zelf opzoeken :)
[search=iframe resizen]

  • Twhomp
  • Registratie: Oktober 2001
  • Laatst online: 05-05 00:50

Twhomp

Stayin' Alive

Topicstarter
Okee, ik denk dat het gaat lukken, ik ga nu ff stoeien ermee. Ik hou jullie op de hoogte :)

Okee, het gewenste effect is bereikt. Ik ben er bijna. Maar nog een heel simpel dingetje nog:

Als ik van een grote iframe-inhoud terugga naar een kleine iframe-inhoud, dan blijft de iframe op de grote grootte staan. Hoe refresh ik een pagina/tabel op het moment dat ik een link klik?

ik dacht zelf aan een soort onClick commando met een refresh erin, maar dat ging niet zoals ik het deed.


Het werkt :)

[ Voor 73% gewijzigd door Twhomp op 10-10-2003 14:51 ]

Weet van alles een beetje en van een beetje alles!


  • Twhomp
  • Registratie: Oktober 2001
  • Laatst online: 05-05 00:50

Twhomp

Stayin' Alive

Topicstarter
Allereerst wil ik iedereen bedanken. Het werkt en dankzij jullie tips. _/-\o_
Ik was er echt niet achtergekomen waar ik moest zoeken voor de benodigde functies (ja, ik ben JS n00b ;))

Hieronder post ik de code die ik heb gebruikt om het beoogde effect te bereiken. Misschien heeft iemand er ooit nog eens wat aan :)


Het script in de index.html:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
function adjustIFrameSize (iframeWindow) {
  if (iframeWindow.document.height) {
    var iframeElement = parent.document.getElementById
(iframeWindow.name);
    iframeElement.style.height = iframeWindow.document.height + 'px';
  }
  else if (document.all) {
    var iframeElement = parent.document.all[iframeWindow.name];
    if (iframeWindow.document.compatMode &&
        iframeWindow.document.compatMode != 'BackCompat') 
    {
      iframeElement.style.height = 
iframeWindow.document.documentElement.scrollHeight + 5 + 'px';
    }
    else {
      iframeElement.style.height = 
iframeWindow.document.body.scrollHeight + 5 + 'px';
    }
  }
}
</script>


De tabel met iframe (in de index.html):
HTML:
1
2
3
4
5
6
<td background="sitedata/mainbackground.gif" valign=top>

<iframe src="1.html" FRAMEBORDER="0" scrolling="no" width="744" 
id="iframeName" marginwidth="5" marginheight="5" name="iframeName"></iframe>

</td>


Een knop die de iframe-content aanroept (content=1.html)
HTML:
1
2
<a href="1.html" target="iframeName"><img src="sitedata/1news.gif" 
width="78" height="13" border="0"></a><br />


De code in de body-tag van de content-html (=1.html)
HTML:
1
2
<body onload="if (parent.adjustIFrameSize)
                parent.adjustIFrameSize(window);" >


De width is dus constant, door mij bepaald. De hoogte word dan bepaald door het script en bij laden content iframes aangepast. De width zou je ook op deze manier kunnen doen, maar dan moet je in het script op 3 plekken dat invoeren zoals dat ook met de height gedaan wordt.

Iedereen nogmaals bedankt :)

Weet van alles een beetje en van een beetje alles!


Verwijderd

Hoi, ik heb dit gevonden via google en hij werkt wel, helaas niet met meerdere iframes :'(
Dus dat is dan ook mijn vraag: hoe kan ik dat ook bij de meerdere iframes doen???

  • André
  • Registratie: Maart 2002
  • Laatst online: 04-05 16:01

André

Analytics dude

Welkom sboy op got :)

Je kicked een topic van bijna 2 jaar oud en geeft vervolgens helemaal niet aan wat je zelf al geprobeerd hebt. Kun je gewoon een nieuw topic open met daarin de dingen die je zelf al geprobeerd hebt?

En lees dit direct ook even:
[FAQ]Algemene GoT FAQ[/FAQ]
[rml][ W&G FAQ] Welkom in W&G: FAQ en Beleid[/rml]
Pagina: 1