kute and...

omg

Blink and bounce effect on image or object using jquery

Yesterday, Sushil asked me how can we bounce and blink an image or div using jQuery.In this post, I”ll show you how you can add bounce or blink effect to an image or div using jQuery.

Live Demo

First of all, let’s begin with the html code to add blink and bounce effect to your object using jQuery.

HTML Code:

<div id="object" class="message"> lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div>

Here the object which is needed to be animated is defined with the class”message” and with id “object”. Remember that, you can also put image in that “div” to bounce or blink.

Css Code:

.message{
border:1px solid #CCCCCC;
padding: 5px;
width: 150px;
background-color:#F4F4F8;
text-align:justify;
position:absolute;
top:50px;
}

You can see the attributes of the “message” class in css. You can change the above attributes as your need but remember one thing that the position property should be “absolute”. If you put it “relative”, the other object around the animated “div” or “image” starts get moved.

Javascript Code:

For blinking out the Object

//hide the object with blink effect
$("#blink_out").click(function()
{
  $("#object").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
});

As you can see above code, it is straightforward. When an element with id “blink_out” gets clicked, the element with id “object” gets animated with “fade out” and “fade in” effect of jQuery in alternative manner.

For blinking in the Object

//show the object with blink effect
$("#blink_in").click(function()
{
  $("#object").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
});

As you can see this code is same as the above code but altered the way the “image” or “div” gets faded.

For bouncing the Object

//bounce an object
$("#bounce").click(function()
{
  $("#object").fadeIn(100).animate({top:"-=20px"},100).animate({top:"+=20px"},100).animate({top:"-=20px"},100)
.animate({top:"+=20px"},100).animate({top:"-=20px"},100).animate({top:"+=20px"},100);
});

In the above code, we’ve used jquery’s animate() function to bounce an “image” or “div”. The “top” attribute of the object is toggled to show the bouncing effect on the object.
Download full source code

25 Plugins for jQuery Facebook

Facebook is an integral part of our lives and we are so used to of check it for professional or personal reasons, that its difficult to live without it. Facebook is so popular that you can find various jQuery plugins which helps you make adapt different features and styles of Facebook on your website.
This is in a way good also because people and accustomed of using Facebook and they can link themselves better with the sites that offers them Facebook like features. Thus we have brought 25 best plugins for jQuery Facebook to bring you closer to your best social media website.
If you like this article, you might be interested in some of our other articles on jQuery Navigation Tutorials, jQuery UI Resources, jQuery Scrollbar Plugins, and jQuery Gallery Plugins.
Hovercard You can now create a hovercard just like Facebook’s hovercard, with this plugin. A hovercard can be called as a way to show related information in card format when you hover over text or link.


More Information on Hovercard

55 jQuery Animate Resources

Gone are the days when every beautiful animation on a website was considered to be born out of Flash. But not any more. Slowly but steadily jQuery has stolen all the limelight from Flash and has fascinated the developers with its unmatchable features.
jQuery is known as write less do more script. jQuery Animate in such a wonderful manner that you hardly think about opting out for heavy flash websites. We have collected really invigorated jQuery Animate Tutorials which will open new doors of possibilities for you.
We are presenting a whooping list of tutorials and plugins which will show you how you can create wonderful animations using jQuery. With availability of various JavaScript frameworks, jQuery is quickly becoming a front-runner in every aspect. If you are looking out for some resources to enhance your knowledge level, you will surely love today’s post that has more than 50 jQuery Animate Tutorials. You will get a peek-a-boo in some easy and many advanced level animations which you might be considering a flash product till now.
If you like this collection, you might be interested in some of our older articles on jQuery Slideshow Plugins, jQuery Tooltip Plugins, jQuery Table Plugins, jQuery Dropdown Menus, and Is jQuery Really Capable of Replacing Flash?.


Create a Cool Animated Navigation with CSS and jQuery
   Author is going to build a really cool animated navigation menu using just CSS and jQuery.

More Information on Create a Cool Animated Navigation with CSS and jQuery 

police girl

 

 

 

Girls z

 

 

Piece reward so that 0.7

• ADMove
• Sdefense
• Jattack
• Kjump
• LTeleport
• ULong-
• INirvana

