Thursday, October 29, 2009

[jQuery] Cycle Font Size off one button

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;
});

});

No comments: