My HTML page body looks like below.
<body>
<div id="wrapper">
<div id="top-contact"><img src="http://mysite.com.au/images/logo.png" width="232" height="59" alt="Contac No" /></div>
<div id="top-menu"> <a href="landing.aspx">Landing </a> | <a href="OnTimeLearning.aspx">Learn OnTime</a> |
</div>
<iframe src="https://mysite.ontimenow.com" width="100%" class="myIframe"></iframe>
<div id="fotter-ontime">© 2013 RED ROCK Software Solutions</div>
</div>
</body>
I have two div tags for the header and the footer in between i have the iframe. Now we need to set the iframe size to fit any screen size.
Using Jquery i'm going to reduce the heights of the two div tags on the header and footer and the width ratio is set to 100%.
<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script language="javascript">
$(document).ready(function () {
var height = $(window).outerHeight() - ($("#top-menu").outerHeight() + $("#fotter-ontime").outerHeight());
$('.myIframe').css('height', height + 'px');
})
</script>
Posts
No comments:
Write comments