• Skills
• WJSkills 1
• SJSkills 2
• KJSkills 3
• WUSkills 4
• SUSkills 5
• KUSkills 6

Savage Wars dinosaur

• Use Mouse

street fighter2

• Move
• ASDhand attack
• ZXCFoot attack

street fighter

Control

• Move
• Jattack
• Kjump
• Lfly attack

[FBP] Hijacking Facebook Pages

A Facebook security flaw ?�� or, perhaps, a misunderstanding ?�� lets Page admins boot the creator of the original Page from admin status, effectively hijacking the Page, Naked Security reports.

One could argue that this is working as intended: if the creator of a Facebook Page lets someone else in as admin, they have the same administrative rights as them, right? Wrong. Facebook?��s FAQ clearly states that ?��the original creator of the Page may never be removed by other Page admins.?��

Unfortunately, as visible in the video embedded below, a newly appointed page admin can remove the Page creator's admin status, which can be very nasty in certain cases. Today, Facebook Pages are more than fun, they're a serious part of business promotion and losing administrative access to a Page can lead to host of problems.

Is it a security flaw or simply an error in Facebook's FAQ? According to the Register, it's the latter. Ultimately, it doesn?��t matter: either way it will confuse users and cause problems, since the FAQ says one thing and the reality is very different.

We've asked Facebook for comment but haven't yet heard from them.

Have you ever had a Facebook Page hijacked by another admin? Please, share your experiences in the comments.

Adding a Syntax Highlighter to your Blogger blog

Syntax or code highlighting is important particularly when you need to show code examples on your blog. It is always a big task to read codes on a blog or a website without syntax highlighting, though they are enclosed with code tags. By integrating the syntax highlighter on a blog or a website, readers can read the code examples easier. There are so many free syntax highlighting scripts available on many websites. Most of the scripts are written in JavaScript, though some of them are powered by other programming languages such as Phyton or Ruby. I believe "SyntaxHighlighter by Alex Gorbatchev" is the most common syntax highlighting script used by most of us. It supports a lot of different languages and you can easily create new "brush" for your language if it is not supported by default.

Using Python and jQuery

Python has a solid set tools to power web applications. The necessary knowledge lies in passing variables between python and jquery, however this can be hard to figure out. Here is a simple tutorial on how to send information between python and jquery to make python-powered web applications. 1. Write the HTML

Python-jQuery Example

Sliding elements

In the previous chapter, we saw how we could fade elements in and out of visibility using the fading methods of jQuery. However, sometimes a sliding effect is a better choice, and for that, jQuery has a set of matching methods for doing just that. Let's kick off with a simple example of it, where we use the slideDown() method:

Hello, world!

Show box

Fading elements

Doing simple animation is very easy with jQuery. One of the effects it supports out-of-the-box, is fading an element in and out of visibility. Here's a simple example, where we fade in an otherwise hidden box, using the fadeIn() method:

Hello, world!

Show box

Working with widths and heights

jQuery makes it easy for you to work with the dimensions of your elements and even the browser window. You can use the width() and height() methods for finding the dimensions, or alternatively the innerWidth()/innerHeight()/outerWidth()/outerHeight() methods, depending on the measurements you need. First a little example illustrating the differences and the some explanation:

Show element dimensions

The live() method

In the previous chapters, we used the bind() and unbind() methods to attach and detach event handlers to various elements on the page. This works great for elements which already exists, but what if you want your event handler to be attached to future elements as well? Normally you would have to do this manually, upon creating the new elements, and this is still possible. However, using the live() method, you can inform jQuery to attach your event handler to any future elements which matches your original selector, without having to lift a finger. Let me first show you an example where we use the bind() method, and then replace it with the live() method, to show you the difference:

Add box
        


This is a box

The unbind() method

In the previous chapter, we used the bind() method to subscribe to events with jQuery. However, you may need to remove these subscriptions again for various reasons, to prevent the event handler to be executed once the event occurs. We do this with the unbind() method, which in its simplest form simply looks like this:

$("a").unbind();

This will remove any event handlers that you have attached with the bind() function. However, you may want to only remove event subscriptions of a specific type, for instance clicks and doubleclicks: $("a").unbind("click doubleclick"); Simply separate the event types with a comma. Here is a more complete example, where you can see it all in effect:

