[jQuery] How to resize the content of a page automatically after resizing the browser window using jQuery?

This is an article which describes how to resize the content of a page (images, texts etc) automatically after changing the window size (especially a pop-up window). There are some third party tools which will let us do the same thing but we will be looking at how this can be done using only jQuery. Read on to know how to resize the content of a page automatically after resizing the browser window using jQuery.

We have used the javascript event 'resize' for the resizing action. The 'resize' event is triggered on the 'window' element at the time when the browser window size is changed. Have a look at the code below:

$(window).bind('resize', function() {
    resizeText();
  }).trigger('resize');

function resizeText() {
	var preferredWidth = 1024;
	var displayWidth = window.innerWidth;
	var percentage = displayWidth / preferredWidth;
	var fontsizetitle = 25;
	var newFontSizeTitle = Math.floor(fontsizetitle * percentage);
	$(".divclass").css("font-size", newFontSizeTitle)
}

The resizeText() function will be triggered each time the browser window size is changed. I have shown an example on how the font size of the text inside a Div has been changed inside the resizeText() function,

This is a useful and simple jQuery script for those who dont want to use any other jQuery plugins or third party tools for the purpose of text resizing.