Toggling link text when navigating between pages based on selected stylesheet

Question

Hello,

I have installed a script on my website that allows for a low contrast setting and a high contrast setting, as my site will be used by sight impaired persons. The script works perfectly. The only problem is when a visitor visits multiple pages of the site.

When you first visit the site, the low contrast setting is in effect by default and only the link to the high contrast setting appears. If I then visit other pages of the website, the low contrast setting is in effect by default and only the high contrast link appears (this is perfect and as it should be).

Here is the problem. If I click on the high contrast link to view the page in the high contrast setting and then go to another page, the other page appears in the high contrast setting (as it should), but instead of a link to the low contrast setting appearing (which I would like to happen), a link to the high contrast setting appears (which does not make sense, given the page is already in the high contrast setting).

To solve this problem, I understand that if I put a 'query string javascript' at the start of each of my pages, the links in each page would pass the current contrast settings to the next page (so long as the visitor moved around with links instead of typing directly into the address bar). Does anybody know how to create such a 'query string javascript'? I tried to create such a string myself, but was not successful.

My site is not done, but I published a few pages at http://www.14kt.eu/ so you can see what I am talking about.

Thank you for your time, Chris

Answer 1

Looking at the code at the your site, I can see that you are using some sample code from DynamicDrive.com. This code is already using a cookie to track which stylesheet to use (highcontrast or "none" for lowcontrast) when you switch between pages.

All you need to do is add a javascript line to toggle the visibility of the span link that selects the stylesheet. This needs to run when the page loads.

---

UPDATE: Since the code needs to run in every page, just make the change to the "script_1.js" file. It currently has a function called FixRows() which runs in the window.onload event. Just add the new code inside it as shown below:

// JavaScript Document
function FixRows(){
  var oddclass = 'sld';
  var evenclass = 'sl';
  var ulID = 'listings';
  var listings = document.getElementById(ulID);
  if(listings !=null){
    var rows = listings.getElementsByTagName('li');
    var len = rows.length;
    for(var i = 0; i < len; i++){
      rows[i].className = (i%2)?oddclass:evenclass;
    }
  }

  /* new code here */
  if(getCookie("mysheet") == 'highcontrast'){
    swapFor('Hc','Lc');   
  }
  /* end new code */

};
window.onload = FixRows;