ViralPatel.net » JQuery

Understanding jQuery animate() function

Viral Patel — Tue, 09 Mar 2010 13:08:15 +0000

jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.

.animate( properties, [ duration ], [ easing ], [ callback ] )

properties: A map of CSS properties that the animation will move toward.
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.

.animate( properties, options )

properties: A map of CSS properties that the animation will move toward.
options: A map of additional options to pass to the method. Supported keys:
- duration: A string or number determining how long the animation will run.
- easing: A string indicating which easing function to use for the transition.
- complete: A function to call once the animation is complete.
- step: A function to be called after each step of the animation.
- queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
- specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

Lets learn the animate() function with set of examples.

First include the jQuery javascript library in your html file. Add following in your html tag:

For all the demos, we will use a sample DIV tag for animating. Following is the div code and its stylesheet.



Animate Height

Animate height/width

Animating height and width in jQuery is very easy. Lets assume you have a DIV that you want to animate i.e. increase the height.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "80px"},
			"fast");
});

Demo 1:

Also following will be the code to animate Width of the element.

$("#animate").click(function() {
	$("#content").animate(
			{"width": "350px"},
			"fast");
});

Demo 2:

Animate opacity

$("#animate").click(function() {
	$("#content").animate(
			{"opacity": "0.15"},
			"slow");
});

Demo 3:

Moving elements using animate()




Move

$("#right").click(function() {
	$("#content").animate(
			{"left": "+=50px"},
			"slow");
});
$("#left").click(function() {
	$("#content").animate(
			{"left": "-=50px"},
			"slow");
});

Demo 4:

Callback Function

Callback functions are very useful to perform certain activity when the animation is completed. Also note here when multiple elements are mapped with the animation and we have specified a callback function. Then the callback will get called for each of the element.

Let us see an example where we use callback function to display a message when animation is completed.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", function(){
				$(this).html("Animation Completed");
			});
});

Demo 5:

Combine multiple animations

You may want to combine multiple animations. Following are few demos will help you understanding this.

Example 1: Animate both height and width at same time.
This example is pretty straight forward. You can animate both height and width at same time by specifying it in animate function. For example: In below code we specified height and width value in animate function.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", );
});

Example 2: Queuing the animations.

$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, 500)
		.animate({"width": "250px"}, 500);
});

Demo 6:

Queuing of Events

In above demo (Demo 6) we saw that when we queued up the events with multiple .animate() method call, the animation is actually queued up. i.e. it completes the first animation and then proceed with next. Let see an example were we use queue parameter to disable queuing. In following example we have set parameter queue to false. The code is exactly same as demo 6, only change we added is queue = false. Also note that queue parameter is added with second argument.

$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, {"queue": false, "duration": 500})
		.animate({"width": "250px"}, 500);
});

Demo 7:

oEmbed: An Open Format Every Developer Should Know About

Viral Patel — Tue, 26 Jan 2010 09:24:36 +0000

Most of the internet users spend their online time in creating and sharing content on internet. Sharing has became one of the most popular activity of internet users. This is attributed to formats like RSS and services like Twitter, Facebook etc. that allows user to share content with each other.

oEmbed addresses the important task of sharing and embedding information anywhere on internet. It allows developers to build applications that can easily access data from vast number of websites like youtube, flickr, google video, wordpress, wikipedia and many many more.

So what’s oEmbed? Well if you go by the definition on oEmbed’s official website:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

The best example of oEmbed can be Facebook’s status update feature. When you paste a youtube movie link in Facebook’s status bar, it automatically identify the link content as youtube movie and embed it in the status. Similarly you can paste any kind of content link: Flickr, Wikipedia etc.

Basics of oEmbed

In this document I will use two terms very often, consumer and provider. Consumer is the client who wants to convert a link into embedded content. And Provider is one who get the request and send the oembed response. For example, if you paste a youtube URL in Facebook’s status update, Facebook will be the consumer and Youtube will be the provider.

A consumer who wants to convert a link into content will make an HTTP request like:

http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

and the provider, in this case Flickr will send response in JSON format:

{
	"version": "1.0",
	"type": "photo",
	"width": 240,
	"height": 160,
	"title": "ZB8T0193",
	"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
	"author_name": "Bees",
	"author_url": "http://www.flickr.com/photos/bees/",
	"provider_name": "Flickr",
	"provider_url": "http://www.flickr.com/"
}

