CSS-Tricks

New Screencast: Intro to jQuery

*   May 29th, 2008   *

by: Chris Coyier

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.


Bookmark at Delicious Digg this! Stumble this! Submit to DesignFloat Submit to DZone

Responses


  1. Gravatar

    Niki Brown
    May 29, 2008
    [ permalink ]

    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!

  2. Gravatar

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

  3. Gravatar

    Keith
    May 29, 2008
    [ permalink ]

    The same thing as Daniel happens to me. No video from action #3, just audio.

  4. Gravatar

    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!

  5. 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.

  6. Gravatar

    Tobias
    May 29, 2008
    [ permalink ]

    what a great videocast!

  7. Gravatar

    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.

  8. 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.

  9. Gravatar

    Niki Brown
    May 29, 2008
    [ permalink ]

    Just finally watched it! makes jQuery seem way less intimidating! thanks again!

  10. Gravatar

    Donna
    May 29, 2008
    [ permalink ]

    Thanks for a great tutorial! You are great at explaining and your pace is perfect. I love this site!!

  11. Gravatar

    Adam
    May 29, 2008
    [ permalink ]

    Unfortunately the video isn’t working for me either :(

    Although what I saw was good, as usual.

  12. 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.

  13. Gravatar

    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?

  14. @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.

  15. Gravatar

    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

  16. Gravatar

    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

  17. Excellent intro to jquery! Thanks!

  18. Gravatar

    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!

  19. Gravatar

    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

  20. 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.

  21. Gravatar

    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.

  22. Gravatar

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

  23. Gravatar

    Yamaniac
    July 16, 2008
    [ permalink ]

    Great cast dude! You made life easier :) Thanks, and keep it coming!

  24. Gravatar

    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

  25. 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.

  26. Gravatar

    Chris Coyier
    July 21, 2008
    [ permalink ]

    @Daniel Matthews: Tutorial here.

  27. Gravatar

    Man Mohan Singh
    September 18, 2008
    [ permalink ]

    Thanks buddy…………Really Good Tutorials. Keep it up


Leave a Comment

Gravatar

Your Name
December 3, 2008