Hi, my name is Al

My First Simple JQuery Example

Okay, I have been playing with jquery for, oh I dont know, half a day now. I barely consider myself to be of beginner status, but I thought I would post what I have done. In keeping with my video game-themed tutorials, have a look at my latest offering. It is unbelievably simple but hey, read my above comment.

I used jquery combined with Interface components, and a little help from Ben. I may add to this as I learn some more stuff, but for now it has me giggling to myself, and thats all that matters isnt it?

After including the 2 javascript files, and CSS aside, the script I used was this:

$(document).ready(function(){

$("#mushroom").hide();
$("#question-block").addClass("active");

$("#question-block").click(function(){
$(this).removeClass("active");
$(this).addClass("punched");
$("#mushroom").SlideInDown(500);
});

});

Going through each part, when the page loads, the mushroom div is hidden from view, and the div question block is given a class of ‘active’. The active class just has a background of the question mark. I would normally add this to the div id style, but there is a reason for it.

The next block handles the clicking event. When you click the block it removes the active class(thus removing the background) and adding the punched block. Its basically changing the background by adding and removing a class. This was the problem I was having when I had assigned the background to the #question-block. The class wasn’t overwriting the background.

So there we have it. I’m slightly concerned that whenever I find something new I can think of a video game application, but hey, at least I will remember it. I might keep adding more as I go on, but we will see.

The last bit of code uses the Interface code just to add the sliding in animation. There are a pile more, but I am still learnding.

Update: I have also made a slightly more complicated example without using the interface javascript file. Have a look: http://www.mynameisal.com/2008/02/25/jquery-slide-in-without-interface/