javascript navigation buttons (previous next) based on a html unordered list

Question

I've a page called index.php that contains a div list like this:

<div id="links">
     <ul>
        <li><a href="example1.php">example1</a></li>
        <li><a href="example2.php">example2</a></li>
        <li><a href="example3.php">example3</a></li>
        ......
        <li><a href="exampleN.php">exampleN</a></li>
    </ul>
</div>

that is the list of page of my site, showed in the index.php page. I want to add a "prev | home | next" menu to each page in the site (example1, example2, example3,...,exampleN), where "prev" gets me to the previous example and next to the next example, i.e. if I'm watching example number 3 (page example3.php), prev takes me to example number 2 (page example2.php) etcetera.

I'd like to use a script that is not based on a fixed array (defined by the user), because I do not want to update this array each time a new page is added to the index.php list.

I thought of a function like this: suppose we're in example2.php

function blahblah(){
    1) get the link list using DOM from index.php (using an array)
    2) search for "example2.php" in the href value of each element in the list, to get the index of the array: in this case, "example2.php" is the 2nd link of index.php, so the array index will be 1 (i.e. alert(linkList[1].href) will print "example2.php")
    3) once we know the index, previous page index will be "index-1" and next page will be "index+1"
}

About getting the list (1st point in my pseudocode), I don't know how to acces other pages (on the same domain) using DOM elements.. does someting like document("page").getElementById('links') exist without the need of an iframe?

I'm on the right track? Or totally wrong? Any help, idea or advice is appreciated. Thanks, best regards

These links are manually put in? I think i know what you are saying, but what you want to do seems like a nasty hack. — Matt
– Matt, Commented Nov 24, 2011 at 17:45
if you mean those links in the index.php page, yes, I put them in manually.. why a nasty hack? There's a better way to do that? — BeNdErR
– BeNdErR, Commented Nov 24, 2011 at 17:54
there can be, I'm not saying what you want to do is incorrect, but things can come up and unexpected stuff might happen. Instead of creating something from the links, can you do what you have been doing, create an array and then create the menu from that? This way you are still only updating one thing. Or even a file that just lists information in key:value pair format and then parse that. — Matt
– Matt, Commented Nov 24, 2011 at 18:16
also you are using php, so you can load the index file through php, get the menu list, parse it (PHP has a DOM parser), then update the links on the page. — Matt
– Matt, Commented Nov 24, 2011 at 18:20
(sorry for double post.. can't edit after 5 mins) like this? ---arrayList.js--- var list = array( "example1" : "site.com/example1.php", "example2" : "site.com/example2.php", ... "exampleN" : "site.com/exampleN.php", ) ------------------ and then load it in each example page? I can also load in the index.php and then use the array to build the list, so I'll really have just one file to edit :D what do you think? Anyway thanks! — BeNdErR
– BeNdErR, Commented Nov 24, 2011 at 18:36

mplungjan · Accepted Answer · 2011-11-24 17:54:48Z

1

No you cannot access other files easily, but if the div list is on each page, then it is very easy to add a navigation

window.onload=function() {
  var navLinks = document.getElementById("links").getElementsByTagName('a');
  var loc = location.href;
  var href,html="";
  for (var i=0;i<navLinks.length;i++) {
    href=navLinks[i].href;
    if (loc.indexOf(href)!=-1) {
      if (i==0) html+='prev ';
      else html +='<a href="'+navLinks[i-1].href'">prev</a>' 
      if (i==navLinks.length-1) html+=' next ';
      else html +='<a href="'+navLinks[i+1].href'">next</a>' 
    }
  }
  if (html) document.getElementById("links").appendChild(html);
}

answered Nov 24, 2011 at 17:54

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BeNdErR Over a year ago

the problem is that the div list is only in the index, not in each page.. if I put it on each page, at the time of adding a new example link I've to update every single page ,and that's what I want to avoid

mplungjan Over a year ago

Include it as a script or ajax the div in

Collectives™ on Stack Overflow

javascript navigation buttons (previous next) based on a html unordered list

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related