I am using the following code to adjust the size of all P tags. This
tag is design to work with three buttons a increase font button a
decrease font button and a reset button

I would like to modify this so it works with just one button.... I
would like the first 4 clicks to run the increase font size function
then the 5th click to reset the font.

Can somebody suggest how to do this?

// font resizer
$(document).ready(function() {

// Reset Font Size
  var originalFontSize = $('p').css('font-size');
  $("#resetFont").click(function(){
  $('p').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $("#fontSize").click(function(){
        var currentFontSize = $('p').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
        if ( newFontSize < 30 ) {
        $("p").css({fontSize : newFontSize});
        }
        return false;
  });
  // Decrease Font Size
  $("#decreaseFont").click(function(){
        var currentFontSize = $('p').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*0.8;
        if ( newFontSize > 12 ) {

        $("p").css({fontSize : newFontSize});
        }
        return false;
  });

});

Reply via email to