JavaScript
Article
By Sam Deering

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.

--ADVERTISEMENT--

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
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account