Latest topics

The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted, makes elements invisible but retains space for them in the document layout. The hide() method, by contrast, removes the elements from the layouts as if the CSS display property was set to none. When invoked with no arguments, hide() and show() simply hide or show the selected elements immediately. With a duration argument, however, they animate the hiding or showing process. hide() shrinks an element's width and height to 0 at the same time that it reduces the element's opacity to 0. show() reverses the process. toggle() changes the visibility state of the elements, it is invoked on, if they are hidden, it calls show(), and it they are visible, it calls hide(). As with show() and hide(), you must pass a toggle() to get an animated effect. Passing true to toggle() is the same as calling show() with no arguments. Note also that if you pass ...

If you wanted to show/hide(reveal) the contents in HTML document by using simple methods, it is possible by using a simple javascript code running in it. This feature not only helps to make your webpage more stylist and attractive, also helps to present main contents or headings for the first look. It also helps to minimize the space for webpage which have very long content. In this post, I am going to describe " How to Reveal the Contents using simple JavaScrpt code ". Here I am using simple CSS code to set the CSS property of HTML element show or hidden and executed a JavaScript function on window.onload event handler. You can use the following simple CSS code to set the CSS property of HTML element show or hidden. .reveal * {display:none;}  // This code specifies the display property of HTML element having class name "reveal" to none .reveal *.handle{display:block;} // This code specifies the display property of HTML element having class name "handle" f...

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...