Test 1
Test 2

 

The bind() method

One of the most important aspects of dealing with events through jQuery is the bind() and unbind() methods. As the names imply, they will simply attach and unattach code to one or several events on a set of elements. We saw a very simple usage example for the bind() method in the introduction chapter for events, and here is a more complete one: Try this example Test 1 Test 2 It works by selecting all links ( elements) and then bind the anonymous function you see to the click event. A cool little feature is that jQuery will automatically assign the element that is clicked, to the "this" keyword inside of the anonymous function. This will allow you to access the element that activates the element, even when you assign the same code to multiple elements. When jQuery calls your method, it will pass information about the event as the first parameter, if you have specified one or more parameters on it. For instance, the event object passed will contain information about where the mouse cursor is, which type the event is, which keyboard key or mouse button was pressed (if any) and much more. You can see all the properties and methods on the event object here: http://api.jquery.com/event.which/ Here is an example:

Introduction to events

Events in JavaScript are usually something where you write a snippet of code or a name of a function within one of the event attributes on an HTML tag. For instance, you can create an event for a link by writing code like this: Try this example

Test
 

Aborting an AJAX request

There may be situations where you need to cancel a running AJAX request before it ends. It's usually in cases where the user might perform an action, which sets of an AJAX request, several times within a short time period. A good example of this is auto-complete functionality for a search box, where you might try to help the user by finding related search terms based on their current input, by making an AJAX request each time they press a key in the search field. In that case, it's very likely that the user types faster than your AJAX request can be performed and therefore you would want to abort any non-finished requests, before starting the next one. Consider the following example:

It requests a PHP script which is doing a very complicated calculation (as you will see from the result), which means that it usually takes ~3 seconds to finish. Now, try the example and push the button several times after each other. The same "calculation" will be performed multiple times and the result will also be displayed multiple times (with a 3 second delay). Fortunately, a call to the get() method and pretty much any other jQuery AJAX method, returns an object which, among others, contains an abort() method. We can save this reference and then call the abort() method on it if needed. Have a look at this slightly modified example:

We start off by defining a common variable for containing the request reference. In the PerformAbortableCalculation() method, we assign the return value of the get() call to this variable, but before we do so, we check to see if it's null (the method hasn't been used yet) and if not, we call the abort() method on it. If you try this example and click several times, you will see that no matter how many times you click the button, it only executes the callback function once.

Showing progress

When doing AJAX requests, you may want to show some sort of progress while waiting for the request to finish, especially if it might take a while for it to do so. It's actually very simple to do so with jQuery, as you will see from the following example:

Right before performing the AJAX request, we change the text of the sender (the button which calls the function). As soon as it succeeds, we set it back. That's the simplest form of progress. Another approach is to show a piece of text somewhere on the page, but the most common way of doing it is to show a little piece of graphic which illustrates that the browser is currently working. You could make one yourself, or even better: Use one of the great online generators, for instance http://ajaxload.info/. I've created one, as you can see in the next example:

The process is pretty much the same, but instead of setting a text, we show and hide an existing image. You can place the image in a spot that the user is most likely to notice or dynamically place the image next to button/link clicked, if you have more than one. The possibilities are really endless. There is one problem with the above examples though: If the request fails for some reason, the progress is shown but never removed again. We can fix this by subscribing to the error event, where we can then remove the progress and then show an error message. Check out this example:

It's pretty much identical to the first example, but here we call the error function on the returned AJAX object and pass in a callback function which should be called if the request fails, which it will in this example, since I have changed the path for the requested file to something which doesn't exist.

Parent/child relation selectors

jQuery also allows you to select elements based on their parent element. There are two variations: One which will only match elements which are a direct child to the parent element, and one which will match all the way down through the hierarchy, e.g. a child of a child of a child of a parent element. The syntax for finding children which are direct descendants of an element looks like this:

$("div > a")

This selector will find all links which are the direct child of a div element. Replacing the greater-than symbol with a simple space will change this to match all links within a div element, no matter if they are directly related or not:

$("div a")

