jQuery for Absolute Beginners: Day 15 – Part 2

In Part 1 of day fifteen, we worked on setting up the PHP side of a CSS style-switcher. Today, we’re going to take things one step further and implement some AJAX functionality. Coming in at just under thirty minutes, this final video in the series is the most in depth. As an unintended “bonus”, I had to take a couple of minutes to fix some mistakes that I made. I could just as easily have edited this section out; however, I think it’s important to watch how other developers debug their application. Considering that, I kept it in.

Once again, thanks to James Padolsey for his wonderful tutorial that we’re working off.

Download the Source Code

Day 15: Building a jQuery Style-Switcher: Part 2

Download the Source Code

Thank you…thank you for sticking around to watch the full fifteen days. It’s been my pleasure. :)


  • Gavin says:

    Hey Jeffrey I just watched your PSD to HTML tutorial (The latest) over on NETTUTS.

    I was wondering if you might show how to create a sliding featured section for that site, could tie in the two screencasts?

    If anyone know os any sites that already have a tutorial on how to achve this then please let me know.


  • Pavlov says:

    It is indeed a helpful series of video tutorials. Web dev is my hobby and you guys make it so much fun learning new stuff!

  • Ying says:

    I can’t watch the whole tutorial for day-15 part 2.

  • Dark Random says:

    Man, thanks so much. That video series was so awesome. And, huh, an observation: I meet that blog by that video series and I don’t know how can I don’t meet before. The whole blog is great.

    Anyway, +1 RSS reader.

  • lilliana says:


    I can’t tell you how thankful I am for this series. I’m finally beginning to understand jQuery. I’m hooked. I really can’t believe all the amazing stuff you can do with it. You have no idea how much this is going to help me build my portfolio.

    Now, I have a question: would you consider doing another series for Ajax? And maybe, I don’t know, script.aculo.us? I’d love to learn about these topics, but I can’t find a tutorial that’s as well explained as this one.



  • C.W.Zachary says:

    Excellent series. I wish it went further.

  • D. HEmalatha says:

    Hi dude

    A great boost for my initial jquery support, hats off! :)

  • billybee says:

    THis may not be in the right section. I think the only way to solve this is with jquery. Could be done in css too but I don’t think so.

    I am converting design over to wordpress. In the sidebar which is widgetized ( everything is dynamic unordered list and list items) How do I insert an image ( a jpg of a line) under each widget title. eg. like this:

    Recent Posts
    ——————————— this is the image line1.jpg

    ———————————- this is the image line2.jpg

    I tried to postion the image (line.jpg) absolutely with css but that does not work depending on how many entires the wiget has it will overlap the text. anyone with some ideas how to solve this…

  • yaip says:

    Thank you…thank you…thank you…thank you.

  • Rocky says:

    i just wanna say that THANK YOU SO MUCH………
    your series is absolutely great

  • Nori Silverrage says:

    This video series is awesome! I just wish there was more (please!). Thanks!

  • P R says:

    Thank you VERY much Jeffrey for this tutorial. Could you say when and where we can read your PHP tutorial?

  • jonobr1 says:

    Great series. I was wondering if there was any particular reason why every time you call fadeIn(); you wrap the milliseconds with single quotes and when you call fadeOut(); you leave them as integers. I looked on the jquery documentation and they seem to be the same. Does it help you distinguish in your editor whether your fading in or fading out?

  • kayvan says:

    I’ve seen all your tut videos, and I have to say, I’m learning something, finally!

  • kayvan says:

    thanks for the tuts. they’re great.
    I have to question. How can I use SSL in these codings? I thought, since with ajax the page (new user register page for example) won’t reload, it’s secure enough, and we don’t need to use SSL. is this right?