I'm trying to create a "highcontrast" style switcher with jQuery Cookie plugin
I've been busting my head for couple of hours now, read a lot of questions on stackoverflow, but I didn't solve my problem.
Idea is to toggle class "highcontrast" on body tag when clicking on span element with id "switch". Inside CSS stylesheet I have set of rules which I want to apply if body tag has class "highcontrast".
This is jQuery code for above scenario:
$("#switch").click(function () {
$.cookie('bodyclass', 'highcontrast', { expires: 7, path: '/' });
$('body').toggleClass('highcontrast');
});
If you click on switch element body class is toggled. Now if you go to another page, the cookie is there and the value is set, but body class "highcontrast" is no longer present.
What I'm I missing?
I'm trying to create a "highcontrast" style switcher with jQuery Cookie plugin
I've been busting my head for couple of hours now, read a lot of questions on stackoverflow., but I didn't solve my problem.
Idea is to toggle class "highcontrast" on body tag when clicking on span element with id "switch". Inside CSS stylesheet I have set of rules which I want to apply if body tag has class "highcontrast".
This is jQuery code for above scenario:
$("#switch").click(function () {
$.cookie('bodyclass', 'highcontrast', { expires: 7, path: '/' });
$('body').toggleClass('highcontrast');
});
If you click on switch element body class is toggled. Now if you go to another page, the cookie is there and the value is set, but body class "highcontrast" is no longer present.
What I'm I missing?
Share Improve this question edited Feb 25, 2013 at 11:50 Sudhir Bastakoti 100k15 gold badges161 silver badges167 bronze badges asked Feb 25, 2013 at 11:47 weezleweezle 811 gold badge6 silver badges15 bronze badges 3- Can you show the code where you read the cookie value and set the class on the body on page load? – Strille Commented Feb 25, 2013 at 11:49
- your toggleClass works on click as per the code, so moving to other page wont trigger the click automatically..! – Sudhir Bastakoti Commented Feb 25, 2013 at 11:51
- missing code to read cookie when page loads and if it exists change body class – charlietfl Commented Feb 25, 2013 at 11:53
4 Answers
Reset to default 6Okay, this is verified and working...
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Style Switcher</title>
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../plugins/cookie/jquery.cookie.js"></script>
<script src="switch.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<span id="switch">Switch</span>
</body>
</html>
jQuery:
$(document).ready(function(){
// Check (onLoad) if the cookie is there and set the class if it is
if ($.cookie('highcontrast') == "yes") {
$("body").addClass("highcontrast");
}
// When the span is clicked
$("#switch").click(function () {
// Check the current cookie value
// If the cookie is empty or set to no, then add highcontrast
if ($.cookie('highcontrast') == "undefined" || $.cookie('highcontrast') == "no") {
// Set cookie value to yes
$.cookie('highcontrast','yes', {expires: 7, path: '/'});
// Add the class to the body
$("body").addClass("highcontrast");
}
// If the cookie was already set to yes then remove it
else {
$.cookie('highcontrast','no', {expires: 7, path: '/'});
$("body").removeClass("highcontrast");
}
});
});
CSS:
body {
width:100%;
height:100%;
}
body.highcontrast {
background-color:#000;
color:#fff;
}
try something like this, on your page load:
if ( $.cookie('bodyclass') ) {
$('body').toggleClass('highcontrast');
}
You need to set the value of highcontrast depending on what the user wants, and read it on page load.
// switch cookie
$("#switch").click(function() {
// check current cookie
var current = $.cookie('highcontrast');
// set new cookie and adjust contrast
if (current) {
// remove cookie
$.cookie('highcontrast', null);
// remove class
$('body').removeClass('highcontrast');
} else {
// add cookie
$.cookie('highcontrast', 1, { expires: 7, path: '/' });
// add class
$('body').addClass('highcontrast');
}
});
// set contrast on page load
$(function() {
var value = $.cookie('highcontrast');
if (value) {
// add contrast class
$('body').addClass('highcontrast');
}
});
On document.ready check for cookies preset and values are set if its present then add it to body.
Example
$(document).ready(function(){
if($.cookie('bodyclass'))
{
$('body').addClass($.cookie('bodyclass'));
}
});