[HTML/JavaScript]iFrame variabele hoogte, rare fouten - Softwareontwikkeling

maandag 6 september 2004 17:30

Acties:

Topicstarter

Goed, het is me gelukt om een iFrame te maken met een variabele hoogte, de hoogte wordt d.m.v. javascript aangepast aan de inhoud.

Ik zal even uitleggen waarvoor ik het gebruik voor ik inga op de fouten en de code.
Ik heb een forum gemaakt in php, en daarbij had ik een image-resize script. Dit script was echter wat traag, omdat een hele verkeerde insteek had. Nu blijkt dat het niet mogelijk is de hoogte en breedte uit te lezen via php zonder eerst het hele bestand te downloaden. Omdat dat te lang duurd (daarom ook de revisie van het script) wil ik het dus met javascript oplossen.

Dit werkt prefect, met 1 uitzondering: de layout is verneukt totdat alle images geresized zijn. Omdat er nog wel eens heel veel plaatjes in een topic kunnen staan, ook van slomere servers, vind ik dat niet acceptabel.

Daarom kwam ik op het idee om een plaatje in een iFrame te gooien. Mocht het plaatje dan van een slome server komen, dan zou je alleen scrollbalken zien (misschien zijn die zelfs nog wel uit te zetten??) en is de layout van de pagina verder niet verneukt.

Hier even kort de code:

PHP:

1 2	<center><iframe name="\\1" id="\\1" frameborder="0" src="includes/image.php?src=\\1" style="width: 570px; height: 200px; overflow: hidden; border: none;"></iframe></center>

de \\1 is in dit geval de url van het plaatje (in een preg_replace functie van php). Ik geef het iframe dus als name en id de url. Dit doe ik omdat ieder iframe een unieke id moet hebben en dit de meest logische en simpele oplossing was. Hieronder zal ik de inhoud van image.php zetten:

PHP:

<html>
<head>
<script type="text/javascript">
//met dank aan Crisp van GoT voor dit script!
function checkImg(im) {
  var maxWidth = 550;
  if (typeof im.naturalWidth == 'undefined') im.naturalWidth = im.width;

  if (im.width > maxWidth) {

    im.width = maxWidth;

  }

}

function resizeIframe() {

    // Must launched on the body onload event handler for IE
    // Use document.documentElement if you are in Compat mode
    i = parent.document.getElementById(window.name)
    iHeight = document.body.scrollHeight
    i.style.height = iHeight + 5 + "px"
}

</script>
<style type="text/css">
BODY {
*wat style shit, niet relevant*
</style>
</head>
<body onload="resizeIframe()" style="margin:0;border:none">
<?php
echo '<center><a href="' . $src . '" target="_new">
[img]"'[/img]</a></center>';
?>
</body>
</html>

Dit script geeft het plaatje weer en resized hem middels javascript.

Dit werkt allemaal, maar af en toe word de hoogte van het iFrame 0 en ik heb geen idee hoe dat kan. Als de hoogte 0 is, is er vanzelfsprekend niet zoveel te zien

Verder is het plaatje niet helemaal gecentreerd, het lijkt een stukje meer naar links te zitten, ik dacht zelf dat dat misschien wel te maken heeft met de scrollbar die, voordat het plaatje geresized word, te zien is.

Maar dat de hoogte af en toe 0 is, is zeer vervelend. Misschien dat jullie iets voor me kunnen betekenen (Zonder GoT was ik nooit zover gekomen, maar nu sta ik echt even vast..) en misschien wel inzichten hebben in hoe het beter of misschien wel helemaal anders kan.

Verder mijn excuses voor het gebruik van iFrame, ik heb een iPod, dus dat ging eigenlijk automatisch

Research is what I'm doing when I don't know what I'm doing.

maandag 13 september 2004 16:01

Acties:

Roa

Topicstarter

Weekje later, klein kickje. Ben nog niet veel verder gekomen. Het probleem dat het iFrame echter maar 0 hoog is, lijkt zeer weinig voor te komen, ik hoop echter nog steeds dat er een verklaring voor is. Een verklaring kan immers de weg naar de oplossing betekenen. Verder dus nog dat centreren...

Research is what I'm doing when I don't know what I'm doing.

Reageer