Demo Using the "css" Type (Embedded CSS Styles)

Live Example

Font Size:

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet massa est, eu vulputate urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum magna mauris, 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.

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.

Code Being Used

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: 12px;
    }
    
    ul.textresizer .medium-text
    {
        font-size: 14px;
    }
    
    ul.textresizer .large-text
    {
        font-size: 16px;
    }
    
    ul.textresizer .larger-text
    {
        font-size: 18px;
    }

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

#maincontent 
{
    background: #ffffcc;
}
                    

JavaScript/jQuery Code

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

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

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

            // Larger. Index 3
            { "font-size" : "18px",
              "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>

<article id="maincontent">
   <h1>Lorem Ipsum Dolor Sit Amet</h1>
   <p>
      <a href="http://www.lipsum.com/">Lorem ipsum dolor sit amet</a>, 
      <strong>consectetur adipiscing elit</strong>. 
      <em>Sed laoreet massa est</em>, 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>   
</article>