Youtube example:
Request URL:

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

Response:

{
	"version": "1.0",
	"type": "video",
	"provider_name": "YouTube",
	"provider_url": "http://youtube.com/",
	"width": 425,
	"height": 344,
	"title": "Amazing Nintendo Facts",
	"author_name": "ZackScott",
	"author_url": "http://www.youtube.com/user/ZackScott",
	"html":
		"
			
			
			
			
		",
}

Once the consumer get the response, all it has to do is to utilize the content and embed it in the page.

Request Format

The consumer who is requesting for the embed content must follow some basic rules while sending request. Requests sent to the API must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded.
Following are the request parameters:

url (required): This is the URL for which embedded content is requested
maxwidth (optional): An optional parameter for maxwidth can be passed. Some of the content provider who support this param will send the response content accordingly. For example, Flickr may set the maxwidth of image.
maxheight (optional): Similar to maxwidth, maxheight is an optional param.
format (optional): By default the content provider’s response is in JSON. But consumer may want the response in other formats like XML. This parameter will determine is response format

Response Format

The provider who sends the response back to consumer may send it with following parameters.

type (required): The resource type. Valid values, along with value-specific parameters, are described below.
version (required): The oEmbed version number. This must be 1.0.
title (optional): A text title, describing the resource.
author_name (optional): The name of the author/owner of the resource.
author_url (optional): A URL for the author/owner of the resource.
provider_name (optional): The name of the resource provider.
provider_url (optional): The url of the resource provider.
cache_age (optional): The suggested cache lifetime for this resource, in seconds. Consumers may choose to use this value or not.
thumbnail_url (optional): A URL to a thumbnail image representing the resource. The thumbnail must respect any maxwidth and maxheight parameters. If this paramater is present, thumbnail_width and thumbnail_height must also be present.
thumbnail_width (optional): The width of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_height must also be present.
thumbnail_height (optional): The height of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_width must also be present.

The provider may wants to add more attributes to the response.

Letting People Know You Support oEmbed

The oEmbed providers can make their service discoverable by adding following element in HEAD for the HTML document.

The URLs contained within the href attribute should be the full oEmebed endpoint plus URL and any needed format parameter. No other request parameters should be included in this URL.

The type attribute must contain either application/json+oembed for JSON responses, or text/xml+oembed for XML.

oEmbed Demo with jQuery

Integrating oEmbed support in your application using jQuery is very easy using jQuery oEmbed plugin. Following is the source code the of demo.
The HTML Code

Content URL:

The jQuery Code

$(function(){
	$('#btn').click(function() {
		$("#embed").oembed($('#update').val());
	});
});

