Using jQuery Cookies to store the body class.

[Sega]

I am trying to achieve something without using a server-scripting language, instead I wish to use jQuery.

I hope to use jQuery cookies to store the body class and/or ID and then put reprint this on the other html pages it might be linked it. This is to be used with my style switcher will be work by changing the body class to either "green, orange, purple" etc.

So the purpose is to store the already dynamic body class as a cookie, and then output it back to the inside pages in order to preserve that body class(s) throughout the entire site.

I really have no idea how to go about this. I don't normally ask for such technical support on SitePoint as I would prefer to do the leg work. Unfortunately I did not find anything online which covered to topic well.

[Pullo]

Hi there,

AFAIK, cookie suport is not something that is included in the jQuery core and requires a plug-in.
This seems to be the de-facto one: https://github.com/carhartl/jquery-cookie

So, with that said, the rest is quite easy.

You can set a cookie like this:

$.cookie("bodyclass", "green", { expires: 7 });

and apply it to your boy tag on page load, like this:

$(document).ready(function() {
  $("body").addClass($.cookie("bodyclass"));
});

I've got to duck out for a bit now, but this should get you started.
If you'd like me to throw together some sample code, just let me know.

[Sega]

If you'd like me to throw together some sample code, just let me know.

I will experiment a little with the code you've shown. My CSS switcher is a little complex, but hopefully I will find a solution to most of it using the code. The only issue that might appear is that there is more than one field to customize.

For instance, there is a color, layout, effects, background main and background footer which currently work fine together, but the value is not stored and therefore the inside pages are not affected, which would be the goal. So as you can see it's a little complex.

I have stored a little of the footer here.

		$('#background-image-drop-down').change(function(){ // on change event
		$('body')
			.removeClass("light dark main-bg-1 main-bg-2")
			.addClass( $(this).val() ); // set the new class
		})
		// Footer Image
		$('#background-footer-dropdown').change(function(){ // on change event
		$('body')
			.removeClass("light dark footer-bg-1 footer-bg-2")
			.addClass( $(this).val() ); // set the new class
		})
		// Effects
		$("li.corner-fx").click( function(){ $
			("body").toggleClass("corner-fx");
		}); 
		$("li.radius-fx").click( function(){ $
			("body").toggleClass("radius-fx");
		}); 
		$("li.boxed-fx").click( function(){ $
			("body").toggleClass("boxed-fx");
		});

[Pullo]

Hi there,

You can store as many cookies as want, so it shouldn't be a problem to customize whatever aspects of the page you desire.
Maybe you could have a play with the code and let me know if you run into any problems.

[Sega]

I have a demo site up here - http://tinyurl.com/d7tpxjw

Getting this far did impress me, having said this you can see the working demo how selecting the link from the top changes the body class, which is ideal. This body class needs to remain the same as you navigate the pages. As the CSS would be affected with the body.class it would ultimately keep the styles throughout the site unless changed on the top.

I was not able to get the jQuery cookie to respond as it should and subsequently the body class clears after your click on any of the links. The example shown changes the body class but I have not styled these yet.

I found an alternative solution, which no longer works - https://github.com/alexwelch/body-class-swap, as the plug-ins for jQuery have somehow all gone under construction.

[Pullo]

I was not able to get the jQuery cookie to respond as it should and subsequently the body class clears after your click on any of the links. The example shown changes the body class but I have not styled these yet.

Were you testing locally? This can sometimes cause problems.
For example, Chrome doesn't support cookies for local files unless you start it with the --enable-file-cookies flag

Nonetheless I have made a small demo for you to have a look at.
You can find it here: http://hibbard.eu/blog/pages/cookie/1.html

It consists of two pages. Each page starts with a body class of "blue" which gives the body a blue background.
You can use the dropdown menu to select a different body colour, which is then stored in a cookie and the appropriate class is applied to the body.
When you navigate from page one to page two, you will see that the class applied to the body (and therefore the colour) remains the same.
I think this is essentially what you are trying to accomplish.

All of the code is inline in the files, so if you view source, you will have everything you need to make this work.
The only other file is jquery.cookie.js, which I pulled straight off GitHub.

I hope that helps.

[Sega]

@Pullo ; Thank for this code.

I have used the code both locally and on a LIVE server, for some strange reason it does not work on my machine, but your LIVE version does work. This puzzles me a little.

Edit: I think I might have found the problem out to why this is. I did not include the other file doh!

[Pullo]

I think I might have found the problem out to why this is. I did not include the other file doh!

These things happen - All's well that ends well

[Sega]

Can I do that via the forums, or do you want to PM me your email address?

Thanks for the offer but I managed to get it working, like on the demo.

I will use this code to complete the main style switcher before putting it on the internet, you're a true life saver.

There was another method I saw for a style switcher, and this was using ActiveStyleSheet within jQuery. This would change the external CSS file accordingly. Unfortunately for me I used body classes to do this.

I will use cookies this time for the style switcher, however, from your experience which is the best way to approach a style switcher. I would think ActiveStyleSheet would work locally, or maybe I could be wrong.

[Pullo]

I will use cookies this time for the style switcher, however, from your experience which is the best way to approach a style switcher.

I guess it's a matter of preference, as well as the degree of choice you want to offer your users.
We take the second approach at work as we have one "normal" style sheet and a second "high-contrast" style sheet for users with a visual impairment.
This however, drives me crazy and I almost always forget to edit the second style sheet when I make a change in the first.
I definitely prefer one big CSS file with everything you need in it. Also for responsive design.
If it gets too big you can always minify it, before serving it up.

I would think ActiveStyleSheet would work locally, or maybe I could be wrong.

I would think ActiveStyleSheet would work locally, too, but I couldn't say for sure.
It seems that there are quite a few of them out there, so I'm sure you could find one that behaves how you want.

[Sega]

I have worked on the jQuery example. you must forgive me as my jquery coding skills are not up to par, I basically came up with this -

I understand what the code is doing, but the issue is the drop down list replaces the body class instead of adding to it. The first drop down list should replace the value in this first drop down only, the second however, should an additional class to the body and add on this. So in essense there will be 2 or more body classes.

Is it possible to show an example of adding the cookie to a single a link too, so I can adjust it to the example. It's a fairly complex style switcher as well as showing how I could add a body class without instead of completely replacing it. In the previous example (the non-cookie version) I used the following:

("body").removeClass("darkbg-1 darkbg-2 darkbg-3 darkbg-4 darkbg-5").addClass("darkbg-5");

So I therefore removed only the classes for that section and added the one for that section on the end, if that makes sense. I would like to achieve the same concept with the cookie version so it keeps all the styles incorporated.

Thanks for your help, I will stick with the cookie version, as the CSS has been coded this way.

[Pullo]

Hi there,

The first drop down list should replace the value in this first drop down only, the second however, should an additional class to the body and add on this. So in essense there will be 2 or more body classes.

I have updated my example with an additional dropdown menu, so that you can select the background colour and the body colour independently of each other.
Now, when you select an option from the dropdown box, the script will only remove one class from the body, before applying the new class.
For example, if you select "background:blue" and "text:yellow", the script will apply two classes to the body, so that it looks like this: <body class="background-blue color-yellow">
If you then change the background to green, the script removes only the "background-blue" class before applying the "background-green" class. The body tag will then look like this: <body class="background-green color-yellow">.

I hope I understood you correctly and this is what you are after.

Here's the link. I can send you the files in a zip file if you want: http://hibbard.eu/blog/pages/cookie/1.html

Any questions, just let me know.

[Sega]

I have worked on the script a little further. I apologize in advance, ideally I want to be able to do this myself. It's understandable that I might struggle before doing this. Your example is great, I don't think I can use it though. I did manage to use the example to get 2 drop down lists to work, which is awesome.

How would you add a cookie class to a link either on it's on or in a list item. I rather you put some code hints, if possible to I can try to work it out myself. Hopefully this will help me digest some more in.

[Pullo]

Hi,

Good to hear that you have made some progress.
I'm not 100% sure I understand your question, though:

How would you add a cookie class to a link either on it's on or in a list item.

Do you mean that you want to have it, so that when you click a certain link it sets a cookie?