Here's an example where we color bold tags blue if they are directly descending from the first test area:

        Bold text
        Italic text
        

                Bold text 2
                Italic text 2
                

                        Bold text 3
                
        

As you will see, only the first bold tag is colored. Now, if you had used the second approach, both bold tags would have been colored blue. Try the following example, where the only thing changed is the greater-than character which has been replaced with a space, to note that we also accept non-direct descendants or "grand children" as they are sometimes called:

        Bold text
        Italic text
        

                Bold text 2
                Italic text 2
                

                        Bold text 3
                
        

Now the cool thing is that you can actually go back up the hierarchy if needed, using the parent() method. We'll look into that in another chapter of this tutorial.

Using attributes

In the previous chapter, we saw how we could find elements in a page from their class or their ID. These two properties are related because of the fact that you can use them to style the elements with CSS, but with jQuery, you can actually find elements based on any kind of attribute. It comes with a bunch of attribute selector types and in this article, we will look into some of them. Find elements with a specific attribute The most basic task when selecting elements based on attributes is to find all the elements which has a specific attribute. Be aware that the next example doesn't require the attribute to have a specific value, in fact, it doesn't even require it to have a value. The syntax for this selector is a set of square brackets with the name of the desired attribute inside it, for instance [name] or [href]. Here is an example:

Test 1

Test 2

Test 3

We use the attribute selector to find all elements on the page which has a title attribute and then underline it. As mentioned, this will match elements with a title element no matter what their value is, but sometimes you will want to find elements with a specific attribute which has a specific value. Find elements with a specific value for a specific attribute Here's an example where we find elements with a specific value:

Link 1

Link 2

Link 3

The selector simply tells jQuery to find all links (the a elements) which has a target attribute that equals the string value "_blank" and then append the text "[new window]" to them. But what if you're looking for all elements which don't have the value? Inverting the selector is very easy: $("a[target!='_blank']").append(" [same window]"); The difference is the != instead of =, a common way of negating an operator within many programming languages. And there's even more possibilities: Find elements with a value which starts with a specific string using the ^= operator:

$("input[name^='txt']").css("color", "blue");

Find elements with a value which ends with a specific string using the $= operator:

$("input[name$='letter']").css("color", "red");

Find elements with a value which contains a specific word:

$("input[name*='txt']").css("color", "blue");

Using elements, ID's and classes

The #id selector A very common selector type is the ID based, which we saw in the "Hello, world" example. It uses the ID attribute of a HTML tag to locate the desired element. An ID should be unique, so you should only use this selector when you wish to locate a single, unique element. To locate an element with a specific ID, write a hash character, followed by the ID of the element you wish to locate, like this:

$("#divTest")

An example of it in use:

Now, while there is only a single element that matches our query above, you should be aware that the result is a list, meaning that it can contain more than one element, if the query matches more than one. A common example of this is to match all elements which uses one or several CSS classes. The .class selector Elements with a specific class can be matched by writing a . character followed by the name of the class. Here is an example:

        
Test 1
        
Test 2
        
Test 3

The element selector You can also match elements based on their tag names. For instance, you can match all links on a page like this:

$("a")

Or all div tags like this:

$("div")

If you use a multi-element selector, like the class selector we used in the previous example, and we know that we're looking for elements of a specific type, it's good practice to specify the element type before the selector. Not only is it more precise, it's also faster for jQuery to process, resulting in more responsive sites. Here is a re-written version of the previous example, where we use this method:

$("span.bold").css("font-weight", "bold");

This will match all span elements with "bold" as the class. Of course, it can be used with ID's and pretty much all of the other selectors as well. Selectors can do much more for you though. Read on for more cool examples.

The get() and post() methods

The jQuery get() and post() methods allows you to easily send a HTTP request to a page and get the result back. When you post a form, it's usually either a GET or a POST request, and with jQuery you can mimic that, since both a get() and a post() method exists. The two methods are pretty much identical, since they simply just invoke different request types against the server. They are both static methods, which means that instead of instantiating a jQuery object and then working with that, we call get() or post() directly on the jQuery class, either by writing jQuery.get() or by using the shortcut character like this: $.get(). In its most simple form, the get() and post() methods takes a single parameter, which is the URL that you wish to request. However, in most cases you will want to do something with the returned data, in which case you can pass a callback function as a parameter, which jQuery will call if the request succeeds. Let's do some testing. In the previous chapter, I created an HTML file called "content.html", which we loaded using the jQuery load() method. When testing the following example, make sure that you have a file called "content.html" in the same directory as the file in which you have the example. The content doesn't really matter, just write anything in there really. Here's an example of the get() method: Try this example

