Resize von Div über Javascript

Sunday

hi,

ich hab folgenden Beispielcode. Diese funktioniert im Firefox wunderbar. Im IE allerdings nicht! (wen wundert das)

Das Div (id="Div") soll über Javascript vergrössert und der gesamte Inhalt (untergeordnete Divs mit dem IFrame) an die Grösse angepasst werden.

<!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="de" lang="de">
	<head>
	</head>
	<body>

		<div id="Div" style="width: 250px; height: 450px; background-color: #abcdef; display: block;">
			<div style="width: 200px; height: 100%; background-color: #aaaaaa; display: block; float: left;">
				<iframe src="test2.html" style="width: 100%; height: 100%" name="IFrame" id="IFrame" frameborder="0" scrolling="auto">
					<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen.</p>
				</iframe>
			</div>
			<div style="width:  50px; height: 100%; background-color: #bbbbbb; display: block; float: right;"></div>
		</div>

		<script type="text/javascript">

			function Resize(DivObj)
			{
				DivObj.style.height = "1500px";
			}

			var DivObj = document.getElementById("Div");

			if (DivObj)
			{
				window.setTimeout("Resize(DivObj)", 1000);
			}

		</script>
	</body>
</html>

Habt ihr ne Idee wie man den IE bewegen kann, das zu machen?

ronny

ich würde dir empfehlen dir diverse javascript libs anzuschauen, die differenzen zwischen den browsern wegabstrahieren
(obwohl es eher die groben fehler des ie verstecken ist)

Neku

Klappt im IE7 doch wunderbar.

Im IE6 muss man lediglich die Höhenangabe des Kindelements neu setzen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
 <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
 </head>
 <body>
  <div id="div" style="width: 250px; height: 450px; background-color: #abcdef;">
   <div style="width: 200px; height: 100%; background-color: #aaa; float: left;">
    <iframe src="test2.html" style="width: 100%; height: 100%" frameborder="0" scrolling="auto">
     <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen.</p>
    </iframe>
   </div>
   <div style="width: 50px; height: 100%; background-color: #bbb; float: right;"></div>
  </div>

  <script type="text/javascript">
   <!--
    function resizeDiv()
    {
       var obj = document.getElementById ('div');

       if (obj)
       {
          obj.style.height = '1500px';

          // for IE6
          obj.firstChild.style.height = '';
          obj.firstChild.style.height = '100%';
       }
    }

    window.setTimeout ('resizeDiv();', 1000);
   //-->
  </script>
 </body>
</html>

Sunday

hey, super, danke!