jQuery Resizing Text Dynamically
Share
jQuery and html code snippets to resize the text on a webpage dynamically when a user clicks the increase text size or decrease text size buttons.
jQuery Code
$(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;
});
});
HTML Code
+ | -
| =
Font size can be changed in this section
This won't be affected
This one is adjustable too!