Posted By

stancox on 10/22/09

Tagged

resize
text

Versions (?)

Last Edited at 10/22/09 09:17am

Statistics

Viewed 587 times

Favorited by 1 user(s)

Related snippets

Resizing text dynamically

/ Published in: jQuery

Highlighted TextExpand

<a class="increaseFont">+</a> | <a class="decreaseFont">-</a>
| <a class="resetFont">=</a>

<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

//JavaScript
<script type="text/javascript">
$(document).ready(function(){
  var section = new Array('span','.section2'); 
  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>

URL: http://sixrevisions.com/javascript/10-easy-jquery-tricks-for-designers/

Report this snippet Tweet