Relax Breath of Solution.

jQuery creating custom animations

Sameera Thilakasiri — Thu, 29 Sep 2011 07:38:25 +0000


	
		 jQuery creating custom animations 
		
	
	
		
			 Click here

jQuery fading elements in and out

Sameera Thilakasiri — Thu, 29 Sep 2011 05:51:52 +0000

Fading elements in and out


	
		
		
	
	Hover on any element to see effect
	
		
			Cake
			Pastries
			Patties
			Noodles

jQuery hiding and showing elements on the page – arguments.callee

Sameera Thilakasiri — Thu, 29 Sep 2011 05:25:50 +0000


	
        
  

    jQuery is easy
    to use and
    gives dynamic output..

Incoming search terms:

samples mx effects easing (1)

jQuery event helpers

Sameera Thilakasiri — Wed, 28 Sep 2011 13:15:38 +0000

.live()
This method attach a handler to the event for all elements which match the current selector, now or in the future.

Example :
Following code binds the click event to all paragraphs. And add a paragraph to another clicked paragraph :

Click me!

.die( )
This method removes the handler which is previously attached using ‘live( )’ from the elements.

Example :
Following code binds and unbinds events to the buttons :
$(“#bindbutton”).click(function () {
$(“#button1″).live(“click”, aClick)
.text(“Can Click!”);
});
$(“#unbindbutton”).click(function () {
$(“#button2″).die(“click”, aClick)
.text(“Does nothing…”);
});

Here ‘aclick’ is a user defined function which display a ‘div’ on button click. Using ‘die’ it detach the click event from ‘aClick’ function.

.one( )
This method attach the element with an event. The main difference between it and ‘.bind()’ is that it will execute only once .After this , it is unbind automatically.

Example :
Following code will display an alert box on clicking element ‘foo’ :
$(‘#foo’).one(‘click’, function() {
alert(‘This will be displayed only once.’);
});

jQuery.proxy( )
This method takes a function and returns a new one that will always have a particular scope.

Example :
It will enforce the function :
var obj = {
name: “John”,
test: function() {
alert( this.name );
$(“#test”).unbind(“click”, obj.test);
}
};

$(“#test”).click( jQuery.proxy( obj, “test” )

.trigger( )
This method executes the event which is attached with the matched elements.

Example :
Following code triggered the click event on ‘foo’ element manually .
$(‘#foo’).bind(‘click’, function() {
alert($(this).text());
});
$(‘#foo’).trigger(‘click’);

jQuery working with CSS(CSS Manipulation)

Sameera Thilakasiri — Wed, 28 Sep 2011 12:28:24 +0000

.css( )
This method get the CSS style property of the first matched element..

Example :

Above code display the color code of the clicked ‘div’ .

.height( )
This method get the height of the first matched element.

Example :
$(“p”).height()); // returns height of paragraph.
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

.innerHeight( )
This method return the height for the first element including padding but not border. This method is not applicable to window and document objects; for these, use .height() instead.

Example :
Following code get the innerHeight of a paragraph :

Hello

.innerWidth( )
This method return the width for the first element including padding but not border. This method is not applicable to window and document objects; for these, use .height() instead.

Example :
Following code will get the innerWidth of a paragraph :

Hello

.offset( )
This method get the current coordinate of the matched element, relative to the document.

Example :
This method returns the offset of the second paragraph

Hello

2nd Paragraph

.outerHeight( )
This method get the outer Height from the first matched element, including padding and border.This method is not applicable to window and document objects; for these, use .height() instead.
Example :

The following code get the outer Height of a paragraph :

Hello

.outerWidth( )
This method get the outer width from the first matched element, including padding and border.This method is not applicable to window and document objects; for these, use .height() instead.

Example :
The following code get the outer Width of a paragraph :

Hello

.position( )
This method get the coordinates of the first matched element , relative to the offset parent.

Example :
Following code return the position of the second paragraph :

Hello

.scrollLeft( )
This method get the current horizontal position of the scroll bar for the first matched element.

Example :
Following code get the current horizontal position of the scroll bar for the first ‘p’ :

Hello

.scrollTop( )
This method get the current vertical position of the scroll bar for the first matched element.

Example :
Following code get the current vertical position of the scroll bar for the first ‘p’ :

Hello

.width( )
This method get the width of the first matched element.

Example :
Following are some example of ‘width()’ method :
$(“p”).width()); //returns width of paragraph.
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

