Resizing text dynamically


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



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.