[Sega]

Thanks

This is what I did with the drop down lists and it worked

		function addBackgroundClass() {	
			$("body").removeClass("light dark main-bg-1 main-bg-2 main-bg-3 main-bg-4 main-bg-5 main-bg-6 main-bg-7 main-bg-8 main-bg-9 main-bg-10 main-bg-11 main-bg-12 main-bg-13 main-bg-14 main-bg-15 main-bg-16 main-bg-17 main-bg-18 main-bg-19 main-bg-20 main-bg-21 main-bg-22 main-bg-23 main-bg-24 main-bg-25 main-bg-26 main-bg-27 main-bg-28 main-bg-29 main-bg-30 main-bg-31 main-bg-32 main-bg-33 main-bg-34 main-bg-35 main-bg-36 main-bg-37 main-bg-38 main-bg-39 main-bg-40 main-bg-41 main-bg-42 main-bg-43 main-bg-44 main-bg-45 main-bg-46 main-bg-47 main-bg-48 main-bg-49 main-bg-50 main-bg-51 main-bg-52 main-bg-53 main-bg-54 main-bg-55 main-bg-56 main-bg-57 main-bg-58 main-bg-59 main-bg-60	main-bg-61 main-bg-62 main-bg-63 main-bg-64 main-bg-65 main-bg-66 main-bg-67 main-bg-68 main-bg-69 main-bg-70 main-bg-71 main-bg-72 main-bg-73 main-bg-74 main-bg-75 main-bg-76 main-bg-77 main-bg-78 main-bg-79 main-bg-80 main-bg-81 main-bg-82 main-bg-83 main-bg-84 main-bg-85 main-bg-86 main-bg-87 main-bg-88 main-bg-89 main-bg-90 main-bg-91 main-bg-92 main-bg-93 main-bg-94 main-bg-95 main-bg-96 main-bg-97 main-bg-98 main-bg-99 main-bg-100 main-bg-101 main-bg-102 main-lightbg-1 main-lightbg-2 main-lightbg-3 main-lightbg-4 main-lightbg-5 main-lightbg-6 main-lightbg-7 main-lightbg-8 main-lightbg-9 main-lightbg-10 main-lightbg-11 main-lightbg-12 main-lightbg-13 main-lightbg-14 main-lightbg-15 main-lightbg-16 main-lightbg-17 main-lightbg-18 main-lightbg-19 main-lightbg-20 main-lightbg-21 main-lightbg-22 main-lightbg-23 main-lightbg-24 main-lightbg-25 main-lightbg-26 main-lightbg-27 main-lightbg-28 main-lightbg-29 main-lightbg-30 main-lightbg-31 main-lightbg-32 main-lightbg-33 main-lightbg-34 main-lightbg-35 main-lightbg-36 main-lightbg-37 main-lightbg-38 main-lightbg-39 main-lightbg-40 main-lightbg-41 main-lightbg-42 main-lightbg-43 main-lightbg-44 main-lightbg-45 main-lightbg-46 main-lightbg-47 main-lightbg-48 main-lightbg-49 main-lightbg-50 main-lightbg-51 main-lightbg-52 main-lightbg-53 main-lightbg-54 main-lightbg-55 main-lightbg-56 main-lightbg-57 main-lightbg-58 main-lightbg-59 main-lightbg-60	main-lightbg-61 main-lightbg-62 main-lightbg-63 main-lightbg-64 main-lightbg-65 main-lightbg-66 main-lightbg-67 main-lightbg-68 main-lightbg-69 main-lightbg-70 main-lightbg-71 main-lightbg-72 main-lightbg-73 main-lightbg-74 main-lightbg-75 main-lightbg-76 main-lightbg-77 main-lightbg-78 main-lightbg-79 main-lightbg-80 main-lightbg-81 main-lightbg-82 main-lightbg-83 main-lightbg-84 main-lightbg-85 main-lightbg-86 main-lightbg-87 main-lightbg-88 main-lightbg-89 main-lightbg-90 main-lightbg-91 main-lightbg-92 main-lightbg-93 main-lightbg-94 main-lightbg-95 main-lightbg-96 main-lightbg-97 main-lightbg-98 main-lightbg-99 main-lightbg-100 main-lightbg-101 main-lightbg-102 main-lightbg-103 main-lightbg-104 main-lightbg-105 main-lightbg-106 main-lightbg-107 main-lightbg-108 main-lightbg-109 main-lightbg-110 main-lightbg-111 main-lightbg-112 main-lightbg-113 main-lightbg-114 main-lightbg-115 main-lightbg-116 main-lightbg-117 main-lightbg-118 main-lightbg-119 main-lightbg-120 main-lightbg-121 main-lightbg-122 main-lightbg-123 main-lightbg-124 main-lightbg-125 main-lightbg-126 main-lightbg-127 main-lightbg-128 main-lightbg-129 main-lightbg-130 main-lightbg-131 main-lightbg-132 main-lightbg-133 main-lightbg-134 main-lightbg-135 main-lightbg-136 main-lightbg-137 main-lightbg-138 main-lightbg-139 main-lightbg-140 main-lightbg-141 main-lightbg-142 main-lightbg-143 main-lightbg-144 main-lightbg-145 main-lightbg-146 main-lightbg-147 main-lightbg-148 main-lightbg-149 main-lightbg-150 main-lightbg-151 main-lightbg-152 main-lightbg-153 main-lightbg-154 main-lightbg-155 main-lightbg-156 main-lightbg-157 main-lightbg-158 main-lightbg-159 main-lightbg-160 main-lightbg-161 main-lightbg-162");
			$("body").addClass($.cookie('body_class'));
		}
		
		// Background Footer Function
		function addBackgroundFooterClass() {	
			$("body").removeClass("light-footer dark-footer footer-darkbg-1 footer-darkbg-2 footer-darkbg-3 footer-darkbg-4 footer-darkbg-5 footer-darkbg-6 footer-darkbg-7 footer-darkbg-8 footer-darkbg-9 footer-darkbg-10 footer-darkbg-11 footer-darkbg-12 footer-darkbg-13 footer-darkbg-14 footer-darkbg-15 footer-darkbg-16 footer-darkbg-17 footer-darkbg-18 footer-darkbg-19 footer-darkbg-20 footer-darkbg-21 footer-darkbg-22 footer-darkbg-23 footer-darkbg-24 footer-darkbg-25 footer-darkbg-26 footer-darkbg-27 footer-darkbg-28 footer-darkbg-29 footer-darkbg-30 footer-darkbg-31 footer-darkbg-32 footer-darkbg-33 footer-darkbg-34 footer-darkbg-35 footer-darkbg-36 footer-darkbg-37 footer-darkbg-38 footer-darkbg-39 footer-darkbg-40 footer-darkbg-41 footer-darkbg-42 footer-darkbg-43 footer-darkbg-44 footer-darkbg-45 footer-darkbg-46 footer-darkbg-47 footer-darkbg-48 footer-darkbg-49 footer-darkbg-50 footer-darkbg-51 footer-darkbg-52 footer-darkbg-53 footer-darkbg-54 footer-darkbg-55 footer-darkbg-56 footer-darkbg-57 footer-darkbg-58 footer-darkbg-59 footer-darkbg-60	footer-darkbg-61 footer-darkbg-62 footer-darkbg-63 footer-darkbg-64 footer-darkbg-65 footer-darkbg-66 footer-darkbg-67 footer-darkbg-68 footer-darkbg-69 footer-darkbg-70 footer-darkbg-71 footer-darkbg-72 footer-darkbg-73 footer-darkbg-74 footer-darkbg-75 footer-darkbg-76 footer-darkbg-77 footer-darkbg-78 footer-darkbg-79 footer-darkbg-80 footer-darkbg-81 footer-darkbg-82 footer-darkbg-83 footer-darkbg-84 footer-darkbg-85 footer-darkbg-86 footer-darkbg-87 footer-darkbg-88 footer-darkbg-89 footer-darkbg-90 footer-darkbg-91 footer-darkbg-92 footer-darkbg-93 footer-darkbg-94 footer-darkbg-95 footer-darkbg-96 footer-darkbg-97 footer-darkbg-98 footer-darkbg-99 footer-darkbg-100 footer-darkbg-101 footer-darkbg-102 footer-lightbg-1 footer-lightbg-2 footer-lightbg-3 footer-lightbg-4 footer-lightbg-5 footer-lightbg-6 footer-lightbg-7 footer-lightbg-8 footer-lightbg-9 footer-lightbg-10 footer-lightbg-11 footer-lightbg-12 footer-lightbg-13 footer-lightbg-14 footer-lightbg-15 footer-lightbg-16 footer-lightbg-17 footer-lightbg-18 footer-lightbg-19 footer-lightbg-20 footer-lightbg-21 footer-lightbg-22 footer-lightbg-23 footer-lightbg-24 footer-lightbg-25 footer-lightbg-26 footer-lightbg-27 footer-lightbg-28 footer-lightbg-29 footer-lightbg-30 footer-lightbg-31 footer-lightbg-32 footer-lightbg-33 footer-lightbg-34 footer-lightbg-35 footer-lightbg-36 footer-lightbg-37 footer-lightbg-38 footer-lightbg-39 footer-lightbg-40 footer-lightbg-41 footer-lightbg-42 footer-lightbg-43 footer-lightbg-44 footer-lightbg-45 footer-lightbg-46 footer-lightbg-47 footer-lightbg-48 footer-lightbg-49 footer-lightbg-50 footer-lightbg-51 footer-lightbg-52 footer-lightbg-53 footer-lightbg-54 footer-lightbg-55 footer-lightbg-56 footer-lightbg-57 footer-lightbg-58 footer-lightbg-59 footer-lightbg-60	footer-lightbg-61 footer-lightbg-62 footer-lightbg-63 footer-lightbg-64 footer-lightbg-65 footer-lightbg-66 footer-lightbg-67 footer-lightbg-68 footer-lightbg-69 footer-lightbg-70 footer-lightbg-71 footer-lightbg-72 footer-lightbg-73 footer-lightbg-74 footer-lightbg-75 footer-lightbg-76 footer-lightbg-77 footer-lightbg-78 footer-lightbg-79 footer-lightbg-80 footer-lightbg-81 footer-lightbg-82 footer-lightbg-83 footer-lightbg-84 footer-lightbg-85 footer-lightbg-86 footer-lightbg-87 footer-lightbg-88 footer-lightbg-89 footer-lightbg-90 footer-lightbg-91 footer-lightbg-92 footer-lightbg-93 footer-lightbg-94 footer-lightbg-95 footer-lightbg-96 footer-lightbg-97 footer-lightbg-98 footer-lightbg-99 footer-lightbg-100 footer-lightbg-101 footer-lightbg-102 footer-lightbg-103 footer-lightbg-104 footer-lightbg-105 footer-lightbg-106 footer-lightbg-107 footer-lightbg-108 footer-lightbg-109 footer-lightbg-110 footer-lightbg-111 footer-lightbg-112 footer-lightbg-113 footer-lightbg-114 footer-lightbg-115 footer-lightbg-116 footer-lightbg-117 footer-lightbg-118 footer-lightbg-119 footer-lightbg-120 footer-lightbg-121 footer-lightbg-122 footer-lightbg-123 footer-lightbg-124 footer-lightbg-125 footer-lightbg-126 footer-lightbg-127 footer-lightbg-128 footer-lightbg-129 footer-lightbg-130 footer-lightbg-131 footer-lightbg-132 footer-lightbg-133 footer-lightbg-134 footer-lightbg-135 footer-lightbg-136 footer-lightbg-137 footer-lightbg-138 footer-lightbg-139 footer-lightbg-140 footer-lightbg-141 footer-lightbg-142 footer-lightbg-143 footer-lightbg-144 footer-lightbg-145 footer-lightbg-146 footer-lightbg-147 footer-lightbg-148 footer-lightbg-149 footer-lightbg-150 footer-lightbg-151 footer-lightbg-152 footer-lightbg-153 footer-lightbg-154 footer-lightbg-155 footer-lightbg-156 footer-lightbg-157 footer-lightbg-158 footer-lightbg-159 footer-lightbg-160 footer-lightbg-161 footer-lightbg-162");
			$("body").addClass($.cookie('body_class_2'));
		}


		// Background Main Image
		$('#background-image-drop-down').change(function(){ 
		$('body')
			$.cookie('body_class', $("#background-image-drop-down").val());
			addBackgroundClass();
		})
		$("#background-image-drop-down > option").each(function() {
			if($(this).val() == $.cookie('body_class')){
				$(this).attr("selected","selected"); 
			}
		});
		
		// Background Footer Drop Down
		$('#background-footer-dropdown').change(function(){ 
		$('body')
			$.cookie('body_class_2', $("#background-footer-dropdown").val());
			addBackgroundFooterClass();
		})		
		$("#background-footer-dropdown > option").each(function() {
			if($(this).val() == $.cookie('body_class_2')){
				$(this).attr("selected","selected"); 
				addBackgroundFooterClass();				
			}
		});

