A reader asked concerning a post I wrote a while back on Resizing text with jQuery and window resize:
Essentially, in my previous post I had hard-coded a font size in the CSS of 30px. It would then resize as the window was resized horizontally. But no matter what size the window was when the page was loaded the text was always set to 30px. So I’ve wrote up a simple code sample below in jQuery illustrating how to set the font-size in a div based on the size of the window that the site is loaded in. The original code was fairly easy to refactor to accomplish this. Essentially I added the following function
getOriginalFontSize = function()
{
var windowWidth = $(window).width();
var thisFontSize = windowWidth / 50;
return thisFontSize;
}
and changed the line
var originalFontSize = 30;
to
var originalFontSize = getOriginalFontSize();
So the final block of javascript looks like
$(document).ready(function()
{
//set the originals
var originalWinHeight = $(window).height();
var originalWinWidth = $(window).width();
//set the original font size
var originalFontSize = getOriginalFontSize();
//set the ratio of change for each size change
var ratioOfChange = 50;
//set the font size using jquery
$("#container").css("font-size", originalFontSize);
$(window).resize(function()
{
//get the width and height as the window resizes
var winHeight = $(window).height();
var winWidth = $(window).width();
//get the difference in width
var widthDiff = winWidth - originalWinWidth;
//check if the window is larger or smaller than the original
if(widthDiff > 0)
{
//our window is larger than the original so increase font size
var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
//calculate the new font size
var newFontSize = originalFontSize + pixelsToIncrease;
//set new font size
$("#container").css("font-size", newFontSize);
}
else
{
//our window is smaller than the original so decrease font size
var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
//calculate the new font size
var newFontSize = originalFontSize - pixelsToDecrease;
//set the new font size
$("#container").css("font-size", newFontSize);
}
})
});
getOriginalFontSize = function()
{
var windowWidth = $(window).width();
var thisFontSize = windowWidth / 50;
return thisFontSize;
}
The html and css did not change from the previous post. Just a note that I used a simple algorithm for the getOriginalFontSize() method. Of course, any algorithm can be programmed in this method for determining what the original font-size is and how it is determined.
yeah, that’s right what I wanted
!!!
you’re a God
thank you sooooooo much !!
You’ve made my day mate
Cheers
i’m really trying to get this to work.
but to no avail. may i send you a link to the page i’m working on ?
This script is amaziiiiing !!
Thank you so much
it’s a “must have”
Hi,
I cant manage to get this to work as well as set a “originalFontSize” what I am trying to do is use this on two div tags, one larger and one smaller so I need to control the font size somehow, any suggestions?
Thanks
tht works fantastic.. but a small clarification… it might sound silly though… y cant we jus get the current width & divide it by 50 & assign the value to font size inside the $(window).resize(function().. jus lyk this….
$(document).ready(function()
{
$(window).resize(function()
{
//get the width as the window resizes
var winWidth = $(window).width();
//calculate font size
var newFontSize = winWidth/50;
//set new font size
$(“#container”).css(“font-size”, newFontSize);
})
});
will there b any difference (like performance ) ???? Pls reply..
This is awesome……..