create previous next button for iframe pages

Posted by Resu on Stack Overflow See other posts from Stack Overflow or by Resu
Published on 2012-10-16T22:57:51Z Indexed on 2012/10/16 23:00 UTC
Read the original article Hit count: 165

Filed under:

This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...

So I have this code...

<script type="text/javascript">
var pages=new Array();

pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";

var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
  document.getElementById('the_iframe').src=pages[end];
  i=0;}
else {
  document.getElementById('the_iframe').src=pages[i];
  i++;}}
if (operation=="back") {
if (i==0) {
  document.getElementById('the_iframe').src=pages[0];
  i=end;}
else {
  document.getElementById('the_iframe').src=pages[i];
  i--;}}}
</script>
</head>

<body>

<ul id="menu" role="group">

<li><a href="listItem1.html" target="ifrm" role="treeitem">Welcome</a>
  <ul>
    <li><a href="listItem2.html" target="ifrm" role="treeitem">Ease of Access Center</a></li>
  </ul>
</li>    

<li><a href="listItem3.html" target="ifrm">Getting Started</a>
  <ul>      
    <li><a href="listItem4.html" target="ifrm">Considerations</a></li>
    <li><a href="listItem5.html" target="ifrm">Changing Perspective</a></li>
  </ul>
</li>
</ul>


<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>


<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />

and if I click on the next or prev button, it does move somewhere,but...

let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).

It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.

Many Thanks For Any Help!

© Stack Overflow or respective owner

Related posts about iframe