simple jQuery

Click the button above to see the effect.

Here is the code for that effect:

---

jQuery basics

LIBRARY
In order to use jQuery you need to have the jQuery library available.

(1) Link to Google by adding this to your head section:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
,or,
(2) Download a copy from jQuery and place on your server.

The "minified version" ~24K is OK for most usages.

ITS STILL JAVASCRIPT
So you surround the code blocks with:

< script type = "text/javascript" > ........... < /script >

READY FUNCTION
You are probably familiar with the "onload=run-some javascript" construct used to make sure that the page is loaded before running any code.

jQuery has the equivalent that ensures that the DOM (not necessarily the page), is loaded before running code.

jquery(document).ready(function() {
// do something here
});

or, just put the jQuery code at the END of your body element.

JQUERY ALIAS
The "$" is a short form alias for "jquery". So

"$('#img1').fadeOut(3000);"
is equivalent to
"jquery('#img1').fadeOut(3000);"

COMMAND ANATOMY

jquery or $	-- invoke the jQuery library.
('#img1')	-- find an element with the id="img1".
.fadeOut()	-- built-in command, fade the "img1" element.
(3000)	-- optional millisecond duration.
;	-- the command termination semicolon.

SELECTION POWER
Any element can be selected for css style or animation manipulation, not just those with an id.
i.e.
'p' for all p elements
'.myclass' for all class="myclass' elements
Note that if you select an element with multiple occurences like a "p" element, jQuery will index them in order. So ('p:eq(0)') is the first "p" element in the DOM.



ACTION POWER
A common usage is to create a clickable element to cause some action to trigger. The css way is to use anchor (a) elements. Some browsers support pseudo anchor elements but, of course, IE does not. With jQuery ANY element can be a clickable trigger, and it works with all browsers.

Here is the code from my fadeout example:

$('#img1').click(function() {
$('#img1').fadeOut(3000);
});

So the command items were:

$	-- invoke jQuery
('#img1')	-- select element with id="img1"
.click(function(){	-- add the click action to that element
$('#img1').fadeOut(3000);	-- run the fadeout command on the element "img1"
});	-- complete the function closing brackets

I set the click trigger to the element itself - "img1", but I could have used anything. In fact I faded the element back in again using a table as a trigger!

$('table').click(function() {
$('#img1').fadeIn(3000);
});

Of course that would make ANY and ALL tables act as click activators - so be careful what you ask for!

---

4 Line Slideshow - [click me]

We have seen simple animation effects with one line of code. Here is a slideshow using only a few more lines.

Well OK that's 4 and a half lines but who's counting.

---

Fancier Slideshow - [click me]

Lets add some stuff

FancySimpleSlideShow

We added stop and start buttons, some timing numbers for the fades, and some text to display along with the slides. It is still only 14 lines of code (even if you count those "half lines"!). Note that jQuery is using it's indexing to automatically increment through the page 'img' and 'p' elements. I did not need to add any numbers or identifiers, just make a list of the images and text.


Well, I had to mess with it some more so I added a background color change when the slideshow is running. So this is added to the "start" code section:

$('body').addClass('bg');

My class "bg" had a background color set to a dark gray.

To remove the custom background when the slide display is stopped I added this to the "stop" code section:

$('body').removeClass('bg');

So here is the complete code for the above slideshow:

<script  type="text/javascript">

$(function(){	
	$('.fadein img:gt(0)').hide();	 		//set img/p to zero	
	$('#info p:gt(0)').hide();
				     
             $('#start').click(function(){		//start slideshow
             
	     var slide = setInterval(function(){	//collect as variable
	     	$('body').addClass('bg');		//change bg color
      	     	$('.fadein :first-child').fadeOut(1000)
             	.next('img').fadeIn(1000)    
             	.end().appendTo('.fadein');}, 3000);	//append img to div
         
	     var text =  setInterval(function(){	//collect as variable
             	$('#info :first-child').hide()
             	.next('p').fadeIn(1000)
             	.end().appendTo('#info');}, 3000);	//append p to div
         
        		$('#stop').click(function(){	//stop slideshow     
			$('body').removeClass('bg');	//reinstate bg color      
			clearInterval(slide);
			clearInterval(text);
				   	  	  });   
					});                
	    });

</script>

---

jQ Widgets

jQuery has several preformed "widgets" available in its "UI" library. This is an additional library that you can download and reference in your web page. It provides both the widgets and a way to style them.

Widgets include "Accordion", "Datepicker", "Dialog", "Progressbar", and "Slider".
Here is the Datepicker widget:

Datepicker widget

Date:

---

Experimentation Time!

OK -- YOU -- try out some basic commands on this page.Online, go to:

here