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 you 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). The website does this by using a cookie.

Here is the problem. If you 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).

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. A number of the members of this site were kind enough to help me with the code/script and things were working perfectly for a bit, but then it just stopped working. I suspect I changed something in the rest of the html that caused this. Rather perplexed over this issue.

If anybody can please tell me how to fix this problem, I would be most grateful.

Thank you for your time, Chris

Answer 1

Just kind of poking around and it appears as though you've got javascript running in a couple different directions at the same time. window.onload is tied separately to two different functions. The first one calls FixRows which should work to display 'low contrast'/'high contrast' appropriately (from the cookie you set). I'm thinking the second window.onload is overriding the first.

I don't think this is directly affecting your code, but you have setCookie() in styleswitcher.js and createCookie() in script_1.js - they are doing the same thing. I'd say you should at least consolidate you cookie functions in one or the other library to cut down on confusion.

Hope I've been helpful.

Answer 2

It looks like you just need your stylesheet buttons to be conditionally hidden based on the cookie.

You can do this with the code below (updated):

function setStylesheetFromCookie() {
 var stylesheet = readCookie('mysheet') || 'none';
 if( stylesheet == 'highcontrast' ) {
  console.log('high');
  document.getElementById('Lc').style.display = 'block';
  document.getElementById('Hc').style.display = 'none';
 } else {
  console.log('low');
  document.getElementById('Hc').style.display = 'block';
  document.getElementById('Lc').style.display = 'none';
 }
}

Add that code somewhere in script_1.js.

In order for that to work, it needs to run on window load. This brings us to problem two. You have two different window.onload assignments in script 1. You need to consolidate the two. Delete the line

window.onload = FixRows;

And modify the second window.onload = function() to look like the following:

window.onload = function() {
 var el = document.getElementById('mydiv');
 var size = readCookie('fontsize');
 if(size) {
  doChangeSize(el, size);
 }
 var original = readCookie('originalsize');
 if(original) {
  el.originalSize = original;
 }

 FixRows(); //You are adding this line
 setStylesheetFromCookie(); //and adding this line to the end of the function
}

Notice the two new function calls at the end. This should solve your problem.

Cheers!