The first parameter is the URL, which is just content.html. The second parameter is more interesting. It's a callback function, which jQuery calls if the page request succeeds. The first callback parameter is simply the content of the page requested, while the second callback parameter is the textual status of the request. You can of course request a simple HTML page, like in the example above, but normally the reason for using a GET or a POST request is that you wish to pass in some parameters, which is then processed by the server, for instance with a piece of PHP, ASP or ASP.NET code, and then return the result. jQuery can take a map of GET or POST parameters, which we will try in the following example, where we use the post() method: Try this example

This example is much like the first one, but we make the POST request to another page, in this example a PHP page, and as the second parameter, we pass in a map of POST parameters. The map is constructed of two parameters, a name and an age. If we had used a GET request instead of a POST request (POST requests doesn't take parameters from the URL like GET does), the above code would actually have corresponded to requesting an URL like this in your browser: test_get.php?name=John Doe&age=42 The PHP script can then read the parameters, process them and return a result. The script on our server simply takes the two values and creates a string like " is years old" and then returns it, which you can see if you test the example above.

The remove() and empty() methods

In the last couple of chapters, we have worked with adding new elements to a page, but of course jQuery can help you remove them as well. There are mainly two methods for this: remove() and empty(). The remove() method will delete the selected element(s), while the empty() method will only delete all child elements of the selected element(s). The following example should illustrate the difference - be sure to click the links in the right order though:

empty() div   
remove() div

        Bold text
        Italic text

The first link will call the empty() method on our test div, removing all the child elements. The second link will remove the entire div, including any child elements. Pretty simple stuff. The remove() method comes with one optional parameter, which allows you to filter the elements to be removed, using any of the jQuery selector syntaxes. You could of course achieve the same simply by doing the filtering in your first selector, but in some situations, you may be working on a set of already selected elements. Check out this example of it in use:

remove() more bold

        Bold text

        More bold text

        Even more bold text

We start out by selecting all bold tags inside our test div. We then call the remove() method on the selected elements, and pass in the .more filter, which will make sure that we only get elements which uses the class "more". As a result, only the last two bold texts are removed. You can of course use even more advanced selectors as a filter too. Have a look at the "Selectors" topic of this tutorial for inspiration.

The before() and after() methods

In the previous chapter, we used the append() and prepend() methods to insert stuff inside an element, but in some cases, you need to insert things before or after one or several elements instead. jQuery has the before() and after() methods for just this purpose, and they are just as easy to use. Check out this example: Try this example

Before   
After

Depending on which of the two links you click, an italic or a bold tag will be inserted before or after each input element on the page using the "test1" class. Just like with append() and prepend(), both after() and before() allows you to use HTML strings, DOM elements and jQuery objects as parameters and an infinite amount of them as well. We'll demonstrate that in the next example: Try this example

Insert elements



Hello world? 

In this example, we create a jQuery object, an HTML string and a JavaScript DOM element, and then we use the after() method to insert all of them after our span tag. Of course, the before() method could have been used in exactly the same way. There are variations of the before() and after() methods, called insertBefore() and insertAfter(). They do pretty much the same, but they do it the other way around, so instead of calling them on the elements you wish to insert data before or after, with a parameter of what is to be inserted, you do the exact opposite. Which method to use obviously depends on the situation, but here's an example showing you how to use them both: Try this example

Insert elemenets



Hello world? 

In this example, we insert the items before the span tag, but you could of course do the exact same using after() and insertAfter(), if you wish to insert after the target elemenet. As you can see, the result is the same - only the order of what we do differs.

The append() and prepend() methods

Adding new stuff to existing elements is very easy with jQuery. There are methods for appending or prepending, taking HTML in string format, DOM elements and jQuery objects as parameters. In the next example, you will see how easy it is to insert new elements in a list, using both the append() and the prepend() method:

Append   
Prepend


        
Existing item
        
Existing item

We have to links: The first will append an item to the list, meaning that the new item will be inserted as the last item. The other link will prepend a link to the list, which means that the new item will be inserted as the first item of the list. In this example, we simply insert a piece of HTML, but we could have generated the new items with jQuery as well, or created it through regular JavaScript code and DOM elements. In fact, both the append() and the prepend() method takes an infinite amount of new elements as parameters. In the next example, we will demonstrate this as well as the ability to add elements in various forms:

Append items   

As you can see, item1 is a jQuery generated element, item2 is a simple HTML string and item3 is a JavaScript DOM generated element. They are all appended to the list using the same call and of course this would have worked for the prepend() method too. There are variations of the append() and prepend() methods, called appendTo() and prependTo(). They do pretty much the same, but they do it the other way around, so instead of calling them on the elements you wish to append/prepend to, with a parameter of what is to be appended/prepended, you do the exact opposite. Which to use obviously depends on the situation, but here's an example showing you how to use them both:

Prepend items   

In this example, we prepend the items, but you could of course do the exact same using append() and appendTo(). As you can see, the result is the same - only the order of what we do differs.

Getting and setting CSS classes

Just like it's very easy to manipulate content and attributes of elements, as we saw in the previous chapters, it's equally easy to manipulate the CSS of elements. jQuery gives you easy access to changing both the style attribute, which you manipulate using the css() method, as well as the class(es) of an element, where several different methods lets you modify it. Let's start by looking into changing the class attribute. The class attribute takes one or several class names, which may or may not refer to a CSS class defined in your stylesheet. Usually it does, but you may from time to time add class names to your elements simply to be able to reach them easily from jQuery, since jQuery has excellent support for selecting elements based on their class name(s). I have defined a couple of very simple CSS selectors in my stylesheet, mostly for testing purposes:

.bold {
        font-weight: bold;
}

.blue {
        color: blue;
}

In the following example we will use three of the most interesting class related methods: hasClass(), which checks if one or several elements already has a specific class defined, addClass(), which simply adds a class name to one or several elements and the removeClass() methods, which will.... well, you've probably already guessed it.

Toggle class

The example is actually very simple. When the link is clicked, we send the link itself (this) as a parameter to the ToggleClass() method that we have defined. In it, we check if the sender already has the "bold" class - if it has, we remove it, otherwise we add it. This is a pretty common thing to do, so obviously the jQuery people didn't want us to write an entire three lines of code to it. That's why they implemented the toggleClass() method, with which we can turn our entire example above into a single line of code:

Toggle class

Of course, we can select multiple elements, where we can add or remove multiple classes, as well. Here's an example of just that:

        Test 1

        
Test 2
        Test 3

First we select the span and the b tag, which we add a single class to: the bold class. Then we select the div tag, which we add two classes to, separated by a space: The bold and the blue class. The removeClass() methods works just the same way, allowing you to specify several classes to be removed, separated with a space.

Getting and setting attributes [attr()]

In the previous chapter, we saw how easy it was to get and set text and HTML content from and to an element. Fortunately, changing one or more attributes of an element is just as easy. We use the attr() method for this, which in its simplest form takes one parameter: The name of the attribute we wish to get:

Google Link

In this example, we get the value of the "href" attribute of our link and then show it to the user. To change an attribute, we simply specify an extra parameter:

Google Link

This will change the link to point to the British version of Google. The attr() method can also take a map of name/value pairs, for setting multiple attributes at the same time. Here we set both the href and the title attributes simultaneously:

Google Link

The attr() method also supports the special overload where the value parameter is instead a callback function, allowing you to access the index of the element selected as well as the existing attribute value. Here's an example of just that:

Google.com

Google UK

Google DE

We simply change all the Google links to point to the Image search instead of the default page, by adding an extra parameter to the href attribute. In this example we don't really use the index parameter, but we could have if we needed it, to tell us which index in the list of elements selected we're currently dealing with.

Getting and setting content [text(), html() and val()]

The simplest aspect of DOM manipulation is retrieving and setting text, values and HTML. These three things might seem like the same thing, but they're not. Text is a textual (no HTML) representation of the inner content for all regular elements, values are for form elements and HTML is the same as text, but including any markup. Fortunately for us, jQuery comes with a method for each of the three, allowing us to both retrieve and set these properties: The text(), html() and val() methods. Here's a little example which will show you the difference between them and how simple they are to use:

        Test
        

So a call to one of these methods with no parameters will simply return the desired property. If we want to set the property instead, we simply specify an extra parameter. Here's a complete example:

And that's how easy it is to set text, HTML and values. These three functions comes with one overload more though, where you specify a callback function as the first and only parameter. This callback function will be called with two parameters by jQuery, the index of the current element in the list of elements selected, as well as the existing value, before it's replaced with a new value. You then return the string that you wish to use as the new value from the function. This overload works for both html(), text() and val(), but for the sake of simplicity, we only use the text() version in this example:

Paragraph 1
Paragraph 2
Paragraph 3

We start out with three similar paragraph elements, which text is their only difference. In the jQuery code, we select all of them and then use the special version of the text() method to replace their current text with a newly constructed text, based on the two parameters that jQuery provides for us: The index of the current element as well as its current text. This new text is then returned to jQuery, which will replace the current text with the new one.

Stopping animations with the stop() method

In the previous chapter, we saw how we could do custom animations using the animate() method and how we could have several animations after each other, by making several animation calls and thereby using the animation queue of jQuery. However, sometimes you need to stop an animation before it finishes, and for this, jQuery has the stop() method. It works for all effects related jQuery functions, including sliding, fading and custom animations with the animate() method. Here's an example where we use it:

Show box   
Stop


        Hello, world!

To make the example a bit more compact, I have used inline calls in the onclick events of the two links. When you click the first link, the slideDown() method is used on our div element, starting a slow slide down. A click on the second link will kill the current animation being performed on the selected element. This is the default behavior of the stop() method, but two optional parameters allows us to do things differently. The first parameter specifies whether the animation queue should be cleared or not. The default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards. The following example will demonstrate that:

Show box   
Stop   
Stop all   
Reset


        Hello, world!

We have added a second animation to the "Show box" link. This will slowly slide down the box, and once done, slide it up again. The queue system makes sure that these steps are performed in sequence. Now, click the "Reset" link to have the box hidden again and then click the "Show box" link once more, followed by a click on "Stop". You will see that the first animation is stopped, allowing for the second animation to be executed. However, if you try again and click on the "Stop all" instead, the true value passed will make sure that the entire queue is cleared and that all animation on the element is stopped. The second parameter tells jQuery whether you would like for it to just stop where it is, or rush through the animation instead, allowing for it to finish. This makes a pretty big difference, because as you can see from the first example, once you hit stop, the default behavior is to simply stop the animation where it is and leave it like that. The following example will show you the difference:

Show box   
Stop   
Stop but finish   
Reset


        Hello, world!

Try the two "Stop" variations - the first will stop immediately, while the second one will rush the animation to finish.

In previous chapters, we looked into the built-in fading and sliding effect methods of jQuery. However, you can much more than just that. With the animate() method, you can create custom animations where you manipulate pretty much any numerical CSS property of an element. This allows you to e.g. move a box slowly across the screen or have it jump up and down. Let's try something very simple:

The first, and only required, parameter of the animate function is a map of the CSS properties that you wish to have altered. In this case, we have an absolutely positioned div element, which we tell jQuery to move until it has reached a left property of 200 pixels. The second parameter allows you to specify the duration of the animation in milliseconds or as "slow" or "fast" which is the same as 600 or 200 ms. With this, we can slow down the above example as much as we want:

As the third parameter, we can specify a callback function to be called once the animation is done. This can be very useful for performing a number of different animations in a row. For instance, check out this example:

It might seem a bit overwhelming, but what we do is that we call the animate method and ask for the left property of our test "div" to be animated until it reaches a left of 100 pixels. We want it to take 1 second (1000 milliseconds) and once it completes, we wish for a new animation to start, which moves it back to 20 pixels within half a second, and as soon as THAT animation is done, we move it a bit right again, so that it now has a left property of 50 pixels. However, since jQuery comes with queue functionality for animations, you can actually achieve the above example in a much simpler manner. This however only applies when you want a set of animations to performed after each other - if you want to do something else when an animation is complete, the above example will still be the way to go. Here's the queue version:

The load() method in jquerry part3

jQuery Load Content In this section you will learn how to load content of a text file using jQuery and show it on the use browser. This example shows you how to load the content of simple text file and then show on the text box. Our jQuery Load Content example will do the following work 1. Web page is displayed with a button "Load Content" and a blank text box 2. User clicks on the "Load Content" button. 3. jQuery loads the context of a text file "testFile.txt" and displays in the text area After completing this example you will be able to use jQuery to Load the content from server side text file and show it to the user. Code: 1. HTML Page Here is the code of "displayContent.html" file

 





Download Content Example

2. jQuery code in the page The following jQuery code retrieves the data from server and display in the text area.

function contentDisp()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}

