Body ids, showing urls?

Question

I have a 4 pages with navigation.

Basically i have 4 pages.

P1 - shows all 4 pages but you can only click on the next page, page 2

P2 - shows all 4 pages also but you can go back to previously viewed pages ie page 1 and only go onto the next page page 3

P3 - shows all 4 pages also but you can go back to previously viewed pages ie page 2 & 1 and only go next onto the next page page 4

P4 shows all 4 pages and will let you go back to previously viewed pages ie page page 1,2,3 & 4

My problem is - say you have gone through each page to the end page P4, and you click on page P1 to double check something, i want P1 to know you have completed all the steps and now now allow you to click page to page 3 or 4 etc.

can you do this using body id's?

Answer 1

As I mentioned in my comment you can save the last page you visited in a cookie, here I will give you a code sample how to do it.

First you should note I am using jquery (javascript library) to write my scripts

I consider your scenario, so we will have three function to build it

1. After all DOM of your page is ready, we will check which page we are browsing right now to set the page index and disable all pages next to it

   $(document).ready(function () {
       debugger;
       var pagename = document.location.href.toLowerCase();
       if (pagename.indexOf('page1.aspx') > -1) {
           getLastPageIndex(1);
       }
       else if (pagename.indexOf('page2.aspx') > -1) {
           getLastPageIndex(2);
       }
       else if (pagename.indexOf('page3.aspx') > -1) {
           getLastPageIndex(3);
       }
       else if (pagename.indexOf('page4.aspx') > -1) {
           getLastPageIndex(4);
       }
   });
   

   you can read more about $(document).ready() here

2. getLastPageIndex() function : we passes the current page index to it and compare this index with the last page index we visited and saved in our cookie. I set the expiration date of the cookie after one hour

   function getLastPageIndex(pageindex) {
       var pageCookies = document.cookie.split(';');
       var pageindexfromCookie = null;
       var cookieName;
       var cookieValue;
       var cookie;
       for (i = 0; i < pageCookies.length; i++) {
           cookie = pageCookies[i].split('=');
           cookieName = cookie[0];
           cookieValue = cookie[1];
           if (cookieName == 'PageIndex') {
               pageindexfromCookie = cookieValue;
               break;
           }
       }
       var expirationdate = new Date();
       expirationdate.setTime(expirationdate.getTime() + (60 * 60 * 1000));
   
       if (pageindexfromCookie == null || pageindexfromCookie < pageindex) { // set new cookie
           document.cookie = 'PageIndex=' + pageindex + '; expires=' + expirationdate.toGMTString();
           DeactivateTabs(pageindex);
       }
       else {
           DeactivateTabs(pageindexfromCookie);
       }
   }
   

3. DeactivateTabs() function : this function disable links to next pages that have not been visited yet

   function DeactivateTabs(pageindex) {
       var CountOfTabs = 10;
       while (++pageindex <= 10) {
           $('a[id=tab' + pageindex + ']').attr('href', 'javascript:;');
       }
   }
   

you can download the full code from here

More About Cookies in javascript

Answer 2

use cookies or localStorage.

This solution uses localStorage and is only compatible with HTML5 browsers:

P4.html

if(typeof(Storage)!=="undefined") {
    localStorage.seenAll = true;
}

P1.html, P2.html, P3.html, P4.html

if(typeof(Storage)!=="undefined") {
    if ( localStorage.seenAll ) {
        // allow to click all places,
        alert("You can click all links now");
    }
} 

To make a solution for all browser use Cookies (JavaScript - Cookies)

---

Another solution in reply to your comment:

P1.html, P2.html, P3.html, P4.html (not testet)

if(typeof(Storage)!=="undefined") {
    var pages = ["P1", "P2", "P3", "P4"],
        currentPage = "the page you are on" // "P1" or "P2" or "P3" or "P4"

    localStorage.pagesSeen = localStorage.pagesSeen || {};
    localStorage.pagesSeen[currentPage] = true;

    for ( var i = 0, len = pages.length; i < len; i++ ) {
        if ( localStorage.pagesSeen[pages[i]] ) {
            // Current page is seen,
            // Make link to the page:
            alert("Page: " + pages[i] + " is already seen.");
        }
    } 
}

The only thing you have to change is the variable currentPage. This variable will be "P1" on page1, "P2" on page2 etc..