Iframe challenges

**mavtrevor** · 07-28-2011, 05:57 PM

Please i really need great help on something i am working on, i want to create a website where i will load the content of an external website using iframe to dynamically display the content on a 100% width and height, or if there is any means of making the external content fit in to an iframe. see examples of what i meant here @

http://www.nairahub.com/demo/iframe.html {this is the one i will like to perfect on so i can have space for ads at the top, side and footer}

http://www.nairahub.com/demo/test.html

http://www.nairahub.com/demo/test2.html

plz i really need your helps.

**molendijk** · 07-28-2011, 09:15 PM

See this demo and this thread.
===
Arie Molendijk.

**mavtrevor** · 07-29-2011, 02:45 AM

Sir i am a newbie and i have tried to understand how to impliment the script and just dont know where to start, please give me some heads up...thanks i appreciate your kind help.

**molendijk** · 07-29-2011, 12:37 PM

I don't know exactly what you are trying to achieve, but if you want something like THIS, then put the following in index.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>

<style type="text/css">
body,html {overflow:hidden; height:100%; width:100%}
body {background: #dedede; font-family: verdana; font-size: 90%}
#header {position: absolute; left: 150px; top: 10px; right:150px; height: 70px; border: 1px solid black; overflow: auto; padding: 5px; text-align: center; background: white}
#footer {position: absolute; left: 150px; bottom: 10px; right:150px; height: 70px; border: 1px solid black; overflow: auto; padding: 5px; text-align: center; background: white}
</style>

<script type="text/javascript">
contentURL = top.document.URL.substring(top.document.URL.indexOf('?')+1, top.document.URL.length);
if (top.location == contentURL)top.location.href='index.html?http://www.nairahub.com/forum';

document.write('<div style="position:absolute; left:150px;top: 100px; right: 150px; bottom: 100px"><iframe  style="position:absolute;width:100%;height:100%; border:1px solid black;background:white;" frameborder=0 src="' + contentURL + '"><\/iframe><\/div>');
</script>

</head>

<body ><div>
<div id="header">
HEADER<br>This is my header
</div>

<div id="footer">
FOOTER<br>This is my footer
</div>

<div style="position: absolute; left:10px; top: 40%; width: 100px; height: 60px; overflow: auto; border: 1px solid black; padding:10px">
<a href="javascript: void(0)" onclick="top.location.href='?http://www.nairahub.com/forum'">nairahub</a><br>
<a href="javascript: void(0)" onclick="top.location.href='?http://mavtrevor.com'">mavtrevor</a><br>
<a href="javascript: void(0)" onclick="top.location.href='?http://www.google.com'">Google</a><br>
</div>

</div></body>

</html>

WARNING:
This does not work well on your hard disk if you are using Internet Explorer or Google Chrome, but everything works fine on the Internet. So it should work if your upload index.html to your server.
===
Arie.

**mavtrevor** · 07-29-2011, 10:19 PM

Awesome this is exactly what i wanted....you are the best. Thanks very much, then i wont wanna display this url for the sites, i want to use a url shortner, any ideas?

**mavtrevor** · 07-29-2011, 10:29 PM

please how can i remove the scrollbar and make the content dynamically fit in to the iframe even if the scrollbar will have to appear on the windows not anywhere inside the page?

**molendijk** · 07-30-2011, 12:03 AM

Alas, a shorter url and a scrollbar outside the iframe aren't possible if you want to load external files (foreign domain) into the iframe.
===
Arie.

**mavtrevor** · 07-30-2011, 10:01 AM

Thanks i appreciate, but how can i make the content area bigger to cover the right hand side of the page cos there is unused space at that corner. i tried expanding from 90% to 120% and it showed a scrollbar at the bottom. i hope yu understand me.

**molendijk** · 07-30-2011, 11:43 AM

I thought you wanted space for ads there. Anyhow, to make the iframe stretch from the extreme left to the extreme right, replace:

Code:

document.write('<div style="position:absolute; left:150px;top: 100px; right: 150px; bottom: 100px"><iframe  style="position:absolute;width:100%;height:100%; border:1px solid black;background:white;" frameborder=0 src="' + contentURL + '"><\/iframe><\/div>');

with:

Code:

document.write('<div style="position:absolute; left:1px;top: 100px; right: 1px; bottom: 100px"><iframe  style="position:absolute;width:100%;height:100%; border:1px solid black;background:white;" frameborder=0 src="' + contentURL + '"><\/iframe><\/div>');

You can stretch the header and footer in the same way (see the css in the head section).
===
Arie.
EDIT: Sorry, I made a mistake. Since you only want the extreme right area, you should do:
style="position:absolute; left:150px;top: 100px; right: 1px; bottom: 100px"

**mavtrevor** · 07-30-2011, 03:05 PM

you are perfecting this script for me thanks for all, i wanna ask a question, plz is there a way for the iframe to dynamically determine the height of the external site and adjust its own height automatically to match that one so that when a page loads, it will display the content of the external source with same height?