RSS Feed Feb 6 Text Resizing With jQuery
XHTML & CSS, jQueryEver wondered how to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how - using jQuery (a great JavaScript library).
CSS Font Size
Firstly, we should consider the various methods of specifying a font size using CSS. 4 CSS attributes pertaining to font sizing come to mind:
- Size in ‘pixels’
- Sixe in ‘points’
- Size in ‘em’
- Size as a percentage - ‘%’
For the purpose of this article, treat ‘em’ and ‘%’ as the same (where 1em is equivalent to 100%). When we allow visitors to change the font size, only elements with a font size set in ‘em’ or as a percentage will be variable. Elements without this attribute fall back to the value of their immediate parent element’s font-size. This means is that if you specify the value for an element’s font size in pixels, the font size will not change.
The JavaScript
$(document).ready(function(){ // Reset Font Size var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Increase Font Size $(".increaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $('html').css('font-size', newFontSize); return false; }); // Decrease Font Size $(".decreaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $('html').css('font-size', newFontSize); return false; }); });
Why not take a look at this simple demonstration page.
One limitation of this short script is that the visitor’s preference is not saved. We could overcome this limitation by storing the font-size to a cookie. Jonny and Fazal have cooked up some nice code that will do just this. View the comment.
<a href=index.php?i=1&m=1&u=http%3A%2F%2Fwww.shopdev.co.uk%2Fblog%2Ftext-resizing-with-jquery%2F%22http%3A%2F%2Fwww.mysite.com%2F%22%3Esome site</a> <blockquote>quote</blockquote> <em>some emphasized text</em> <strong>some bold text</strong> <pre lang="">some code</pre> To add code to your comments, simply wrap the code inside <pre> tags. Syntax highlighting will be added if you define the language. Example:
<pre lang="php">some code</pre>
Supported "lang" attribute values: html4strict, css, php, javascript, xml & mysql
Copyright © 2008, ShopDev
February 8, 2008
Quote
Hi,
nice tips.
February 13, 2008
Quote
Thanks for the guide. Really useful.
Please note that your blogging software did something bad with accents.. giving errors on copy and paste.
February 14, 2008
Quote
Thanks for the comments guys! I’ll look into the accent issue.
March 28, 2008
Quote
great..
how can I make sure visitor’s only click 5 times (Increase/Decrease)?
March 29, 2008
Quote
Hi Hariadi! You could set a condition around:
$(’html’).css(’font-size’, newFontSize);
For example:
if (newFontSize < 20) { $(’html’).css(’font-size’, newFontSize); }
March 30, 2008
Quote
Hi Homar! Great Code!
Make sure visitor’s only click 5 times..Be so?
$(document).ready(function(){ // Reset Font Size var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Increase Font Size $(".increaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; if (newFontSize < 20) { $('html').css('font-size', newFontSize); } return false; }); // Decrease Font Size $(".decreaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; if (newFontSize < 20) { $('html').css('font-size', newFontSize); } return false; }); });
March 30, 2008
Quote
Hi Cody!
The code you pasted will prevent the user from increasing the font size beyond 20px:
if (newFontSize < 20) { $('html').css('font-size', newFontSize); }
The number of clicks is determined by the limit defined (as above - i.e. 20px), the default font size (as defined in your CSS) and the incremental factor (which is 1.2 by default):
var newFontSize = currentFontSizeNum*1.2;
However, there seems to be a mistake in your code. In the decrease font size section, the condition should be something like:
if ( newFontSize > 8 ) { $('html').css('font-size', newFontSize); }
So that the entire code could be:
(document).ready(function(){ // Reset Font Size var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Increase Font Size $(".increaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; if ( newFontSize < 20 ) { $('html').css('font-size', newFontSize); } return false; }); // Decrease Font Size $(".decreaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; if ( newFontSize > 8 ) { $('html').css('font-size', newFontSize); } return false; }); });
March 31, 2008
Quote
Thanks all. It’s works!
March 31, 2008
Quote
I edit code above and I dunno how to do the trick ..
var originalFontSize = $('#dataEntry').css('font-size'); $(".fontSize").click(function(){ var fs = this.getAttribute("rel"); var currentFontSize = $('#dataEntry').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = null; if ( fs != 0 ) { newFontSize = currentFontSizeNum*fs; } else { newFontSize = originalFontSize; } if ( newFontSize < 20 ) { $('#dataEntry').css('font-size', newFontSize); } return false; });
HTML look like this
<a href="#" title="Increase font size" rel="nofollow">Increase</a> <a href="#" title="Reset" rel="nofollow">Reset</a> <a href="#" title="Decrease font size" rel="nofollow">Decrease</a>
March 31, 2008
Quote
sorry.. typo error..
var originalFontSize = $('#dataEntry').css('font-size'); $(".fontSize").click(function(){ var fs = this.getAttribute("rel"); var currentFontSize = $('#dataEntry').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = null; if ( fs != 0 ) { newFontSize = currentFontSizeNum*fs; } else { newFontSize = originalFontSize; } if ( newFontSize < 20 ) { $('#dataEntry').css('font-size', newFontSize); } return false; });
HTML look like this:
<a href="#" title="Increase font size" rel="nofollow">Increase</a> <a href="#" title="Reset" rel="nofollow">Reset</a> <a href="#" title="Decrease font size" rel="nofollow">Decrease</a>
April 1, 2008
Quote
Hi Hariadi!
There is no need. In the code, we execute the “Increase Font Size” action when any element with the class - “increaseFont” is selected.
So, to create a link to increase the font size:
<a href="#" class="increaseFont" alt="Increase Font" rel="nofollow">Increase Font</a>
The class to decrease the font size is - “decreaseFont”. Finally, the class to reset the font is - “resetFont”.
Using the code I posted for Cody, you will be able to limit the size that the font can be increased or decreased to. You simply need to define the class to some elements as I did in the example above with a simple text link.
April 2, 2008
Quote
Hi everyone,
Thanks for the tutorials by the way! lifesavers!
I combined this script and the helpful tutorial on cookies to come up with the following:
var myfunctions = { textresize : function(){ var $cookie_name = "textsize"; var originalFontSize = $("html").css("font-size"); if($.cookie($cookie_name)){ var $getSize = $.cookie($cookie_name); $("html").css({fontSize : $getSize + "px"}); } else{ $.cookie($cookie_name, originalFontSize); } $("#text-resize").bind("click",function(){ $("html").css("font-size", originalFontSize); $.cookie($cookie_name, originalFontSize); }); $("#text-larger").bind("click",function(){ var currentFontSize = $("html").css("font-size"); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; if (newFontSize 12) { $("html").css("font-size", newFontSize); $.cookie($cookie_name, newFontSize); } return false; }); } } $(document).ready(function(){ myfunctions.textresize(); })
enjoy!
April 4, 2008
Quote
Homar,
I found a bug in your script when checking against all browsers, spcifically IE 6. You were resetting the newFontSize variables wrong.
Instead of:
$("html").css("font-size", newFontSize);
it should be passed through in curly braces like so:
$("html").css({fontSize : newFontSize});
hope that helps!
April 4, 2008
Quote
great work! thanks
April 5, 2008
Quote
Many thanks Fazal!
I will check the script again and update the code a.s.a.p.
June 7, 2008
Quote
I was looking for a little nifty script to do this.
Thanks a lot Homar, Feel free to download my wp plugin…
Greets
July 1, 2008
Quote
Hi Fazal,
I find that your code produces an error in IE7 as the text size retrieved from the cookie is applied back with an extra “px” at the end of it. FF and most other browsers aren’t as strict abotu this and it works. Here’s my fix:
textresize : function() { // show text resizing links $(".textsize").show(); var $cookie_name = "textsize"; var originalFontSize = $("html").css("font-size"); if($.cookie($cookie_name)) { var $getSize = $.cookie($cookie_name); $("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")}); } else { $.cookie($cookie_name, originalFontSize); } // reset link $(".textsize-txt").bind("click", function() { $("html").css("font-size", originalFontSize); $.cookie($cookie_name, originalFontSize); }); // text "+" link $(".textsize-inc").bind("click", function() { var currentFontSize = $("html").css("font-size"); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; if (newFontSize 11) { $("html").css("font-size", newFontSize); $.cookie($cookie_name, newFontSize); } return false; }); }
July 3, 2008
Quote
I would like to see a working example of this script with the cookie function. Anyone done it?
July 3, 2008
Quote
Hi John! You can try the code kindly posted by Jonny. If you can’t get that to work, I’ll put together separate tutorial.
July 4, 2008
Quote
Here’s a working example of the jQuery text resize + cookie recall.
It uses the Cookie Plugin for jQuery.
Here’s an rar’d archive of the code
Homar, feel free to add it to your website.
July 4, 2008
Quote
Here’s the CSS:
html { font-size:1em; font-family:Arial, Helvetica, sans-serif; color:#999999; } body { background-color:#111111; } .pixels { font-size:16px; line-height:30px; margin-bottom:20px; padding:20px; background-color:#222222; } .point { font-size:12pt; line-height:30px; margin-bottom:20px; padding:20px; background-color:#222222; } .em { font-size:1em; margin-bottom:20px; padding:20px; background-color:#222222; } .percentage { font-size:100%; margin-bottom:20px; padding:20px; background-color:#222222; } .undefined { margin-bottom:20px; padding:20px; background-color:#222222; } .FontSize { display: none; /* hide from non-Javascript browsers */ position:absolute; top:10px; right:10px; background-color:#333333; padding:5px; } .FontSizeInc, .FontSizeDec, .FontSizeReset{ color:#CCCCCC; font-size:14px; float:left; margin:10px; }
Here’s the Javascript:
// // JQuery Text resize + Cookie recall // by Jonny Kamaly // based on script written by Faisal & Homar // var sitefunctions = { textresize : function(){ // show text resizing links $(".FontSize").show(); var $cookie_name = "sitename-FontSize"; var originalFontSize = $("html").css("font-size"); // if exists load saved value, otherwise store it if($.cookie($cookie_name)) { var $getSize = $.cookie($cookie_name); $("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")}); // IE fix for double "pxpx" error } else { $.cookie($cookie_name, originalFontSize); } // reset link $(".FontSizeReset").bind("click", function() { $("html").css("font-size", originalFontSize); $.cookie($cookie_name, originalFontSize); }); // text "+" link $(".FontSizeInc").bind("click", function() { var currentFontSize = $("html").css("font-size"); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; if (newFontSize 11) { $("html").css("font-size", newFontSize); $.cookie($cookie_name, newFontSize); } return false; }); } } $(document).ready(function(){ sitefunctions.textresize(); })
Finally, the HTML:
<a href="#" rel="nofollow">Increase</a> <a href="#" rel="nofollow">Decrease</a> <a href="#" rel="nofollow">Reset</a>
July 4, 2008
Quote
moderator can you please fix the previous comments it looks like I ****ed up a little bit
July 4, 2008
Quote
All done. Thanks Jonny!
July 8, 2008
Quote
This is perfect. I am relatively new to jQuery, so it was nice to learn about this. This technique really speeds up the whole process.
July 9, 2008
Quote
As a newbie to this stuff, would it be possible to add comments to the code explaining each line.
I am building pages with CSS
July 9, 2008
Quote
Hi Jim!
Could I suggest that you give the beginner’s guide a read: http://www.shopdev.co.uk/blog/.....ers-guide/
Reading over this article should help you understand the code. The only thing not explained in that article is the parseFloat function. This function basically reads a string (i.e. text) and outputs a float (i.e. a numeric value which does not have to be a whole number).
July 11, 2008
Quote
Great script. Very handy. I ran into one issue though, where it doesn’t work properly in IE 6 and below if those browsers go into quirks mode. Quirks mode can be caused by many things, but in my particular case, it was triggered by the xml delcaration above the doctype. See here for more info:
http://www.w3.org/Internationa.....-char-enc/
July 12, 2008
Quote
Thanks for the info!
July 17, 2008
Quote
I’m attempting to implement the original text re-size script.
If I increase too many times, my footer is over written (gets included with the main section of the page).
Any suggestions appreciated.
Thanks
Jim
July 17, 2008
Quote
Hi Jim!
My suggestion would be to restrict the font-size range. See the comments above for code that will do this.
July 29, 2008
Quote
thanks for the info!! very helpful
August 1, 2008
Quote
Jonny’s demo code (4th July 2008) is missing a few things:
if (newFontSize 11) {
Should say:
if (newFontSize, 11) {
Next, there should be a text-size decreaser. This should be like:
// text “+” link $(”.FontSizeInc”).bind(”click”, function() { var currentFontSize = $(”html”).css(”font-size”); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; if (newFontSize, 11) { $(”html”).css(”font-size”, newFontSize); $.cookie($cookie_name, newFontSize); } return false; }); $(”.FontSizeDec”).bind(”click”, function() { var currentFontSize = $(”html”).css(”font-size”); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; if (newFontSize, 11) { $(”html”).css(”font-size”, newFontSize); $.cookie($cookie_name, newFontSize); } return false; });
Finally, the HTML anchor links need classes on them: Increase should have a “FontSizeInc” class, Decrease should have the “FontSizeDec” class and the reset one have “FontSizeReset” Hopefully that helps anyone who’s tried to get this running and it didn’t work!
Maybe someone can update the code accordingly too? If not I can re-post it with the fixes if Jonny is cool with that.
August 1, 2008
Quote
Bah. Can someone sort out the formatting for me and delete the extra post?
August 1, 2008
Quote
Thanks Tetsuo! I have reformatted your original post.
August 8, 2008
Quote
Hi, I did post the code complete…? Anyhow, I’ve got a plugin made which’ll be on my site in a couple of days.
Peace
Jonny
August 18, 2008
Quote
nice code…
August 19, 2008
Quote
[…] Text Resizing With jQuery. A simple guide on allowing your visitors to increase or decrease font size on web pages. […]
August 27, 2008
Quote
Why does this not work?
$(”.add”).click(function(){
var currentFontSize = $(’#text p’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum+1;
$(’text p’).css(’font-size’, newFontSize);
return false;
});
August 27, 2008
Quote
Try:
$(".add").click(function(){ var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum+1+"px"; $('text p').css('font-size', newFontSize); return false;
Notice the “px” added to the end of newFontSize.
September 11, 2008
Quote
Why doesn’t this work in IE6/7? My font-size in my css is set to percentages.
$(document).ready(function(){ // Increase Font Size $(".increaseFont").click(function(){ var currentFontSize = $('#copy-Spec').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; if (newFontSize 8 ) { $('#copy-Spec').css('font-size', newFontSize); } return false; }); });
September 11, 2008
Quote
Hi Barry!
In the code you posted, there is no “< " (less than) sign in this line:
if (newFontSize 8 ) {
It should be:
if (newFontSize < 8 ) {
If, after you have made this change, it doesn’t work in IE…. Please try it in FireFox then post back.
September 11, 2008
Quote
My code doesn’t seem to post correctly.
September 11, 2008
Quote
Hi Barry!
Wordpress isn’t allowing visitors to post “pre” tags for some reason. Just post the code without the tags and I’ll then add them.
September 11, 2008
Quote
$(document).ready(function(){
// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’#copy-Spec’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
if (newFontSize 8 ) {
$(’#copy-Spec’).css(’font-size’, newFontSize);
}
return false;
});
});
September 11, 2008
Quote
So, do you have a < sign in the line:
if (newFontSize 8 ) {
September 11, 2008
Quote
It still isn’t posting all the code I paste.
The code that I have is taken from your response to Cody’s on March 30,2008.
“Hi Cody!
The code you pasted will prevent the user from increasing the font size beyond 20px:…”
September 11, 2008
Quote
Ok… No worries. I’ll sort out this problem later. Does it work in FireFox (or Safari, Opera etc.)? Also, please try the standard code (in the original post). If the original code does not work, I suspect that it’s something to do with your CSS.
September 11, 2008
Quote
OK. So it has to be the css, because when I use the original code and click to increase the font size in IE it make it really large. I must be missing a percentage in my CSS. Sorry for troubling you. Thanks for your help.
September 11, 2008
Quote
Homar. Might help if i had the font-size set to em’s and not percentages.
September 11, 2008
Quote
It shouldn’t make a difference.
September 12, 2008
Quote
Homar. I duplicated the demo page you have and added my code. I’m resizing issues after I increase the font and then decrease and then increase again. It doesn’t seem to enlarge back to the state when I click increase the first time. Test Page
September 12, 2008
Quote
Hi Barry!
I think that the problem is due to using a multiplier rather than an absolute valued increment/decrement. Using a multiplier results in an exponential change. Therefore, the actual increase/decrease in font size changes.
You can change the following line:
var newFontSize = currentFontSizeNum*1.2;
…to:
var newFontSize = currentFontSizeNum + 5;
Hence, increasing the font size by 5px. You should do the same for the decrement… Change:
var newFontSize = currentFontSizeNum*0.8;
…to:
var newFontSize = currentFontSizeNum - 5;
Hence, decreasing the font size by 5px.
September 12, 2008
Quote
Thanks! This is what was needed to resolve my issues with keeping the font sizing levels the same when you increase or decrease the font size.
September 13, 2008
Quote
You’re most welcome!
September 24, 2008
Quote
To avoid resizing issues just scale by -2 +2 and use 16(px) as the average size –>
$(document).ready(function(){ // Reset Font Size var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Increase Font Size $(".increaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 16); var newFontSize = currentFontSizeNum+2; if (newFontSize>12){ $('html').css('font-size', newFontSize); } return false; }); });
September 24, 2008
Quote
part 2:
// Decrease Font Size $(".decreaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 16); var newFontSize = currentFontSizeNum-2; if (newFontSize>12){ $('html').css('font-size', newFontSize); } return false; }); });
September 25, 2008
Quote
Hi Adam!
This was covered in my last message to Barry on September 12, 2008.
October 10, 2008
Quote
You are amazing! The code is small, fast.. and does the trick for all text elements. Actually just have two minor issues:
- Is it possible not to let the text that is responsible for resizing resize? I think if I use little images that could resolve the issue.. can I ?
- Can you please update the primary code? Cause I see more than a code snippet and to a JS n00b this is a disaster.. thanks anyway
October 22, 2008
Quote
Hi,
Everything is fine, As per my requirement, i have to use only this DOCTYPE , “”
without changing the new DOCTYPE “” i am not able to see the font increase & decrease effect.
I am using all font-size in percentage. All my CSS and some thing gone mess…
Please help me immediately.
October 22, 2008
Quote
Hi,
Everything is fine, As per my requirement, i have to use only this DOCTYPE , “!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””
Without changing the new DOCTYPE “!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd”” i am not able to see the font increase & decrease effect.
I am using all font-size in percentage. All my CSS and some thing gone mess…
Please help me immediately
October 22, 2008
Quote
Cheers for this supply, its very helpfull!
I was just wondering if there was a way to keep the font settings the same when you click on a link and go to next page as with this script the font returns to its original size when you go through to a next page.
Answer would be appreciated. Cheers
December 1, 2008
Quote
I got a problem with IE, but not with FireFox. Executing var currentFontSize = $(’html’).css(’font-size’);
would return “x-small” value, which will then cause parseFloat to return NaN because the input is not a number.
Btw, FireFox returns “10px”, which deems acceptable by parseFloat function.
The script seems to have not accounted for font absolute-size and relative-size values.
December 1, 2008
Quote
For a workaround, I insert
if (currentFontSize == “x-small”) currentFontSize = “13px”;
before parsing.
December 10, 2008
Quote
This is really cool!
I had a small issue in IE 6. The text didn’t wrap, so the text ran out of the div.
I have added the doctype:
It works fine now!
January 9, 2009
Quote
Hi:
I’ve sent a long comment with small changes to the code and extra stuff, but I don´t see it published here. You can see it more detailed at my blog JHMorales.es-blog, in spanish. (If you want a “funny” translation use better Yahoo babelfish. Google translator makes a ‘picasso’ like design with the code and page layout)
January 20, 2009
Quote
Hi again..
your code has been very usefull to me, I needed anything like this for some of my pages and this code is perfect. I’ve developed a jquery plugin with this and uploaded it as a project at fontReSizer.
Also I comment it (in spanish) in my blog fontresizerjs-nuevo-plugin-de-jquery. The file can be downloaded and is full explained and configurable.
Thanks all.
January 22, 2009
Quote
HI FOLKS!
I’m just a middle-aged teacher struggling with some HTML and CSS (enough for me) but I’ve been willing to implement an “increase-decrease” font script for my website, since my target audience varies a lot in age spectrum. However, I cannot make the above script work on the body of my page. I copied everything at the beginning of this page, read a few comments and nothing. There might be something basic that I am missing, since I am ignorant on javascripts, but I have used a few which seem to “call for” the script “onClick” or something similar, on the link, and I don’t see it here … Sorry for the ignorance …And thanks if you can help!
January 24, 2009
Quote
Hi,
I wonder why you don’t add font-unit after
‘font-size’, newFontSize
Can anyone tell me?
January 26, 2009
Quote
Hi folks,
For the font increase/decrease problem:
x * 1.2 = y
y * 0.8 != x
If you don’t want to stop using a multiple, then just do the following:
Increase:
x * 1.2
Decrease:
x / 1.2
January 30, 2009
Quote
on my site I want to do such a thing! are some problems. How can carry cookies with this script?
my code is:
$(document).ready(function(){ // Reset Font Size var originalFontSize = $('div').css('font-size'); $(".resetFont").click(function(){ $('div').css('font-size', originalFontSize); }); // Incrementa Font Size $(".increaseFont").click(function(){ var currentFontSize = $('div').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $('div').css('font-size', newFontSize); return false; }); // Decrementa Font Size $(".decreaseFont").click(function(){ var currentFontSize = $('div').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $('div').css('font-size', newFontSize); return false; }); });
February 2, 2009
Quote
This seems great but when i resize the fonts they get huge.
I have my fonts set to px in the css. Any way to have this resize px sized fonts?
I have tried using
$('.footer').append('<a href=index.php?i=1&m=1&u=http%3A%2F%2Fwww.shopdev.co.uk%2Fblog%2Ftext-resizing-with-jquery%2F%22%3B%22 rel="nofollow">Larger</a>'); $(".large").click(function(){ var currentFontSize = $('.Content p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 1); var newFontSize = currentFontSizeNum+1+"px"; $('.Content p').css('font-size', newFontSize); });
February 15, 2009
Quote
Cool! But I think there is a cooler way… when you click on the Increase or Decrease, the fontSize is animated
February 20, 2009
Quote
This is really cool, thank you
a questions,
i have default line-height
p{
line-height:17px;
}
how can i turn to line-height to normal
when i click to increase.
thanks a lot
March 3, 2009
Quote
Great script. I just had one question: when I resize it only resizes the div that it is in. Is it possible to specify others divs that I want resized as well? Thanks.
March 12, 2009
Quote
[…] Source: Text Resizing With jQuery […]
March 25, 2009
Quote
Great blog, I’ve been building web-sites for years, using nothing but ‘px’ to define my text sizes. I kept reading blogs about using ems instead, for usability etc issues and I never really got the point. The demo that you link to is THE EXAMPLE! A good trick that I do is to set my CSS Body font size to 62.5%. Then for other tages, 1.1em becomes the equivalent of 11px, 1.4em is 14px etc. Great way to switch over.
March 27, 2009
Quote
[…] ShopDev - Redimensionar un campo de texto en base a […]
March 30, 2009
Quote
Hi, I got this working, but I’d like it with the size limit and cookie. But I couldn’t get it working.
The text I want to change is in ”
#content {
font-size: 1em;
margin-left: 40px;
}
text_resize.js:
(document).ready(function(){
// Reset Font Size
var originalFontSize = $(’html’).css(’font-size’);
$(”.resetFont”).click(function(){
$(’html’).css(’font-size’, originalFontSize);
});
// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
if ( newFontSize 8 ) {
$(’html’).css(’font-size’, newFontSize);
}
return false;
});
});
This code is for the resize + limit, but I couldn’t even get the limit working so I haven’t started on the cookie-thing.
March 30, 2009
Quote
(Last post was a bit messed up)
Hi, I got this working, but I’d like it with the size limit and cookie. But I couldn’t get it working.
The text I want to change is in this div(id=”content”):
#content {
font-size: 1em;
margin-left: 40px;
}
Text_resize.js:
(document).ready(function(){
// Reset Font Size
var originalFontSize = $(’html’).css(’font-size’);
$(”.resetFont”).click(function(){
$(’html’).css(’font-size’, originalFontSize);
});
// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
if ( newFontSize 8 ) {
$(’html’).css(’font-size’, newFontSize);
}
return false;
});
});
This code is for the resize + limit, but I couldn’t even get the limit working so I haven’t started on the cookie-thing.
April 15, 2009
Quote
Great script, I tried it out and it works well. I’ll try doing some modifications though.
I would ask the same question as “Will” asked, “when I resize it only resizes the div that it is in. Is it possible to specify others divs that I want resized as well?”
Regards.
April 23, 2009
Quote
Great resource,Sounds interesting,thx for the useful Blog[….]
April 23, 2009
Quote
The script doesn’t work if the following line is in the style block/css file:
* { font-size:11px; }
…
May 22, 2009
Quote
thank you for sharing this information.
June 13, 2009
Quote
Hi, how do I make it so users can only click to increase or decrease the size once?
June 25, 2009
Quote
Great script - thanks for sharing.
June 26, 2009
Quote
@Nathan,
To only increase it by one, I simply removed the calculation of the current font site, and replaced the newFontSize variable with an integer:
$(”.FontSizeInc”).bind(”click”, function() {
var newFontSize = 19;
if (newFontSize, 11) {
$(”html”).css(”font-size”, newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
July 6, 2009
Quote
This Shazamatastic! article has been added to the list of High Quality tutorials at TutsKing.com
July 9, 2009
Quote
Great script.
Thanks for sharing.
July 24, 2009
Quote
Any chance we can get the final versions in their entire working order in one complete post? I’m not good at putting pieces together.
Thanks a million.
August 3, 2009
Quote
I would also really appreciate a complete version of this. Too many changes and additions in this thread
Maybe someone with a little experience can put it all together in a jQuery plugin and maintain it over at plugins.jquery.com?
Cheers
September 18, 2009
Quote
I noticed that IE goes haywire if you have html{font-size: 100%}. Do html{font-size:1em} instead.
November 24, 2009
Quote
Hi, I’m still new to web design, and I can’t quite get my head around JavaScript yet. So I have 2 questions:
First, is JQuery’s script free/open-source material? I’m assuming it is, but I wanted to make sure I don’t pirate someone else’s stuff.
Second, what about using font size attributes like “small, x-small, large, x-large, etc? Do they work with this script, or just the “em” and the percentage attributes?
Thanks, and take care.
December 9, 2009
Quote
Hi Your code awesome. But, When i tried using it .. it is changing just the master page fonts but not the actual page font.I want to place it on the master page and I want all the pages and partial views to change it font. Please help. I am using asp.net mvc (c#).
December 23, 2009
Quote
My Bad..Its working
January 4, 2010
Quote
My version of code. It works on all the Browsers ( Especially on IE6)
We can Increase and Decrease the font size up to 3 levels. And we can also reset to its original font.
Jquery Code:
$(document).ready(function(){
var increaseclicks = 0;
var decreaseclicks = 0;
var originalFontSize = $(’html’).css(’font-size’);
// Reset Font-Size.
$(”.resetFont”).click(function(){
$(’html’).css(’font-size’, originalFontSize);
increaseclicks = 0;
decreaseclicks = 0;
});
// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
// use styles for tags. {IE6 fix} (because tag font size do not change on IE6)
var newFontSize = currentFontSizeNum + 1;
if (increaseclicks < 3) {
$(’html’).css({’font-size’: newFontSize});
increaseclicks++;
decreaseclicks–;
}
return true;
});
// Decrease Font Size
$(”.decreaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum - 1;
if (decreaseclicks <3) {
// $(’html’).css(’font-size’, newFontSize); braces is an IE6 fix.
$(’html’).css({’font-size’: newFontSize});
decreaseclicks++;
increaseclicks–;
}
return false;
});
});
Just copy and paste the above code and see how it works..
January 4, 2010
Quote
line 18 is about H tag { H1, H2, so on}. Please do not confuse.
January 4, 2010
Quote
Link for PX to EM conversion.
http://pxtoem.com/
January 26, 2010
Quote
I haved the following jquery:
var sitefunctions = {
textresize : function(){
// show text resizing links
$(”.FontSize”).show();
var $cookie_name = “sitename-FontSize”;
var originalFontSize = $(”html”).css(”font-size”);
// if exists load saved value, otherwise store it
if($.cookie($cookie_name)) {
var $getSize = $.cookie($cookie_name);
$(”html”).css({fontSize : $getSize + ($getSize.indexOf(”px”)!=-1 ? “” : “px”)}); // IE fix for double “pxpx” error
} else {
$.cookie($cookie_name, originalFontSize);
}
// reset link
$(”.FontSizeReset”).bind(”click”, function() {
$(”html”).css(”font-size”, originalFontSize);
$.cookie($cookie_name, originalFontSize);
});
// text “+” link
$(”.FontSizeInc”).bind(”click”, function() {
var currentFontSize = $(”html”).css(”font-size”);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
if (newFontSize, 11) {
$(”html”).css(”font-size”, newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
}
}
$(document).ready(function(){
sitefunctions.textresize();
})
Which is fine on FF, but in IE if i refresh the page, the text is HUGE. Any ideas?
January 26, 2010
Quote
ignore the above, this is the code (also calling cookie js seperately)
var sitefunctions = {
textresize : function(){
// show text resizing links
$(”.FontSize”).show();
var $cookie_name = “sitename-FontSize”;
var originalFontSize = $(”html”).css(”font-size”);
// if exists load saved value, otherwise store it
if($.cookie($cookie_name)) {
var $getSize = $.cookie($cookie_name);
$(”html”).css({fontSize : $getSize + ($getSize.indexOf(”px”)!=-1 ? “” : “px”)}); // IE fix for double “pxpx” error
} else {
$.cookie($cookie_name, originalFontSize);
}
// reset link
$(”.FontSizeReset”).bind(”click”, function() {
$(”html”).css(”font-size”, originalFontSize);
$.cookie($cookie_name, originalFontSize);
});
// text “+” link
$(”.FontSizeInc”).bind(”click”, function() {
var currentFontSize = $(”html”).css(”font-size”);
var currentFontSizeNum = parseFloat(currentFontSize, 12);
var newFontSize = currentFontSizeNum*1.2;
if (newFontSize 14) {
$(”html”).css(”font-size”, newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
}
}
$(document).ready(function(){
sitefunctions.textresize();
})
February 7, 2010
Quote
Nice script. Thanks for sharing.
March 17, 2010
Quote
Is this possible to put into a function where it can be resized dynamically when the user resizes the browser window.
So Basically when the browser size reaches 1px by 1px the font is tiny and when the browser reaches a size of 800 x 600 is is larger in size but in proportion with everything else (that resizes as well).
Almost like flash resizing but for html.
Cheers,
George
May 14, 2010
Quote
your comment…
June 24, 2010
Quote
Great job with the original code. Very useful stuff! I really liked the other features that everybody else added on to it but it was getting messy trying to piece it all together. I went ahead and consolidated all of the features and also added settings variables to easily configure certain elements:
/* jQuery */
var $j = jQuery.noConflict();
$j(document).ready(function() {
/*
Text Resize (jQuery)
====================
Fixed: pt, px
Resized: em, %, inherit
*/
var intMultiplier = 2;
var intClickLimit = 3;
var bolRecallSize = true; //use: jquery.cookie.js
var intRecallDays = 365;
//——————
var intInc = 0;
var intDec = 0;
var intOrig = $j(’html’).css(’font-size’);
if (bolRecallSize) {
var strCook = ‘resize’;
var intCook = $j.cookie(strCook);
if (intCook) {
$j(’html’).css({fontSize : intCook + (intCook.indexOf(’px’)!= -1 ? ” : ‘px’)});
intInc = $j.cookie(strCook+’-i’);
intDec = $j.cookie(strCook+’-d’);
}
}
$j(’.resetFont’).click(function(){ resizeFont(’reset’) });
$j(’.increaseFont’).click(function(){ resizeFont(’increase’) });
$j(’.decreaseFont’).click(function(){ resizeFont(’decrease’) });
function resizeFont(strSize) {
var bolSave = false;
var strCurr = $j(’html’).css(’font-size’);
var intCurr = parseFloat(strCurr, 10);
var intSize = 0;
switch (strSize) {
case ‘increase’:
intSize = intCurr + intMultiplier;
if (intInc < intClickLimit) {
intInc++;
intDec–;
bolSave = true;
}
break;
case ‘decrease’:
intSize = intCurr - intMultiplier;
if (intDec < intClickLimit) {
intInc–;
intDec++;
bolSave = true;
}
break;
default:
intSize = intOrig;
intInc = 0;
intDec = 0;
bolSave = true;
break;
}
if (bolSave) {
$j(’html’).css({’font-size’: intSize});
if (bolRecallSize) {
$j.cookie(strCook, intSize, {expires: intRecallDays});
$j.cookie(strCook+’-i’, intInc, {expires: intRecallDays});
$j.cookie(strCook+’-d’, intDec, {expires: intRecallDays});
}
}
return false;
}
});
June 24, 2010
Quote
Formatting got messed up…here it is again (hopefully this time it’ll work):
/* jQuery */
var $j = jQuery.noConflict();
$j(document).ready(function() {
/*
Text Resize (jQuery)
====================
Fixed: pt, px
Resized: em, %, inherit
*/
var intMultiplier = 2;
var intClickLimit = 3;
var bolRecallSize = true; //use: jquery.cookie.js
var intRecallDays = 365;
//——————
var intInc = 0;
var intDec = 0;
var intOrig = $j(’html’).css(’font-size’);
if (bolRecallSize) {
var strCook = ‘resize’;
var intCook = $j.cookie(strCook);
if (intCook) {
$j(’html’).css({fontSize : intCook + (intCook.indexOf(’px’)!= -1 ? ” : ‘px’)});
intInc = $j.cookie(strCook+’-i’);
intDec = $j.cookie(strCook+’-d’);
}
}
$j(’.resetFont’).click(function(){ resizeFont(’reset’) });
$j(’.increaseFont’).click(function(){ resizeFont(’increase’) });
$j(’.decreaseFont’).click(function(){ resizeFont(’decrease’) });
function resizeFont(strSize) {
var bolSave = false;
var strCurr = $j(’html’).css(’font-size’);
var intCurr = parseFloat(strCurr, 10);
var intSize = 0;
switch (strSize) {
case ‘increase’:
intSize = intCurr + intMultiplier;
if (intInc < intClickLimit) {
intInc++;
intDec–;
bolSave = true;
}
break;
case ‘decrease’:
intSize = intCurr - intMultiplier;
if (intDec < intClickLimit) {
intInc–;
intDec++;
bolSave = true;
}
break;
default:
intSize = intOrig;
intInc = 0;
intDec = 0;
bolSave = true;
break;
}
if (bolSave) {
$j(’html’).css({’font-size’: intSize});
if (bolRecallSize) {
$j.cookie(strCook, intSize, {expires: intRecallDays});
$j.cookie(strCook+’-i’, intInc, {expires: intRecallDays});
$j.cookie(strCook+’-d’, intDec, {expires: intRecallDays});
}
}
return false;
}
});
July 20, 2010
Quote
Hallo,
nice job, i try to make that, but only work for one site, the other site i try to put, wich i copy all like a same, but the other don’t work?
Can you help me?
Regard
Wiyono
July 21, 2010
Quote
I took a shot combining Kalz’s and Jonny’s code to get a font resizer with cookies:
$.cookie(’the_cookie’); // get cookie
$.cookie(’the_cookie’, ‘the_value’); // set cookie
$.cookie(’the_cookie’, ‘the_value’, { expires: 7 }); // set cookie with an expiration
$.cookie(’the_cookie’, null); // delete cookie
$(document).ready(function(){
$(”.resizer”).show();
var $cookie_name = “FontSize”;
var originalFontSize = $(’html’).css(’font-size’);
// if exists load saved value, otherwise store it
if($.cookie($cookie_name)) {
var $getSize = $.cookie($cookie_name);
$(”html”).css({font-size : $getSize});
}
else {
$.cookie($cookie_name, originalFontSize);
}
var increaseclicks = 0;
var decreaseclicks = 0;
// Reset Font-Size.
$(”.resetFont”).click(function(){
$(’html’).css(’font-size’, originalFontSize);
$.cookie($cookie_name, originalFontSize);
increaseclicks = 0;
decreaseclicks = 0;
});
// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum + 1;
if (increaseclicks < 2) {
$(’html’).css({’font-size’: newFontSize});
increaseclicks++;
decreaseclicks–;
}
$.cookie($cookie_name, originalFontSize);
return true;
});
// Decrease Font Size
$(”.decreaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum - 1;
if (decreaseclicks <2) {
$(’html’).css({’font-size’: newFontSize});
decreaseclicks++;
increaseclicks–;
}
$.cookie($cookie_name, originalFontSize);
return false;
});
});
The font resizing works fine, but when I add the cookie code, the script stops working. Some help here?
July 21, 2010
Quote
thanx some great info
August 11, 2010
Quote
thanks, works well
August 18, 2010
Quote
Thank you @Homar and @Jonny for work with cookies..
September 1, 2010
Quote
Awesome! I wanna try that out in my web hopefully i can meake it work
Thanks for sharing.
September 17, 2010
Quote
Loved it! Never again I’m going to set font size in pixels, took me like an hour figuring out why my WP theme didn’t work with this plugin. One word “Global Settings” ah….
September 29, 2010
Quote
Great tutorial and great comments. I’ve put together a quick font toggle, but combined with the comments you can put together a really full featured font size toggle. Thanks.
October 23, 2010
Quote
Its not working for me
When i click on the ‘increase’ / ‘decrease’ links nothing happens. Can anyone help here?
December 14, 2010
Quote
pls help me guyz… i have a problem with this script, in my html page if i have different font sizes for say 3 different DIV and a P .. the script is confused which to increase and doesnt work… pls help me
February 25, 2011
Quote
Sorry, but this post is all over the place. The moderator/admin needs to really consider revising it so that it works as advertised.
Because there are so many errors in the javascript provided throughout the comments, its nearly impossible to compile it successfully.
Please, please, please consider republishing a working model.
Thanks!
March 7, 2011
Quote
Hey there! I’ve been using this for a bit now but have always been frustrated over the fact that the resizing isn’t consistent at all. If you go back and forth between increasing and decreasing size, you will see what I mean.
April 7, 2011
Quote
Remember to include jquery.js in your file. I just copied and pasted the code, didn’t edit the accent as was suggested, made the links and some test divs and it worked like a charm.
Reset Font
Increase Font
Decrease Font
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $(’html’).css(’font-size’);
$(”.resetFont”).click(function(){
$(’html’).css(’font-size’, originalFontSize);
});
// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(’html’).css(’font-size’, newFontSize);
return false;
});
// Decrease Font Size
$(”.decreaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(’html’).css(’font-size’, newFontSize);
return false;
});
});
DURP A HUR
HARK
It doesn’t get a lot uglier, but it works. Remember to include!
April 7, 2011
Quote
Apperently html4strict doesn’t work with pre? Damn it.
May 14, 2011
Quote
Hi, I tried the code listed above, but I do not know why it is not working.
Please take a look at http://www.cs.stir.ac.uk/~mpa/test.html
Any suggestion?
Thanks,
Madhu.
May 29, 2011
Quote
fantastic solution, totally working. thanks for the teaching!!
October 28, 2011
Quote
Text Resizing With jQuery » ShopDev Website Design Blog…
Thank you for submitting this cool story - Trackback from JavaPins…
December 22, 2011
Quote
Loved it! Never again I’m going to set font size in pixels, took me like an hour figuring out why my WP theme didn’t work with this plugin. One word “Global Settings” ah….
January 18, 2012
Quote
Great solution - needed the same for my html control in an adobe air app.
February 4, 2012
Quote
Thanks for the article.
As a side note I suggest to multiply by 1.25 when increasing the font size (which is the inverse of 1/0.8) to get “consistent” results.
February 6, 2012
Quote
thanks…!!
February 8, 2012
Quote
hi when we refresh the code is reseted?.. then what is the purpose reset button?
February 8, 2012
Quote
hi i need a code the content would be reset only by clicking reset option? if we refresh ,the code would not be resetted?is it possible?
February 28, 2012
Quote
The code doesn’t seem to work on any text inside a table created with html. Everything outside the table works fine…ug.
March 1, 2012
Quote
Does anybody have an example of this where it will automaticaly force the font type and font size vs allowing to slect it?
March 24, 2012
Quote
Hi,
I have a minor issue with the cookie recall.
If all pages are in the same folder, the resize carries through just fine.
However, navigating between root and subfolders does not work.
Any advice would be most appreciated.
This code is working great otherwise.
April 7, 2012
Quote
I have copied the entire source code and it still doesn’t work
April 11, 2012
Quote
Thanks a lot. Very useful. Currently working on a WordPress template and a Web App and needed to do a font increase/decrease.
I got it write except for setting back the font size using $(”selector”).css(”font-size”, newSize);
I was using newsize+”em” which gave me utter crap. It was so simple to use only newSize without specifying the unit
Thanks a lot,
Nicolas.
April 14, 2012
Quote
Hello there, You’ve done a fantastic job. I will certainly digg it and in my view suggest to my friends. I am confident they will be benefited from this web site.
April 26, 2012
Quote
Howdy are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding expertise to make your own blog? Any help would be really appreciated!
May 3, 2012
Quote
The criminal acts. Free farmville cash fits this specific dismal segment. Your realm comprehends the actual timber. The electron aspects free farmville cash along with the which means.
May 16, 2012
Quote
your comment…
Hé là! Savez-vous si ils font des plugins pour se protéger contre les pirates? Je suis un peu paranoïaque à propos de perdre tout ce que j’ai travaillé dur sur. Des conseils? Hey there! Savez-vous si ils font des plugins pour se protéger contre les pirates? Je suis un peu paranoïaque à propos de perdre tout ce que j’ai travaillé dur sur. Des conseils?
May 19, 2012
Quote
Great tutorial and great comments. I’ve put together a quick font toggle, but combined with the comments you can put together a really full featured font size toggle. Thanks.