Following on from yesterdays little article about adding a simple JavaScript print link to a page, today I’m going to cover adding the functionality with jQuery for the user to adjust the text size on a page. It is important from an accessibility point of view to give your users the ability to re-size the text, and its also a handy trick that could become useful for building stand alone JavaScript applications. You will also need to include the jQuery JavaScript framework.

The Code

<script type="text/javascript">
$(document).ready(function(){
  var section = new Array('span','.text');
  section = section.join(',');

  // Reset Font Size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
    $(section).css('font-size', originalFontSize);
  });

  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css('font-size', newFontSize);
    return false;
  });

  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css('font-size', newFontSize);
    return false;
  });
});
</script>

The HTML

<div id="menu">Adjust Text size <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">Reset</a></div>

<span>Font size can be changed here</span>
<div class="title">This text will stay the same</div>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor enim, mollis sed dapibus a, volutpat ac urna. Sed at felis eget mauris sodales dignissim. Nullam lacinia porta dolor a molestie. Duis id ligula at nunc elementum porttitor. Nulla facilisi. Nunc et elit justo, id sagittis nisi. Mauris sit amet diam nisl, non faucibus dui. Cras ac consequat urna. In hac habitasse platea dictumst. Donec auctor velit vitae orci imperdiet et mattis enim vehicula. Quisque bibendum varius odio eget suscipit. Nam varius hendrerit nunc eu tincidunt. Vivamus vel ligula risus.</p>

<p>Maecenas pulvinar, eros eget mollis feugiat, risus nunc pellentesque orci, nec mattis tortor lectus eget erat. Nulla porttitor ultricies condimentum. Cras ac arcu nisi. In eget elit sed neque pulvinar tristique. Quisque tempor ante at risus rutrum quis varius quam ultricies. Nulla mollis lectus a dolor rhoncus vitae ullamcorper nisi dapibus. Etiam vehicula, risus vitae dignissim euismod, neque tortor adipiscing diam, id congue turpis velit quis felis. Aliquam eu diam mauris, id bibendum risus. Nullam tortor nibh, consectetur eget pretium vel, auctor in urna. Nam rhoncus placerat sapien, et pretium risus pulvinar nec. Ut et metus sed tellus scelerisque convallis. Vivamus lobortis tempus rhoncus. Integer at accumsan purus. </div>
</p>

The CSS

body{font-size:12px;}

#menu{padding-bottom:10px;
margin-bottom:10px;
border-bottom:1px dotted #ccc; color:#999;}

#menu a{color:#000;}
#menu a:hover{cursor:pointer; color:#000;}
#container a{font-size:14px; font-weight:700;}

span{color:#FF6633; font-size:17px; font-family:Georgia, "Times New Roman", Times, serif;}
.title{font-size:11px; color:#666;}
p{font-size:15px;}

More information can be found out about font-size accessibility over at the W3C which can be found here.