How to use jQuery to dynamically resize text (part 2)

After looking at my last tutorial ( how to use jQuery to dynamically resize text ) I thought how can we not only add new features, but how do we make the code even better? It came to me quite quickly. Let’s add a “reset” switch so that if someone wants to get this back to the original settings they can easily. Here’s how I want the page to act.

After looking at the code I shouldn’t have used <p> tags to contain the anchor tags. I decided a div tag made much more sense. Also since there is really only going to be one “bigger”, “smaller” and “reset” switch I should make them ID’s instead of classes. This will actually help to reduce the amount of code and should make things a little bit more readable. Let’s start with the xhtml.

xhtml

jQuery

While this might look similar to the last tutorial. Because we’re using ID’s instead of classes for “bigger”, “smaller” and “reset” now we can use “id”. Id can be used to check if an item has a certain ID. as you might remember from the last tutorial this is what it looked like to if an item has a certain class applied to it.

Doesn’t quite look as nice as hey?

I also added a new variable called osLoop. It replaced the old “os” variable from the last tutorial. I now created the os variable before anything get’s clicked. This is what the reset link will revert things back to.