How to Create Show/Hide Effect in Image SlideShow Using JQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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 two or more function arguments to toggle() it registers event handlers.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here is an example that invokes methods for show/hide effect animation. The first image has show() effect animation, second image has hide() effect animation and the third animation has toggle() effect animation.<br /><br /><pre class="prettyprint">$("#img1").show(2000);<br />$("#img2").hide(3000);<br />$("#img3").toggle(1000);</pre><br />Here are some examples to show show(), hide() and toggle() effects using jQuery.<br /><br /><h4>Example of show() Effect </h4><br /><pre class="prettyprint"><script><br /> $(document).ready(function(){<br /> $(#btn1).click(function () {<br /> $("#img1").show(2000);<br /> });<br /> });<br /> </script><br /><br /><input type=button id="btn1" value="Start Show"/><br /><img id="img1" src="img1.jpg"> </pre><br /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ $("#img1").show(3000); }); }); </script> <input id="btn1" type="button" value="Start Show" /><img id="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0YgtxzOOu3NiFQjgi9Vd2jGl_JOGwtPGwkXdFFBd3VYs1jz_ZG-6vYPvpANdE5Zi0ORSMzNeepgXhrRRbLNUyGQ4t59X0SuVc66E3yDN6Qlhb21Md3XTMmuRRUV1LHoqdCrZAIR7fBMY/s1600/img1.JPG" style="display: none;" /> <br /><br /><h4>Example of hide() Effect</h4><br /><pre class="prettyprint"><script><br /> $(document).ready(function(){<br /> $(#btn2).click(function () {<br /> $("#img2").hide(3000);<br /> });<br /> });<br /> </script><br /><br /><input type=button id="btn2" value="Start Hide"/><br /><img id="img2" src="img2.jpg"> </pre><br /><script>$(document).ready(function(){ $("#btn2").click(function(){ $("#img2").hide(3000); }); }); </script><input id="btn2" type="button" value="Start Hide" /><img id="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtC0cFJP5PngHx_RMYfZyOhEcxYl9f9nkPNggqNOBB8aRWOQUyPlSKd8KavOnAHeUADcvutBFgqJCxFyGEzINMivyJeSlaALEHaafJwRjkl73zlV53JFDE1STYf4NTIGXbgtP08cLWidZ-/s1600/img2.JPG" /> <br /><br /><h4>Example of toggle() Effect </h4><br /><a name="more"></a><pre class="prettyprint"><script><br /> $(document).ready(function(){<br /> $(#btn3).click(function () {<br /> $("#img3").toggle(1000);<br /> });<br /> });<br /> </script><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><input type=button id="btn3" value="Start Toggle"/><br /><img id="img3" src="img3.jpg"></pre><br /><script>$(document).ready(function(){ $("#btn3").click(function(){ $("#img3").toggle(3000); }); }); </script> <input id="btn3" type="button" value="Start Toggle" /><img id="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUWDZXcUiLGgZlHPryVFEx8yUmjw2f_k0BHPF7yX__Ha9o9nf6I-_UO3IlkXuWvtN_Yldbw2gXHXaFj2IKdo3e1Cv2YvWzfnGWk5FGGU81DkSnyuQuIyBbvpZlfpN_LpNE7-g8GHBxbwz/s1600/img3.JPG" /> </div><br /><h3 style="text-align: left;">Full jQuery code for Show/Hide effect image animation</h3><br /><pre class="prettyprint"><script <br /><br />src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br /></script><br /><br /><style><br />.show_hide<br />{<br /> box-shadow:1px 1px 5px 2px #6DC83C;<br /> position:relative;<br /> width:448px;<br /> height: 336px;<br /> border-radius:19px;<br />}<br /><br />.show_hide img<br />{<br /> border-radius:19px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br />}<br /><br /></style><br /><br /><script><br />$(function(){<br /> $('.show_hide img:gt(0)').hide();<br /> setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end<br /><br />().appendTo('.show_hide');}, 6000);<br />});<br /></script><br /><br /><div class="show_hide"><br /><img src="img1.JPG" /><br /> <img src="img2.JPG" /><br /> <img src="img3.JPG" /><br /></div><br /></pre><br /><br /><h3 style="text-align: left;">Preview of Show/Hide effect image animation</h3><br /></div><style> .show_hide { box-shadow:1px 1px 5px 2px #6DC83C; position:relative; width:448px; height: 338px; max-width:100%; border-radius:19px; } .show_hide img { border-radius:19px; position:absolute; left:0; top:0; } </style> <script> $(function(){ $('.show_hide img:gt(0)').hide(); setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end().appendTo('.show_hide');}, 6000); }); </script> <br /><div class="show_hide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0YgtxzOOu3NiFQjgi9Vd2jGl_JOGwtPGwkXdFFBd3VYs1jz_ZG-6vYPvpANdE5Zi0ORSMzNeepgXhrRRbLNUyGQ4t59X0SuVc66E3yDN6Qlhb21Md3XTMmuRRUV1LHoqdCrZAIR7fBMY/s1600/img1.JPG" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtC0cFJP5PngHx_RMYfZyOhEcxYl9f9nkPNggqNOBB8aRWOQUyPlSKd8KavOnAHeUADcvutBFgqJCxFyGEzINMivyJeSlaALEHaafJwRjkl73zlV53JFDE1STYf4NTIGXbgtP08cLWidZ-/s1600/img2.JPG" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUWDZXcUiLGgZlHPryVFEx8yUmjw2f_k0BHPF7yX__Ha9o9nf6I-_UO3IlkXuWvtN_Yldbw2gXHXaFj2IKdo3e1Cv2YvWzfnGWk5FGGU81DkSnyuQuIyBbvpZlfpN_LpNE7-g8GHBxbwz/s1600/img3.JPG" /></div><br /><br /><br /><br /><h3> Related Posts:</h3><ul><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div>

How to Create Show/Hide Effect in Image SlideShow Using JQuery

The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted...

مزيد من المعلومات »

How to Create Animated Visual Effects Using jQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("#animation").fadeIn(); <br />// It fades an element in over 400ms<br />$("#animation").fadeOut("fast"); <br />// It fade outs over 200ms<br />$("#animation").fadeIn(5000);<br />//It fades an element in over 5000ms<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can also define new duration names by adding new string-to-number mappings to jQuery.fx.speeds as given below. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">jQuery.fx.speeds["medium-fast"]=3000;<br />jQuery.fx.speeds["medium-slow"]=5000;<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here is an example to create animated visual effects using methods fadeIn() and fadeOut() in jQuery </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br /><script><br />jQuery.fx.speeds["medium-slow"]=3000;<br />jQuery.fx.speeds["very-slow"]=5000;<br />$(document).ready(function(){<br /> $("#btn1").click(function(){<br />$("#animation1").fadeIn(); <br />$("#animation3").fadeIn(5000);<br />$("#animation5").fadeIn("medium-slow");<br />});<br /> $("#btn2").click(function(){<br />$("#animation2").fadeOut("fast");<br />$("#animation4").fadeOut("very-slow");<br />});<br /> });<br /></script><br /><input type=button id="btn1" value="Start FadeIn"/><br/><br /><div id="animation1" style="display:none;background:pink;">It fades an element in over 400ms</div><br/><br /><div id="animation3" style="display:none;background:red">It fades an element in over 5000ms</div><br/><br /><div id="animation5" style="display:none;background:yellow">It fades an element in over 3000ms</div><br/><br /><br /><input type=button id="btn2" value="Start FadeOut"/><br/><br /><div id="animation2" style="background:red">It fade outs over 200ms</div><br/><br /><div id="animation4" style="background:pink">It fade outs over 5000ms</div><br/><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>jQuery.fx.speeds["medium-slow"]=3000; jQuery.fx.speeds["very-slow"]=5000; $(document).ready(function(){ $("#btn1").click(function(){ $("#animation1").fadeIn(); $("#animation3").fadeIn(5000); $("#animation5").fadeIn("medium-slow"); }); $("#btn2").click(function(){ $("#animation2").fadeOut("fast"); $("#animation4").fadeOut("very-slow"); }); }); </script><input id="btn1" type="button" value="Start FadeIn" /></div><div id="animation1" style="background: pink; display: none;">It fades an element in over 400ms</div><div style="text-align: justify;"><br /></div><div id="animation3" style="background: red; display: none;">It fades an element in over 5000ms</div><div style="text-align: justify;"><br /></div><div id="animation5" style="background: yellow; display: none;">It fades an element in over 3000ms</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><input id="btn2" type="button" value="Start FadeOut" /><br /></div><br /><div id="animation2" style="background: none repeat scroll 0% 0% red; text-align: justify;">It fade outs over 200ms</div><div style="text-align: justify;"><br /></div><div id="animation4" style="background: none repeat scroll 0% 0% pink; text-align: justify;">It fade outs over 5000ms</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can also set the value of the document that was animated using a function as argument. Here is a jQuery code which quickly fade in an element and when it is visible, display some text in it. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br />$(document).ready(function(){<br />$("#btn4").click(function(){<br />$("#message").fadeIn("fast", function() {$("#message").text("Hello this is animation");});<br />});});<br /></script><br /><input type=button id="btn4" value="Start Animation"/><br/><br /><div id="message" style="color:red"></div><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script>$(document).ready(function(){ $("#btn4").click(function(){ $("#message").fadeIn("fast", function() {$("#message").text("Hello this is animation");}); });}); </script><input id="btn4" type="button" value="Start Animation" /></div><br /><div id="message" style="color: red;"></div><br /><a name="more"></a><br /><br /><div style="text-align: justify;">Passing a callback function to an effect method allows you to perform actions at the end of an effect. However, that is is not necessary when you simply want to perform multiple effects in sequence. If you call an animation method on an element that is already being animated, the new animation does not begin right away but is deferred until the current animation ends. For example, you can make an element blink before fading in permanently. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br />$(document).ready(function(){<br />$("#blinker").mouseover(function(){<br />$("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();});<br />});<br /></script><br /><div id="blinker" style="color:red"><h3>It blinks before fading in permanently</h3></div><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><script>$(document).ready(function(){ $("#blinker").mouseover(function(){ $("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();}); }); </script></div><div id="blinker" style="color: red; text-align: justify;"><h3>It blinks before fading in permanently</h3></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">jQuery's effect methods are declared to accept optional duration and callback arguments. It is also possible to invoke these methods with an object whose properties specify animation options. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br />$(document).ready(function(){<br /> $("#btn3").click(function(){<br />$("#effect").fadeIn({<br />duration: "slow",<br />complete: function(){$(this).text("Animation was completed");}<br />});});});<br /></script><br /><input type=button id="btn3" value="Start Animation"/><br /><div id="effect" style="background:yellow">This is sample animation effect</div><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script>$(document).ready(function(){ $("#btn3").click(function(){ $("#effect").fadeIn({ duration: "slow", complete: function(){$(this).text("Animation was completed");} });});}); </script><input id="btn3" type="button" value="Start Animation" /></div><br /><div id="effect" style="background: none repeat scroll 0% 0% yellow; text-align: justify;">This is sample animation effect</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><div style="text-align: justify;"><br /></div><h3> Related Posts:</h3><ul><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div></div>

How to Create Animated Visual Effects Using jQuery

You can create animated visual effects by setting the CSS visibility property, i.e. making elements appearing and disappearing. Along with m...

مزيد من المعلومات »

How to Alter HTML Document Structure using jQuery?

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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(). </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Insert and Replace Elements using jQuery </h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The inserting can be made into or before or after or in place of each selected elements. If the content to be inserted is an element that already exists in the document, it is moved from current location.</div><div style="text-align: justify;">The append() method inserts an element at the end of selected element, prepend() method inserts an element at start of selected element and replaceWith() method replaces one selected element with another. For append(), prepend() and replacewith() the second argument is the current content of the element as an HTML string. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">There are before() and after() methods, which can be used to insert before and after of each selected elements. For before() and after() the function is invoked with no second argument. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here are some examples of jQuery codes for inserting and replacing elements using jQuery. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("#clr").append("<br/>"+message); <br />// It adds a content at end of the #clr element<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").prepend(":"); <br />// It adds colon sign at the star of each <h1><br /></pre><br /><pre class="prettyprint">$("h1").before("<hr/>");<br />// It insert horizontal line before each <h1> element<br /></pre></div></div><br /><div style="text-align: justify;"><pre class="prettyprint">$("h1").after("<hr/>");<br />// It insert horizontal line after each <h1> element</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("hr").replaceWidth("<br/>");<br />// It replaces <hr/> elements with <br/><br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h2").each(function(){<br />var h2=$(this);<br />h2.replaceWith("<h1>"+h2.html()+"</h1>");<br />});<br />// It replaces <h2> with <h1> keeping the content.<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Similary, you can use appendTo(), prependTo(), insertAfter(), insertBefore and replaceAll() methods for the same purpose as given in the example below. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("<br/>"+message).appendTo("#clr"); <br />// It adds a content at end of the #clr element<br />$(document.createTextNode(":")).prependTo("h1"); <br />// It adds colon sign at the star of each <h1><br />$("<hr/>").insertBefore("h1");<br />// It insert horizontal line before each <h1> element<br />$("<hr/>").insertAfter("h1");<br />// It insert horizontal line after each <h1> element<br />$("<br/>").replaceAll("hr");<br />// It replaces <hr/> elements with <br/><br /> </pre></div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Copy Elements using jQuery </h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">If you insert elements that are already part of the document, those elements will simply be moved, not copied to their new location. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">If you want to copy elements to a new location instead of moving them, you must first make a copy with the clone() method. clone() makes and returns a copy of each selected element and all the descendent's of those elements. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">An example for copying elements using clone() method is given below. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$(document.body).append("<div id="linklist"><h1>List of Links</h1></div>");<br />//It appends a new div with id "linklist", to the end of the document<br />$("a").clone().appendTo("#linklist");<br />//It copy all links in the document and insert them into that new div<br />$("#linklist>a").after("<br/>");<br />//It insert <br/> elements after each link so they display on separate lines<br /></pre></div><div style="text-align: justify;"><br /><a name="more"></a></div><h3 style="text-align: justify;">How to Wrap Elements using jQuery </h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Another type of insertion into an HTML document involves wrapping a new element or elements around one or more elements. jQuery defines three wrapping functions, wrap() wraps each of the selected elements, wrapInner() wraps the contents of each selected element and wrapAll() wraps the selected elements as a group. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").wrap(document.createElement("i"));<br />//It produces <i><h1> .....</h1></i><br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").wrapInner("<i/>");<br />//It produces <h1><i>........</i></h1><br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("body>p:first").wrap("<a name="lead"><div class="first"></div></a>");<br />// It wraps the first paragraph in one anchor and div<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("body>p:not(:first)").wrapAll("<div class="rest"></div>");<br />//It wraps all the other paragraps in another div<br /></pre></div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Delete Elements using jQuery </h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Along with insertions and replacements, jQuery also defines methods for deleting elements. empty() removes all children including text nodes or each of the selected elements, without altering the elements themselves. The remove() method, by contrast removes the selected elements and all their content from the document. remove() is normally invoked with no arguments and removes all elements in the jQuery object. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"> $("#hide").empty();<br />// It removes all the contents having id #hide<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("#rmv").remove(); <br />// It removes the contents and events having id #rmv<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can use unwrap() method to perform element removal in a way that is the opposite of the wrap() or wrapAll() method. It removes the parent element of each selected element without affecting the selected elements or their siblings. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><h3> Related Posts:</h3><ul><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div>

How to Alter HTML Document Structure using jQuery?

HTML documents are represented as a tree of nodes rather than a linear sequence of characters, insertions, deletions, and replacements are n...

مزيد من المعلومات »

How to Get and Set Element Attributes using jQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: justify;" trbidi="on"><div>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. </div><br /><h3>How to Get and Set HTML Attributes using jQuery</h3><br /><div>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.</div><br /><div>Here are some examples of uses of attr() method for getting or setting HTML attributes.</div><br /><pre class="prettyprint">$("form").attr("action"); <br />// It gets the action attribute from the first form.</pre><br /><pre class="prettyprint">$("#icon").attr("src", "icon.gif"); <br />// It sets the src attributes for image with id icon.</pre><br /><pre class="prettyprint">$("a").attr("target", "_blank"); <br />// It set the target attributes for all links to load in new windows </pre><br /><pre class="prettyprint">$("a").attr("target", function(){<br /> if(this.host==location.host) return "_self"<br /> else return "_blank";<br />});</pre><br /><div>This function sets the attribute of all external links load in new windows and internal links load in the same window. </div><br /><div>There is another method related to attr() is removeAttr(), which is related function that completely removes an attributes from all selected elements. </div><br /><div>Here an example of uses of removeAttr() method for removing HTML attributes.</div><br /><pre class="prettyprint">$("a").removeAttr("target");</pre><br /><div>It removes the target attribute of link and makes all links load in the same window. </div><br /><h3>How to Get and Set CSS Attributes using jQuery</h3><br /><div>The css() method is very much like attr() method, but is works with the CSS styles of an element rather than the HTML attributes of the element. </div><br /><div>When querying style values, css() returns the current style of the element and the returned value may come from the style attribute or from a style-sheet.</div><br /><div>Here are some examples getting and setting CSS attributes using attr() method.</div><br /><pre class="prettyprint">$("h1").css("font-weight"); <br />// It gets font weight of first <h1></pre><br /><pre class="prettyprint">$("h1").css("font-variant", "smallcaps"); <br />// It sets font-variant property of <h1> to smallcaps.</pre><br /><pre class="prettyprint">$("h1").css({backgroundColor:"black",textColor:"white",<br /> fontVariant:"small-caps", padding: "10px 2px 4px 20px", <br /> border:"dotted black 4px"}); <br />// It sets multiple styles at once for <h1></pre><br /><h3>How to Get and Set CSS Classes using jQuery</h3><br /><div>jQuery defines convenience methods for working with the class attribute. addClass() and removeClass() add and remove classes from the selected elements. toogleClass() adds classes to elements that don't already have them and removes classes from those that do. hasClass() tests for the presence of a specified class. </div><br /><div>Here are are some examples for adding css classes, removing css classes, toggling css classes and testing css classes. </div><br /><h4>Adding CSS Classes</h4><pre class="prettyprint">$("h1").addClass("hilite"); <br />// It adds a class to all <h1> elements</pre><br /><pre class="prettyprint">$("h1+p").addClass("hilite first"); <br />// It adds two classes to elements after <h1><br /></pre><br /><pre class="prettyprint">$("section").addClass(function(n){return "scetion"+n;}); <br />// It passes a function to add a custom class to each matched element</pre><br /><h4>Removing CSS classes</h4></div><div style="text-align: justify;"><pre class="prettyprint">$("p").removeClass("hilite"); <br />// It removes a class from all p elements</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("p").removeClass("hilite first"); <br />// It removes two classes from <p> elements</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("section").removeClass(function(n){return "scetion"+n;}); <br />// It passes a function to remove a custom class to each matched element</pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Toggling CSS Classes</h4><div style="text-align: justify;"><pre class="prettyprint">$("tr:odd").toggleClass("oddrow"); <br />// It adds the class if it is not there or remove if it is.</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").toggleClass("big bold"); <br />// It toggles two classes at once. </pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").toggleClass(function(n){<br />return "big bold h1-" +n; }); <br />// It toggles a computed class or classes.</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").toggleClass("hilite", true); <br />// It works like addclass</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").toggleClass("hilite", false); <br />// It works like removeclass</pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Testing CSS Classes</h4><div style="text-align: justify;"><pre class="prettyprint">$("p").hasClass("first") <br />// It tests any p element have class first</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("#lead").is("first") <br />// It test any element with id lead have class first</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The hasClass() method is less flexible than addclass(), removeClass, and toggleClass(). hasClass() works for only a single class name and does not support function arguments. It returns true if any of the selected elements has the specified CSS class and returns false if none of them do. The is() method is more flexible and can be used for the same purpose. </div><br /><h3 style="text-align: justify;">How to Get and Set HTML Form Values Using jQuery</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">For setting and querying the value attribute of HTML form elements val() method is used and it is also used for querying and setting the selection state of check-boxes, radio buttons, and select elements. Here are some examples of getting and setting HTML form values using val() method. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("#firstname").val() <br />// It gets value from the firstname text field.</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("select #extras").val() <br />// It gets array of values from <select multiple< from element. </pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("input:radio[name=ship]:checked").val() <br />// It gets value of checked radio button.<br /></pre></div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Get and Set Element Content Using jQuery </h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The text() and html() methods query and set the plain-text or HTML content of an element or elements. When invoked with no arguments, text() returns the plain text content of all descendant text nodes of all matched elements. This works even in browsers that do not support the textContent or innerText properties. Here are some examples of getting and setting element content using text() and html() method </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">var title=$("head title").text() //It gets document title<br />var headline=$("h1").html() <br />//It gets the html of first <h1> element</pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("h1").text(function(n,current){<br /> return "$" + (n+1) + ": "+current }); <br />// It gives section number for each headings</pre></div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Get and Set Element Geometry Using jQuery</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">To query or set the position of an element, use the offset() method. This method measures positions relative to the document and returns them in the form of an object with left and top properties that hold the X and Y coordinates. It you pass an object with these properties to the method, it sets the position you specify. Here are some examples of getting and setting element geometry using offset() method </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">var elt=$("#sprite");<br />var position=elt.offset(); <br />// It gets the current position of an elememt<br />position.top +=100;<br />// It changes its Y coordinate 100px.<br />elt.offset(position);<br /></pre></div><div style="text-align: justify;"><br /><a name="more"></a></div><h3 style="text-align: justify;">How to Get and Set Element Data Using jQuery</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">jQuery defines a getter or setter method named data() that sets or queries data associated with any document element or with the Document or window objects. You can also use removeData() method to remove data from an element or elements. Here are some examples of getting and setting element data using data() method removing data using removeData() method. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("div").data("x",1); <br />//It sets some data "x" to div<br />$("div.nodata").removeData("x"); <br />//It removes some data "x" from div with class nodata<br />var x=$("#mydiv").data("x"); <br />//It query some data from element id "mydiv"</pre></div><div style="text-align: justify;"><br /></div><br /><h3> Related Posts:</h3><ul><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div>

How to Get and Set Element Attributes using jQuery

Some of the simplest and most common, operations on jQuery objects are those that get or set the value of HTML attributes, CSS styles, eleme...

مزيد من المعلومات »

How to Use jQuery With HTML?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq"><div style="text-align: justify;">var divs=$("div");</div></blockquote><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><h3>How to Obtain jQuery</h3></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">jQuery library is free software. You can download if from <a href="http://www.jquery.com/" rel="nofollow" target="_blank">http://www.jquery.com</a>. Once you have download the code, you can include it in your web pages with a <script> element as given below.</div><pre class="prettyprint"><script src="jquery-1.11.2.min.js"></script></pre><div style="text-align: justify;"><br />Here the "min" in the filename indicates that this is the minimized version of the library, with unnecessary comments and whitespace removed, and internal identifiers replaced with shorter ones. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">And another way to use jQuery in your web application is to allow a Content Distribution Network (CDN) to serve it using a URL like one of these. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><h4>Google CDN</h4></div><div style="text-align: justify;"><br />https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js<br />https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><h4>Microsoft CDN</h4></div><div style="text-align: justify;"><br />http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js<br />http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><h4>jQuery CDN </h4></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">http://code.jquery.com/jquery-2.1.3.min.js<br />http://code.jquery.com/jquery-1.11.2.min.js <br /><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">If you use Google CDN, you can use "1.11" to get the latest release in the 1.11.x series, or just "1" to get the most current release less than 2.0. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The major advantage of loading jQuery from well-known URLs like these is that, because of jQuery's popularity, visitors to your website will likely already have a copy of the library in the browser's cache and no download will be necessary.</div><div style="text-align: justify;"><br /><a name="more"></a></div><div style="text-align: justify;"><h3>How to Use jQuery() Function</h3></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The jQuery() function is the most important one in the jQuery library. It is heavily overloaded, however, and there are four different ways you can invoke it. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The first, and the most common way to invoke $() is to pass a CSS selector to it. Which returns the set of elements from the current document that match the selector as given in the example below.</div><br /><pre class="prettyprint">var id=$("#id");<br />var class=$(".class");</pre><br /><div style="text-align: justify;">And the another way to invoke $() is to pass it an Element or Document or Window object. It simply wraps the element, document or window in a jQuery object and returns that object. Doing this allows you to use jQuery methods to manipulate the element rather than using raw DOM methods. For example you can call $(document) or $(this) to pass document or current element.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The third way to invoke $() is to pass it a string of HTML text. When you do this, jQuery creates the HTML element or elements described by that text and then returns a jQuery object representing those elements. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">When invoked in this way, $() accepts an optional second argument. You can pass a document object to specify the document with which the elements are to be associated. If you do this, the object properties are assumed to specify the names and values of HTML attributes to be set on the object. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here is an example, where three arguments are used to set the url, css of the image and the click event on the image. </div><br /><pre class="prettyprint">var img=$("<img />"),<br /> {src:url,<br /> css:{borderWidth:5},<br /> click:handleClick<br /> });</pre><div style="text-align: justify;"><br />And the fourth way to invoke $() is to pass a function to it. If you do this, the function you pass will be invoked when the document has been loaded and the DOM is ready to be manipulated. For example here is a jQuery version of onLoad() function which is invoked when the document has loaded.<br /><br /><pre class="prettyprint">$(function(){<br />// jQuery code<br />});<br /><br /></pre></div><h4 style="text-align: left;">Read Next:<a href="http://www.siteforinfotech.com/2015/03/jquery-get-and-set-element-attributes.html">How to Get and Set Element Attributes using jQuery</a></h4><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=use+jquery+html" target="_blank">How to use jQuery in HTML</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=http://www.siteforinfotech.com/search?q=how+obtain+jquery" target="_blank">How to Obtain jQuery</a></h3><h3></h3><h3> </h3> </li></ul><h3> Related Posts:</h3><ul><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div>

How to Use jQuery With HTML?

jQuery() is a single global function defined by jQuery library. This function is so frequently used that the library also defines the global...

مزيد من المعلومات »

How to Scroll Top or Bottom of Document Using JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Scroll Bottom of Document Using JavaScript</h3><div style="text-align: justify;"><br />You can use the following set of JavaScript codes that scroll the browser to the bottom most page of the document. </div><div style="text-align: justify;"><br /><blockquote class="tr_bq">var documentHeight=documentElement.offsetHeight;<br />var viewportHeight=window.innerHeight;<br />window.scrollTo(0, documentHeight-viewportHeight);</blockquote></div><div style="text-align: justify;"><br />Here the first variable documentHeight specifies the read only offsetHeight properties of any HTML element return its on screen height, in CSS pixels and the returned size include the element border and padding but not margin.<br /><br />And the second variable, viewportHeight specifies the height of viewport, which is obtained from innerHeight property of window object. <br /><br />You can execute this code on onclick event of JavaScript hyperlink or on onclik event of any button or text as given below.<br /><br /><pre class="prettyprint">function gobottom(){<br />var documentHeight=document.documentElement.offsetHeight;<br />var viewportHeight=window.innerHeight;<br />window.scrollTo(0,documentHeight-viewportHeight);<br />}<br /></pre><br />You can call this function gobottom() within HTML file as below.<br /><br /><pre class="prettyprint"><input type="button" value="Go To Bottom" onclick="gobottom();"> </pre><br />On the other way, you can execute onclick event of button with assigning a function on onload event of window as below.<br /><br /><pre class="prettyprint"><script><br />window.onload=function(){<br />var bottom=document.getElementById('bottom');<br />bottom.onclick=function(){<br />var documentHeight=document.documentElement.offsetHeight;<br />var viewportHeight=window.innerHeight;<br />window.scrollTo(0,documentHeight-viewportHeight);}<br /></script><br /></pre><br />You can call this function by placing id attribute within HTML file as below.<br /><br /><pre class="prettyprint"><input type="button" value="Go To Bottom" id="bottom"> <br /></pre><br /><h4>Preview:</h4><br /><script>window.onload=function(){ var bottom=document.getElementById('bottom'); bottom.onclick=function(){ var documentHeight=document.documentElement.offsetHeight; var viewportHeight=window.innerHeight; window.scrollTo(0,documentHeight-viewportHeight);} var top=document.getElementById('top'); top.onclick=function(){window.scrollTo(0,0);} }; </script> <input id="bottom" type="button" value="Go To Bottom" /> <br /><br /><h3>How to Scroll Top of Document Using JavaScript</h3><br /><a name="more"></a><br />You can use the following JavaScript code that scroll the browser to the top most page of the document.<br /><br /><blockquote class="tr_bq">window.scroll(0,0);</blockquote><br />You can execute this code on onclick event of JavaScript hyper-link or on onclick event of any button or text as given below.<br /><br /><pre class="prettyprint"><script><br />window.onload=function(){<br />var top=document.getElementById('top');<br />top.onclick=function(){window.scrollTo(0,0);}<br /></script><br /></pre><br />You can call this function by placing id attribute within HTML file as given below.<br /><br /><pre class="prettyprint"><input type="button" value="Go To Top" id="top"> <br /></pre><br /><h4>Preview:</h4><input id="top" type="button" value="Go To Top" /> <br /><br /><h3>How to Scroll Document Automatically Using JavaScript</h3><br />You can scroll the document automatically using scrollBy() method which is similar to scroll() and scrollTo(), but its arguments are relative and are added to the current scrollbar offsets.<br /><br />For example, you can use the following code to scroll 10 pixels down every 200ms.<br /><br /><blockquote class="tr_bq">javascript:void setInterval(function(){scrollBy(0,10)}, 200);</blockquote><br /><h3>How to Scroll Document to View Certain Element Using JavaScript   </h3><br />Instead of scrolling to a numeric location in document, you can just scroll that a certain element in the document is visible. It can be done easily scrollIntoView() method on the desired HTML element and this method insures that the element on which it is invoked is visible in the viewport. <br /><br />By default, the scrollIntoView() method tries to put the top edge of the element at or near the top of the viewport. The browser will also scroll the viewport horizontally as needed to make the element visible.<br /><br /><br /><br /><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=scroll+top+using+javascript" target="_blank">How to Scroll to Top Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=http://www.siteforinfotech.com/search?q=scroll+bottom+using+javascript" target="_blank">How to Scroll to Bottom Using JavaScript</a></h3><h3></h3><h3> </h3> </li></ul><h3> Related Posts:</h3><ul><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to Scroll Top or Bottom of Document Using JavaScript

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

مزيد من المعلومات »

How to Create Table of Contents Using JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><style>#TOC {border:solid black 1px; margin:10px; padding:10px;} .TOCEntry{font-family:sans-serief;} .TOCEntry a{text-decoration:none;} .TOCLevel1{font-size:17pt; font-weight:bold;} .TOCLevel2{font-size:16pt; font-weight:bold;} .TOCLevel3{font-size:15pt; font-weight:bold;} .TOCLevel4{font-size:14pt; margin-left:.25in;} .TOCSectNum{display:none;} </style><script>window.onload=function(){ function getSelectedText(){ if (window.getSelection) return window.getSelection().toString()+"<br/>"+document.URL; else if (document.selection) return document.selection.createRange().text+"<br/>"+document.URL; } var toc=document.getElementById("TOC"); if(!toc) { toc=document.createElement("div"); toc.id="TOC"; document.body.insertBefore(toc, document.body.firstChild); } var headings; if (document.querySelectorAll) headings=document.querySelectorAll("#tp h1, #tp h2, #tp h3, #tp h4, #tp h5, #tp h6"); else headings=findHeadings(document.body, []); function findHeadings(root, sects){ for(var c=root.firstChild; c!=null; c=c.nextSibling){ if (c.nodeType!==1) continue; if (c.tagName.length==2 && c.tagName.charAt(0)=="H") sects.push(c); else findHeadings(c, sects); } return sects; } var sectionNumbers=[0,0,0,0,0,0]; for(var h=0; h<headings.length; h++) { var heading=headings[h]; if(heading.parentNode==toc) continue; var level=parseInt(heading.tagName.charAt(1)); if (isNaN(level)||level<1||level>6) continue; sectionNumbers[level-1]++; for(var i=level; i<6; i++) sectionNumbers[i]=0; var sectionNumber=sectionNumbers.slice(0, level).join("."); var span=document.createElement("span"); span.className="TOCSectNum"; span.innerHTML=sectionNumber; heading.insertBefore(span, heading.firstChild); heading.id="TOC"+sectionNumber; var anchor=document.createElement("a"); heading.parentNode.insertBefore(anchor, heading); anchor.appendChild(heading); var link=document.createElement("a"); link.href="#TOC"+sectionNumber; link.innerHTML=heading.innerHTML; var entry=document.createElement("div"); entry.className="TOCEntry TOCLevel" + level; entry.appendChild(link); toc.appendChild(entry); } }; </script></div><div id="TOC" style="text-align: justify;"></div><div style="text-align: justify;"><br /></div><div dir="ltr" style="text-align: justify;" trbidi="on"><div id="tp">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. <br /><br />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. <br /><br />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. <br /><br /><br /><h3>Steps to Create Table of Contents Using JavaScript</h3><br />At first create window.onload function that runs automatically when the document finishes loading as given below.<br /><br /><pre class="prettyprint">window.onload=function(){<br /><br />function getSelectedText(){<br />if (window.getSelection)<br />return window.getSelection().toString()+"<br />"+document.URL;<br />else if (document.selection)<br /> return document.selection.createRange().text+"<br />"+document.URL;<br />}<br />var toc=document.getElementById("TOC");<br />if(!toc) {<br /> toc=document.createElement("div");<br /> toc.id="TOC";<br /> document.body.insertBefore(toc, document.body.firstChild);<br />}<br /></pre><br />When the above function runs, it first looks for a document element with an id of "TOC". If there is no such element it creates on at the start of the document.<br /><br />Add the following codes to the function to find all <h1> through <h6> tags and sets them as headings.<br /><br /><pre class="prettyprint">var headings;<br />if (document.querySelectorAll) <br />headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");<br />else<br />headings=findHeadings(document.body, []);<br /></pre><br />Then recursively traverse the document body looking for headings using function: findHeadings(root, sects){  }<br /><br />Initialize an array: var sectionNumber=[0,0,0,0,0,0]; that keeps track of section numbers and add section numbers to each section numbers to each section heading and wrap the headings in named anchors so that the TOC can link to them. <br /><br />Write CSS code to style created table of contents. Where all entries have a class "TOCEntry" and the section headings from <h1> to <h6> have class name "TOCLevel1" to "TOCLevel6" and the section number inserted into headings have class "TOCSectNum".<br /><br /><h3>Full CSS Code To Style Table of Contents</h3><br /> Here is a full CSS code within <style> </style> tag to style table of contents.<br /><br /><pre class="prettyprint"><style><br />#TOC {border:solid black 1px; margin:10px; padding:10px;}<br />.TOCEntry{font-family:sans-serief;}<br />.TOCEntry a{text-decoration:none;}<br />.TOCLevel1{font-size:17pt; font-weight:bold;}<br />.TOCLevel2{font-size:16pt; font-weight:bold;}<br />.TOCLevel3{font-size:15pt; font-weight:bold;}<br />.TOCLevel4{font-size:14pt; margin-left:.25in;}<br />.TOCSectNum{display:none;}<br /></style><br /></pre><br /><h3>Full JavaScript Code To Create Table of Contents</h3><br /><a name="more"></a><br />Here is a full JavaScript Code To Create Table of Contents within <script> </script> tag.<br /><br /><pre class="prettyprint"><script><br />window.onload=function(){<br /><br />function getSelectedText(){<br />if (window.getSelection)<br />return window.getSelection().toString()+"<br/>"+document.URL;<br />else if (document.selection)<br /> return document.selection.createRange().text+"<br/>"+document.URL;<br />}<br /><br />var toc=document.getElementById("TOC");<br />if(!toc) {<br /> toc=document.createElement("div");<br /> toc.id="TOC";<br /> document.body.insertBefore(toc, document.body.firstChild);<br />}<br />var headings;<br />if (document.querySelectorAll) <br />headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");<br />else<br />headings=findHeadings(document.body, []);<br /><br />function findHeadings(root, sects){<br /> for(var c=root.firstChild; c!=null; c=c.nextSibling){<br />if (c.nodeType!==1) continue;<br />if (c.tagName.length==2 && c.tagName.charAt(0)=="H")<br />sects.push(c);<br />else<br />findHeadings(c, sects);<br />}<br />return sects;<br />}<br /><br />var sectionNumbers=[0,0,0,0,0,0];<br /><br />for(var h=0; h<headings.length; h++) {<br /> var heading=headings[h];<br /><br />if(heading.parentNode==toc) continue;<br /><br />var level=parseInt(heading.tagName.charAt(1));<br />if (isNaN(level)||level<1||level>6) continue;<br /><br />sectionNumbers[level-1]++;<br />for(var i=level; i<6; i++) sectionNumbers[i]=0;<br /><br />var sectionNumber=sectionNumbers.slice(0, level).join(".");<br /><br />var span=document.createElement("span");<br />span.className="TOCSectNum";<br />span.innerHTML=sectionNumber;<br />heading.insertBefore(span, heading.firstChild);<br />heading.id="TOC"+sectionNumber;<br />var anchor=document.createElement("a");<br />heading.parentNode.insertBefore(anchor, heading);<br />anchor.appendChild(heading);<br /><br />var link=document.createElement("a");<br />link.href="#TOC"+sectionNumber; <br />link.innerHTML=heading.innerHTML;<br /><br />var entry=document.createElement("div");<br />entry.className="TOCEntry TOCLevel" + level;<br />entry.appendChild(link);<br /><br />toc.appendChild(entry);<br />}<br />};<br /><br /></script><br /></pre><br />You can see the preview of Table of contents generated by JavaScript code above. If you have any problem or difficulties while implementing the above JavaScript code, you are welcomed to mention on the comment session at the bottom this post.</div><br /><br /><br /><div></div><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=toc+using+javascript" target="_blank">TOC for HTML Document Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=http://www.siteforinfotech.com/search?q=table+of+contents+javascript" target="_blank">Create Table of Contents Using JavaScript</a></h3><h3></h3><h3> </h3> </li></ul><h3> Related Posts:</h3><ul><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to Create Table of Contents Using JavaScript

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

مزيد من المعلومات »