Previous Next Buttons in JQuery

Question

I'm trying to make previous and next buttons for viewing this pdf converted to html. I thought I should jump to the next anchor since each page has it's own anchor written like this:

<a href="ArduinoHtmls.html#1" target="contents" >

However when I use $(location).attr('pathname'); I get "/ArduinoHtml.html" no matter what page I'm viewing, so I can't subtract and add 1 like I was thinking of doing. Below is where I got and the files I have.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".previous").click(function(){
        // Needed Code Help
    });
    $(".next").click(function(){
        // Needed Code Help
    });
});
</script>
</head>
<body>
<h2>Previous and Next Buttons</h2>
<a href="#" class="previous">&laquo; Previous</a>
<a href="#" class="next">Next &raquo;</a>
</body>
</html>

This is the ArduinoHtml.html file:

<!DOCTYPE html>
<html>
<head>
<title>Arduino and LEGO Projects</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="generator" content="pdftohtml 0.36"/>
<meta name="author" content="Jon Lazar"/>
<meta name="keywords" content="www.it-ebooks.info"/>
<meta name="date" content="2013-09-06T04:13:41+00:00"/>
<meta name="subject" content="IT eBooks"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<frameset cols="100,*">
<frame name="links" src="ArduinoHtml_ind.html"/>
<frame name="contents" src="ArduinoHtml-1.html"/>
</frameset>
</html>

This is the ArduinoHtml_ind.html file:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<title></title>
</head>
<body>
<a href="ArduinoHtmls.html#outline" target="contents">Outline</a><br/>
<a href="ArduinoHtmls.html#1" target="contents" >Page 1</a><br/>
<a href="ArduinoHtmls.html#2" target="contents" >Page 2</a><br/>
<a href="ArduinoHtmls.html#3" target="contents" >Page 3</a><br/>
<a href="ArduinoHtmls.html#4" target="contents" >Page 4</a><br/>
<a href="ArduinoHtmls.html#5" target="contents" >Page 5</a><br/>
<a href="ArduinoHtmls.html#6" target="contents" >Page 6</a><br/>
<a href="ArduinoHtmls.html#7" target="contents" >Page 7</a><br/>

Below is an image of what opening ArduinoHtml.html looks like. I'm new to this so I'm trying to give all the information I can.

Thank you very much in advance.

Webpage

Jack Bashford · Answer 1 · 2018-12-09T07:05:39.280

Use window.location.href instead:

$(".previous").click(function(){
    var nextPage = Number(window.location.href.split("")[window.location.href.length - 1]) - 1;
    window.location.href = window.location.href.split("").push(nextPage).join("");
});
$(".next").click(function(){
    var nextPage = Number(window.location.href.split("")[window.location.href.length - 1]) + 1;
    window.location.href = window.location.href.split("").push(nextPage).join("");
});

Looks complicated, but here's what it does:

var nextPage = window.location.href.split("")[window.location.href.length - 1] - 1;

This gets the current path (window.location.href), makes it an array .split(""), obtains the last character (the number) ([window.location.href.length - 1]) and subtracts 1 (-1;). Same follows for the Next button, except it's adding rather than subtracting.

window.location.href = window.location.href.split("").pop().push(nextPage).join("");

This makes the current URL (window.location.href) equal to the current URL (window.location.href), turns it into an array (.split("")), takes off the last character (the number) (.pop()), adds the new digit to the end (.push(nextPage)) and turns it back into a string (.join("");).

I tried what you suggested and the same page just keeps reloading. Thanks for your help though. — D MOD, Dec 09 '18 at 06:27
I fixed the issue - I was using strings not numbers. Does it work now @DMOD? — Jack Bashford, Dec 09 '18 at 07:05

Twisty · Answer 2 · 2018-12-09T06:01:02.210

If the page is more static, you can do something like:

var pages = 7;
var currentPage = 0;
var pageUrl = "ArduinoHtmls.html";

$(function(){
  $(".previous").click(function(e){
    e.preventDefault();
    if(currentPage == 0){
      return false;
    }
    var prevUrl = pageUrl + "#";
    if(currentPage == 1){
      prevUrl + "outline";
    } else {
      prevUrl + (--currentPage).toString();
    }
    $("frame[name='contents']").attr("src", prevUrl);
  });
  $(".next").click(function(e){
    e.preventDefault();
    if(currentPage == pages){
      return false;
    }
    var nextUrl = pageUrl + "#" + (++currentPage).toString();
    $("frame[name='contents']").attr("src", nextUrl);
  });
});

If the page is less static, you can still use a lot of this untested code. One minor difference:

var pages = $("a[target='contents']", window.frames[0].document).length;

I am suspicious that this code will not work right away. It's a little hard to understand the relationship of each of the pages as you have described it. I suspect you either want this code in the ArduinoHtml.html, yet I do not know where your buttons will reside since this page is only the frameset page and I suspect you will end up having to make a new frame to contain the HTML for your buttons.

If you decide to create a frame to contain the buttons, then the code is a little more complex:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function(){
    var frames = window.parent.frames;
    var pages = $("a[target='contents']", frames[0].document).length;
    var currentPage = 0;
    var pageUrl = "ArduinoHtmls.html";
    var contentFrame = frames[1];

    $(".previous").click(function(e){
      e.preventDefault();
      if(currentPage == 0){
        return false;
      }
      var prevUrl = pageUrl + "#";
      if(currentPage == 1){
        prevUrl + "outline";
      } else {
        prevUrl + (--currentPage).toString();
      }
      contentFrame.location.href = prevUrl;
    });

    $(".next").click(function(e){
      e.preventDefault();
      if(currentPage == pages){
        return false;
      }
      var nextUrl = pageUrl + "#" + (++currentPage).toString();
      contentFrame.location.href = nextUrl;
    });
  });
  </script>
</head>
<body>
  <h2>Previous and Next Buttons</h2>
  <a href="#" class="previous">&laquo; Previous</a>
  <a href="#" class="next">Next &raquo;</a>
</body>
</html>

So hopefully this helps answer your post yet I think it also opens a can of worms for you too.

For reference: https://stackoverflow.com/questions/539504/run-jquery-in-the-context-of-another-frame — Twisty, Dec 09 '18 at 05:45
I haven't had much luck either way. The second way you suggested gives can not find "/ArduinoHtmls.html#1" file because the actual file names are "/ArduinoHtml-1.html" I have too much of a headache right now to keep working on it at the moment but thank you for your help. — D MOD, Dec 09 '18 at 06:24
@DMOD initially that is the URL of the initial content, but as shown in your post, the links send the content to `ArduinoHtmls.html#outline`, `ArduinoHtmls.html#1`, etc. If it is saying `/ArduinoHtmls.html#1` does not exist, then maybe it needs to be `./ArduinoHtmls.html#1` instead. — Twisty, Dec 09 '18 at 06:40

Previous Next Buttons in JQuery

2 Answers2