Don’t forget to include jquery library and jquery oembed javascript in the demo.
The Demo
Enter any oEmbed supporting URL (Youtube video link or Flickr link http://www.flickr.com/photos/stuckincustoms/2035748576/) in below textbox and press Get.

(demo link)

oEmbed in PHP

There is a small PHP library that can be used to integrate oEmbed support in PHP. oEmbed-PHP is a library that provides OEmbed compatible interface for javascript and PHP clients to consume. It can deal with OEmbed providers by acting as a proxy, and it has a plugin system where you can add your own embed-providers.
Import this small PHP library and directly use it in your application.

  $manager = ProviderManager::getInstance();
  $obj=$manager->provide("http://www.youtube.com/watch? v=EQqJSAOOmGI","object");
  $html=$obj->renderClass();

oEmbed for other languages

Perl
Web-oEmbed (http://search.cpan.org/~miyagawa/Web-oEmbed/)

Ruby
oembed_links (http://github.com/netshade/oembed_links)

Python
Python oEmbed (http://code.google.com/p/python-oembed/)

jQuery Resizable and Draggable Tutorial with Example

Viral Patel — Mon, 25 Jan 2010 09:48:15 +0000

Have you ever tried doing some animation using plain Javascript or moving DIVs here and there or resizing them?! Well, you know then how much pain it is as not only you have to tackle the difficult part of animation but also making it cross browser compatible.

Well you probably know why I am stretching up so hard is just to tell you how easy it is to use jQuery and do some really fantastic things without even bothering of knowing how it is done internally. jQuery comes with really useful UI library that can be incorporated to do such tricks.

In this small note, I will show you how to do Resizing and Dragging of a DIV using jQuery UI. I will show you the demo of a DIV, which can be resized by pulling up the edges and also dragged here and there.

Step 1: Setting up jQuery UI and CSS

We need to install jQuery UI library first in order to do resizing/dragging. Add following lines in your HEAD of html document.

Note that we have imported jquery and jquery-ui library. Also, to use Resizable we must import jquery-ui.css file. This stylesheet will be used by resizable to add resize corner and other internal styles.

Step 2: Write jQuery to Resize and Drag

For the demo we will define a small DIV which we will make resizable and draggable.

Now just add following jQuery code in your document.

$('#resizeDiv')
	.draggable()
	.resizable();

The beauty of jQuery is that we can simply chain the function calling. First we called .draggable() function that makes the DIV draggable and then we called resizable().
You may want to define callback functions on start/stop/resize events. To do so we simply define:

$('#resizeDiv')
	.resizable({
		start: function(e, ui) {
			alert('resizing started');
		},
		resize: function(e, ui) {

		},
		stop: function(e, ui) {
			alert('resizing stopped');
		}
	});

Note that the callback function gets two arguments. First is event object and next is ui.
The ui object has the following fields:

ui.helper – a jQuery object containing the helper element
ui.originalPosition – {top, left} before resizing started
ui.originalSize – {width, height} before resizing started
ui.position – {top, left} current position
ui.size – {width, height} current size

For more information about jQuery Draggable (Drag and Drop) read this article.
jQuery Draggable (Drag and Drop)

Online Demo

Following is the online demo of jQuery Resizable and Draggable.

(Demo Link)

jQuery Live Event

Viral Patel — Mon, 14 Dec 2009 09:25:31 +0000

I love jQuery. I have expressed my love for jQuery here, here and here and still I feel so much for it. Also check out the 20 jQuery Tips & Tricks Tutorial.

Let us see a wonderful function available in jQuery which many of us don’t know. Most common use of jQuery is to attach an event some callback function to any element on webpage.

When we attach any event to element on webpage using normal functions such as mouseclick or click or mouseover, it attach the event only to current elements. If dynamically we add another element in future then this handler is not attached to those dynamic elements.

For example, we have a button on click of which we display an alert message. We can use $('#buttonid').click() to attach a handler function which can display alert message. But what if we dynamically add another button on page and we want exactly the same functionality? Well, jQuery Live Function comes to rescue for such requirements.

Let us see an example of normal event handling and one with Live function. In this example, we are dynamically adding list items that has hover effect. When mouse is hover on this list item, it changes the color. We will do this by both traditional way and using Live function.

The HTML

Following is the HTML Code for our example:

The HTML will display two buttons and two list sets. One button will dynamically add list item to one list using normal click event, where as another button will use Live events to do this.

The CSS

We will use following CSS in our example:

.list	li 	{
	list-style: none;
	background-color:#eeffaa;
	width:150px;
	margin-top:5px;
	border:1px solid #8AAC00;
}

.list li.selected {
	background-color: #ffaaee;
}

The jQuery

First we will attach an event with two buttons to dynamically add a list item.

$('#add').click(function(){
	$('#list').append(' ');
});
$('#addLive').click(function(){
	$('#listLive').append(' ');
});

Then, we will make the first list hoverable using mouseover and mouseout event.

$('#list>li')
		.mouseover(function(){ $(this).addClass('selected'); })
		.mouseout(function(){ $(this).removeClass('selected'); });

And, then we will make the second list hoverable using live() event.

$('#listLive>li')
	.live('mouseover', function(){ $(this).addClass('selected');   })
	.live('mouseout',  function(){ $(this).removeClass('selected'); });

Notice the difference in above code. In first snippet we are using mouseover and mouseout functions to attach events with handlers to change the background color of list item. When we add a list item dynamically, this handler are not attached to newly created list item. And in second snippet we are using live() to attach event mouseover and mouseout.

This way we ensure that any dynamically added element will have the events handler attached with them.
jQuery 1.3 and below
Currently jQuery 1.3 and below is not supporting events blur, focus, mouseenter, mouseleave, change, submit.
But the good news is that jQuery 1.4 alpha 1 has just been released which supports these events.

Important Points

Following are few important points one should note before working with Live events.

When you bind a “live” event it will bind to all current and future elements on the page.
Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation.
Live events currently only work when used against a selector. For example, this would work: $("li a").live(...) but this would not: $("a", someElement).live(...) and neither would this: $("a").parent().live(...).
.live doesn’t support the no-event style callback that liveQuery provides. Only event handlers can be bound with .live.
.live doesn’t have a “setup” or “cleanup” step, since all events are delegated rather than bound directly to an element.
To remove a live event you should use the die() method

Live Demo

Following is the live demo for jQuery Live Event Example.

Click To View Demo
Download Source Code

Fantastic Bouncy Effect using jQuery/JavaScript

Viral Patel — Thu, 22 Oct 2009 09:51:45 +0000

Let us see how can we create a Bounce Effect in HTML pages using jQuery. Bounce effect is an effect which resembles bouncing of a ball on floor or on a wall. These kind of effects dramatically improve user experience.
Related: FadeIn / FadeOut Effect jQuery

The Goal

Our Goal will be to create a HTML page that has 4 boxes (DIVs). Clicking each of these boxes will bounce them is a particular direction. We can control the direction as well as the speed of bouncing element with arguments to the method of jQuery.

Step 1: The HTML Code

Following will be the HTML code for our example:



	Click here to bounce. Direction: Up
	Click here to bounce. Direction: Left


	Click here to bounce. Direction: Right
	Click here to bounce. Direction: Down

Step 2: The Stylesheet CSS Code

Just to add some color to our boxes, add following CSS code to your HTML:

div {
	padding:5px;
	width:150px;
	height:100px;
	text-align:center;
}
#bouncy1 {
	background-color:#FFEE88;
}
#bouncy2 {
	background-color:#EE88FF;
}
#bouncy3 {
	background-color:#EE8888;
}
#bouncy4 {
	background-color:#88EEFF;
}

