[JavaScript] Height iframe updaten bij window resize

[Oogst]

Ik ben nogal een n00b op het gebied van JS en zowel Google als scriptspot als de search op GoT leverden me niks op, dus dan vraag ik het maar hier. Ik heb twee problemen waar ik niet uitkwam.

Ik heb met JavaScript een iframe gemaakt die zijn hoogte aanpast aan de hoogte van het scherm.

In de body:

code:

<script type="text/javascript">
    var hoogte = winHei() - 130
    document.write("<iframe src=\"Home.html\" width=\"626px\" height=\"" + hoogte + "px\" frameborder=\"0px\" marginheight=\"0px\" marginwidth=\"0px\" name=\"Inhoud\" width=\"589px\" style=\"left: 152; top: 116; z-index: 2\">")
</script>

En in de head:

code:

<script type="text/javascript">
    function winHei()
    {
        var ns4 = (document.layers) ? 1 : 0;
        var ns6 = (document.getElementById && !document.all) ? 1 : 0;
        return (ns4||ns6) ? window.innerHeight : document.body.clientHeight;
    }
</script>

Dit werkt goed, maar niet wanneer ik mijn window resize, want dan wordt de hoogte niet automatisch aangepast. Druk ik op F5, dan is het weer wel goed, maar dat is natuurlijk niet de oplossing. Hoe zorg ik dat die hoogte goed wordt aangepast?

Mijn tweede probleem is een kleintje en heeft niks met die iframe te maken, maar om er nou een aparte topic voor te openen is ook weer zoiets. Ik heb een image die altijd tegen de onderkant van het scherm moet zitten. Maar op de ene resolutie zit hij dat wel, op de andere resolutie blijft er exact één pixel over tussen de onderrand en de image. Hoe komt dit? De image wordt neergezet met de volgende code:

code:

[img]"Stukken\bottom.gif"[/img]

En in de head staat nog dit:

code:

<style type="text/css">
    img {display: block; position: absolute}
</style>

[Verwijderd]

die ns 4 kan je eruit halen want die kan zowiezo geen Iframes weergeven. Waarom geef je die iframe niet gewoon een percentuele hoogte en breedte mee? Dan schaalt de iframe automagisch mee met een window resize.

[JSchut]

in de body tag iets van onresize="berekenfuntie()"

[ Voor 107% gewijzigd door JSchut op 16-06-2003 11:33 ]

[Verwijderd]

Wat is er mis met:

Cascading Stylesheet:

body {
    margin:0;
    padding:0;
}
iframe {
    height:100%;
    width:626px;
    margin-bottom:130px;
}

[Verwijderd]

precies

[Oogst]

@Blues:
Ik heb het net geprobeerd en het werkt niet. Ik had iets dergelijks ook al geprobeerd door zowel top als bottom in te stellen, maar dat werkte niet. Dit dus ook niet, want nu loopt mijn iframe onder uit het beeld en negeert ie die margin-bottom gewoon.

@Shadow3333:
Een percentage werkt niet, want ik moet een vast aantal pizels van zowel de onderrand als de bovenrand afblijven.

@Jschut:
Zoiets dacht ik dus ook al, maar wat moet ik dan neerzetten op berekenFunctie()?

[Verwijderd]

HTML:

iframe {
    position:absolute;
    width:auto;
    height:auto;
    top:30px;
    bottom:30px;
    left:30px;
    right:30px;
    border: 1px #000 solid; /* ff checkuh ;) */
    overflow:auto;
}

dan gaat het wel goed

[JSchut]

Oogst schreef op 16 juni 2003 @ 14:40:
@Blues:
Ik heb het net geprobeerd en het werkt niet. Ik had iets dergelijks ook al geprobeerd door zowel top als bottom in te stellen, maar dat werkte niet. Dit dus ook niet, want nu loopt mijn iframe onder uit het beeld en negeert ie die margin-bottom gewoon.

@Shadow3333:
Een percentage werkt niet, want ik moet een vast aantal pizels van zowel de onderrand als de bovenrand afblijven.

@Jschut:
Zoiets dacht ik dus ook al, maar wat moet ik dan neerzetten op berekenFunctie()?

geef je iframe ff een naam...... bijvoorbeeld myiframe

de functie iets als het volgende:

code:

function berekenfunctie() {
    var hoogte = winHei() - 130;
    myiframe.style.height = hoogte;
}

je moet waarschijnlijk wel ff je hoogte als eerste in je style plaatsen en dus niet gewoon height in je iframe tag plaatsten maar tussen Style=""

[Oogst]

OK, ik heb het nu aangepast, maar het werkt nog steeds niet. Hij gaat wel iets doen wanneer je resized, maar hij update mijn iframe-hoogte niet. Ik heb nu de volgende code neergeplempt:

In de head:

code:

<script type="text/javascript">
    function winHei()
    {
        var ns6 = (document.getElementById && !document.all) ? 1 : 0;
        return (ns6) ? window.innerHeight : document.body.clientHeight;
    }
    function updateScherm()
    {
        var hoogte = winHei() - 131
        Inhoud.style.height = hoogte
    }
</script>

In de body-tag:

code:

<body onResize="updateScherm()">

En bij het maken van de iframe:

code:

<script type="text/javascript">
    var hoogte = winHei() - 131
    document.write("<iframe src=\"Home.html\" frameborder=\"0px\" marginheight=\"0px\" marginwidth=\"0px\" name=\"Inhoud\" width=\"589px\" style=\"left: 152; top: 116; z-index: 3; width: 626; height: " + hoogte + "\">")
</script>

De hoogte wordt dus gedefinieerd in de style nu. Ik krijg de error dat style geen object is. Wanneer ik style weglaat in de functie updateScherm(), dan geeft ie geen error meer, maar gebeurt er ook niks. Ook het gebruik van Style ipv style levert niks op.

[Guillome]

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title></title>
    <script>
      function doe()
            {
              iframe = document.getElementById("test");
                iframe.style.height = document.body.offsetHeight - 200 + "px";
            }
            function loadit()
            {
            document.getElementById("leeg").innerHTML = '<iframe id="test" height="' + (document.body.offsetHeight - 200) + 'px" width="400px" src="http://www.google.com"></iframe>';
            }
        </script>
  </head>
  <body onresize="doe()" onload="loadit();">
      <div id="leeg"></div>
  </body>
</html>

Zo Bedoel je zoiets?
edit:
Als je document.write doet haalt ie blijkbaar ook de body tag leeg (dus de onresize gevalletjes enzo)

[ Voor 68% gewijzigd door Guillome op 16-06-2003 21:21 ]

[Oogst]

Ja, nu doet ie het! Mijn reusachtige dank!

Maar heeft nu ook nog iemand antwoord op mijn tweede vraag in de topicstart over die rij pixels onderaan?

[Guillome]

Zo lelijk als wat maar ik weet effe geen andere oplossing...

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <body style="padding:0px; margin:0px; border:0px;">
      <table style="padding:0px; margin:0px; border:0px; position:absolute; top:2px; left:-2px; height:100%; width:100%;">
          <tr><td valign=bottom>[img]"troep\balk.png"[/img]</td></tr>
    </table>
  </body>
</html>