damianb123
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:
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:
Can anyone shed any light on this?
Thanks
Damian
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>
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>
Can anyone shed any light on this?
Thanks
Damian
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
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 );
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I recommend either moving that <script> element to the end of your page or adding this to it:
Open in new window