Text Resizing with jQuery?

Question

I found this great solution for on-site text resizing with jQuery: http://dev-tips.com/featured/jquery-tip-quick-and-easy-font-resizing

Works like a charm, but their are three things it's missing that I need;

A.) A 'return to default' click able option. B.) Limits on resizing (i.e. only allow it to be resized up or down twice C.) Adding multiple elements to the resizeable area

Here is my modified code from the example above:

 $(document).ready(function() {
  //Text Zoom 
  $('.controls a').click(function(){
    var ourText = $('#content');
 var currFontSize = ourText.css('fontSize');
 var finalNum = parseFloat(currFontSize, 10);
 var stringEnding = currFontSize.slice(-2);
   if(this.id == 'large') {
     finalNum *= 1.2;
  }
  else if (this.id == 'small'){
    finalNum /=1.2;
    }
   ourText.css('fontSize', finalNum + stringEnding);
 });
   });

It works great minus those 3 issues. I know "C)." shouldn't be that hard, but I'm just not familiar enough with jQuery syntax to add more elements to be re-sized than just '#content'. Not sure how to approach the other 2. The markup for the controls looks like this, as you can see from my JS the small and large links are being generally targeted with "$('.controls a').click(function(){".

<ul id="textzoom">
<li class="controls">
  <a href="#" id="small" class="smaller" title="zoom out">-</a> 
  <a href="#" class="normal" id="orignal" title="zoom normal">AAA</a> 
  <a href="#" id="large" class="bigger" title="zoom in">+</a> 
</li>
<li>...</li>
</ul>

Any help would be greatly appreciated.

Answer 1

For A) and B) you'll need to store information in a global variable (a variable defined outside of the scope of a function). Just create a "baseFontSize" variable for storing your reset font size and a "fontSizeDelta" variable that you can check, making sure it never goes over "2" or below "-2". You would add a check inside your .click function against fontSizeDelta (calling return immediately if it's at max or min), as well as incrementing or decrementing it as needed. If I understand what you are asking on "C", it just this line:

ourText.css('fontSize', finalNum + stringEnding);

repeated, but replacing "ourText" with "$('#desired_element_id')" where desired_element_id is, well, the id of the element you want to affect.

Does that help?