Previous Page/Next Page nav

**timfink62** · 10-31-2008, 09:25 PM

Hi,

I am fairly new to creating JavaScript (I am used to hunting and cutting/pasting code). I have created an array of a possibly often-changing list of web pages:

Code:

var pageNum = 0;

var eventPages = new Array();
 eventPages[pageNum++] = new pageItem("EventPage_01.asp");
 eventPages[pageNum++] = new pageItem("EventPage_02.asp");
 eventPages[pageNum++] = new pageItem("EventPage_03.asp");


var totalPages = eventPages.length;

Now, however, I want to navigate through these pages using Previous and Next links. I have done this with image swapping, but not page navigation, so I am totally stuck on how the functions would work, or be structured. And how the A tag should reference the functions, too.

Is there anyone who can throw some light on this for me?

Thanks!

**magicyte** · 11-01-2008, 01:58 AM

Yes. This is pretty easy. I also have suggestions. I would change the code you have currently posted to this:

Code:

var eventPages = [];
 eventPages[0] = "EventPage01.asp";
 eventPages[1] = "EventPage02.asp";
 eventPages[2] = "EventPage03.asp";

var totalPages = eventPages.length;

I would save this in a .js file so that it may be accessed by all of your pages. Along with that code, here is some code to manipulate the previously listed code:

Code:

var curpn;

function nav(len) {
    var num = (curpn+len);
    if(num >= 0 && num <= totalPages) {
        location.href = eventPages[num];
        return 0;
    }
    else return 1;
}

The two put together would be:

Code:

var curpn;

var eventPages = [];
     eventPages[0] = "EventPage01.asp";
     eventPages[1] = "EventPage02.asp";
     eventPages[2] = "EventPage03.asp";

var totalPages = eventPages.length;

function nav(len) {
    var num = (curpn+len);
    if(num >= 0 && num <= totalPages) {
        location.href = eventPages[num];
        return 0;
    }
    else return 1;
}

If you named the .js file navig.js, some example HTML code is this:

(EventPage02.asp)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>[ Your Title Here ]</title>
<script type="text/javascript" src="navig.js"></script>
<script type="text/javascript">
curpn = 1; // this means that this page is EventPage02.asp
</script>
<style type="text/css">
</style>
</head>
<body>
This is an example of the navigators. They use JavaScript.
<br />
<a href="javascript:nav(-1)"><< Previous</a> | <a href="javascript:nav(1)">Next >></a>
</body>
</html>

Hope I helped. Ask 4 any questions.

-magicyte

**timfink62** · 11-01-2008, 04:07 AM

Wow!
Thanks for this amazing help.

I actually plan to have this in a navigation include file that is then in my main page template, but I may take your suggestion to make a .js file, if it seems more convenient.

Functions are one thing I get confused on easily. I learned to make AppleScript handlers, but that language is less cryptic than javascript to me.

**magicyte** · 11-02-2008, 02:20 AM

You are very welcome for the help.

but I may take your suggestion to make a .js file, if it seems more convenient.

It is the best thing to do (it is VERY convenient). It actually also saves memory on your site (Don't ask me how - I don't have time to fully explain it [in a nutshell, they are just linked and it doesn't use extra memory]).

Functions are one thing I get confused on easily

'Sokay. You'll get used to them if you program for a while. In fact, if I could translate it in English, or at least just explain it to you, I'm sure you'd understand.

Again, you're welcome. It's my job, but instead of saying "don't mention it", I'll say "I appreciate you saying so" or "I appreciate your thanks". Just ask for questions if you need more help.

-magicyte

**timfink62** · 11-04-2008, 03:00 PM

Hi magic,

I have one quick question. I see this navigation goes nowhere if it is at the beginning of the list of pages in the array. Now if it is at the last page in the array, it goes to an empty undefined page, rather than nothing happening.
In other words, I would like to get it to stay at the last page when Next Page is clicked.
So part of this function goes:

Code:

 if(num >= 0 && num <= totalPages) {
        location.href = eventPages[num];
        return 0;
    }

I am assuming this is what keeps the Previous page link from going to an undefined page when the first page in the array is viewed.
Should there be another part added to this before the else statement somewhat the opposite?
Maybe something like this?

Code:

 if(num = totalPages-1) {
        location.href = eventPages[num];
        return 0;
    }

(num = totalPages-1) should equal the index of the last page because the array starts with 0, right? Would this if statement fit in the same function?
Or am I on the right track?

**magicyte** · 11-04-2008, 10:34 PM

Oh, I'm terribly sorry. I did <= instead of < at the end there, didn't I. Here is the code that I fixed up:

Code:

var curpn;

var eventPages = [];
     eventPages[0] = "EventPage01.asp";
     eventPages[1] = "EventPage02.asp";
     eventPages[2] = "EventPage03.asp";

var totalPages = eventPages.length;

function nav(len) {
    var num = (curpn+len);
    if(num >= 0 && num < totalPages) {
        location.href = eventPages[num];
        return 0;
    }
    else return 1;
}

There you go. It should work.

-magicyte