JQUERY UI

Standard

it is a new JQUERY library that includes a number of great animations that can be used to make websites do incredible things

it has to be included an extra SCRIPT tag in the HTML documents: this is used to include JQUERY UI

.EFFECT(“EXPLODE”)
$(document).ready(function(){

$(“div”).click(function(){
$(this).effect(“explode”);
});
});

.EFFECT(“BOUNCE”)
$(document).ready(function(){
$(“div”).click(function(){
$(this).effect(“bounce”, {times:3}, 500);
});
});

.EFFECT(“SLIDE”)
$(document).ready(function(){
$(“div”).click(function(){
$(this).effect(“slide”);
});
});

.DRAGGABLE()
is a function that can make any HTML element draggable: you can click on it and move it anywhere on the page

$(document).ready(function(){
$(“#car”).draggable();
});

.RESIZABLE()
make an HTML element resizable
$(document).ready(function(){
$(“divr”).resizable();
});

.SELECTABLE()
make HTML elements selectable
$(document).ready(function(){
$(“ol”).selectable();
});

.SORTABLE()
useful to manually reoder elements in a list
$(document).ready(function(){
$(“ol”).sortable();
});

.ACCORDION()
.accordion() give a ready format theme for menus
(with a div #menu, made of three different sections)
(document).redy(function(){
$(“#menu”).accordion()
});

Advertisements

ANIMATE A SPRITE

Standard

* a sprite is a 2-dimensional image

every key press on a keyboard is translated into a number for the computer to use

// left arrow key pressed
case 37:
(‘img’).animate({left: “-=10px”}, ‘fast’);
the left arrow key on our keyboards translates to number 37 to the computer

when that key is pressed, we animate our image to the left by subtracting 10px
to move up we subtract 10px from the top
to move right we add 10px to the left
to move down we add 10px to the top

$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
// left arrow pressed
case 37:
$(‘img’).animate({left: “-=10px”}, ‘fast’);
break;
// up arrow pressed
case 38:
$(‘img’).animate({top: “-=10px”}, ‘fast’);
break;
// right arrow pressed
case 39:
$(‘img’).animate({left: “+=10px”}, ‘fast’);
break;
// down arrow pressed
case 40:
$(‘img’).animate({top: “+=10px”}, ‘fast’);
break;
}
});
});

 

JQUERY EVENTS

Standard

the setup of JQUERY events is quite the same

$(document).ready(function() {
$(‘thingToTouch’).event(function() {
$(‘thingToAffect’).effect();
});
});

where “thing to touch” is the HTML element you’ll click on, hover over, or otherwise interact with, and “thing to affect” is the HTML element that fades away, changes size, or undergoes some other transformation

if you want an effect to occur right away, without an event like .click() or .hover(), you’ll skip the second line in the above:

$(document).ready(function() {
$(‘thingToAffect’).effect();
});

// this event is trigger without .click()
$(document).ready(function(){
$(“div”).fadeOut(“fast”);
});

// instead, here something happen with an event handler that is .click()
$(document).ready(function(){
$(“div”).click(function(){
$(this).fadeOut(“fast”);
});
});

// add div class on hover event that chages the div color
$(document).ready(function(){
$(“div”).click(function(){
$(this).fadeOut(“fast”);
});
$(“div”).hover(function(){
$(this).addClass(“red”);
});
});

.DBLCLICK()
with this, when a user double clicks on an element, it’s possible to trigger a function()
$(document).ready(function(){
$(“div”).dblclick(function(){
$(this).fadeOut(“fast”);
});
});

.HOVER()
do you wanted to create an effect when your mouse is on top of an object, then have that effect vanish when your mouse moved away?
this effect in use on many site’s navigation bars
$(‘div’).hover(
function(){
    $(this).addClass(‘highlight’);
    },
function(){
    $(this).removeClass(‘highlight’);
});
first select the element we want to modify $(‘div’)
then, the hover effect is able to take two functions(){} separated by a comma
the first function(){} will be run when the mouse over the target the first time (applying a class of highlight)
the second function(){} will be called when the mouse leaves the object (removing the class highlight)
the second function(){} doesn’t have to be the opposite of the first function(){}, but it would be very common

$(document).ready(function(){
$(“div”).hover(
function(){
    $(this).addClass(“active”);
    },
function(){
    $(this).removeClass(“active”);
});
});

.FOCUS()
an element has focus when you click on it or tab over to it
the .focus() event handler only works on elements that can receive focus (input and textarea)

$(document).ready(function(){
$(“input”).focus(function(){
$(this).css(“outline-color”,”#FF0000″);
});
});

.KEYDOWN()
this event is triggered whenever a key on the keyboard is pressed
it only works on whatever page element has focus, so you’ll need to click on the window containing your div before pressing a key in order for you to see its effects

.ANIMATE()
use .animate() to move an object on the screen whenever we press a key
.animate() effect takes two inputs: the animation to perform, and the time in which to perform the animation

$(document).ready(function() {
$(‘div’).animate({left:’+=10px’},500);
// the second input is expressed in millisecond
});

this will take the first div it finds and move it ten pixels to the right (increasing the distance from the left margin moves something to the right)
the += bit is just a shorthand for “take the existing number and add ten to it”
so, it add ten pixels to the current distance from the left margin

$(document).ready(function(){
$(document).keydown(function(){
// the whole document object responds whenever a key is pressed
$(“div”).animate({left: “+-=100px”}, 500);
});
});

JQUERY AND HTML CONTENTS

Standard

to update the contents of our HTML elements (that is, the bit between the opening and closing tags) there are the .html() and .val() functions

.HTML()
.html() can be used to set the contents of the first element match it finds

$(‘div’).html();
will get the HTML contents of the first div it finds
$(‘div’).html(“hi, I’m changed”);
will set the contents of the first div it finds to “hi, I’m changed”

.VAL()
is used to get the value of form elements
$(‘input:checkbox:checked’).val();
would get the value of the first checked checkbox that JQUERY finds

to store the user’s input in a variable, set a variable equal to the contents of the input field using .val()
var input = $(‘input[name=checkListItem]’).val();
// get the value from the input

$(document).ready(function(){
$(“#button”).click(function(){
var toAdd = $(“input[name=checkListItem]”).val();
});
});
the new element can be added to the document
you can, for example, append it with the .list class elements, giving a different class to the new element
append a div, with classname = “item”: the content of the div will be the content of the input field, saved in the variable toAdd
div itemfor example
append div

