Advanced Search

Return to Snippet

Revision: 19365
at October 22, 2009 09:17 by stancox
Initial Code 
<!-- HTML -->
<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>
Initial URL 
http://sixrevisions.com/javascript/10-easy-jquery-tricks-for-designers/
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Resizing text dynamically

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
resize, text

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery