A33a

You can create animated visual effects by setting the CSS visibility property, i.e. making elements appearing and disappearing. Along with making an element appear and disappear, we might reduce the value of its opacity property over the certain period. This king of animated visual effect creates a more pleasing experience for user and jQuery makes them easy. jQuery defines simple methods such as fadeIn() and fadeOut() for basic visual effects. You can also use an animate() method for producing more complex custom animations.  Every animation has a duration that specifies how long the effect should last for. You can specify this as a number of milliseconds or by using a string. The string "fast" means 200ms and the sting "slow" means 600ms. If you specify a duration string that jQuery does not recognize, you will get a default duration of 400ms.  $("#animation").fadeIn(); // It fades an element in over 400ms $("#animation").fadeOut("fast...

HTML documents are represented as a tree of nodes rather than a linear sequence of characters, insertions, deletions, and replacements are not as simple as they are for strings and arrays. In jQuery there are some methods for making more complex changes to a document. There are number of method in jQuery for inserting and replacing elements, copying elements, wrapping elements and deleting elements. For insertion and replacement of elements in HTML document, you can use the methods append(), prepend() and replacewith().  You can copy HTML elements using clone() method and wrapp the elements using wrap(), wrapInner() and wrapAll() methods. For deletion of the element you can use empty(), reomve() and unwrap() methods.  How to Insert and Replace Elements using jQuery  You can use different methods to insert and replace elements using jQuery, each of the methods takes an argument that specifies the content that is to be inserted into the document.  The inserting can be ...

Some of the simplest and most common, operations on jQuery objects are those that get or set the value of HTML attributes, CSS styles, element content, or element geometry. In this post I am going to describe the methods to get or set HTML element attributes using jQuery. How to Get and Set HTML Attributes using jQuery You can get or set HTML attributes using attr() method in jQuery. The attr() method handles browser incompatibilities and special cases and allows you to use either HTML attributes names or their JavaScript property equivalents. Here are some examples of uses of attr() method for getting or setting HTML attributes. $("form").attr("action"); // It gets the action attribute from the first form. $("#icon").attr("src", "icon.gif"); // It sets the src attributes for image with id icon. $("a").attr("target", "_blank"); // It set the target attributes for all links to load in new windows $("...

jQuery() is a single global function defined by jQuery library. This function is so frequently used that the library also defines the global symbol $ as a shortcut for it. This single global function with two names is the central query function for jQuery. For example, if you need to ask for the set of all <div> elements in a document, write the following code. var divs=$("div"); The value returned by the jQuery() function represents a set of zero or more DOM elements is known as a jQuery object. jQuery objects define many methods for operating on the sets of elements they represent. How to Obtain jQuery jQuery library is free software. You can download if from http://www.jquery.com . Once you have download the code, you can include it in your web pages with a <script> element as given below. <script src="jquery-1.11.2.min.js"></script> Here the "min" in the filename indicates that this is the minimized version of the library, with ...

There are different methods to scroll HTML document using JavaScript, You can scroll the document to Top, Bottom or in any part or to view any element in the document using JavaScript. To scroll the document using JavaScript, there is a scrollTo() method in window object which takes the X and Y coordinates of a point and sets these as the scrollbar offsets. The scrollTo() method scrolls the window so that the specified point is in the upper left corner of the view-port. If you specify a point that is too close to the bottom or too close to the right edge of the document, the browser will move it as close as possible to the upper left corner. How to Scroll Bottom of Document Using JavaScript You can use the following set of JavaScript codes that scroll the browser to the bottom most page of the document. var documentHeight=documentElement.offsetHeight; var viewportHeight=window.innerHeight; window.scrollTo(0, documentHeight-viewportHeight); Here the first variable documentHeight specifi...

You can create dynamic table of contents for any HTML document using JavaScript which can show the list of headings from h1 to h6 with links to the headings and make easier to navigate through the document. In this post I am going to describe about the steps to Create Table of Contents Using JavaScript and about the JavaScript codes required to create dynamic table of contents. To create this set of JavaScript codes for creating table of contents, at first you have to know the different JavaScript concepts like selecting elements, document traversal, setting element attributes, setting innerHTML property, creating nodes and inserting then into the document. Steps to Create Table of Contents Using JavaScript At first create window.onload function that runs automatically when the document finishes loading as given below. window.onload=function(){ function getSelectedText(){ if (window.getSelection) return window.getSelection().toString()+" "+document.URL; else if (document.sele...

You have to select the document elements for manipulation of elements of document to complete any task for the document design or action of the document using JavaScript codes. There are number of ways to select elements to query a document for an element or elements in order to manipulate elements of the document, to obtain or select the element objects that refer to those document elements. The different ways to select elements to query a document are explained below. Selecting Elements By ID Attribute Any of the HTML element can have the unique id attribute within the document. You can select an element based on this unique id with getElementById() method of the document object. To select any element with id 'elt' you can use the following code. var elt=document.getElementById('elt'); Selecting Elements By Name Attribute Name attribute assigns the name of the element and it does not have to be unique. You can select the elements by name using getElementsByName() meth...