jQuery for Absolute Beginners: Day 15

Today’s screencast is a bit misleading! Over the course of the next two tutorials, we’ll be creating a jQuery style-switcher that will allow the user to switch between CSS files. However, today we’re only going to be working with PHP! Day 15: Part 2 will cover the jQuery. :)

Before we begin, credit must be given where it’s due. We’ll be using a NETTUTS article called “How To Create An Amazing jQuery Style Switcher” by James Padolsey as a guide. Though we won’t follow the tutorial step for step, we’ll use it as a basis. It’s not required by any means, but I highly recommend that you review the tutorial. While you’re at it, be sure to visit his personal site for more tutorials; He’s extremely talented.


Download the Source Code

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

Download the Source Code

Continue on to PART 2.



33

Comments
  • kevinsturf says:

    really nice tut! and happy new year to everyone.

    can’t wait for part 2

  • Yoys says:

    Hi Jeffrey,
    Thank you for the tutorial,but why to use AJAX?you can create a cookie ..
    for example:someone clicked on night then create the cookie with js with the value of night…

    not?

  • i-mad says:

    Great one thanks

  • James says:

    Great tutorial Jeffrey, and thanks for the mention! :)

    @Yoys, there are benefits to both methods. If you set the cookie using JS (when it’s available) then that means having to create two separate pieces of functionality (client-side & server-side), both managing the ‘cookie’ aspect of this solution. If, in the future you need to expand this style-switching capability so that it saves to a database or some other medium then we’ll need to re-write both the client-side and the server-side. By using Ajax to call a PHP script (which sets the cookie) we only ever have to change one script: the PHP script. It’s really a question of expandability, although, admittedly, setting the cookie using JavaScript is probably faster. I’m not sure what method Jeffrey will use in the second part of this tutorial but IMO either is suitable.

  • Jeffrey says:

    We’ll be setting the cookie with PHP – like you did in your article. You did such a great job; there’s no use reinventing the wheel.

  • thanks for the tutorial, but i was looking for a asp.net version, but its a php again. please Jeffrey make something of asp.net also. i think there are many things we can do with asp.net which is not possible to my knowledge in php

    thanks again for all the tutorial

  • kevinsturf says:

    hey Jeff, When your done with this tut, is it possible to show us how to do something like this on this website with images using jquery

    here’s the link to the site.
    http://www.hellodesign.com/

    now on the main page, if you hover over the images, they expand in height to show full thumbnail and it also scrolls through different images while onmouseover

  • Hetal says:

    Hey Jeff,
    u r a ray of light to the darkness in my world of development.I am very much thankful to you for these tuts.

    It will be more fruitful to me if u send me any links with video tuts for using jquery and ajax in asp.net 2.0.
    Also with json object

    thanking u onceagain

  • Alex says:

    Great tutorials Jeff!

    Watching your videos has inspired me to start learning harder(compared to HTML) computer languages like PHP. There are a lot of people out there who know their stuff, like you do, but you have a great teaching in passing that info.

    From my preliminary first steps into the PHP realm I am noticing that one of it’s main uses is form handling. Could you show your humble fans how to process a form in PHP and have it send the results to an email (make the email hidden from spammers)?

    Again, thanks for your great tutorials, the

  • Jeffrey says:

    @Alex – Thanks for the nice words. I’ll definitely show you all how to do that. jQuery for Absolute Beginners is just about finished (Maybe two more tutorials).

    After that, we’ll be tackling PHP! :)

  • Mike says:

    Great thing, but I like js-styleswitchers (like eg. http://photoblog.flanisoft.at/index.php?newtemplate=flani ) where the page doesn’t reload – of course – with disabled js there is not much going to change.

  • Samuel Costa says:

    EXCCCCCCEEEEEELLLLLEEEENT Jeffrey… It’s been awsome to learn jQuery with you… I can’t wait for the next ones… and also for the PHP series…

    Thank you a lot for your time sharing all this with us.
    Sam

  • Vish says:

    Hi Jeff, Thanks a lot for all the tutorials can u pls help me doing this below excercise in jquery.
    Style a simple link so that is behaves as depicted below.

    • When the user hovers over the link the text and background color should change
    • When the link is clicked the text should change as well as the background image.
    • After the user clicks the link and then moves the mouse off the link the hover behavior should change – the hover would then cause a different background image and the text to change.
    • Click the link a second time should cycle it back to the original behavior

    thnks again

  • @Vish, now.. I am tired but that’s not hard at all if you’ve followed Jeffrey’s outstanding tutorials.

    $(function()
    {
    $(‘.theLink’)hover(function()
    {
    $(‘#textAndBackground’).css(
    {
    ‘background-color’ : ‘red’,
    ‘color’ : ‘blue’
    });
    });
    $(‘.theLink’).toggle(
    function () {
    $(‘#textAndBackground’).css({‘background-color’ : ‘red’, ‘color’ : ‘blue’});
    $(‘#textAndBackground’).addClass(specialHover);
    },
    function () {
    $(‘#textAndBackground’).css({‘background-color’ : ‘black’, ‘color’ : ‘red’});
    $(‘#textAndBackground’).removeClass(“specialHover”);
    }
    );

    $(‘.theLink’).hover(function()
    {
    if ( $(‘#textAndBackground’).hasClass(“specialHover”) )
    $(this).differentBehaviour

    });
    }
    );

  • louie says:

    hi there can you make a tutorial on uploading large files with progress bar????.

  • Stanimir says:

    Hi! There is a problem with video. I can’t load it!

  • bla says:

    buy a MAC

  • Chris Heney says:

    I am amazed at the speed of these demos. I believe I speak for many of the developers out there when I say that I enjoy the fact that these have real mistakes, real typos, and real debugging, because that is what we all go through.

    You really should have a donation link on each article. I’ve gone through all 15 days today, and enjoyed all of them very much.

    I hope to see in the future some more Ajax and tutorials on how to parse returned xmlhttpobject.

    Thanks again!

  • Shilpa says:

    Thank you very much for the tutorial.

  • Marko says:

    Jeffry,

    Great tutorials BUT there is only one mistake: you have to click on something!

    Make tutorial about using jQuery to update content after given amount of time without clicking on enything.

    Hope to see more soon

  • Justin says:

    I’d like to point out that the function setTimeout IS CASE SENSITIVE! Took me a while to debug what was wrong with my code!

  • iCandy says:

    Hey this was awesome,

    I had some hiccupss but I was able to resolve all of them.

    You did a great job presenting everything, you seem like a really good developer and even better because you share you knwoledge. We definitely appreciate that.

    I’m now ready to go with jquery. I also got two books others might want to use

    jQuery in action
    jQuery Reference Guide

    They helped with some of the ajax stuff…

    Thanks again and I’ll def add the RSS to my google reader!

  • Ross McLoughlin says:

    Heya,

    Amaing series of tutorials. Thank you so much.

    Quick question. In one of the tutorials – think it was #5, you mentioned that if you refreshed a page, it would revert back to its original format. For example, if you added a few list items to an unordered list, and then refreshed the page, all changes would be lost.

    However, you mentioned that there was a workaround for this, but that this was for a later tutorial. Did I miss out on this?

    Regards, and thanks

    Ross

  • peyman says:

    thank u so much for tutorials , plz teach this tutorial for asp.net …

  • Nick says:

    Hey guys great tutorials, I have learnt heaps!

    What’s the chance in showing us how to create a horizontal navigation with a hrizontal subnav similar to this one written with Mootools framework on blogspot.

    http://woork.blogspot.com/2008/08/elegant-glass-style-navigation-bar.html

    I have just about pulled my hair out trying…

    Thanks in advance
    Nick

  • Minero says:

    Just one extreme newbie question…

    All the code you write in javascript will stop working if the users have the javascript ability disabled in their browser?

    I’m assuming the browser have that ability enabled by default thus allowing to use javascript without worrying?

    Great tutorials by the way, thanks.

  • Joris says:

    @Minero:

    Exactly, as soon as the User doesn’t have JavaScript enabled, your stuff won’t execute. This is also the reason, Jeffrey implements a non-JavaScript alternative most of the time as well.

    Generally, you don’t have to worry about that issue, although it is never wrong to think of that special case and have a solution at hand from the beginning.

    @Jeffrey:

    Great tutorial, I finally got into more than the shallow jQuery stuff I already knew.

  • Khalil-Zarpio says:

    This is very awesome work… Thank you

  • Kevin says:

    Is there a part II?

  • Kevin says:

    Oops…yes there is.

  • Rob says:

    Hi,

    Really nice tutorial, very concise and no rambling :)

    Isn’t it alwasy good practice to santise you querystring data when using it directly in your script?

    Thanks

  • Daniel says:

    I’ve watched all of this amazing video tutorials over night and have to say that I found them very helpful!
    Thank you very much, can’t wait to see more of this.
    I’ll be happy to get some information regarding “edit in place” (Flickr style) methods.