jQuery Resizing Text Dynamically

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

Frequently Asked Questions about jQuery Resizing Text Dynamically

How can I dynamically change the font size using jQuery?

To dynamically change the font size using jQuery, you can use the .css() method. This method allows you to get or set the style properties of selected elements. Here’s a simple example:

$("p").css("font-size", "20px");
In this example, the font size of all paragraph elements will be set to 20px.

Can I increase or decrease the font size using jQuery?

Yes, you can increase or decrease the font size using jQuery. You can use the .css() method to get the current font size, then add or subtract from it to increase or decrease the size. Here’s an example:

var size = parseInt($("p").css("font-size"));
size = size + 2; // for increase
$("p").css("font-size", size + "px");
In this example, the font size of all paragraph elements will be increased by 2px.

How can I make the font size expand when I resize the window using jQuery?

You can use the .resize() method in jQuery to make the font size expand when the window is resized. This method triggers the resize event, or attaches a function to run when a resize event occurs. Here’s an example:

$(window).resize(function() {
var size = $(window).width() / 30; // Calculate the new font size
$("p").css("font-size", size + "px");
});
In this example, the font size of all paragraph elements will be adjusted based on the width of the window.

Is it possible to animate the change in font size using jQuery?

Yes, you can animate the change in font size using jQuery. You can use the .animate() method to gradually change the font size over a specified duration. Here’s an example:

$("p").animate({
fontSize: "20px"
}, 1500);
In this example, the font size of all paragraph elements will gradually change to 20px over a duration of 1.5 seconds.

Can I change the font size of only specific elements using jQuery?

Yes, you can change the font size of only specific elements using jQuery. You can use the .css() method along with a specific selector to target the desired elements. Here’s an example:

$("p.myClass").css("font-size", "20px");
In this example, the font size of all paragraph elements with the class “myClass” will be set to 20px.

How can I reset the font size to its original value using jQuery?

To reset the font size to its original value, you can simply set the font size to an empty string. Here’s an example:

$("p").css("font-size", "");
In this example, the font size of all paragraph elements will be reset to its original value.

Can I change the font size based on the user’s input using jQuery?

Yes, you can change the font size based on the user’s input using jQuery. You can use the .val() method to get the user’s input, then use the .css() method to set the font size. Here’s an example:

var size = $("#myInput").val();
$("p").css("font-size", size + "px");
In this example, the font size of all paragraph elements will be set to the value entered by the user in the input field with the id “myInput”.

How can I change the font size of an element when it is clicked using jQuery?

You can use the .click() method in jQuery to change the font size of an element when it is clicked. Here’s an example:

$("p").click(function() {
$(this).css("font-size", "20px");
});
In this example, the font size of the clicked paragraph element will be set to 20px.

Can I change the font size of an element when the mouse hovers over it using jQuery?

Yes, you can change the font size of an element when the mouse hovers over it using jQuery. You can use the .hover() method to achieve this. Here’s an example:

$("p").hover(function() {
$(this).css("font-size", "20px");
}, function() {
$(this).css("font-size", "");
});
In this example, the font size of the paragraph element will be set to 20px when the mouse hovers over it, and will be reset to its original value when the mouse leaves.

Can I change the font size of all elements of a certain type using jQuery?

Yes, you can change the font size of all elements of a certain type using jQuery. You can use the .css() method along with a type selector to target all elements of a certain type. Here’s an example:

$("p").css("font-size", "20px");
In this example, the font size of all paragraph elements will be set to 20px.