Incoming search terms:

css with jquery examples (1)

jQuery inserting content(DOM Insertion)

Sameera Thilakasiri — Wed, 28 Sep 2011 12:04:55 +0000

.unwrap( )
The .unwrap() method removes the element’s parent from the matched set .It leaves the matched element at their place.

Example :
$(“p”).unwrap();
This script removes the parent of ‘p’.

.wrap( wrappingElement )
This method wrap the html wrapping element around each of the matched elements. The ‘wrapedElement ‘ may be div, span etc.

Example :
$(“p”).wrap(“

“);
It wrap a div element around each matched ‘p’. The structure will be wrapped around each of the elements in the set of matched elements.

.wrapAll( wrappingElement )
This method wrap the html wrapping element around all the matched elements. The ‘wrapedElement ‘ may be div, span etc. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.

Example :
$(“p”).wrapAll(“

“);
It wrap div around all the ‘p’ element as a single group.

.wrapInner( wrappingElement )
This method wrap inside the provided ‘wrappingElement’.

Example :
$(“p”).wrapInner(““);
It wrap inside the ‘p’ or ‘p’ s.

DOM Insertion, Inside
This method allow us to insert new content inside an existing once

.append( content)
This method add new content inside the matched set of element , after the existing contents.

Example :
$(‘.inner’).append(‘
Test

‘);
This method insert
inside the div class named ‘inner ‘ after it’s existing content.

.appendTo( target )
This method insert every element in the set of matched elements to the end of the target.

Example :
$(‘

Test

‘).appendTo(‘.inner’);
This method insert
inside the div class named ‘inner ‘ after it’s existing content.

.prepend( content )
This method add new content inside the matched set of element , before the existing contents.

Example :
$(‘.inner’).prepend(‘

Test

‘);
It add ‘
Test

‘ before the div named ‘inner’.

.prependTo( )
This method insert every element in the set of matched elements to the beginning of the target.

Example :
$(‘
Test

‘).prependTo(‘.inner’);
It add ‘
Test

‘ before the div named ‘inner’.

.text( )
This method get the combined text contents of each element in the set of matched elements, including their descendants.

Example :
Consider the following code :

Demonstration Box

list item 1

list item 2

The $(‘div.demo-container’).text() will gives following output :

Demonstration Box list item 1 list item 2

DOM insertion, Outside

The methods falling in this category allow us to insert new content outside an existing element.

.after( )
This method add element after each matched set element.

Example :
$(‘.inner’).after(‘
Test

‘);
It append the element ‘
Test

‘ after every matched div whose name is ‘inner’.

.before( )
This method add element before each matched set element.

Example :
$(‘.inner’).before(‘
Test

‘);
It add the element ‘
Test

‘ before every matched div whose name is ‘inner’.

.insertAfter( )
This method insert every element in the set of matched elements after the target.

Example :
$(‘
Test

‘).insertAfter(‘.inner’);
It append the element ‘
Test

‘ after every matched div whose name is ‘inner’.

.insertBefore( )
This method insert every element in the set of matched elements before the target.

Example :
$(‘
Test

‘).insertBefore(‘.inner’);
It add the element ‘
Test

‘ before every matched div whose name is ‘inner’.

jQuery manipulating attributes

Sameera Thilakasiri — Wed, 28 Sep 2011 11:59:30 +0000

Manipulating CSS class attribute

You can manipulate CSS class attribute using following methods :

.addClass()
You can add any css class to filtered elements through this method.

Example :
Following code add selected css class to last paragraph :

.hasClass()
Using this method , you can check any of the matched elements have provided css class or not. If it has , it will reyurn ‘True’ otherwise ‘False’.

