Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / How to use jQuery to dynamically resize text

Oct 31, 2010 By Jared Heinrichs Leave a Comment

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.

image

Let’s start looking at the code:

xhtml

image

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

image

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.

image

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.

image

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:

image

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

jQuery

image

  • 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

image

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

image

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

image

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) “

Filed Under: jQuery Tagged With: How To

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design