Nine small wrapped gifts to get started with jQuery

x

1.

1. Selecting items, hide, show and change their look

This example is just to get going. You might wonder how this box opens and closes? Its just a matter of hiding and showing the elements you want to display. The box minimizes itself when you click the x up in the right corner and you can open it up in full width by clicking the number or the wrapped giftbox.

When you click on the text or images in this example it will shift (toggle) between dark and light color.

Its all about using selectors and the eventhandlers.

x

2.

2. Events and event propagation

In this example we look at event propagation. When you click anywhere in this box, independently on the cursor style, the box will toggle between pink and white. The same thing happens when you click on the image, and in addition, the image will toggle between larger and smaller size.

Looking in the code will show you an eventhandler for the image, but any click in the image is also a click in the box which has its own eventhandler, the event is propagated up through the chain of eventhandlers. This behaviour can be stopped by using the method stopPropagation().

x

3.

3. Add and remove elements

Lets create a color palette from this image. Choose each color you think should be in there and add it to the palette, click the color to remove it.

x

4.

4. Let's resize me

Here are a couple of buttons which will resize the image when you press them. The current image size is also visible.



x

5.

5. Basic animations

Basic animations can make your page look a bit more lively by dynamically change its look. One ood idea is to make movements a bit smoother. You can toggle the image visibility by fadeing it in or out. You can also slide the image visibility by sliding it in or out.

x

6.

6. A lightbox for images

A lightbox is often used to display a larger version of an image without reloading the page. Click the image to try out my lightbox.

x

7.

7. A image gallery

An example gallery of flowers.

An image gallery may look in many ways but it usually acts as a container for a bunch om images and allows for the user to easily traverse and look at the images.

x

8.

A slideshow for your firstpage

A slideshow is commonly used at the first page on many websites to display a set of images and change the image being displayed with a timed interval or by clicking it.

x

9.

9. Animated Background

An animated header background.

x

10.

10. A jquery plugin

This plugin slides the image up and down when clicked.