PDA

View Full Version : help - auto resizable IFRAME in DIV



hog_mus_stream
Feb 12th, 2010, 09:40 PM
hello
on my page i use DIV layer and inside iframe so
i can change HTML content inside that iframe "on the fly"
when user clicks on links

but as known problem DIV layers cannot have height set in %
and i'd like to wish to have resizable DIV frame per user
resolution screen, but since that is not possible
i have to set fixed height in pixels for standard 17inch display
which i gave 600px, but when user has bigger resolution
the DIV layer with IFRAME is always that small

so only way is to make IFRAME auto resizable by height
and DIV should auto size itself by iframe

unfortunately i came across so many codes and javascripts
but none worked for Opera, Firefox and Webkit based browsers

so i was hoping if someone here knows how to do it for HTML/CSS

to ease this are my "settings"



<html>
<head>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
border: none;
}

* html, body, .right_frame {
height: 100%;
}

.right_frame {
min-height: 100%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 600px;
z-index: 1;
}
-->
</style>
<script type="text/javascript">
function resize(iframe)
{
iframe.height = iframe.contentWindow.document.body.scrollHeight + 30;
}
</script>
</head>
<body>
<div class="right_frame">
<iframe id=iframe_gl name="iframe_gl" onload="resize(this);" src="some_page.html" marginwidth="0" marginheight="0" height="100%" width="100%" style="border-width:0; padding:0; border="0" frameborder="0" scrolling="no"allowtransparency="true"></iframe>
</div>
</body>
</html>