JavaScript
Article

jQuery Resizing Text Dynamically

By Sam Deering

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!

See Live Demo

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.