How to use jQuery to dynamically resize text

The concept for today: I want to use jQuery to allow me to dynamically increase or decrease the size of certain text items on the page. When I click “”Bigger” the text should get bigger. Likewise when I click smaller the text should get smaller.

Let’s start looking at the code:

xhtml

You can actually sponsor me in Movember by clicking here! If you can’t give that way 1/2 of all the proceeds I get from Ad clicks in November will go towards a donation to Movember. The other 1/2 goes to Micah’s school fund.

Let’s start off with slowly building up the jQuery code.

jQuery

This code should be fairly straight forward if you have read my previous jQuery articles.

• Line 2 – I created a variable. The variable is assigned the size of the font. ie. “#textResizer p”. “os” stands for “original” size.
• Line 3 – I output the value of “os” to the console. You can view the console using firebug in Firefox.

I’ve highlighted the text in blue to show you what is getting measured.

As you can see from the screenshot I can see that the value of “os” is 16px. Please make note that this is a string not an integer.

The next thing we need to do is get the size as well as the measurement of “os”. You might be thinking well we already have it don’t we? You’d be mostly correct unfortunately we have a string that respresents that info but we need to have two more variables that will contain only the size. (ie. “integer 16”) and size measurement type (ie “px”).

Let’s see how that would workout in code.

Let’s look at what’s new:

• Line 3 – Create a variable called fontSize and assign it the value that is returned from parseFloat. This is a little bit tricky to understand but I will try and explain it. ParseFloat (Which is actually a javascript function and NOT a jQuery Method) will try to return a base ten number. Since OS will always return number+unit this will always work! If you want to read up more on parseFloat click the link.Fontsize should be given the value of just “16”.

Let’s check the console to see if we were right:

Yup! Everything worked! Now how are we going to get the unit of measurement? There is a javascript function called slice.

jQuery

• line 4 – This piece of code is going run a function and return it’s value to variable we created call uom.
• It will work from the right side of the string. It will go two characters and slice off anything else. In our case it would return “px”.
• *Side Note* – If we used os.slice(1) instead of “os.slice(-2)” it would return “6px”. The reason for this is the function starts from the left. It slices one number and returns the rest. As you can see it works a little bit differently then using negative numbers.

Now that we have most of our main variables that we are going to need for this exercise let’s start off with working on getting the “larger” part working first.

jQuery

I’ve added a few more lines to the code. Line 2,6, and 7 are new pieces that I will explain.

• Line 2 – Using jQuery we select the anchor tag with the class of “bigger”. When it is clicked run these next commands.
• Line 6 – Let’s create a ratio that we want to increase or decrease the size of the font by.
• Line 7 – Let’s apply the new size dynamically to only paragraph tags in #textResizer. We will use the font-size CSS element and give it a unit. If “bigger” is clicked once it will be equal to: “21.6px”

Every time “bigger” gets clicked the <p> will get bigger by 1.2x’s!

Let’s work on “smaller” now. Before we start on that let’s look at the current code. The way it is setup we’d basically have to copy and paste it change “a.bigger” to “a.smaller” and “*” to “/”. What happens if we want to change things later? We’d have to make two changes. Another side effect of doing it that way means that around 5 or 6 more lines of code are needed. So how can we “re-use” some of the code from “bigger” without actually adding more bloat to the code? That’s what the next section will be about:

xhtml

We are going to need to go back to our xhtml code and add an id of “menu” to the <p> tag that surrounds the “bigger” and “smaller” links. We’re going to do this so we can make sure we are targeting the correct <a> tags on the page.

jQuery

Well we’ve made some changes to the jQuery code. let’s look at the changes and additions:

• Line 2 – Instead of checking to see if the class was clicked, we are just interested in if an anchor tag is clicked in the area called menu.
• Line 8 – I use both “this” and “.is”. This if statement checks to see if “this” (what ever was clicked) has the class of “bigger”.
• Line 9 – If the last statement was true increase the font size.
• Line 10 – If it wasn’t bigger it MUST be smaller that was clicked since there is only two anchor tags in the menu area.
• Line 11 – If it was smaller that was clicked then decrease the font size.

Just encase I wasn’t clear “is” returns a Boolean value. It is either YES or NO.

UPDATE – Check out  ” How to use jQuery to dynamically resize text (part 2) “