* May 29th, 2008 *
The popular javascript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do alone. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.
Niki Brown
May 29, 2008
[ permalink ]
Daniel
May 29, 2008
[ permalink ]
Great tutorial for beginners!
Since about two months I’m using jQuery for everything I can imagine!
But is it only happening to me: Video stops just when you start working on “action #3″ (audio is running - so I can hear everything) ??
Keith
May 29, 2008
[ permalink ]
The same thing as Daniel happens to me. No video from action #3, just audio.
Nate Maggio
May 29, 2008
[ permalink ]
I loved the video… I have been wanting to get into JQuery but didnt know when to start. I am looking forward to the next installment.
From the video I am wondering if you could provide more than one action per function? If so, you could easily make a “MooTools” script in 5 to 10 lines. Amazing stuff.
P.S. There is a weird glitch for me in the video around the time you guys are describing- but the audio & video keep working!
Chris Coyier
May 29, 2008
[ permalink ]
Hey ya’ll -
The deal with the glitch is, right when the video was first published to RSS, it was borked and the video stopped playing at the “action #3″ part. So, probably a good chunk of you got that download if you are auto-downloading them.
I have since fixed that and re-shot the last part, which I tacked onto the end, which is what caused that little glitch.
If you have the version where the video actually STOPS PLAYING, here is new direct download link.
Tobias
May 29, 2008
[ permalink ]
what a great videocast!
Nodster
May 29, 2008
[ permalink ]
Hey chris
the new direct link still doesn’t work for me. Only audio from the “action #3″ section.
Didn’t get the original from RSS but from the link on your articles page.
Chris Coyier
May 29, 2008
[ permalink ]
Maybe it’s some caching thing on your end?
If you go directly to the video page, it’s playing the updated video for me.
Niki Brown
May 29, 2008
[ permalink ]
Just finally watched it! makes jQuery seem way less intimidating! thanks again!
Donna
May 29, 2008
[ permalink ]
Thanks for a great tutorial! You are great at explaining and your pace is perfect. I love this site!!
Adam
May 29, 2008
[ permalink ]
Unfortunately the video isn’t working for me either 
Although what I saw was good, as usual.
Jens Grochtdreis
May 29, 2008
[ permalink ]
Couldn’t you provide the screencast for download or as a Flash-file? Offline I could view it via VLC portable. I really hate Quicktime on PC but I would like to view and recommend your screencast. As a Quicktime movie I wouldn’t either.
Markus
May 30, 2008
[ permalink ]
Hi Chris!
Once again a great video tutorial. To be *really* up to date: Include jQuery via Google: AJAX Libraries API 
Seems to be a nice service to me - are there any disadvantages?
Chris Coyier
May 30, 2008
[ permalink ]
@Markus: Seems like a good way to go 99% of the time, but there is always something off-putting about having vital code hosted outside of your own server, even if it is Google. If they ever have server trouble (who knows, this is a brand new thing they are offering), your code won’t load right.
Nodster
May 30, 2008
[ permalink ]
chris,
the podcast just auto downloaded onto itunes and it doesn’t work from the 3rd link onwards.
Also tried the direct link you gave after clearing my cache in both IE and ff and it still doesn’t go any further.
Any ideas (or better still another link)
ta muchly
Will
May 31, 2008
[ permalink ]
Hey Chris,
really good video, led on to me playing around with a couple of things with jquery. So I quickly whipped up this using animating sizes, LINK. I think it works quite nicely, but the only thing holding me back for using something like jquery for this - even though it makes it incredibly easy - is that you can easily mess it up by mousing over from one to another then to another too quickly and it having to complete all the animations before it starts the next one. So I was wondering if you knew, or if anyone on here knew, or even if there is such thing, as
IF animation == "not-finished" //where finished is if it has finished, obviously
$("div#top1").bind("mouseleave", function(){
*animate back to original*
)};
I hope this makes sense to you, if not i can give another example. Hope you can help!
Will
Patrick Sweeney
May 31, 2008
[ permalink ]
Excellent intro to jquery! Thanks!
jonathanforpresident
June 1, 2008
[ permalink ]
ive used jquery to the point of just copying and pasting examples. this tutorial opened my eyes to the syntax and usefulness, now I will try writing some ideas from scratch, thanks!
Will
June 1, 2008
[ permalink ]
Hey, for anyone who saw my earlier post, and had a similar problem. I have figured it out. What i wanted was if the mouse moved out before the animation finished it would automatically go back instead of finishing the animation then returning to its original state. So i’ve managed that with:
$("#menu li").mouseover(function(){
$(this).animate({width: "40%"});
$(this).siblings().animate({width: "23%"});
}).mouseout(function(){
$("li:animated").stop();
$("#menu li").animate({width: "29%"});
});
Which does exactly what i wanted it to.
Will
Chris Coyier
June 1, 2008
[ permalink ]
Great Will! I’m glad you got it sorted out. I was going to attempt to tackle it by setting a “currentlyAnimating” variable while it was doing its thing, and then turning it off at the end of the animation by using it’s built in callback function. More on the callback function.
Then before you start a new animation in the code, you can check first to see if there is already an existing animation going first.
Anne
June 2, 2008
[ permalink ]
I’ve been wondering what all the hoopla over jQuery was—thank you for the podcast! You’ve made jQuery seem reasonably easy to learn.
Justin
July 16, 2008
[ permalink ]
Hey Chris - great screencast. I knew jQuery was going to be the way to go for my App Engine project, but your video just tipped the balance. I had no idea Javascript could be so effortless.
In return, here’s a Textmate goodie you might not have known about:
Rather than copying the filename of your external .js and .css files into your html file, Textmate lets you drag the file from Finder onto the right spot in the document - it’ll then generate the correct script or link tag, with correct relative paths (even with ../s if for some reason you’re looking for parent directories).
Yamaniac
July 16, 2008
[ permalink ]
Great cast dude! You made life easier 
Thanks, and keep it coming!
Temeku
July 17, 2008
[ permalink ]
Great informative, easy to follow videocast on jQuery, Chris. I like what I see and will definitely be referring back to CSS-Tricks more often. Thanks.
-Eric
Daniel Matthews
July 21, 2008
[ permalink ]
Just watched this, it was fairly awesome.
I’m looking forward to learning how to pull in HTML from external sources, so i can build a kind of AJAXy type build, also, do you think you could show us how to do the iPhone style animation? where the entire page moves to the left? because i’d love to get to work coding an iPhone version of my site.
Chris Coyier
July 21, 2008
[ permalink ]
@Daniel Matthews: Tutorial here.
Man Mohan Singh
September 18, 2008
[ permalink ]
Thanks buddy…………Really Good Tutorials. Keep it up
Or... browse the archives.
Script & Style is a community driven feed of links and exclusive tutorials to help you grow as a designer and developer. Got a great link? Submit it now!
Loading ...
Sweet! Ive been trying to learn about jquery but have managed to stay away from it. This will help me out a lot! I love this website - thanks for providing such a great resource!