#76: A Tour of jQuery on a Live Site

I'm busy, you're busy, we're all busy trying to meet deadlines and get things done in this crazy web world. I love learning new technologies when I can, but I'm the first to admit that I reach for tools that I already know well because I can be instantly productive that way. jQuery is one of those tools for me. In this screencast I walk through a website where I used jQuery all over the place in different capacities to get things done.

Links from Video:


  1. User Avatar
    Permalink to comment#

    Great screen cast man. I like the design as well!
    I like WordPress but if you go for an CMS, Drupal is the best.CCK and VIEWS ROCKS IN DRUPAL!

    • User Avatar
      Permalink to comment#

      I agree that Drupal is more dynamic and extensible, but I have to recognize that WordPress has a definite advantage in user interface. With many clients I find myself wishing I had gone with wordpress simply because it is easier for them to use and would save me time answering support questions.

    • User Avatar
      Permalink to comment#

      Or saving time developing some sites. Drupal would not be economical for some smaller sites.

    • User Avatar
      Permalink to comment#

      Depends on how you structure it, you can also setup the permissions for your clients so they don’t have to see things where they can ask many questions about.

    • User Avatar
      Permalink to comment#

      Drupal 7 will be the best cms – framework ever. I’m experimenting with the dev. version and wow… You must check the 7.

    • User Avatar
      Permalink to comment#

      If you are developing such site as one in Chris_es video than is defiantly Drupal a time saver!
      But for smaller site wordpress one to go with!

    • User Avatar
      Permalink to comment#

      To do this in WordPress ,you must be a heavyweight as Chris!Great JOB Chris!
      You are truly a defender of wordpress in all categories!

  2. User Avatar
    Permalink to comment#

    YES!!! you are such a legend. I decided i was gonna get my teeth in to jQuery about 2 days ago and have been learning the basics and then you go and drop a video tutorial about using jQuery in websites!!!

    you seem to have this mysterious way of making the most relevant and expertly timed posts and vidcasts and i know that i was keep congratulating you like a sychophant but i believe in giving credit where credit is due!

    I am at work right now so i haven’t seen the video so it could be utter bull$#it ;) but i had to thank you right now because you are so helpful. have a good weekend dude.

  3. User Avatar
    Permalink to comment#

    Very cool site chris!

    (Almost) All of it are stuff that I already knew, but awesomely done, and combined it all.

    I didn’t know that if you loaded link/stuff#container it will only ajax that container! Will solve many of my problems :P

  4. User Avatar
    Permalink to comment#

    Nice tutorial. It is good to see some ones else ways to use jQuery.

  5. User Avatar
    Hamza Oza
    Permalink to comment#

    You did it again. Superb.

  6. User Avatar
    Permalink to comment#

    Chris, you are best :) Thanks

  7. User Avatar
    Michael Short
    Permalink to comment#

    Hey Chris, Awesome screencast and amazing design. I am always amazed at the designs you come up with :)

  8. User Avatar
    Kris H
    Permalink to comment#

    Did you skip the design process and go straight to the jquery?

    It looks and feels like it was made 10 years ago with a diy website builder you get from your hosting company.

    And whats up with the new tab opening when you click on a product image? – very annoying !

    Sorry. It bugs me when a site is that annoying to use.

  9. User Avatar
    Permalink to comment#

    Hi Kris,

    Loved the screencast. You pointed out some nice ideas I would’ve never come up with. You’re screencast made me realize I have still a lot to learn about the possibilites jQuery has to offer.

    So thx for this screencast.

    P.S.: I was curious to see the website for myself and noticed there’s a small bug in it. The upper buttons (faq, contact, etc.) still link to the progress server on chatman design when you’re surfing in the store. In the wordpress part links are fine.

  10. User Avatar
    Permalink to comment#

    I have analized the page and i dont get one thing. On the WordPress side, You are downloading the shop part of the menu (You load the /shop/ page, get shop menu and put it to its place in current menu). And all that is in jQuery. But how do You load WordPress menu on the shop side? (As I see, it is already in source code)

  11. User Avatar
    Permalink to comment#

    I agree that the design looks a little dated, but I enjoyed hearing you explain how you tackled real world requirements with jquery


  12. User Avatar
    Benjamin Mayo
    Permalink to comment#

    Two quick notices.

    I think removing the Google branding is against the TOS.

    For the target=_blank, isn’t it easier to do NOT starting with http://www.example.com OR / ?

  13. User Avatar
    Permalink to comment#

    Nice Tutorial on jQuery Chris.

  14. User Avatar
    Permalink to comment#

    what! what! the best? what!

  15. User Avatar
    Permalink to comment#

    Thanks for the tour.

    Will you be doing anything on the site in general to make it more mobile friendly?
    :-D eirdre

  16. User Avatar
    Permalink to comment#

    joomla + virtuemart = 1 cms
    just run jquery in no conflict
    earnest tut, well done

  17. User Avatar
    Permalink to comment#

    I love when you allow us to see your work in real life. I mean, even when you do a demo page for us, it’s not like you sell out and make it boring, but when you do show us something real life it just feels a lot more interesting. I always feel like you are presenting a much more complete picture, and I love it.

    This was fantastic.

  18. User Avatar
    Permalink to comment#

    Thanks again,
    var myFirstDailyVisit = cssTrick.com;

  19. User Avatar
    Permalink to comment#

    Hi Chris nice screencast as always.

    Your clearly very skilled in web and this is quite an advanced site as a semi newbie how long would you say it took you to build your skill level up to build a site this good.

  20. User Avatar
    Permalink to comment#

    Hey Chris, thanks for the screencast, once again very interesting to see =)!

    I had a look at the code and asked myself how you plugged the lastTwitterMessage Plugin into the site, couldn’t find an init-script?! I found the element with id#status but I couldn’t find a script pointing to that…how did you do this=)?

  21. User Avatar
    Web Design Maidstone
    Permalink to comment#

    Very useful and informative, thank you!

  22. User Avatar
    Greg McAusland
    Permalink to comment#

    Hey Chris, slightly off topic but I noticed the lengths you went to in order to feature the cart solution for the store site of this site.

    Do you have any thoughts on say the wp-e-commerce plugin? Just been looking at it in depth today and it seems a pretty good solution.

    Was the cart choice made simply because you are familiar as you stated? Or are there parts of the wp-e plugin that you dislike, or think need work..

    cheers :)

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Mostly just familiarity. We have fairly complex needs for shipping, and I knew Pinnacle Cart could handle it. Shipping is always more complicated than you think it’s going to be, with clients throwing curveballs all over the place. It’s nice to have a cart where you can be flexible there.

    • User Avatar
      Permalink to comment#

      i’ve wondered about the “wp-e-commerce” plug-in myself… anyone used this before?

  23. User Avatar
    Permalink to comment#

    i watched it twice, the code you write is so neat, and i like the way you separated the js files.

    we (our entire team) really appreciate your time and effort, its just amazing.

    btw, i also used pinnacle cart, since i had some complex pricing.

    Also i heard you mention foxyCart, do you recommend using it in general eCommerce projects? or maybe megentoCart?

    Thanks again.

  24. User Avatar
    Permalink to comment#

    maybe its just me, love his vids nomally, buts he seems to bastardize two cms’s instead of opt’ing for rails or django and prefering php.

  25. User Avatar
    Permalink to comment#

    Very nice, i like it, but personally i have done projects with Joomla and then the client comes back and asks for an upgrade that i cannot accomplish, so what i did is taking CodeIgniter and made my own CMS, i improved it with time and all of the code inside is my own written, if something doesn’t work i can easily go and change it, cause i know where it is and just to point out, this is only my way of thinking, cause personally i don’t want to use any other CMS, maybe because i am just a control freak and like to know what is going on under the hood, but your videos just kind of make me start taking look at wordpress as an alternative for a smaller website, cause i like your approach to WP.
    Keep up the good work and thanks for sharing

  26. User Avatar
    Tom Rogers
    Permalink to comment#

    I loved this screencast. However, it seems as though a lot of important stuff (such as the menu) would not function correctly with javascript disabled because there would be no arrows and the menu from the CMS that the user wasn’t using wouldn’t be pulled in?

    Just interested.


  27. User Avatar
    Permalink to comment#

    Hey, you mention about some pinnacle cms that you used for e-commerce, could you give some info about it? some website, cause i’m really interested in what that is. Thanks :)

  28. User Avatar
    Alex Burrows
    Permalink to comment#

    Always love Chris’s screencasts, but it seems you must of spent ages implementing wordpress and pinnacle. I am a Drupal developer, and would of done the whole thing in Drupal, instead of mix and matching. Great screencast thought Chris!

  29. User Avatar
    Samuel Larsson
    Permalink to comment#

    You are so generous. Thank you! I´m just learning jQuery, checking out the tutorials on the www jquery site, and this was perfec. Have a nice weekend.

  30. User Avatar
    Permalink to comment#

    nice tutorial on jquery,thx a lot! but when I open this site with ie 6,it turns out a mess,could you fix it?

  31. User Avatar
    Permalink to comment#

    I thank you for this informative article. And I thank you for this I follow your vendors. It’s verry good. I wish you continued success.

  32. User Avatar
    Permalink to comment#

    Hello ! This example was interesting but I just noticed that on http://gailambrosius.com the menu is not workinng properly (used Opera, not tried with other navs)


  33. User Avatar
    Permalink to comment#

    Hey Chris,

    I thought you might be interested to know that you actually can do multiple background images, as I have on my new site here
    Pickture, the free, indie, photo upload website

    The two curly brackets are dynamic and positioned using CSS3.

    Love the blog :)


Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.