I was trying to make my website accessible for those who need better colour contrast by allowing them to choose their css sheet that would be used all over my website. I got the code off the web (2010 coding?), and that code DOES Work on the Main page, but the cookie code itself, does NOT apply the person's choices to any other page.
UPDATE: Do I need to put the cookie code on ALL pages? I didn't think I had to. Thanks! I did notice that when I went back to the main page, my choice was kept. So...how do I get the cookie to apply to all pages? Thanks!
NOTE: I do have both Facebook and Google code to "Like Me". Also, I have the google trunk code to make my html 5 and css3 work on browsers that don't support html 5 yet.
Also, I DID put the new body tag on all pages. I copied it from the Main page, to be sure I made no errors.
Lastly, on my vegan.html page, I did add the links to the CSS sheets that are alternatives, but I did not do this on the other non-main pages. I thought this might solve the issue, but it did not.
The Form that works:
Link to website
Choose style, then click on "Vegan", and you will see what I mean.
Thanks!
UPDATE: Do I need to put the cookie code on ALL pages? I didn't think I had to. Thanks! I did notice that when I went back to the main page, my choice was kept. So...how do I get the cookie to apply to all pages? Thanks!
NOTE: I do have both Facebook and Google code to "Like Me". Also, I have the google trunk code to make my html 5 and css3 work on browsers that don't support html 5 yet.
Also, I DID put the new body tag on all pages. I copied it from the Main page, to be sure I made no errors.
Lastly, on my vegan.html page, I did add the links to the CSS sheets that are alternatives, but I did not do this on the other non-main pages. I thought this might solve the issue, but it did not.
Code:
<!-- BEGIN ABILITY -->
<link rel="stylesheet" title="av" type="text/css" href="http://www.allergicvegetarian.com/css/ability/av.css" />
<link rel="alternate stylesheet" title="btwb" type="text/css" href="http://www.allergicvegetarian.com/css/ability/btwb.css" />
<link rel="alternate stylesheet" title="btyb" type="text/css" href="http://www.allergicvegetarian.com/css/ability/btyb.css" />
<script type="text/javascript">
var style_cookie_name = "alergikvegtarian" ;
var style_cookie_duration = 365 ;
function switch_style ( css_title )
{
// You may use this script on your site free of charge provided
// you do not remove this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
var i, link_tag ;
for (i = 0, link_tag = document.getElementsByTagName("link") ;
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
link_tag[i].title) {
link_tag[i].disabled = true ;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false ;
}
}
set_cookie( style_cookie_name, css_title,
style_cookie_duration );
}
}
function set_style_from_cookie()
{
var css_title = get_cookie( style_cookie_name );
if (css_title.length) {
switch_style( css_title );
}
}
function set_cookie ( cookie_name, cookie_value,
lifespan_in_days, valid_domain )
{
// copywrite script per above do not separate
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
// copywrite script per above do not separate
var cookie_string = document.cookie ;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)' );
return decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}
</script>
Code:
<body onload="set_style_from_cookie()">
Code:
<form>
<input type="submit"
onclick="switch_style('av');return false;"
name="theme" value="Purple Background" id="av">
<input type="submit"
onclick="switch_style('btwb');return false;"
name="theme" value="Black Text on White" id="btwb">
<input type="submit"
onclick="switch_style('btyb');return false;"
name="theme" value="Black Text on Yellow" id="btyb">
</form>
Link to website
Choose style, then click on "Vegan", and you will see what I mean.
Thanks!
Comment