Comments on: jQuery Tip: Quick and Easy Font Resizing

By: Smartness

Smartness — Sat, 16 Jan 2010 09:49:20 +0000

Two questions!

1. How about resetting the text to original size?

2. Adding more line-height when text gets larger.

By: How To Create Your First AJAX and PHP Contact Form | Dev Tips | Become a Better Developer, One Tip at a Time.

Mon, 02 Nov 2009 12:38:49 +0000

[...] jQuery is a Javascript library that allows you to easily do all kinds of cool things, such as quick and easy font resizing and [...]

By: forny

forny — Tue, 06 Oct 2009 08:19:35 +0000

hey… good tut… thanks for that useful information…

I have had a stupid problem, I don’t know why buttons (I replace standard buttons with background images) have like and dotted outline. I have seen and modified once and again CSS files putting outline:0 but nothing works, it is weird because the outline is only shown in Firefox… do you know how can I solve it??? thanks

By: Michal

Michal — Sun, 02 Aug 2009 19:05:07 +0000

Could we get this with cookies, the last font size gets stored so it will always display that way..

By: jQuery Tip: Quick and Easy Font Resizing | Dev Tips | Become a Better Developer, One Tip at a Time. | Squico

Sun, 07 Jun 2009 00:20:21 +0000

[...] In: JQuery plugins 7 Jun 2009 http://dev-tips.com/featured/jquery-tip-font-resizing-with-animation-effects Go to Source [...]

By: key

key — Thu, 04 Jun 2009 10:23:20 +0000

hello, fantastic script. after a little bit of coding I am sharing with you the "return to the normal" state and the maximum and minimum value. I am new to jquery so maybe it is not exactly the right code- but it works: $(function(){ $('a#sizeBig, a#sizeSmall, a#sizeNormal').click(function(){ var ourText = $('#content'); var currFontSize = ourText.css('fontSize'); var finalNum = parseFloat(currFontSize, 11); var stringEnding = currFontSize.slice(-2); if(this.className == 'sizeBig' ) { finalNum *= 1.2; if (finalNum >= 20) {finalNum = 20;} } if (this.className == 'sizeSmall' ){ finalNum /=1.2; if (finalNum <= 9) {finalNum = 9;} } else if(this.className == 'sizeNormal' ) { finalNum = 11; } ourText.css('fontSize', finalNum + stringEnding); return false; }); });

By: Moon

Moon — Fri, 22 May 2009 16:32:12 +0000

I tried moving the js into an external file and calling it to the head, doesn’t seem to work externally.

By: Drew Douglass

Drew Douglass — Fri, 01 May 2009 19:36:44 +0000

Your absolutely welcome Max, don’t mention it

I’ll check out your demo soon, looking forward to seeing it!

By: Max Black

Max Black — Fri, 01 May 2009 19:12:06 +0000

Drew, it works beautifully. You can see the results here, when I get the code added to all the pages and posted: Demo Page (listing of all demo pages in demo site) You've really gone over and above the call of duty. Thanks, man, I owe you one.

By: Drew Douglass

Drew Douglass — Fri, 01 May 2009 04:09:38 +0000

Hey Max,

No worries, take a look at the source code here and that should take care of it

Also, note how in the example we target only the anchor tags wrapped in a div with an id of font_change. This is because we need to return false but don’t want to affect any other links on the page.

Here you go:
http://dev-tips.com/demo/max.html