3. Content of the text file Here is the content of the text file: Welcome to RoseIndia.Net jQuery Tutorials Learn how you can do a lot of work with small code. jQuery is here to help us in achieving high result with less coding. jQuery is great!!!! 4. Program screen shot Open your browse and type http://localhost/displayContent.html. Your browser should look like:

Now click on the "Click" button. The program will fetch the text data from database and display in the text area as shown below:

In this example you leaned how to fetch the text data from server and display in the text area.
Try the example online

The load() method in jquerry part2

As described in the previous chapter, there are many ways to use AJAX with jQuery, and they should of course be used depending on the situation. One of the simplest and yet still powerful methods for loading data asynchronously is the load() method. You use it by selecting an element where you want the content loaded to and then call the load() method on it. It takes the URL that you wish to load, as a parameter. For this example, we need a an external file that we can load. We'll call it content.html and the content of it should look something like this:

This is external content

And there's more of it Save it as content.html, in the same directory where you keep your other example files for this tutorial. We can load it as simple as this: Try this example

If you have the content file in another directory, or if you have named it differently, you will have to change the parameter for the load method accordingly. This is all it takes to load content from an external file with jQuery and the load method. A pretty cool trick is that you can actually pass a selector along with the URL, to only get a part of the page. In the first example, we loaded the entire file, but in the following example, we will only use the div, which contains the first sentence: Try this example