I know it looks like a lot of code. The only way to make this CSS switcher working is to remove all the associated classes it's in section and then adding the class you want on the end, it work so it's okay.

Do you mean that you want to have it, so that when you click a certain link it sets a cookie?

Ideally I need to follow the same procedure as above. I want to be able to click on a link and set a cookie in a similar fashion. I did some experiments, but it did not work. My experiments looked a little like this:

		$("li.radius-fx").click( function(e){ $
			$.cookie('bodyclass_3', $(".radius-fx").val());			
			$("body").addClass($.cookie('body_class_3'));
		});

So it sets the class within the function. But this did not work. In order to set more than one class and keep them isolated I had to name them body_class_x. It works for the drop down list.

I know I am not up to par with jquery so I am now taking an online course at code academy to get myself up to speed.

[Pullo]

This is what I did with the drop down lists and it worked

You do know that you can just do $("body").removeClass(); and it will remove all of the classes attached to the body, right?

Ideally I need to follow the same procedure as above. I want to be able to click on a link and set a cookie in a similar fashion. I did some experiments, but it did not work. My experiments looked a little like this:

$("li.radius-fx").click( function(e){ $
    $.cookie('bodyclass_3', $(".radius-fx").val());			
    $("body").addClass($.cookie('body_class_3'));
});

