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.
Day 15: Building a jQuery Style-Switcher: Part 2
Thank you…thank you for sticking around to watch the full fifteen days. It’s been my pleasure. 
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
Jess
January 6th, 2009
Thank you for all the tutorials. Ive watch everything from day 1 of the JQuerry video and I enjoyed every single one of them. Looking for more JQuerry!..
Fawaz
January 6th, 2009
This is great… keep it up!
alex
January 6th, 2009
Great stuff as usual. You have a real gift for teaching.
I am a designer who is slowly becoming a developer thanks to people like you. That’s right, because of great tuts like yours I am slowly getting interested in more difficult languages like PHP (difficult compared to HTML).
You had mentioned that you will be doing some PHP tuts. May I request that you do some simple contact form? From the little I saw it seems hides your email from spammers is really difficult. Could you maybe deal with this problem in a future PHP tutorial?
Thanks!!!
Jeffrey
January 6th, 2009
@Alex - Oh absolutely.
Jeffrey
January 6th, 2009
I’m bummed to see these come to an end but im hoping you create a screen cast series for jquery for absolute intermediate beginners :). Because of your amazing tutorials i get jquery i’ve recently purchased a couple jquery books to go more in depth. thank you.
I can’t wait for your php series as well.
Snookerman
January 6th, 2009
Wow, can’t believe it’s over, thank you so much Jeff!! I’m really hoping you will do a series for intermediate jQuery coders like I believe you promised/mentioned a while back. Again, thank you soo much, you have change my coding behaviors!
michael Espinosa
January 6th, 2009
Thanks Jeffrey great series! Keep them coming.
sebastian
January 6th, 2009
Thanks for all the tuts,
i’ve learned a lot!
liam
January 6th, 2009
im loving it!
im no coder, i normally get lost right after the opening of a tag (”,)
but these tutorials are great.
video tuts simply work better than any other medium. period!
John Mantas
January 6th, 2009
Thanks a lot, I’ve watched all 15 days, whilst I’m not an absolute beginner (or absolute designer for that matter :), it’s still good to watch these to get some ideas/see how others do it.
jQuery is so beautiful, It’s makes javascript simple.
Looking forward to the PHP screencasts!
Code_Bleu
January 6th, 2009
Nice series! Will the PHP one actually be called For Absolute “Designers”? Wasnt sure if you meant to say that or not. If so, I’m wondering if in your screencast you refer to them as For Absolute “Beginners”?
Bryan Kwon
January 6th, 2009
Thanks tons for the tutorial,
I have been self-teaching PHP and JavaScript, and all your articles(including this series, of course) really help me fast and efficiently. And not I can’t wait for the PHP tuts. : )
Bryan Kwon
January 6th, 2009
sorry for the typos above..
but I think you will get it correct,
cheers,
Rashad
January 6th, 2009
Hello Jeff,
Thank you very much for those amazing tutorials.
I just spotted what I think it’s a bug in the test for loaded css, because the div #test is always there with width = 2 even while loading the other CSS since the previous one already includes the style for #test, so i think to solve this you need to create a unique test style for each css file or you may want to remove the current css before loading the new one.
looking forward for PHP tuts
sunx
January 6th, 2009
Thank you man. This has really been helpful. Thanks for your time and effort.
The Sharpie One
January 6th, 2009
Great series looking forward to the PHP one and maybe some more jQuery with more advanced functions.
Kevin
January 6th, 2009
thank you so much for the series
it is defiantly help full to us beginners
Sass
January 6th, 2009
Thanks Jeff for this great series.
It will be great, if we can expect another 15 parts for advance jQuery in the future.
But anyway, looking forward for PHP series.
Sass
Sindre
January 7th, 2009
Awsome job, hopefully you do 15 days of php, then 15 days of ajax and then you start 15 days of those elements combined.
Anoop D
January 7th, 2009
Great Series …..!!!
Hoping for more advanced ones ..:)
Just a doubt … there are lot of frameworks … but think Mootools and Jquery are the leading competitors … I went through http://helldesign.net is it possible to acquire such an effect using Jquery?
Daniel
January 7th, 2009
Thank you so much for these tutorials Jeff! I’ve watched every single one of them and i’ve learned an awful lot
looking forward to the PHP series!
Jeffrey
January 7th, 2009
No - it won’t be called “PHP for Absolute Designers”.
In the screencast, I added a little text blurp making fun of myself.
I haven’t decided what the title will be yet.
John Benson
January 7th, 2009
I’m really glad that you got into ajax with jQuery Its so much easier this way
I’m also hoping that you will do a series for intermediate coders that will go over event binding, event delegation or listen insted of using livequery which works well for most things but can slow a page down>
Thanks again Jeff
by far the best jQuery Tutorials Ive seen so far
Brenelz
January 7th, 2009
Yeah. A PHP Tuts series would be excellent. Personally I would prefer more advanced PHP tutorials as I have the basics down pretty good.
I enjoy all of Jeffery’s tutorials, so I don’t think it will be a problem.
-Brenelz
http://blog.brenelz.com
Pimmetje
January 8th, 2009
Hee Jeffrey,
I wanted to say THANK YOU for the very nice serie you made. I learned JQuery in i guess 10 days. I already be able the write PHP but still ill will watch them and maybe learn something form it.
Ill hope you will use the first tutorial to do the Hello world part. I always enjoy it that most tutorial writes do it.
And maybe it’s nice to refer to the API. Ill found the jquery one myself but ill think it can be a bit help for some people who do not now it exists (for some people maybe also overkill). And i think it’s important for the php part because there is a lot useful information in there.
And to be clear ill love the series. Keep up the good work.
Web010
January 8th, 2009
Great 15-day tutorial. I watched them all in a row last night
I didn’t know nothing about jquery yesterday and today i am a jquery begginer :). Great tutorials, perfectly explained.
Dan
January 8th, 2009
This has been an awesome series. I’ve found the information easier to absorb with the screencasts.
Looking very forward to the PHP series!
Thanks again Jeff!
sumit
January 8th, 2009
can you mirror the video on blip.tv
5antom
January 9th, 2009
Hi Jeffrey,
thanks once again for saving the day. Anyone know how to do this in jquerry, would love the break down of it.
http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/
ilias
January 9th, 2009
Thanks for these awesome series. Too bad they had to end..
Looking forward to the PHP-series!
ilias
January 9th, 2009
Btw is it gonna be raw php or rather a framework again?
yassir
January 10th, 2009
first thanks great series !
i ve already done lot of asp.net and now looking forward to the php ones
thx and keep it up !
Ally
January 10th, 2009
Hi Jeff,
The 15 days of jQuery have been great! I have been playing with jQuery over the past few months in hopes to learn it better but wasn’t having any luck. The tutorials have helped me to get over that hurdle.
If at all possible, I would love to see more on jQuery as I am sure would others. Looking forward to your PHP tutorials…
Pimmetje
January 11th, 2009
@ilias
My guess is normal php. Because if you want to use a php framework you first need to know a bit of php. But still i would like to see a framework part because i never used one
Sorry for my bad English
jeff
January 12th, 2009
one more time - just wanted to say thanks - these have been great
Yosy
January 13th, 2009
Thank you Jeffrey for all this tutorials !!!
There were awesome !
Sean
January 13th, 2009
Is there a Table of Contents post somewhere with links to all chapters? How about adding comment reply notifications to this blog - I never seem to remember to check back and see if there are new comments.
Matt Fletcher
January 20th, 2009
Hi there, thanks for an awesome set of tutorials. Is there any way we can download every video in one fell swoop. These would make a brilliant reference to come back to offline.
Daniel A.M.
January 20th, 2009
Good evening Jeffrey!
I enjoyed your tutorials a lot, but I don’t know if it’s because I have little knowledge in JS, or maybe because I’m a brazilian guy that sometimes can’t understand some words spoken. I didn’t understand this kind of variable declaration below:
var verify_loaded_css = {
init: function() {
$(”).appendTo(’body’);
},
check: function(runCallback) {
if($(’#test’).width == 2) runCallback()
else setTimeout(function() {
verify_loaded_css.check(runCallback)}, 300);
}
}
verify_loaded_css.init();
Is it like JSON or something like that? Or it’s a class, with methods? If it’s not easy to explain, could you tell me where could I learn, or read about it?
Thanks a lot for this grate job!! One of the best I’ve ever seen….
Daniel A.M.
Vasko
January 21st, 2009
Great job Jeffrey! I must say though, that the mistakes you make with the parentheses are because you don’t use an IDE that will autocomplete your parentheses. Also, I’d advise that you indent your code properly *while* you are coding, instead of afterwards, which can be a substitution for an IDE’s autocompletion of the parentheses.
Keep up the good work!
Chris
January 21st, 2009
Great job! Thanks for the tutorials and I’ll look forward to future screencasts.
Daniel A.M.
January 21st, 2009
Hey… Jeffrey…. I found it!! And I understood it now!!
It’s really JSON. Thank you once again!!!
Before I forget.. I’m sorry for some miswriting, in the message above!!
Congratulations for your job!!! It’s great!!!
Daniel A.M.
qq
January 31st, 2009
day 15 is the end? will have any update in future?
xav
February 8th, 2009
Hi guys. Jeffrey, you did a great work here. Your examples really helped me to create the website for my students group and I have to tell you it will be my first website. I was using jquery and it works perfectly locally, but after I upload the website on the serwer, most of jquery functions doesn’t work. Do you have any clue what may be the reason of this behaviour?? Any clues may help, cause otherwise I will have to rebuild the website and give up on some options.
Richard Tape
February 13th, 2009
Jeffrey, I just wanted to say thank you very much for putting this series together, it’s by far and away the best set of tutorials for anyone who wishes to learn jQuery. I have watched the 13 out of 15 that are currently available (shame about those lost 2) and I genuinely appreciate the time, effort and dedication you’ve put into these.
Tsalagi
March 1st, 2009
Hey Jeff. Thanks for the time you spend on this series and others. Sorry for this question if it is not related but I am very confused with different syntax usage between different languages. Is this what is referred to as the API? I can think of what I want an applicatoin to do but to apply it with a specific language gets all mixed up. To be more specific I can take someone’s code, break it down and make it do what I want it to do. However, I am having trouble creating on the fly. Meaning I don’t know where to place braces, brackets functions and all that. Is there some technique or study method I can apply to help me create from scratch? It makes me feel stupid that I don’t all of the syntax off the top. I’m speaking of scripting languages as I already know the xhtml and css. Thanks for any pointers you can give to really break down a language and apply it to what I am thinking.
Chris
March 13th, 2009
THANK YOU SO MUCH!!! I wasn’t making heads or tails of this stuff - it makes a whole lot of sense now. One of my co-workers was using it a lot and it wasn’t until these vids that I really caught on. Thanks again!
jAY
March 17th, 2009
Thanks a Million times!!!!!!!!!!!!!! The tutorials have been simply awesome!!! Many thanks to you… and jQuery rocks…
Nikolay
March 31st, 2009
Hi there. Let me tell you that i loved this tutorial…really awesome! I have one question to ask you!
I was surfing around the web and I find out this really cool jquery plug-in:
http://www.malsup.com/jquery/cycle/int2.html
Now in the site there are some explanetions but it’s not really clear how this thing works. I’m interested in the pager effect but i can’t menage to do it. Can You help me?
Thanks in advice.
ralph
April 10th, 2009
hey, jeff thanks to your 15 day tutorial.. this is very helpful to me as a beginner.. by the way how about gallery randomly changes pictures automatically or by clicking it.??
thanks..
Gavin
April 10th, 2009
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.
Thanks
Pavlov
May 1st, 2009
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
May 13th, 2009
I can’t watch the whole tutorial for day-15 part 2.
Dark Random
June 1st, 2009
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
June 3rd, 2009
Jeffrey,
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.
Thanks,
Lilly
C.W.Zachary
June 10th, 2009
Excellent series. I wish it went further.
D. HEmalatha
June 17th, 2009
Hi dude
A great boost for my initial jquery support, hats off!
billybee
June 24th, 2009
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
li
li
li
Tags
———————————- this is the image line2.jpg
li
li
li
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
June 29th, 2009
Thank you…thank you…thank you…thank you.
Rocky
July 2nd, 2009
i just wanna say that THANK YOU SO MUCH………
your series is absolutely great
Nori Silverrage
July 10th, 2009
This video series is awesome! I just wish there was more (please!). Thanks!