• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 148
  • Last Modified:

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

0
UniqueData
Asked:
UniqueData
  • 2
  • 2
1 Solution
 
Slick812Commented:
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
0
 
UniqueDataAuthor Commented:
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?
0
 
Slick812Commented:
This is basic javascript, but here is somethin that shod do it -
<!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="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

<script>/* <![CDATA[ */
window.frames[0].location.href = pages[0];
/* ]]> */</script>
</body></html>
                                          

Open in new window

I have removed the src from the IFrame, and added the -
<script>/* <![CDATA[ */
window.frames[0].location.href = pages[0];
/* ]]> */</script>

near the end, that's only one line of code, ,  It would be of great benefit to you to take the time and learn the basics of javascript! ! !
0
 
UniqueDataAuthor Commented:
Awesome.  Thanks
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now