what if you have to check the new element off?
$(‘.item’).click(function() {
$(this).remove();
});
this don’t work: JQUERY looks for all the .items when the DOM is loaded, so by the time your document is ready, it’s already decided there are no .items to .remove(), and your code won’t work

.ON()
but there is a new event handler: .on()
.on() is a general handler that takes 3 inputs: the event, its selector, and an action
$(document).on(‘event’, ‘selector’, function() {
do something!
});

so, the right code will be
$(document).on(“click”, $”.item”, (function(){

$(this).remove();
});
});

JQUERY AND HTML CLASSES

Standard

JQUERY can also alter HTML classes and CSS rules

.ADDCLASS() – .REMOVECLASS()
.addClass() and .removeClass() can be used to add or remove a class from an element

$(‘selector’).addClass(‘className’);
$(‘selector’).removeClass(‘className’);
where ‘selector’ is the HTML element you want and ‘className’ is the class name you want to add or remove

.TOGGLECLASS()
toggling a class back and forth consist of these operations: for example, when you click on a text, the code adds the class .enlighted if it isn’t there, but, if it is already assigned, the same class will be removed

.toggleClass() function that does exactly this
if the element it’s called on has the class it receives as an input, .toggleClass() removes that class;
if the target element doesn’t have that class, .toggleClass() adds it

.HEIGHT() – .WIDTH() – .CSS()
JQUERY has specific .height() and .width() functions that can be used to change the heights and widths of HTML elements

$(“div”).height(“100px”);
$(“div”).width(“50px”);
would give all div elements on the page a height of 100 pixels and a width of 50 pixels

JQUERY also have a general-purpose .css() function that takes two inputs: the first is the CSS element to alter, and the second is the value to set it to

$(“div”).css(“background-color”,”#008800″);
would give all divs on the page a green background color

JQUERY AND HTML ELEMENTS

Standard

MODIFY HTML ELEMENTS
dynamically adding elements to the HTML page is a powerful tool because it can be modified in response to a user’s actions

trasform an entire HTML element in a JQUERY object
$p = $(“<p>I’m a new paragraph</p>”);

.APPEND() – .PREPEND()
newly created elements can be insert with JQUERY functions
$(‘target’).append($p);
// inserts the specified element as the last child of the target element
$(‘target’).prepend($p);
// inserts the specified element as the first child of the target element
($p).appendTo($(‘target’));
// does the same as .append(), but it just reverses the order of “what to add” and “where to add it”
($p).prependTo($(‘target’));
//prependTo() has a similar relationship to .prepend()

$(document).ready(function(){
$p = $(“<p>’hi!'</p>”);
$(“body”).append($p)});

BEFORE – AFTER
to specify where inserting an element in the DOM with the .before() and .after() functions

$(‘target’).after(‘<tag>to add</tag>’);
where ‘target’ is the element after which you want to add something and the bit between TAG s is the HTML element you want to add

$(document).ready(function(){
$p = $(“<p>’hi!'</p>”);
$(“#one”).after($p);
});

moving elements instead of creating new one
var $paragraph = $(“p”);
// existing element
$(“div”).after($paragraph);
// move it!

or

$(“div”).after($(“p”));

this operation not copy the element from one location to another, it moves the original element effectively saving you from having to delete the original

REMOVING HTML ELEMENTS
the two JQUERY functions that do this work is .empty() and .remove()

.EMPTY()
.empty() deletes an element’s content and all its descendants
if you .empty() an ‘ol’, you’ll also remove all its ‘li’s and their text

.REMOVE()
.remove(), not only deletes an element’s content, but deletes the element itself

 

JQUERY SELECTORS

Standard

var number = 1;
// contains a number
var name = “Giada”;
// contains some text
var $p = $(‘p’);
// stores the result of a jquery selector $(‘p’)

selecting by class
$(document).ready(function() {
$(“button”).click(function() {
$(“.square”).fadeOut(“slow”);
});
});
// the square class is selected with a . before the class name

selecting by id
$(document).ready(function() {
$(“button”).click(function() {
$(“#green”).fadeOut(“slow”);
});
});
// the id is selected with a # before the id name

flexible selectors
anything you can target with CSS, can be targetted with JQUERY
we can also select multiple HTML element with a compound selector
$(document).ready(function(){
$(‘p, li’).fadeTo(‘slow’, 0);
});

$(document).ready(function(){
$(“.pink,.red”).fadeTo(“slow”,0);
});

selecting a div and give it a CSS rule (property, value)
< script >
$(“#myDiv”).css(“border”, “3px solid red”);
</ script >

selection a div starting with..
$(‘div[id^=”player_”]’)

selecting a class and give it a CSS rule (property, value)
< script >
$(“.myClass”).css(“border”, “3px solid red”);
</ script >

JQUERY code sample in HTML page
< script >
$(document).ready(function() {
console.log(“document loaded”);
});

// or, you can also launch the function when the window is loaded
$(window).load(function() {
console.log( “window loaded” );
});
</ script >