{"authorId":1,"title":{"title":{}},"slug":"simple-jquery-text-resizer","postDate":1251847543,"expiryDate":null,"enabled":1,"fields":{"2":"<p>I have done JavaScript text resizers a couple of different ways before, but I think I found my favorite way on a recent project. In previous projects, I have messed around with determining the current font size and adjusting it appropriately. But, in my opinion, simplifying things has made it a much better implementation.<\/p>\n<!--more-->\n\n<p>If you want to skip right to the <a href=\"http:\/\/trevordavis.net\/play\/jquery-text-resizer\/\">demo<\/a>, feel free.<\/p>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/jquery-text-resizer\/\" class=\"more-link\">View Demo<\/a><\/p>\n\n<h2>Disclaimer<\/h2>\n<p>Let me first say that I have started to size text in pixels and <a href=\"http:\/\/danielmall.com\/archives\/2007\/04\/20\/soft_serve.php\">soft serving<\/a> EMs to IE6. There are tons of different font sizing techniques you can use, but this is what is working for me. So use whatever technique you please, and adjust as needed.<\/p>\n\n<p>Another thing: <strong>I hate text resizers<\/strong>. In my opinion, there is no reason to duplicate browser functionality. I feel the same about back and print links, but sometimes the functionality is requested, so I have to build it.<\/p>\n\n<h2>Concept<\/h2>\n<p>The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.<\/p>\n\n<h2>Code<\/h2>\n<p>Let&rsquo;s first start as we always should, by creating the markup:<\/p>\n\n<div class=\"codeblock\"><code>\n&lt;ul&nbsp;class=\"resizer\"&gt;<br \/>&nbsp;&lt;li&nbsp;class=\"small\"&gt;&lt;a&nbsp;href=\"#\"&gt;A&lt;\/a&gt;&lt;\/li&gt;<br \/>&nbsp;&lt;li&nbsp;class=\"medium\"&gt;&lt;a&nbsp;href=\"#\"&gt;A&lt;\/a&gt;&lt;\/li&gt;<br \/>&nbsp;&lt;li&nbsp;class=\"large\"&gt;&lt;a&nbsp;href=\"#\"&gt;A&lt;\/a&gt;&lt;\/li&gt;<br \/>&lt;\/ul&gt;&nbsp;\n\n<\/code><\/div>\n\n<h3>jQuery<\/h3>\n<p>The markup was simple enough, so let&rsquo;s get started on the jQuery. First, we want to execute our code when the document is loaded, and then add an event when one of the resizer links are clicked:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('.resizer&nbsp;a').click(function()&nbsp;&#123;<br \/><br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Next, we want to get the class of the parent of the link that has been clicked, remove any of the resizer classes from the body, and add the new one:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('.resizer&nbsp;a').click(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr('class');<br \/>&nbsp;&nbsp;$('body').removeClass('small&nbsp;medium&nbsp;large').addClass(textSize);<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>We also don&rsquo;t want to regular action of the link to be followed, so we need to <strong>return false<\/strong>:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('.resizer&nbsp;a').click(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr('class');<br \/>&nbsp;&nbsp;$('body').removeClass('small&nbsp;medium&nbsp;large').addClass(textSize);<br \/>&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>I also think it is important to remember what text size a user has selected while browsing the site, so we will take advantage of the <a href=\"http:\/\/plugins.jquery.com\/project\/cookie\">jQuery Cookie plugin<\/a> to help us with that. We will set a cookie that denotes which size the user has selected:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('.resizer&nbsp;a').click(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr('class');<br \/>&nbsp;&nbsp;$('body').removeClass('small&nbsp;medium&nbsp;large').addClass(textSize);<br \/>&nbsp;&nbsp;$.cookie('TEXT_SIZE',textSize,&nbsp;&#123;&nbsp;path:&nbsp;'\/',&nbsp;expires:&nbsp;10000&nbsp;&#125;);<br \/>&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Finally, we just need to add a check to the beginning of the script, so that if that cookie is set, we add that size as a class to the body:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;if($.cookie('TEXT_SIZE'))&nbsp;&#123;<br \/>&nbsp;&nbsp;$('body').addClass($.cookie('TEXT_SIZE'));&nbsp;<br \/>&nbsp;&#125;<br \/>&nbsp;$('.resizer&nbsp;a').click(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr('class');<br \/>&nbsp;&nbsp;$('body').removeClass('small&nbsp;medium&nbsp;large').addClass(textSize);<br \/>&nbsp;&nbsp;$.cookie('TEXT_SIZE',textSize,&nbsp;&#123;&nbsp;path:&nbsp;'\/',&nbsp;expires:&nbsp;10000&nbsp;&#125;);<br \/>&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<h3>CSS<\/h3>\n<p> Now is where we get to the really powerful part of doing the text resizing like this: the CSS. We can start by simply stating our text size when it is in the small\/default state:<\/p>\n\n<div class=\"codeblock\"><code>\nbody&nbsp;&#123;&nbsp;font:&nbsp;12px\/18px&nbsp;Arial,&nbsp;sans-serif;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>Then, we just need to make a simple adjustment for the medium and large sizes:<\/p>\n\n<div class=\"codeblock\"><code>\n.medium&nbsp;&#123;&nbsp;font-size:&nbsp;16px;&nbsp;line-height:&nbsp;22px;&nbsp;&#125;<br \/>.large&nbsp;&#123;&nbsp;font-size:&nbsp;20px;&nbsp;line-height:&nbsp;26px;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>So you can just carry through this idea for the rest of the elements that have been assigned a font size:<\/p>\n\n<div class=\"codeblock\"><code>\nh1&nbsp;&#123;&nbsp;font-size:&nbsp;30px;&nbsp;line-height:&nbsp;36px;&nbsp;&#125;<br \/>.medium&nbsp;h1&nbsp;&#123;&nbsp;font-size:&nbsp;34px;&nbsp;line-height:&nbsp;40px;&nbsp;&#125;<br \/>.large&nbsp;h1&nbsp;&#123;&nbsp;font-size:&nbsp;38px;&nbsp;line-height:&nbsp;44px;&nbsp;&#125;<br \/>h2&nbsp;&#123;&nbsp;font-size:&nbsp;24px;&nbsp;line-height:&nbsp;30px;&nbsp;&#125;<br \/>.medium&nbsp;h2&nbsp;&#123;&nbsp;font-size:&nbsp;28px;&nbsp;line-height:&nbsp;34px;&nbsp;&#125;<br \/>.large&nbsp;h2&nbsp;&#123;&nbsp;font-size:&nbsp;32px;&nbsp;line-height:&nbsp;38px;&nbsp;&#125;<br \/>h3&nbsp;&#123;&nbsp;font-size:&nbsp;18px;&nbsp;line-height:&nbsp;24px;&nbsp;&#125;<br \/>.medium&nbsp;h3&nbsp;&#123;&nbsp;font-size:&nbsp;22px;&nbsp;line-height:&nbsp;28px;&nbsp;&#125;<br \/>.large&nbsp;h3&nbsp;&#123;&nbsp;font-size:&nbsp;26px;&nbsp;line-height:&nbsp;32px;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/jquery-text-resizer\/\" class=\"more-link\">View Demo<\/a><\/p>\n\n<p>The idea is very simple, and it really separates the presentation and behavioral layers. So what do you think? Do you have another technique that you like?<\/p>","4":{"website":{}}}}