1,105,288 Community Members

Jquery to addClass to body & cookie to apply it to next page

Member Avatar
Surfsup
Newbie Poster
20 posts since Jan 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I have 2 links ('black' & 'white').
I wish for the user to click on one of these links in order to addClass and removeClass to the body and for that change of body class to persist throughout as the user browses other pages of the website (or indeed on their revisit for a set period after also).

I have the addClass/removeClass thing working but don't know how to add the cookie so that the class is carried over to subsequent pages that the user visits. There's a tutorial here http://www.ilovecolors.com.ar/using-cookies-jquery/ that does almost what I want however I can't tweak the code in the demo so that it applies the class to the body (in the demo it changes the class of the actual link that the user clicks on). I have had a good go - honest - but I give in - could someone please give me a hand here :)

Here's my sample page that I need help with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { color:red; margin:40px; }
p { width:400px; margin:40px 0; }
.switcher { background:black; }
 </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>
<p>I want the user to be able click 'Black' or 'White' and for the class 'switcher' to be added (by clicking 'Black') or removed (by clicking 'White') to 'body' and for that preference to by carried over (by using a cookie) to the subsequent pages they visit whilst on the site.</p>
  <a href="#" id="addClass">Black</a><br />
  <a href="#" id="removeClass">White</a>
  
<script type="text/javascript">
    $("#addClass").click(function () {
	  $('body').addClass('switcher');
    });
	$("#removeClass").click(function () {
	  $('body').removeClass('switcher');
    });
</script>
</body>
</html>
Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
0
 

When the click occurs you have to set the cookie, and then on the page load function you have to check the cookie and apply the class again.

Member Avatar
Surfsup
Newbie Poster
20 posts since Jan 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi, I finally have this resolved. Thanks for the help. Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
#container.uk-content .us, #container.us-content .uk { display:none; }
 
</style>
</head>
<body>
<div id="container" class="uk-content">

<ul>
<li><a href="#">uk-content</a></li>
<li><a href="#">us-content</a></li>
</ul>

      <div class="uk">UK content</div>
      <div class="us">US content</div>
</div>
</body>
<script>
    $(function() {
        $("ul a").click(function() {
            var countryswitch = $(this).text();
            $("#container").removeClass().addClass(countryswitch);
            createCookie("countryswitch",countryswitch);
            return false;
        });
        
        if (readCookie("countryswitch") != null) {
          $("#container").removeClass().addClass(readCookie("countryswitch"));
        
        }
        else
        {
          $("#container").removeClass().addClass("uk-content");
        }

    });
    
    function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

    

</script>
Question Answered as of 2 Years Ago by AleMonteiro
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: