jQuery: jaunty little squares 1.
Written by Luca Bonacorsi   
21 January 2012

jQuery: jaunty little squares 1CLICK HERE TO SEE THE WORKING EXAMPLE.
This example shows how to create HTML elements in run-time in jQuery.
Once generated, each element is given the possibility to react to the mouse pointer interaction ('over' and 'out').
The elements, specifically '<P>' items, turn out to cover a whole '<DIV>' (which works as a contanier constantly centered in the web page) and inside it are laid in a tabular manner.

jQuery: jaunty little squares 1

Every time the mouse pointer moves over the surface of a little square, a function is executed to change values of some of its style properties while, when the mouse pointer moves away from the square, its style properties are properly restored.
Each '<P>' element can react to the 'mouseover' and 'mouseout' events by means of the 'hover()' method which accepts two functions as parameters: one to be executed when the user mouses over a little square and another one to be triggered when the user mouses out a little square.
Once again this example highlights the power of HTML/HTML 5, CSSC/SS3 and jQuery working together.
Have fun and stay tuned! :)


Commenti (0)
Solo gli utenti registrati possono scrivere commenti!