Skip to content

Instantly share code, notes, and snippets.

@jameshibbard
Created December 9, 2012 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jameshibbard/4246886 to your computer and use it in GitHub Desktop.
Save jameshibbard/4246886 to your computer and use it in GitHub Desktop.
A simple style changer using cookies
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Style changer - Page 1</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js"></script>
<style>
body{color:#000; background:#fff;}
.background-blue{background:blue;}
.background-red{background:red;}
.background-green{background:green;}
.color-yellow, .color-yellow a{color:yellow;}
.color-white, .color-white a{color:white;}
.color-purple, .color-purple a{color:purple}
</style>
</head>
<body class="background-default">
<h1>Page 1</h1>
<a href="1.html">Page 1</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="2.html">Page 2</a>
<p>Select the background colour:
<select class="selector">
<option value="background-default">Default</option>
<option value="background-blue">Blue</option>
<option value="background-green">Green</option>
<option value="background-red">Red</option>
</select>
</p>
<p>Select the text colour:
<select class="selector">
<option value="color-default">Default</option>
<option value="color-yellow">Yellow</option>
<option value="color-white">White</option>
<option value="color-purple">Purple</option>
</select>
</p>
<button id="reset">Reset ALL the styles</button>
<script>
$(document).ready(function() {
function changeStyles(optValue){
var property = optValue.split("-")[0];
removeOldClass(property);
$("body").addClass(optValue);
$.cookie('bodyClassList', $("body").attr('class'));
}
function removeOldClass(property){
var classList = $("body").attr('class').split(/\s+/);
$.each(classList, function(index, item){
if (item.match(property)){
$("body").removeClass(item);
}
});
}
$(".selector").change(function(){
changeStyles(this.value);
});
$(".selector > option").each(function() {
if($.cookie('bodyClassList') != null && $.cookie('bodyClassList').match($(this).val())){
$(this).attr("selected","selected");
}
});
$("#reset").click(function(){
$("body").removeClass();
$(".selector").each(function(){
$(this[0]).attr('selected', true);
})
$.cookie('bodyClassList', null);
});
if($.cookie('bodyClassList') != null) {
$("body").removeClass();
$("body").addClass($.cookie('bodyClassList'));
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment