asked on

HTML Iframe rotate webpages

EE,

I'm simply trying to make a webpage that we use to monitor our servers, I want the data in 2 frames, 1 fixed and the other rotating between pages in the list. The initial load works but upon refresh the next page uses the full screen and not the full page.
I put this together using other peoples code I found online and tried to adapt it a little, HTML knowledge is low! Any help appreciated.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Page</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
html, body, iframe {
height:100%;
width:100%;
overflow:hidden;
}
</style>
<script type="text/javascript">
var pages = new Array(); // this will hold your pages
pages[0] = 'www.pluralsite.com';
pages[1] = 'http://www.hardrocksd.com';
pages[2] = 'http://www.expertsexchange.com';
pages[3] = 'page4.html';
pages[4] = 'page5.html';
pages[5] = 'page6.html';

HainKurt

where is the rest of the code?
it is cut-off / not complete...

snyderkv

ASKER

Oops I forgot to paste the whole thing. Thanks a bunch

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Page</title>
<style type="text/css">
* {
              margin:0;
              padding:0;
              border:0;
}
html, body, iframe {
              height:100%;
              width:100%;
              overflow:hidden;
}
</style>
<script type="text/javascript">
var pages = new Array(); // this will hold your pages
pages[0] = 'www.w3schools.com';
pages[1] = 'http://www.hotukdeals.com';
pages[2] = 'http://www.expertsexchange.com';
pages[3] = 'page4.html';
pages[4] = 'page5.html';
pages[5] = 'page6.html';

var time = 10; // set this to the time you want it to rotate in seconds

// do not edit
var i = 1;
function setPage()
{
              if(i == pages.length)
              {
                           i = 0;     
              }
                           document.getElementById("Frame1").setAttribute('src',pages[i]);
              i++;
}
setInterval("setPage()",time * 1000);
// do not edit
</script>
</head>

<body>
<div id="RightPanel" style="width: 50%; height: 100%; text-align: left; vertical-align: bottom; float: right;">
              <iframe id="Frame1" src="http://www.hotukdeals.com" frameborder="0" scrolling="no"></iframe></a>
</div>

<div id="LeftPanel" style="width: 50%; height: 100%; text-align: left; vertical-align: bottom; float: left;">     
<iframe id="Services" src="http://www.avforums.co.uk" frameborder="0" scrolling="no"></iframe></a>
</div>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

snyderkv

ASKER

Thanks man you're the best