/body-class-swap

A simple plugin to swap classes on the body, useful for theme-switchers, font-sizers, etc.

Primary LanguageJavaScript

Simply create an element with links to anchors named as the desired body class (the # will be removed before the class is assigned to the body)

<div id="font_size">
	<ul>
		<li><a href='#small_font'>small</a></li> <!-- clicking will give the body tag a class of 'small_font' -->
		<li><a href='#medium_font'>medium</a></li> <!-- clicking will give the body tag a class of 'medium_font' -->
		<li><a href='#large_font'>large</a></li> <!-- clicking will give the body tag a class of 'large_font' -->
	</ul>
</div>

In the head of your document include jquery, jquery.cookie (from: http://plugins.jquery.com/project/cookie), and jquery.body-class-swap.js
Then simply initialize the classSwapper();

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.cookie.js" type="text/javascript"></script>
<script language="javascript" src="jquery.body-class-swap.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('#font_size').classSwapper();
	});
</script>

Helpful Notes
--------------
* if you are using the cookie plugin and saving the state make sure you give your container an id as that is what is used for the name of the cookie