Step 3: The jQuery/JavaScript Code

Now we will give the actual bounce effect to the demo. We will use jQuery library for this. Also we need to include jQuery UI for bounce effect. For this we will include js files from google apis. Google host the jQuery UI and jQuery core files on their server. We can directly include it from there.

Also copy following code in your HTML to give final bounce effect.

$(function(){

	//Add bounce effect on Click of the DIV
	$('#bouncy1').click(function () {
		  $(this).effect("bounce", { times:5 }, 300);
	});

	$('#bouncy2').click(function () {
		  $(this).effect("bounce", { direction:'left', times:5 }, 300);
	});

	$('#bouncy3').click(function () {
		  $(this).effect("bounce", { direction:'right', times:5 }, 300);
	});

	$('#bouncy4').click(function () {
		  $(this).effect("bounce", { direction:'down', times:5 }, 300);
	});

	//Bounce all DIVs on click of button
	$("#bounceAll").click(function(){
		$("div").click();
	});
});

Online Demo

View Demo

Download

Default Text Label in Textbox using JavaScript/jQuery

Viral Patel — Thu, 24 Sep 2009 12:03:46 +0000

In one of my previous article about Change Form Textbox Style on Focus, we discussed about Usability and HCI issues. Slight change in web pages/input forms can increase user experience.

Nowadays, it has became a common practice to give user labels on fields that they are editing. For example, if you see Google’s custom search textbox in any website, most of them will have a Google’s Logo in background and when user clicks on Textbox, the logo disappears. Thus we can create an input form with labels in background of textboxes. When user select the textboxes, the labels disappear enabling user to edit the textbox.

Let us see how can we use JavaScript/jQuery to achieve this.

Step 1: The HTML

We will use following simple HTML Form. Create an HTML file and Copy and paste following code.




	Username
	 


	Age
	 


	City
	 


	Comment

Notice that while defining each text fields, we have provided title attribute. The text that is displayed on background of textbox is taken from the Title attribute. So generally the title attribute should be like “Enter Email Address” or “Type Address”.

Step 2: The CSS

Copy following CSS in your HTML file. You may want to include a separate CSS file for this.

.text-label {
	color: #cdcdcd;
	font-weight: bold;
}

The above CSS class is applied to the Textbox when user has not entered anything in it. Once the user starts typing in Textbox the CSS class is removed.

Step 3: The JavaScript

We are almost done with our implementation. Only thing left is the JavaScript code that actually add and remove css to textboxes.

