<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Grab Bag - Cookie Style Switcher Plugin</title>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://onehackoranother.com/feed/" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://onehackoranother.com/feed/rss/" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="http://onehackoranother.com/feed/atom/" />
<script type='text/javascript' src='javascripts/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='javascripts/jquery.cookie-text-size.js'></script>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css" />
<style type='text/css'>
#sizer { border: 1px solid #a0a0a0; padding: 0.5em; background-color: #f0f0f0; }
body.small #resizable { font-size: 10px; }
body.medium #resizable { font-size: 12px; }
body.large #resizable { font-size: 14px; }
</style>
<script type='text/javascript'>
$(function() {
cookieResize('#sizer a', 'medium');
});
</script>
</head>
<body>
<div id='container'>
<h1>
grab bag <span class='subtitle'>- assorted jQuery plugins</span>
</h1>
<div id='sidebar'>
<ul id='project-nav'>
<li><a href='index.html'>Plugin List</a></li>
</ul>
<ul id='ohoa-nav'>
<li><a href='http://onehackoranother.com/feed/' id='subscribe'>Subscribe for updates »</a></li>
<li><a href='http://onehackoranother.com/projects/'>Back to projects »</a></li>
<li><a href='http://onehackoranother.com/'>Back to onehackoranother.com »</a></li>
</ul>
</div>
<div id='main'>
<h2>Cookie Style Switcher</h2>
<p>jQuery based helper function for implementing text resize functionality and storing
the user's preference in a cookie. The selected "size" is applied to the document
by adding a corresponding CSS class to <code>document.body</code>; see below for
example code.
</p>
<p>Call the initialisation function (<code>cookieResize</code>) from within your
<code>$(document).ready()</code>, passing a jQuery selector identifying the
elements the user will click to switch styles and the default class to apply
if no cookie is present. Each of the actuator elements should have a single
CSS class; this will be applied to <code>document.body</code> and stored in
a cookie on click.
</p>
<div class='caption'>Example HTML for size control:</div>
<pre><div id='sizer'>
<a href='#' class='small'>small</a>
<a href='#' class='medium'>medium</a>
<a href='#' class='large'>large</a>
</div></pre>
<div class='caption'>Example CSS:</div>
<pre>body.small { font-size: 10px }
body.medium { font-size: 12px }
body.large { font-size: 14px }</pre>
<div class='caption'>Javascript for initialisation:</div>
<pre>$(function() { cookieResize('#sizer a', 'medium'); });</pre>
<h2>Example</h2>
<div id='sizer'>
<a href='#' class='small'>small</a>
<a href='#' class='medium'>medium</a>
<a href='#' class='large'>large</a>
</div>
<div id='resizable'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h3>Direct Link</h3>
<p><a href='http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.cookie-text-size.js'>jquery.cookie-text-size.js</a></p>
</div>
</div>
</body>
</html>
) is private.
