Link to home
Start Free TrialLog in
Avatar of damianb123
damianb123Flag for United Kingdom of Great Britain and Northern Ireland

asked on

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
Avatar of David S.
David S.
Flag of United States of America image

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

Avatar of damianb123

ASKER

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
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

ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial