StackBuck StackBuck - 5 months ago 31
HTML Question

How to Make Next and Previous Buttons to Switch iFrame Pages back and forth?

I made static ebook that when i click on a link it opens the html page in iFrame.Again, it is not dynamic pages.

I created Next and Previous Buttons in intend to work like that:

When the "pages/1.html" page displayed, i click on the Next button and it will display me the "pages/2.html" page at the iframe.

When i see "pages/2.html" and click the Previous button it will show me the "pages/1.html" at the iframe. And so on follow the numbers up and down.

I dont want to add those buttons on any iframe page i have, but to make Two Buttons ONLY at the main page that will direct to the Next and Previous Pages at the iframe.

Its kind of a simple code:



<div id="menu">
<ul>
<li><a class="link" href="./pages/1.html" target="content">Link 1</a></li>
<li><a class="link" href="./pages/2.html" target="content">Link 2</a></li>
<li><a class="link" href="./pages/3.html" target="content">Link 3</a></li>
<li><button onclick="next()">Next Page</button></li>
<li><button onclick="previous()">Previous Page</button></li>
</ul>
</div>


And the javascript is:

var pNum=1;
var maxPage=100;
function next(){
pNum++;
if (pNum > maxPage) pNum=1;
document.getElementById("zoome").src="page"+pNum+".htm";
}
function previous(){
pNum++;
if (pNum > maxPage) pNum=1;
document.getElementById("zoome").src="page"+pNum+".htm";
}


Here is a live code: JSFIDDLE

Right now i get an error page when i click the buttons and it is not forward me to any page.

Also, not that at the JSfiddle its not even forwarding to the next page because the page is not exist ofcourse.

Any suggestions?

Answer

Because you didn't provide in your fiddle an example of how we could try to simulate the paging. I searched the web and found a site which has articles separated by ids, similar to your scenario.

I focused on the next and previous functionality. The url is obviously different than that you provided, but you can easily adjust it to your needs.

Please, refer to the following snippet and see if it's what you need:

var pNum = 1;
var maxPage = 100;

document.getElementById("currentPage").innerHTML = pNum;
document.getElementById("pages").innerHTML = maxPage;

this.next = function() {
  pNum++;
  if (pNum > maxPage) pNum = 1;
  document.getElementById("zoome").src = "https://www.infoq.com/articles/" + pNum;  
  document.getElementById("currentPage").innerHTML = pNum;
}

this.previous = function () {
  pNum--;
  if (pNum < 1) pNum = 1;
  document.getElementById("zoome").src = "https://www.infoq.com/articles/" + pNum;
  document.getElementById("currentPage").innerHTML = pNum;
}
<iframe id="zoome" height="150px" width="400px" allowfullscreen="" frameborder="0" border="0" src="https://www.infoq.com/articles/1"></iframe>

<div id="menu">
  <ul>
    <li>
      <button onclick="next()">Next Page</button>
    </li>
    <li>
      <button onclick="previous()">Previous Page</button>
    </li>
    <li>
      Page <span id="currentPage"></span> / <span id="pages"></span>
    </li>

  </ul>
</div>

Comments