Example :
$(‘#mydiv’).hasClass(‘foo’)
Above code checks whether the div “mydiv” have ‘foo’ css class or not.

.removeClass()
This method remove the css class from the set of matched element.

Example :
Following code will remove ‘blue’ css class from all even paragraphs :
$(“p:even”).removeClass(“blue”)

.toggleClass()
This method adds or removes a class from each element in the set of matched elements depending on either the class’s presence or the value of the switch argument.

Example :
Following code will change the css class of clicked element :

Manipulating general attributes :

Given below methods are used to get and set the Dom attributes of elements :

.attr()
This method is used to get the attribute of the first element from the matched set of elements.

Example :
Following code will get the ‘title ‘ attribute of the first matched ‘em’ :
$(“em”).attr(“title”);

.removeAttr()
This method is used to remove attribute from each element of the matched set.

Example :
Consider the following code line :

The following code will enables the input next to it, on button click :

$(“button”).click(function () {
$(this).next().removeAttr(“disabled”)
.focus()
.val(“editable now”);
});

.text()
This method will get and combine the text of each matched elements by leaving their html tags.

Example :
Consider the following code :
div class=”demo-container”>

Demonstration Box

list item 1
list item 2

The $(‘div.demo-container’).text()will produce the following output :

Demonstration Box list item 1 list item 2

NOTE -The .text() method cannot be used on input elements. For input field text, use the .val() method.

.val( )
This method will get the current value of the first element in the set of matched elements.

Following are some example of ‘.val()’ :

$(‘select.foo option:selected’).val(); // get the value from a dropdown select
$(‘select.foo’).val(); // get the value from a dropdown select even easier
$(‘input:checkbox:checked’).val(); // get the value from a checked checkbox
$(‘input:radio[name=bar]:checked’).val(); // get the value from a set of radio buttons

jQuery Tree traversal

Sameera Thilakasiri — Sun, 11 Sep 2011 09:18:10 +0000

.children()
This method get a set of elements containing all of the unique immediate children of each of the matched set of elements.

Example :
$(“div”).children(“.selected”).css(“color”, “blue”);
It finds all children with a class “selected” of each div.

.closest( )
This method get a set of elements containing the closest parent element that matches the specified selector, the starting element included.

Example :
$(‘li.item-a’).closest(‘ul’).css(‘background-color’, ‘red’);
This will change the background color of the closest “ul” .

.find( )
This method searches for descendent elements that match the specified selectors.

Example :

.next()
This method get a set of elements containing the unique next siblings of each of the given set of elements.

Example :
$(“p”).next(“.selected”).css(“background”, “yellow”);
It finds the very next sibling of each paragraph. Keep only the ones with a class “selected”.

.nextAll()
This method is used to find all sibling elements after the current element.

Example :
$(‘li.third-item’).nextAll().css(‘background-color’, ‘red’);

.nextUntil()
It finds all sibling elements after the current element.

Example : Consider the following code :

.offsetParent()
This method get the closest ancestor element that is positioned. The .offsetParent() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object wrapped around the closest positioned ancestor.

.parent( )
This method get the direct parent of an element.

Example :
It will find the parent element of each paragraph with a class “selected”.

.parents( )
This method gets the ancestors of each element in the current set of matched elements.

Example :
$(‘li.child-a’).parents().css(‘background-color’, ‘red’) ;

.parentsUntil()
The script below change the red background for the level-2 list and the item II.

$(‘li.item-a’).parentsUntil(‘.level-1′).css(‘background-color’, ‘red’);

.prev( )
This method will get the immediately preceding sibling of each element in the set of matched elements.

Example :
$(‘li.third-item’).prev().css(‘background-color’, ‘red’);

.prevAll()
This method will get all preceding sibling of each element in the set of matched elements.

The following script changes red background behind Node 1 and Node 2.

Example :
$(‘li.third-item’).prevAll().css(‘background-color’, ‘red’);

.prevUntil( )
This method gets all preceding siblings of each element up to the provided ‘selector’.

Example:
(‘#term-2′).prevUntil(‘dt’).css(‘background-color’, ‘red’);
This will get all the elements before “term-2″ until it would not get “dt” .

.siblings( )
This method gets the siblings of each element in the set of matched elements.

Example :
$(“p”).siblings(“.selected”).css(“background”, “yellow”);
It finds all siblings with a class “selected” of each ‘p’.

Traversing through filtering

Sameera Thilakasiri — Sun, 11 Sep 2011 09:04:45 +0000

Traversing through filtering

Finding element by filtering has following methods :

METHOD	DESCRIPTION	EXAMPLE
. eq()	Find Elements by index	$(“li”).eq(2).addClass(“drop”);
.filter()	The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s).	$(“li”).filter(“.middle”).addClass(“drop”);
.first()	Reduce the set of matched elements to the first in the set.	(‘li’).first().css(‘background-color’, ‘green’);
.has()	Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.	$(“ul”).has(“li”).addClass(“high”);
.is()	Check the current matched set of elements against a selector and return true if at least one of these elements matches the selector.	if ($(this).is(“:first-child”)) {}
.last()	Reduce the set of matched elements to the final one in the set.	$(“p span”).last().addClass(‘highlight’)
.map()	Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).	We can get the sum of the values of the checked inputs: var sum = 0; $(‘input:checked’).map(function() { return sum += (this.value * 1); });
.not()	Remove elements from the set of matched elements.	$(‘li’).not(‘:even’).css(‘background-color’, ‘red’);
.slice()	Selects a subset of the matched elements.	Selects all paragraphs, then slices the selection to include only the first element. $(“p”).slice(0, 1).wrapInner(“”);

