Struggling to get simple Cookie to work correctly

Hi,
    I am using a CSS style switcher from this site:

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

One neat feature is it should retain the user setting for the cookie, however I just cannot get this to work.  I am using this code:

<script>
// *** TO BE CUSTOMISED ***

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;

// *** END OF CUSTOMISABLE SECTION ***

function switch_style ( css_title )
{
  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 )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    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 )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    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>

Open in new window


I can see in Chrome, that the cookie is set, with a name of style, and content of blue.  This is my link rel for the stylesheets:

<link rel="stylesheet" type="text/css" title="pink" href="http://www.mysite.com/css/pink.css">
<link rel="alternate stylesheet" type="text/css" title="blue" href="http://www.mysite.com/css/blue.css">

This does work as a switcher, it's just the remembering part which does not.

This is the code which enables the user to click to switch between the two:

<form>
<input type="image" src="http://www.mysite.com/gpw-admin/images/gpw-css1.gif" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue" align="left"></form><form><input type="image" src="http://www.mysite.com/gpw-admin/images/gpw-css2.gif" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink" align="left">  
</form>

Open in new window


Can anyone shed any light on this?

Thanks

Damian
damianb123Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
Where's your onload event handler? It's best to avoid using an attribute on <body> like the article shows though.

I recommend either moving that <script> element to the end of your page or adding this to it:
if(window.addEventListener) window.addEventListener('load',set_style_from_cookie,false);
else if(window.attachEvent) window.attachEvent('onload',set_style_from_cookie);

Open in new window

damianb123Author Commented:
Hi Kravimir,
      Is it the block of javascript which you would move under the <body onload> ?  Also, how would I implement the above code into what I already have?

Thanks

Damian
Bob LearnedCommented:
Are you able to debug this bit of JavaScript, and make certain that it is called (i.e. browser developer tools)?

function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}

Open in new window

David S.Commented:
Is it the block of javascript which you would move under the <body onload>?
Which block do you mean? All of what you posted? Anyway, <script> elements were traditionally placed just before the </head> end tag but in many cases there are benefits to moving them to just before the </body> end tag instead.

What do you mean by "under" here? Do you mean in the (Document Object Model) hierarchical sense?

Also, how would I implement the above code into what I already have?
You would add the two lines I posted between any of the function definitions or just before the </script> end tag, e.g. like this:
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
if(window.addEventListener) window.addEventListener('load',set_style_from_cookie,false);
else if(window.attachEvent) window.attachEvent('onload',set_style_from_cookie);

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.