$('input[type="text"]').each(function(){

	this.value = $(this).attr('title');
	$(this).addClass('text-label');

	$(this).focus(function(){
		if(this.value == $(this).attr('title')) {
			this.value = '';
			$(this).removeClass('text-label');
		}
	});

	$(this).blur(function(){
		if(this.value == '') {
			this.value = $(this).attr('title');
			$(this).addClass('text-label');
		}
	});
});

The above code is straight forward. For each textbox in the webpage, we hook handler function to events focus and blur. When Textbox is focused, check if the value is same as Title. If so, then remove the background label css and let user edit the value in textbox. And while blur event(focus lost), check the value: if user has not entered anything, set the background css again.

Online Demo

Online Demo

Create Simplest Accordion Menu using jQuery

Viral Patel — Thu, 17 Sep 2009 16:17:03 +0000

Let us create a simple Accordion Menu using jQuery. Accordion Menu are the menu with some animation effect. It has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area. We will use jQuery effects to animate the accordion menu. jQuery provides Fade In/Fade Out effect, but accordion menu looks more realistic if we use Slide In / Slide Out effect.
Related: 20 jQuery Tips & Tricks

Step 1: Create HTML for your Menu

First we will create HTML for displaying out Menu. We will use List in HTML to render the menu and then we will use CSS to apply some style. Following will be our Menu code:


	Sports
	
		Golf
		Cricket
		Football
	
	Technology
	
		iPhone
		Facebook
		Twitter
	
	Latest
	
		Obama
		Iran Election
		Health Care

If you check the HTML page now it should look something like:

Step 2: Apply some style to your Menu using CSS

Lets apply some stylesheet to our menu. Copy following CSS code in your HTML file:

#accordion {
	list-style: none;
	padding: 0 0 0 0;
	width: 170px;
}
#accordion li{
	display: block;
	background-color: #FF9927;
	font-weight: bold;
	margin: 1px;
	cursor: pointer;
	padding: 5 5 5 7px;
	list-style: circle;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#accordion ul {
	list-style: none;
	padding: 0 0 0 0;
	display: none;
}
#accordion ul li{
	font-weight: normal;
	cursor: auto;
	background-color: #fff;
	padding: 0 0 0 7px;
}
#accordion a {
	text-decoration: none;
}
#accordion a:hover {
	text-decoration: underline;
}

Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, but it will not work with Internet Explorer. If we want to change the look n feel for internet explorer, we may want to include IE-Specific stylesheet to our HTML page.
Once we apply the stylesheet, our menu will look like:

Step 3: Give life to your Menu using jQuery

So our basic skeleton is complete. We have used HTML code to display the Accordion menu content and then have applied CSS stylesheet to improve the usability. Let us add life to this accordion menu using jQuery. Copy following jQuery code to the HTML page:

$("#accordion > li").click(function(){

	if(false == $(this).next().is(':visible')) {
		$('#accordion > ul').slideUp(300);
	}
	$(this).next().slideToggle(300);
});

$('#accordion > ul:eq(0)').show();

If you notice the above code, we have made the first menu item in accordion menu visible.

$('#accordion > ul:eq(0)').show();

To make a menu item visible by default, just add its index value to the above code. For example to display 1st menu item we added eq(0) in above code.

Online Demo

No article is complete without an online demo. Here is the online demo for Accordion Menu.

VIEW DEMO

DOWNLOAD

Changing Form Input (Textbox) Style on Focus using jQuery

Viral Patel — Wed, 16 Sep 2009 14:05:57 +0000

User experience has always been a factor to be consider while you design a website. Lot of fields such as Human Computer Interface (HCI) and Usability etc have been studied upon. While designing a user interface, special care should always been taken while placing the text fields and selecting fonts. While lot of web designers prefer to display forms in plain vanilla manner, lot of others prefer to give user as much help while filling the forms. Thus the html forms should always have description field with each input field. Also if we can highlight the field that user is filling, it can improve the user experience.

Thus How can we implement the feature where the Input fields which are currently focused are highlighted?

Let us use jQuery and create a simple feature on a HTML Form.

Step 1: The HTML Code

We will use following form as a sample HTML Form and apply the Focus effect using jQuery.


	
	
		Name 
		
	
	
		Age
		
	
	
		Phone no.

Step 2: The CSS Stylesheet

We will use a simple style class to apply to the focused field.

.focus {
	border: 2px solid #AA88FF;
	background-color: #FFEEAA;
}

Step 3: Add the effect using jQuery

We will use jQuery to add effect to the form elements. Two events has to be taken care of. While the input field is focused and while the focus is moved to next textbox (blured).

$('input[type="text"]').focus(function() {
	$(this).addClass("focus");
});

$('input[type="text"]').blur(function() {
	$(this).removeClass("focus");
});

Online Demo

View Demo

20 Top jQuery tips & tricks for jQuery programmers

Viral Patel — Mon, 17 Aug 2009 09:51:54 +0000

Following are few very useful jQuery Tips and Tricks for all jQuery developers. I am sharing these as I think they will be very useful to you.
Disclaimer: I have not written all of the below code but have collected from various sources from Internet.

1. Optimize performance of complex selectors

Query a subset of the DOM when using complex selectors drastically improves performance:

var subset = $("");
$("input[value^='']", subset);

2. Set Context and improve the performance

On the core jQuery function, specify the context parameter when. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, rather than from the DOM root. Given a large enough DOM, specifying the context parameter should translate to performance gains.

$("input:radio", document.forms[0]);

3. Live Event Handlers

Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:

$('button.someClass').live('click', someFunction);

This allows you to load content via ajax, or add them via javascript and have the event handlers get set up properly for those elements automatically.

Likewise, to stop the live event handling:

$('button.someClass').die('click', someFunction);

These live event handlers have a few limitations compared to regular events, but they work great for the majority of cases. Live event will work starting from jQuery 1.3

4. Checking the Index

jQuery has .index but it is a pain to use as you need the list of elements and pass in the element you want the index of

var index = e.g $('#ul>li').index( liDomObject );

The following is easier:

if you want to know the index of an element within a set, e.g. list items within a unordered list:

$("ul > li").click(function ()
{
    var index = $(this).prevAll().length;
});

5. Use jQuery data method

jQuery’s data() method is useful and not well known. It allows you to bind data to DOM elements without modifying the DOM.

6. Fadeout Slideup effect to remove an element

Combine more than one effects in jQuery to animate and remove an element from DOM.

$("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });
});

7. Checking if an element exists

Use following snippet to check whether an element exists or not.

if ($("#someDiv").length) {
    //hooray!!! it exists...
}

8. Add dynamically created elements into the DOM

Use following code snippet to create a DIV dynamically and add it into the DOM.
Further Reading: Dynamically Add/Remove rows in HTML table using JavaScript

var newDiv = $('');
newDiv.attr("id","myNewDiv").appendTo("body");

9. Line breaks and chainability

Instead of doing:

$("a").hide().addClass().fadeIn().hide();

You can increase readability like so:

$("a")
  .hide()
  .addClass()
  .fadeIn()
  .hide();

10. Creating custom selectors

$.extend($.expr[':'], {
    over100pixels: function(a) {
        return $(a).height() > 100;
    }
});

$('.box:over100pixels').click(function() {
    alert('The element you clicked is over 100 pixels high');
});

11. Cloning an object in jQuery

Use .clone() method of jQuery to clone any DOM object in JavaScript.

// Clone the DIV
var cloned = $('#somediv').clone();

jQuery’s clone() method does not clone a JavaScript object. To clone JavaScript object, use following code.

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

12. Test if something is hidden using jQuery

We use .hide(), .show() methods in jquery to change the visibility of an element. Use following code to check the whether an element is visible or not.

if($(element).is(":visible") == "true") {
       //The element is Visible
}

13. Alternate way of Document Ready

//Instead of
$(document).ready(function() {
	//document ready
});
//Use
$(function(){
	//document ready
});

14. Selecting an element with . (period) in its ID

Use backslash in the selector to select the element having period in its ID.

$("#Address\\.Street").text("Enter this field");

15. Counting immediate child elements

If you want to count all the DIVs present in the element #foo


  
  
    
  
  


//jQuery code to count child elements
$("#foo > div").size()

16. Make an element to “FLASH”

jQuery.fn.flash = function( color, duration )
{
    var current = this.css( 'color' );
    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );
}
//Then use the above function as:
$( '#importantElement' ).flash( '255,0,0', 1000 );

17. Center an element on the Screen

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();

18. Getting Parent DIV using closest

If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector:

$("#searchBox").closest("div");

