Live Example

CSS

Note that in this example I am defining the look and feel of the resize buttons via CSS, even though in the JavaScript I am using the "css" type and then embedding the CSS styles for the targetted content in the sizes property.

#textsizer-embed
{
	margin-bottom: 6px;
}
	#textsizer-embed p
	{
		display: inline;
	}
ul.textresizer
{
	list-style: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}
	ul.textresizer li
	{
		display: inline;
		margin: 0px;
		margin-right: 5px;
		padding: 0px;
	}

	ul.textresizer a
	{
		border: solid 1px #999;
		padding: 2px 3px;
		font-weight: bold;
		text-decoration: none;
	}
    
	ul.textresizer a:hover
	{
		background: #e5e5e5;
		border: solid 1px #cccccc;
        
	}

	ul.textresizer .small-text
	{
		font-size: 11px;
	}
	
	ul.textresizer .medium-text
	{
		font-size: 13px;
	}
	
	ul.textresizer .large-text
	{
		font-size: 15px;
	}
	
	ul.textresizer .larger-text
	{
		font-size: 17px;
	}

	ul.textresizer a.textresizer-active
	{
		border: solid 1px #2B562B;
		background: #FFCA6F;
		color: #000000;				
	}

#maincontent 
{
	background: #ffffcc;
}
			

JavaScript/jQuery Code

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.textresizer.js" type="text/javascript"></script>    
<script type="text/javascript">
   jQuery(document).ready( function() {
      jQuery( "#textsizer-embed a" ).textresizer({
         target: "#maincontent",
         type: "css",
         sizes: [
            // Small. Index 0
            { "font-size" : "80%",
              "color"     : "red",
              "background": "#e5e5e5"
            },

            // Medium. Index 1
            { "font-size" : "100%",
              "color"     : "blue",
              "background": "#ffffcc"
            },

            // Large. Index 2
            { "font-size" : "120%",
              "color"     : "darkgreen",
              "background": "#EFEFD1"
            },

            // Larger. Index 3
            { "font-size" : "140%",
              "color"     : "#333333",
              "background": "#E0E0EF"
            }
         ],
         selectedIndex: 1
      });
   });
</script>
			

HTML

<div id="textsizer-embed">
   <p>Font Size:</p>
   <ul class="textresizer">
      <li><a href="#nogo" class="small-text" title="Small">A</a></li>
      <li><a href="#nogo" class="medium-text" title="Medium">A</a></li>
      <li><a href="#nogo" class="large-text" title="Large">A</a></li>
      <li><a href="#nogo" class="larger-text" title="Larger">A</a></li>
   </ul>
</div>

<div id="maincontent">
   <h1>Lorem Ipsum Dolor Sit Amet</h1>
   <p>
      <a href="http://www.lipsum.com/">Lorem ipsum dolor sit amet</a>, <b>consectetur adipiscing elit</b>. 
      <i>Sed laoreet massa est</i>, eu vulputate urna. Class aptent 
      taciti sociosqu ad litora torquent per conubia nostra, per 
      inceptos himenaeos. <a href="http://nosite.com/">Vestibulum magna mauris</a>, molestie vitae 
      sollicitudin id, auctor at orci. Nulla sodales lectus ac est 
      fringilla sed vulputate risus lobortis. Quisque interdum 
      dignissim molestie. Donec non sapien quis diam varius 
      vestibulum. Vestibulum ante ipsum primis in faucibus orci 
      luctus et ultrices posuere cubilia Curae; Ut pellentesque 
      viverra varius. Aliquam vitae sem ut nibh ultricies consequat 
      vel non felis. Etiam felis massa, pretium convallis posuere at, 
      accumsan sit amet massa.
   </p>
   <p>
      Suspendisse id purus metus, ac 
      consequat nibh. Ut volutpat ultricies lorem quis interdum. 
      Vestibulum ante ipsum primis in faucibus orci luctus et 
      ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in 
      faucibus orci luctus et ultrices posuere cubilia Curae; 
      Maecenas accumsan malesuada erat, in auctor erat sagittis ac. 
      Maecenas augue turpis, viverra at congue ut, tristique vitae 
      erat. Morbi nec tellus a sapien mollis cursus ut eu ipsum. 
      Quisque eu vehicula magna.
   </p>   
</div>