In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods.
Day 9: Resizing Text
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
Ibrahim
December 11th, 2008
Thanks Jeffrey
skalir
December 11th, 2008
Excellent tutorial series, has really helped me start with jquery code, I needed a good basis for understanding how it works, and this has helped alot, keep up the excellent work, thanks a bunch! ;).
P.S. I love the admin skins available on themeforest.
ferkho
December 11th, 2008
Thanks for these really great tutorials!
Steve Robillard
December 11th, 2008
Don’t mean to be picky but your method of getting the unit of measure doesn’t work for percentage values. It may have been better to get the number first, then the length of that , minus the length of the whole string from the back of the string. That sounds really complicated, but isn’t really.
sebastian
December 11th, 2008
nice one, thanks!
Patareco
December 11th, 2008
Nice! This series are getting better and better! Please continue!
BTW nice vid interface but where is the pause button?!
Seich
December 11th, 2008
Great as always, I wanted to know, is there a way to catch text selected on a text area using jquery? Maybe another way not involving detecting text selection? I am interested in making some sort of rich text editor using jquery.
@Patareco, click on the video to play/pause it :P, it took me a while to figure that out xD…
ne-design
December 11th, 2008
The tutorial keeps getting better and better. I would really like to know how to use cookie with jQuery.
Eduardo
December 11th, 2008
since we normally have more than 2 links on the page, I think it’s better to write somehthing like this:
$(function (){
var os = $(’p').css(’font-size’);
var num = parseFloat(os, 10);
var uom = os.slice(-2);
if(this.id == ’smaller’) { $(’p').css(’font-size’, num / 1.4 + uom); }
else
if(this.id == ‘larger’) { $(’p').css(’font-size’, num * 1.4 + uom); }
});
great tutorial!
I’m loving it!
chrissimpson
December 12th, 2008
@Jeffery - For users with Javascript turned off, they have displayed links that do nothing… to get around this could i use appendTo to write the links out by javascript.. that way non JS users dont see anything - right?
@Eduardo - Like Jeffery says, It’s less code and will work just fine as long as you are specific with what tag you’re targeting.
Rahul Joshi
December 12th, 2008
Nice tutorial series. Can you arrange some similar video tutorial series for advanced CSS concepts?
Also one very weird question, i’ve seen you practicing with different IDEs, each time you show a new tutorial, which one is the best according to you?
Bennie
December 12th, 2008
Great Tutorial, how come we don’t just set the font-size value to like increase by .1em every time? So basically setting the font-size to 1.1em on the first click and 1.2em on the second click and vice versa. Than you don’t have to worry about calculating the original size at all, it will be set in the CSS file, and jQuery will just increase that to 1.1em on the first click. Any suggestions on how to even type this up, or if it is even a better solution?
Andrew Turner
December 12th, 2008
Hey Jeffery,
I was wondering if you could show me how i could create a menu that fades background color when hovering over it, i’m hoping to use using a small amount of code, and to possibly pull these background color values from my CSS file.
I would appreciate it a lot.
Thanks
Steve Davis
December 13th, 2008
Another great tutorial. 1 thing… Instead of console.log why not just use an alert()? That would be faster than using the console and be much more obvious that you’d need to remove it from the code as you go.
Snookerman
December 13th, 2008
@chris
I though of the same thing. Unfortunately, items that are appended don’t seem to be recognized by the “rules”. For example, I used the appendTo rule with the list items like we learned a while back. I then tried to highlight the list items when clicked or hovered. That worked fine for the ones that were there from the beginning but the ones created by the function did not react. Could you please talk about that in your coming tutorials Jeff?
So: how do we make items that are added by functions, behave like the items that were already there?
Juarez P. A. Filho
December 13th, 2008
Wow… These series is AWESOME. I’m learning a lot. Soon I’ll try make screencasts in portuguese to share with my fellows.
I agree with @chrissimpson about use appendTo because non JS users don’t see anything useful.
@SteveDavis I think the alert is very obstructive because you always have to press the button “OK”, with console.log you just fire up Firebug and see the trace. And you put more then one sentence to log.
For example:
var os = $(’p').css(’font-size’);
console.log(os);
var num = parseFloat(os, 10);
console.log(num);
var uom = os.slice(-2);
console.log(uom);
It’s really nice! Try this great tutorial http://tinyurl.com/22nynu about Firebug console.
See you Folks.
Matthew Thornton
December 13th, 2008
By chance are you still going to be doing the screencast on debugging using Firebug?
Steph
December 13th, 2008
These tutorials are really good.
Thanks very much.
Jonathan Goldman
December 14th, 2008
Hi, great series for beginners (like me!). Maybe you can explain how to interact with forms and different css properties, and what are the limitations of jquery.
Forms are really a big problem, everybody knows, and we can fix this with little bit of javascript (I think).
Thanks!!!!
elvis
December 14th, 2008
Great to hear that you will continue to intermediate and higher tut. I guarantee that a lot of guys will come to see it.
I just love this website. Best tuts on jquery so far.
ferkho
December 14th, 2008
Dear Jeff,
can you please show us how to crop an image with jquery?
Like at gravatar.com or at the backend of wordpress.
I (maybe we
) would appreciate it a lot.
Thanks
rob
December 14th, 2008
Jeff:
I think the biggest takeaway from this tutorial wasn’t explicitly stated.
You make the default to divide by 1.4, then multiply by 1.4 if the link has an id of ‘larger’.
I would expect that the text would stay the same size if the size is first divided then multiplied by the same value. But this doesn’t happen - only the last change is applied.
This must mean that the CSS is not applied until the selector executes. In other words, the inner selectors $(’p') have no effect until the end of the $(’a'). Is that correct?
I have found these tutorials to be among the clearest I have ever seen. Keep up the great work and thank you.
Morten
December 14th, 2008
Great tutorials Jeffrey.
Any chance you could make some tutorials on some simple AJAX with jQuery?
Keep it up
jake
December 15th, 2008
great job mate!
TheSharpieOne
December 15th, 2008
Hi Jeffery,
Great tutorials I love them! Just wondering, it seems like you are using a different editor ever time which one is your favorite and what one did you use for this one because it looked really nice.
Jeffrey
December 15th, 2008
Yeah - it’s sort of a little project I’m doing.
The one I’m using in this video is called Aptana. Just Google it. It’s free.
I’d have to say that Visual Studio is still my favorite. Though for a Mac, it’s hard to beat Coda.
Michael
December 16th, 2008
@Rob
The reason the formulas work is that he is not “resetting” the original values he retrieved.
When he calls the second .css() function, he is calculating the new font size using the original size of the text, not the size that was just set in the first .css() function.
The only drawback to this method is that he is actually setting the font-size property twice.
Mike
Grant
December 17th, 2008
Thanks for this! Helping me so much! Keep it going!
-Grant
Thomas
December 18th, 2008
I think this code is little bit confusing for those who are begginers in programming langugages cuz you didn’t explain that even with the function to decrease the font size being fired, the function to increase will work as the decrease funtion don’t exist because both functions get the same value declared before the function are triggered ! I think i didnt’ explain very well since i don’t speak english good .
PS: Sorry if you DO have explained what i said in tutorial but i couldn’t listen since im not a good listener xD
The tutorial is awesome and keep doing these videos , they’re being a lot of help to me.
Great job !!!
Sam
December 18th, 2008
Jeffrey, really really awsome and well explained tuts. I think that i speak for everyone here saying that we appreciate a lot all the effort and time you´re having to publish this serie of tuts…
I can´t wait for the next one.
Sam from .pt
kailoon
December 22nd, 2008
Jeffrey, you rocks
AGDM
December 29th, 2008
Hi Jeffrey,
I appreciate the tuts. Looking for good video content is tough in my opinion.
This is getting me started pretty good in JQuery. Looking forward to more advanced stuff although I can tell that building more advanced knowledge on this foundation would be simple if you already have medium to great front & back end skills.
@Thomas The decrease works as a default because there is no test. Only when the link with the id of larger is clicked does that code fire.
To be clear, I was confused as to why both did not fire when #larger was clicked. But to verify I added this code and it worked nicely to show which link is clicked.
// figure out which element is triggered
var a_id = $(this).get(0);
console.log(a_id);
George
December 30th, 2008
These tutorials are really great.
Javascript was a really big dark area for me. This has made it much easier.
Thanks,
George
David P
January 3rd, 2009
Sorry to be a stickler, but in this video, the overall “function” call is never closed with a semi-colon before the “script” tag. Oops!
I enjoy the lessons. Even though I will probably never add this exact functionality, it’s nice to learn how to get variables from CSS and reset them.
Anoop D
January 4th, 2009
Great Series … as a beginner it is a really great help … Can you please let me know how this effect .. i think ’shake’ effect ..http://lonnroth.info/
Ado
January 10th, 2009
Found some bugs on this script,
OPERA -> when you continuous click, it seams you triggerd a right click, opera bug or script bug? idk.
IE 7 -> it works fine if you have no more elements on your page, this will be hard to explain, i have 2 divs inside a container, so when i reduce my text to much wich causes a change of my layout, i cannot make my text larger again, cause it wont work., it seams only when i had any change on my layout …
Can you add someway to limit the numbers of clicks or number of textsize, it suxs when the visitors can change my text indefinidtly, i think the goal of this script is to make your content good for those who had hard time to read., not to crash your layout.
my font-size is like .8 em .. i wanna change that with this script between .5 and 1.1em for instance, is this possible?
thankyou,
Steve Durr
January 10th, 2009
Great tutorials. Loving how easier they are to follow nd how well they are explained. Can you post back on how to have 2 css styles altered when clicking a link.
$(’p').css(’font-size’, num * 1.5 + uom);
How would you add another css style to be changed, i.e color
Cheers
Steve
Ado
January 11th, 2009
Now i saw.
the only issue is on the IE 7 .. make the text as much small as you can, then you cant make it larger again. try with your demo.
Any idea to fix that?
Andy
January 14th, 2009
Great Tutorials. Really helped me ALOT!!!
Any chance doing more advance stuff, like getting data from database using post method and cascading drop-down menus?
webtuto
January 20th, 2009
hey i saw the dedmo and i wonderedif i can do it before watching the video and i made this –>
CSS ->
p{
font-size: 20px;
}
JAVASCRIPT –>
$(function(){
var i = 10;
var s = 30;
$(’a').click(function(){
if(this.id == “small”) {
$(’p').css(’font-size’ , i+”px”);
i–;
}else{$(’p').css(’font-size’ , s+’px’);
s++;};
});
});
HTML –>
Note: The avatars shown next to comments are Gravatars. You can get a Gravatar account for free and any other site that supports it will show your avatar too!
TEXT Small
TEXT LARGE
and after i saw your video i see that u used another code a
and i waant to know if my code is good as urs thanks
srikalyan
January 24th, 2009
hi,
First of all thanks a lot for your tutorial and your tutorial is not only short but very informative and guys like me who really like to build everything from scratch really don’t like to use any off shelf tools as we have to do a lot of reading but this tutorial not only save a lot of time but also encourages to use it. And, I appreciate what ever your doing for the community.
thank you,
jake
February 5th, 2009
Awesome stuff!!! Just found out about these tuts. I’m just a beginner, so this is perfect. But I wanted to let you know #8 and #9 tut vids aren’t working. I’ve already learned #8 from css-tricks, but curious about #9. Anyway of alleviating?
Thanks!
-jake
Khaz
February 12th, 2009
Awesome tuts Jeff !
I’ve the same problems as Jake to read vids #8 & 9. I hope it could be solved in less time !
Once more thank you for your very interesting tutorials !
Khaz
arkader
February 14th, 2009
hi Jeff
link corrupted
can you fixe it please !
Hernan
February 16th, 2009
Hey does anybody record this tutorials can someone uploade number 8 and 9 ? please ?
thank you
Daryl Walker-Smith
February 17th, 2009
Shame - video broken on this day and Day 8 (not checked ones later than this yet)
Was really looking forward to this too..
Mauro
February 19th, 2009
@Michael you are right, i test it with this code:
$(function() {
$(’a').click(function() {
var os = $(’p').css(’font-size’);
var num = parseFloat(os, 10);
var uom = os.slice(-2);
console.log(”Before all:”+$(’p').css(’font-size’));
$(’p').css(’font-size’, num / 1.4 + uom);
console.log(”After division:”+$(’p').css(’font-size’));
if(this.id == ‘larger’) {
$(’p').css(’font-size’, num * 1.4 + uom);
console.log(”After multiply:”+$(’p').css(’font-size’));
}
});
});
if you click larger, the css is applied 2 times, but the second times (multiply) it use the value previously set by the click, not the value that changed after the division. So i think that the value is not applied to the css until the click function complete…
yinan
February 22nd, 2009
Hi there,
Thanks so much for the EXCELLENT tuts, i learned A LOT from it!!!
in the Day 8, you mentioned you was going to show some debugging tricks in Firebugs, but its not in Day 9 or 10, really looking forward to see it!!!
Thank you very much
Yinan
Andres
February 26th, 2009
What is the font-size is messure in % ? would this still work since you are getting the last 2 digits.
Is there way to get “whatever thats not a number” ?
Ryan
February 28th, 2009
I was wondering why you were able to place the line of code that reduced the text size before the if statement that checked the id of the anchor tag that was clicked. I thought the order made a difference.
Steve
March 6th, 2009
Thanks for doing these.
Reza
April 28th, 2009
Very helpfull.
Thanks
Dave
April 29th, 2009
Just wanted to add that parseFloat does not take more than 1 parameter.
So, parseFloat(x, 10) is the very same as parseFloat(x). The 10 will quite simply be ignored.
(Don’t confuse this with parseInt, which takes 1-2 parameters, where the 2nd parameter defaults to 10)
No need to mention that this screencast series is great
Adem
April 29th, 2009
Awasome..
Tony Sirois
May 1st, 2009
This is great! I have shared these videos with everyone I know who is interested in jQuery. So glad this site exists. Thanks!.
Codie
May 9th, 2009
Loving it*********************
charlie
May 15th, 2009
Great! Amazing!
My brain is getting bigger. Thanks for that.
Ahmed
May 15th, 2009
I love these videos. I have a question.
What about if I want to show the size of the existing shown font (whenever I click on Smaller or Larger) so i can see what is the font size. How i can do that???
Thanks…
ajl
June 24th, 2009
Great tuts! 10x
Sander
June 29th, 2009
tnx a lot, good starting point for beginners