Advanced Search

Resizing text dynamically

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- HTML -->
  2. <a class="increaseFont">+</a> | <a class="decreaseFont">-</a>
  3. | <a class="resetFont">=</a>
  4.  
  5. <span>Font size can be changed in this section</span>
  6. <div class="section1">This won't be affected</div>
  7. <div class="section2">This one is adjustable too!</div>
  8.  
  9. //JavaScript
  10. <script type="text/javascript">
  11. $(document).ready(function(){
  12.   var section = new Array('span','.section2'); 
  13.   section = section.join(',');
  14.  
  15.   // Reset Font Size
  16.   var originalFontSize = $(section).css('font-size');
  17.   $(".resetFont").click(function(){
  18.     $(section).css('font-size', originalFontSize); 
  19.   });
  20.  
  21.   // Increase Font Size
  22.   $(".increaseFont").click(function(){
  23.     var currentFontSize = $(section).css('font-size');
  24.     var currentFontSizeNum = parseFloat(currentFontSize, 10);
  25.     var newFontSize = currentFontSizeNum*1.2;
  26.     $(section).css('font-size', newFontSize);
  27.     return false;
  28.   });
  29.  
  30.   // Decrease Font Size
  31.   $(".decreaseFont").click(function(){
  32.     var currentFontSize = $(section).css('font-size');
  33.     var currentFontSizeNum = parseFloat(currentFontSize, 10);
  34.     var newFontSize = currentFontSizeNum*0.8;
  35.     $(section).css('font-size', newFontSize);
  36.     return false;
  37.   });
  38. });
  39. </script>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.