Marcel Marcel - 3 months ago 16
HTML Question

Splitted HTML Webpage IFrame/Jquery

i wanted to create a Webpage with 4 iframes, then i realised that Java applications will not work in iframes so i found jquery.
My Problem is i can't max the jquery iframe in this div container, could you please help me?
Thanks a lot!!!

With kind regards Marcel



html, body { height: 100%; padding: 0; margin: 0; }
/*div { width: 50%; height: 50%; float: left; }*/

#frame1 {width: 60%; height: 50%; float: left; background: #DDD; }
#frame2 {width: 40%; height: 50%; float: left; background: #AAA; }
#frame3 {width: 60%; height: 50%; float: left; background: #777; }
#frame4 {width: 40%; height: 50%; float: left; background: #444; }

<html>
<head>
<title>My Wallchart</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div id="frame1"></div>​
<script>
$("#frame1").html('<object data="http://example.com">');
</script>

<div id="frame2"></div>
<script>
$("#frame2").html('<object data="http://example.com">');
</script>

<div id="frame3"></div>
<script>
$("#frame3").html('<object data="http://example.com" > ');
</script>
<div id="frame4"></div>
<script>
$("#frame4").html('<object data="http://example.com">');
</script>

</body>
</html>




Answer

Setting the object width and height to 100%:

<object width="100%" height="100%" data="http://example.com">

html, body { height: 100%; padding: 0; margin: 0; }
/*div { width: 50%; height: 50%; float: left; }*/

#frame1 {width: 60%; height: 50%; float: left; background: #DDD; }
#frame2 {width: 40%; height: 50%; float: left; background: #AAA; }
#frame3 {width: 60%; height: 50%; float: left; background: #777; }
#frame4 {width: 40%; height: 50%; float: left; background: #444; }
<html>
<head>
	<title>My Wallchart</title>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div id="frame1"></div>​
    <script>
      $("#frame1").html('<object width="100%" height="100%" data="http://example.com">');
    </script>
	
	<div id="frame2"></div>
	<script>
      $("#frame2").html('<object width="100%" height="100%" data="http://example.com">');
    </script>

	<div id="frame3"></div>
	<script>
      $("#frame3").html('<object width="100%" height="100%" data="http://example.com" > ');
    </script>
	<div id="frame4"></div>
	<script>
      $("#frame4").html('<object width="100%" height="100%" data="http://example.com">');
    </script>

</body>
</html>