Question

“monitor” is a box which shows enlarged text everytime mouse is hovered on a part of the page(web)

“+” and “-” are the two buttons which help me increase and decrease the box size,respectively.

The problem arises when text in the box overflows the box and makes my code look inefficient. Here is a sample for making the plus button increase box size(text size)
In simple words I just want to put some limit on this box so that its size gets a threshold value and a maximum value

$('div.monitor').animate({ 'fontSize': '+=10pt' }, 'fast'); return false; break;

Answer 1

I don’t like the logic of the other answer given by @Raminson. It says “if size of the font is less than 40px then increase the size by 10”. Then the size limit (the box container) could be a maximum of 49px (if initial condition is =39px). I would do something like this:

while ($('div.monitor').css('font-size') != "40px") {
    $('div.monitor').animate({ 'fontSize': '+=1px' }, 'fast');
}

this way, it increases 1 at the time and gets to the desired value = 40px.

You could even do:

while ($('div.monitor').css('font-size') != "40px") {
    $('div.monitor').css( 'fontSize', '+=1px');
}

and it would look like an animation