Skip to content

alexwelch/body-class-swap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published