Form Element Selector

Sameera Thilakasiri — Sun, 11 Sep 2011 08:07:38 +0000

: button Selector
This type of selector is used to select all input buttons plus all button elements.

Example :
$(“:button”).css({background:”yellow”, border:”3px red solid”});

It changes the color and border of all buttons.

: checkbox Selector
It selects all the element of type checkbox.

Example :
$(“form input: checkbox”).wrap(‘‘).parent().css({background:”yellow”, border:”3px red solid”});

It select all the checkboxes of form and create a border around it and changes it’s color also.

: checked Selector
The :checked selector works for checkboxes and radio buttons. For select elements, use the :selected selector. Matches all elements that are checked.

Example :
$(“input: checked”).length;
It gives the number of input elements that are checked.

: disabled Selector
It selects all the elements that are disabled.

Example : It finds all input elements that are disabled.

: enabled Selector
It selects all the element that are enabled.

Example :
It selects all the input element that are enabled .

: file Selector
It selects all the element of ‘file’ type.

Example :
$(“input: file”).css({background:”yellow”, border:”3px red solid”});

: image Selector
It selects all the image type elements.

Example :
$(“input: image”).css({background:”yellow”, border:”3px red solid”});

: input Selector
It selects all the input elements. Input elements like input, textarea, select and button etc.

Example :
var allInputs = $(“:input”);

It counts the number of input elements and save it to “allInputs” variable.

: password Selector
It selects all the element of type password.

Example :
$(“input: password”).css({background:”yellow”, border:”3px red solid”});

: radio Selector
This type of selector selects all element of radio type.

Example :
$(“form input: radio”).css({background:”yellow”});

: reset Selector
This type of selector selects all element of radio type.

Example :
$(“input: reset”).css({background:”yellow”, border:”3px red solid”});

: submit Selector
This type of selector selects all element of submit type.

Example :
$(“td :submit”).parent(‘td’).css({background:”yellow”, border:”3px red solid”})

It changes the background color and border of all the ‘submit’ type whose parent is ‘ td ‘.

: text Selector
It selects all element of type submit .

Example :
$(“form input: text”).css({background:”yellow”, border:”3px red solid”});
It selects all text inputs :

: selected Selector
It selects all the elements that are selected.

Example:





You can select multiple option by pressing "ctrl" key. 
Can deselect the option by clicking on it.