Next / Prev pages with Javascript?

Question

I'm creating a online training 'powerpoint' like series of pages. It will be pretty straight forward and have the pages set out as such:

page1.php page2.php page3.php ... page20.php

I'll be going old school and use an iframe to hide the address bar as people shouldn't be able to catch onto the naming convention and skip ahead. (Its not too serious, so I want to keep it simple).

What I want to do is based on the current page that they are on, say for example page5.php create links to page4.php and page6.html. Obviously without having to code each page manually.

It would be ideal if ths were a javascript function as I dont want the address to show up in the browsers info bar but I'm open to php tricks as well.

Any ideas how to do this?

Answer 1

var actuPage = parseInt(location.href.replace(/[^0-9]/, ''))+1;
location.href = 'page'+actuPage+'.php';

That should work if you have no other number in your URLs. If you do, you'll have to change the pattern for replace. The code is for the next page, change the +1 to -1 for the previous one.

Answer 2

Use window.location. You can put it in a function like so:

<script type='javascript'>
function goto(url) { window.location=url; }
</script>
<a href='#' onclick='goto("page3.php"); return false;'>Previous</a>
<a href='#' onclick='goto("page5.php"); return false;'>Next</a>

---

You could also go so far as to use a session variable to hide it, that way you could just do something like this (I hope my PHP skills are still good):

<?php
// At Beginning of first script
start_session();
$MAX_PAGE = 20; // Set this to the highest page number
if(!isset($_SESSION['curpage'])) {
  $_SESSION['curpage'] = 1;
} else {
  // __EDIT: Added page max and mins.
  if($_GET['go'] == 'prev' && $_SESSION['curpage'] > 1) {
    $_SESSION['curpage']--;
  } else if($_GET['go'] == 'next' && $_SESSION['curpage'] < $MAX_PAGE) {
    $_SESSION['curpage']++;
  }
}
?>

And then put this in the page where you need it.

<?php
include("page$_SESSION[curpage].php");
if($_SESSION['curpage'] > 1) {
  echo "<a href='page.php?go=prev' rel='prev'>Previous</a>";
}
if($_SESSION['curpage'] < $MAX_PAGE) {
  echo "<a href='page.php?go=next' rel='next'>Next</a>";
}
?>

Note that Web Crawlers won't be able to do much with this though, when it returns a different page each time.

Answer 3

A little expansion on Pikrass's function, to deal with first/last scenarios:

function goto(url) { window.location=url; }

var curPage = parseInt(location.href.replace(/page([0-9]+)\.php/, ''))
if (curPage <= 1) {
  // First page, no 'back' link
  document.write('<a href="#" class="disabled">Back</a>');
} else {
  var backPage = curPage-1;
  document.write("<a href=\"#\" onclick=\"goto('page"+backPage+".php')\">Back</a>");
}
if (curPage >= 9) { // Replace with highest page number
  // Last page, no 'next' link
  document.write('<a href="#" class="disabled">Next</a>');
} else {
  var nextPage = curPage+1;
  document.write("<a href=\"#\" onclick=\"goto('page"+nextPage+".php')\">Back</a>");
}

URLs are not hidden if you view the source of the page, but they don't show up in the browser's status bar when hovering over the link, as requested.

Edit Updating RegEx with Pikrass' more specific one, to deal with other digits elsewhere in the URL. Thanks Pikrass!

Answer 4

Here is MidnightLightning's version with a better RegExp to get the current page, which works even if you have other numbers in your URLs.

function goto(url) { window.location=url; }

var regPage = /page([0-9]+)\.php/;
var match = regPage.exec(location.href);
var curPage = parseInt(match[1]);

if (curPage <= 1) {
  // First page, no 'back' link
  document.write('<a href="#" class="disabled">Back</a>');
} else {
  var backPage = curPage-1;
  document.write("<a href=\"#\" onclick=\"goto('page"+backPage+".php')\">Back</a>");
}
if (curPage >= 9) { // Replace with highest page number
  // Last page, no 'next' link
  document.write('<a href="#" class="disabled">Next</a>');
} else {
  var nextPage = curPage+1;
  document.write("<a href=\"#\" onclick=\"goto('page"+nextPage+".php')\">Back</a>");
}

I love when an answer is built by several guys. :)

If you can, prefer a PHP code, as suggested. It's much more "clean".

Answer 5

Sounds like you want to use query string variables, so page.php?page=1, page.php?page=2, page.php?page=3 and so on

Answer 6

Why dont you use ajax instead of an iframe?

Well, doesnt matter, you tagged the question jquery so i think you can find usefull using another link attribute to 'tell' js where to redirect.

I mean:

$.(document).ready(funciton(){
    //i use the live method becose.. you know, maybe in the future
    //you will go with ajax ;)
     //live method is avbaiable in jquery 1.3!
    $("a.navigation").live('click', function(){
        window.location = $(this).attr("rel");
    });
});

This let your html markup free from many onclick functions in the <a> tags.

So, your markup will then look something like:

<a href="#" rel="page1.php">Go to page 1</a>
<a href="#" rel="page2.php">Go to page 2</a>
<!-- .. and so on.. -->

Or, if you still wanna hide real urls, you can do:

<a href="#" rel="1">Go to page 1</a>
<a href="#" rel="2">Go to page 2</a>
<!-- .. and so on.. -->

with this js (maybe not embedded into the page source?)

$.(document).ready(funciton(){
    $("a.navigation").live('click', function(){
        window.location = 'page' + $(this).attr("rel") + '.php';
    });
});

But you'll never be able to completely hide the page urls, if youre planning to use js links.

You could hide them using php, and an hashed strings twin, but i dont know if it worth the game.

Other suggested a regexp way to calculate the pages number and pages links; I will go printing the links via PHP: will let you control the global behavior much better (we dont know how many pages you have, and if theyre numbers is database-related, even the information you gave us would make me think that you have all the page[x].php fisically on your server)