As you can see, we simply append a standard jQuery selector to the parameter, after the URL, separated with a space. This causes jQuery to select the content out and only pass the matched part(s) back to the container. You can use any jQuery selector type to pull off this trick, which makes it pretty powerful. The load method can take two extra parameters: A set of querystring key/value pairs, and a callback function which will be executed when the load method finishes, no matter if it succeeds or fails. Here is an example where we use the callback function to inform about the result. Normally, you would likely only show a message if the method fails, but to illustrate how it works, we do it if the method fails as well. I make sure that it fails for the example, by requesting a file which doesn't exist: Try this example

As you can see, the callback function specifies 3 parameters, which jQuery will fill in for you. The first parameter will contain the resulting content if the call succeeds. The second parameter is a string which specifies the status of the call, e.g. "success" or "error". You can use it to see if the call was successful or not. The third parameter is the XMLHttpRequest object used to perform the AJAX call. It will contain properties which you can use to see what went wrong and many other things.

Simple loading of HTML fragment using jQuery AJAX

jQuery provides a simple load() function to load an HTML fragment using AJAX. To test it, create a test data file called data.html:

  
    

Item 1
Item 2
Item 3
Item 4

Next, create a target HTML file called testLoad.html in the same folder with the following jQuery statement:

When you view testLoad.html, you should see the list items in data.html inserted into the target file, in the unordered list named myLinks. It was a little fiddly to get this working the first time. If your source HTML file has an error, nothing seems to happen; in that case, check your browser's error console to see what went wrong. For instance, in Firefox, when my source HTML file wasn't well-formed, I found this error: Error: mismatched tag. Expected: . Source File: Line: 8, Column: 5 Source Code: Another thing I found is that you can't include an XML processing instruction ( lines) in your data file because when load() tries to insert your XML file into your target document, you would get an error like this: Error: XML or text declaration not at start of entity Source File: Line: 1, Column: 43 Source Code: