-
Notifications
You must be signed in to change notification settings - Fork 2
/
README
25 lines (21 loc) · 1.29 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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