19. Disable right-click contextual menu

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

20. Get mouse cursor x and y axis

This script will display the x and y value – the coordinate of the mouse pointer.

$().mousemove(function(e){
	//display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

Sum HTML Textbox Values using jQuery / JavaScript

Viral Patel — Tue, 21 Jul 2009 15:55:45 +0000

Here is a small code snippet to sum the values of all textboxes in a form in JavaScript using jQuery. I wrote it for some functionality and thought to share it with you all. The requirement is simple, whenever user modify the value of a textbox, the fresh sum should be calculated and displayed on the form. I used jQuery for this as it provides simple way of selecting elements and iterating through them.

Source Code

Following is the complete source code.


	
		Sum Html Textbox Values using jQuery/JavaScript
		
		
	
	

	
		1
		Butter
		
	
	
		2
		Cheese
		
	
	
		3
		Eggs
		
	
	
		4
		Milk
		
	
	
		5
		Bread
		
	
	
		6
		Soap
		
	
	
		 
		Sum :
		0

Let us step by step see what above code is doing.

First the $(document).ready() is called which gets triggered whenever the webpage is loaded.
Inside $(document).ready(), we selected all textboxes by the class name “.txt” and iterate through each of them and added event handler on keydown event. Thus whenever keypress event will occur, the code will trigger calculateSum() function. Note that you may want to change the selector code that suits your html elements. In this case we selected textboxes based on class=”txt” as all textbox has this class.
The keydown event triggers the function calculateSum(). In this function again we iterate through each textboxes and sum up the values in a variable sum. Note that we have checked whether the value is number before adding it to the sum.
Finally we update the innerHTML property of span #sum using $("#sum").html(sum) code. You may want to display the sum in some textbox or some other place.

Online Demo

Click here to view online Demo

Click here to bounce. Direction: Up	Click here to bounce. Direction: Left
Click here to bounce. Direction: Right	Click here to bounce. Direction: Down

ViralPatel.net » JQuery

Understanding jQuery animate() function

Animate height/width

Animate opacity

Moving elements using animate()

Callback Function

Combine multiple animations

Queuing of Events

See also:

oEmbed: An Open Format Every Developer Should Know About

Basics of oEmbed

Request Format

Response Format

Letting People Know You Support oEmbed

oEmbed Demo with jQuery

oEmbed in PHP

oEmbed for other languages

See also:

jQuery Resizable and Draggable Tutorial with Example

Step 1: Setting up jQuery UI and CSS

Step 2: Write jQuery to Resize and Drag

Online Demo

See also:

jQuery Live Event

The HTML

The CSS

The jQuery

Important Points

Live Demo

See also:

Fantastic Bouncy Effect using jQuery/JavaScript

The Goal

Step 1: The HTML Code

Step 2: The Stylesheet CSS Code

Step 3: The jQuery/JavaScript Code

Online Demo

View Demo Download

See also:

Default Text Label in Textbox using JavaScript/jQuery

Step 1: The HTML

Step 2: The CSS

Step 3: The JavaScript

Online Demo

See also:

Create Simplest Accordion Menu using jQuery

Step 1: Create HTML for your Menu

Step 2: Apply some style to your Menu using CSS

Step 3: Give life to your Menu using jQuery

Online Demo

See also:

Changing Form Input (Textbox) Style on Focus using jQuery

Step 1: The HTML Code

Step 2: The CSS Stylesheet

Step 3: Add the effect using jQuery

Online Demo

See also:

20 Top jQuery tips & tricks for jQuery programmers

1. Optimize performance of complex selectors

2. Set Context and improve the performance

3. Live Event Handlers

4. Checking the Index

5. Use jQuery data method

6. Fadeout Slideup effect to remove an element

7. Checking if an element exists

8. Add dynamically created elements into the DOM

9. Line breaks and chainability

10. Creating custom selectors

11. Cloning an object in jQuery

12. Test if something is hidden using jQuery

13. Alternate way of Document Ready

14. Selecting an element with . (period) in its ID

15. Counting immediate child elements

16. Make an element to “FLASH”

17. Center an element on the Screen

18. Getting Parent DIV using closest

19. Disable right-click contextual menu

20. Get mouse cursor x and y axis

See also:

Sum HTML Textbox Values using jQuery / JavaScript

Source Code

View Demo

Download