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.
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:
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");
});
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.
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.
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
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 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!
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.
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, 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.
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:
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.
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.
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.
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:
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.
You do know that you can just do $("body").removeClass(); and it will remove all of the classes attached to the body, right?
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.
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.
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.
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.
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”
doh!