asked on

cycle through html pages

I stumbled upon the following code which is almost exactly what I am looking for. Except, instead of having links for each page at the top, how can the code be changed to have Forward/Backward links instead?

<html>
<style type="text/css">
#pagination a {
	padding-right: 1em;
}
</style>
<div id="pagination"></div>
<iframe id="if_one" src="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

<script type="text/javascript">
var pages = [
	'CyclePage1.html',
	'CyclePage2.html',
	'CyclePage3.html'
], p = pages.length, paginate = document.getElementById('pagination'), thepage;
while(--p > -1){
	(function(p){
		var a = document.createElement('a');
		a.href = pages[p];
		a.appendChild(document.createTextNode('Page ' + (p + 1)));
		a.onclick = function(){
			var bust = this.search? '&' : '?';
			bust += 'bustcache=' + new Date().getTime();
			window.frames[0].location.href = this.href + bust;
			thepage = this;
			return false;
		};
		paginate.insertBefore(a, paginate.firstChild);
		pages[p] = a;
	})(p);
}
thepage = pages[0];

function loadIframe() {
thepage.onclick.apply(thepage);
setTimeout(loadIframe, 120000);
}
loadIframe();
</script>

</html>

Open in new window

Member_2_248744

greetings UniqueData, you have most of the code needed already in your javascript, here is some javascript code that works for me, , , it has Two Buttons, a Forward button, and a Back Button, that change the IFrame page -

<!doctype html><html lang="en"><head><title>Foward and Back</title>
<style>body{background:#e3f7ff;height:100%;margin-top:8px;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<script>/* <![CDATA[ */
var pages = ['ajax.php', 'mysqli1.php', 'index.php', 'test1.php'], 
plen = pages.length, thepage = 0;

function nextFrame(back){
if (back) {
  --thepage;
  if(thepage < 0) thepage=plen-1;
  window.frames[0].location.href = pages[thepage];
}else{
  ++thepage;
  if(thepage > plen-1) thepage=0;
  window.frames[0].location.href = pages[thepage];
}
}
/* ]]> */</script>
</head><body><h3 style="text-align:center;color:#07b;">Foward and Back for IFrame</h3>
<input type="button" value=" Foward " onclick="nextFrame(0);" /> - <input type="button" value=" Back " onclick="nextFrame(1);" />
<iframe id="if_one" src="ajax.php" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>
</body></html>

Open in new window

You will need to change the web addresses in the array to pages that exist on your server

UniqueData

ASKER

Thank you much. Only one problem. on load I would like the first page in the array to be loaded, but I don't want to hard code in the src of the frame. Is there a way on load to get the first one loaded?

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

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

Start Free Trial

UniqueData

ASKER

Awesome. Thanks