Creating Next/Previous Navigation

Question

I am working on a site that has multiple sections, each with around 5-10 projects within them. I am trying to create a next/previous navigation that will allow you to scroll through the projects within each section. This is the code I had for this:

  var prev_li     = $('.projects ul li.selected').prev('li'),
  prev_href   = $(prev_li).children().attr('href'),
  next_li     = $('.projects ul li.selected').next('li'),
  next_href   = $(next_li).children().attr('href');

$('#previous-project').click(function(e){
        if ($(prev_li).length) {
          window.location = prev_href;
          return false;
        } else {
          window.location = last_href;
          return false;
        }
  });

And then the same from the next project. My problem is that there are duplicate projects (some projects are in multiple sections). This means that multiple projects have the same URL and so some projects will get the class of "selected" when they really are not selected. This means that when you are on a project that is in multiple section and click the next or previous button, it will go to the previous project from the first instance of the project (even if that is in another section). I need some efficient way to specify the list of projects within each section and so it only rotates through those projects.

One idea I had was to add a class to each list of projects and do something like this:

  var traeng_prev_li     = $('.transportation-engineering.projects ul li.selected').prev('li'),
      traeng_prev_href   = $(traeng_prev_li).children().attr('href'),
      traeng_next_li     = $('.transportation-engineering.projects ul li.selected').next('li'),
      traeng_next_href   = $(traeng_next_li).children().attr('href');

// same variables for each section

  $('#previous-project').click(function(){
    if ($(traeng_prev_li).length) {
      window.location = traeng_prev_href;
      return false;
    } else if ($(struct_prev_li).length) {
      window.location = struct_prev_href;
      return false;
    } else if ($(civil_prev_li).length) {
      window.location = civil_prev_href;
      return false;
    } else if ($(archi_prev_li).length) {
      window.location = archi_prev_href;
      return false;
.... //all the way down through all the sections

The problem with this is a) it is terribly inefficient and b) I think even if you are not on that list, it still has a length and so the problem still persists?

Answer 1

add hashes at the end of the urls that specify the section

like /projects/poplar_street_roundabou#transportation-facilities

then you can use the location.hash to target the specific section when finding next/prev

var prev_li = $('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

---

kind of step by step explanation

when the url has a #transportation-facilities (called hash) we can access it from javascript with the window.location.hash property.

but it will return the # char as well, so we need to remove it by using the substring() method.

Now in jquery we need to target the ul that is inside an element that has the projects class but also the transportation-facilities class. In CSS this is achieved by using the multiple class selector for example .class1.class2 will match elements that have both class1 and class2 assigned to them.

so this line

$('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

translates to

$('.projects.transportation-facilities ul li.selected').prev('li')