There is one dollar sign too many on the first line of your function.
This: $("li.radius-fx").click( function(e){ $
should be this: $("li.radius-fx").click( function(e){

Try that, does that work?
If not, let me know and I'll put together a well commented demo for you.

[Sega]

You do know that you can just do $("body").removeClass(); and it will remove all of the classes attached to the body, right?

If you put just the classes you want to remove as it;'s parameters it only affects those classes within. The example code unfortunately did not work.

[Pullo]

The example code unfortunately did not work.

Just out of interest, what are you trying to target with $(".radius-fx").val()?
I'm a bit busy right now. If you let me know exactly what it is you are trying to do, I'll have a look at it this evening.

[Sega]

Let me play around with it a little, you've done more than enough to help me.

I am trying to assign an additional body class when I press a link, but keep this class stored as a cookie. Unfortunately my current script does not store this addition class within the cookie.

I am going through CodeAcademy to better my coding skills, the best way to learn is by example, so this will be a brilliant opportunity to learn something new.

[Pullo]

Let me play around with it a little, you've done more than enough to help me.

I really don't mind. I'm happy to help

I am trying to assign an additional body class when I press a link, but keep this class stored as a cookie. Unfortunately my current script does not store this addition class within the cookie.

Just to bring this thread to a nice conclusion, I made a third example: http://hibbard.eu/blog/pages/cookie/3.html
As you can see, when you click a link, a cookie is created and a span on the page is updated with the cookie's value.
If you look at the source, I have tried to keep my code simple and have commented it, too.

I am going through CodeAcademy to better my coding skills, the best way to learn is by example, so this will be a brilliant opportunity to learn something new.

Good luck with that! It's always good to learn something new and jQuery is more than useful in the world of web design. I can also recommend Sitepoint's "jQuery - Novice to Ninja"

[Sega]

Thanks for your help! You've certainly given me the confidence to embark coding on my own. Thanks.