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 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 JavaScriptYou can use the following set of JavaScript codes that scroll the browser to the bottom most page of the...

Read more »

How to Create Table of Contents Using JavaScript

#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;} window.onload=function(){ function getSelectedText(){ if (window.getSelection) return window.getSelection().toString()+""+document.URL; else if (document.selection) return document.selection.createRange().text+""+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...

Read more »

How to Select Document Elements Using JavaScript?

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

Read more »

How to Show Pop Up Window Using JavaScript

You can show pop up window By using JavaScript window.open() method which loads specified URL into a new or existing window and returns the window object that represents that window. The window.open() method takes four optional arguments which are URL of the window, Window name, attributes of window, the boolean value to replace or not the current window.Syntax: window.open("windowname.html", "New Window", "width=width in pixel, height=height in pixel, status=yes or no, resizable=yes or no");The first argument of window.open() method allows to display given URL in the new window. If the argument is omitted, the special blank-page URL:about:blank is used.The second argument of window.open() method is a string which specifies a window name. If the argument is omitted, the special name "_blank"...

Read more »

How to go Back Browsing History Using JavaScript

The history property of the window object refers to the history object for the window. Using history in JavaScript you can go back to the previous browsing history.  The history object models the browsing history of a window as a list of document and document states and the length property of the history object specifies the number of elements in the browsing history list.The history object has back() and forward() methods that behave like the browser's back and forward buttons do, they make the browser go backward or forward one step in its browsing history. history.back();     // Go back to the browsing historyhistory.forward(); //Go forward to the browsing historyCreating Buttons for History Back and ForwardYou can create buttons to navigate browsing history back...

Read more »

How to Create JavaScript Bookmarklet?

Bookmarklet is a small JavaScript code which is saved on a browser's bookmark while bookmarking JavaScript: URL. It is a mini program that can be easily launched from the browser's menus or toolbar. The code in a bookmarklet runs as if it ware a script on a page and can query and set document content presentation, and behavior. As long as a bookmarklet does not return a value, it can operate on whatever document is currently displayed without replacing that document with new content. How to Create JavaScript Bookmarklet?To create bookmarklet on your browser, either you can create HTML file containing JavaScript: URL and can bookmark it right clicking on the link and selecting something like bookmark link or dragging the link to your bookmarks toolbar or you can directly add new bookmark...

Read more »

How to create Timer Using JavaScript?

With JavaScript it is possible to execute some code not immediately after a function is called,  but after a specified time interval. This is called timing events. With timing events you can create timer like stopwatch, clock, quiz timer and many more. For timing events in JavaScript, there are four methods that are used aresetTimeout(): This method of the window object schedules a function to run after a specified number of milliseconds elapses. setTimeout() returns a value that can be passed to clearTimeout() to cancel the execution of the scheduled function.syntax: var t=setTimeout("javascript statement", milliseconds)setInterval(): setInterval is like setTimeout() except that the specified function is invoked repeatedly at intervals of the specified number of milliseconds.syntax:...

Read more »

How to create a Simple calculator Using HTML and JavaScript

Here are the steps to create a simple calculator using HTML and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.Steps to create a Simple calculator Using HTML and JavaScript 1. At first Insert a <form> element within <body> tag.2. Create a table using <table> .....</table> tag. 3. Insert two types of Input text and button within table data of table row using <tr><td>....</td></tr> tag.4. Assign OnClick event for all the buttons having numbers and arithmetic operators.5. Give blank value for Clear(C) button.6. Use eval() function to evaluate the numbers...

Read more »

How to use Round, Random, Min and Max in JavaSript

Round, Random, Min and Max are the methods used in math object in JavaSript. Math object allows you to perform common mathematical tasks. The math object includes several mathematical values and functions. Yo do not need to define the math object before using it. In this post I am describing How to use Round, Random, Min and Max in JavaSript.How to use Round() in JavaScriptUsing round() method in math object, you can round the given numbers as given below.<script>document.write(Math.round(0.60) +"<br/>");document.write(Math.round(0.40) +"<br/>");document.write(Math.round(0.49) +"<br/>");document.write(Math.round(-3.69) +"<br/>");document.write(Math.round(-6.10) +"<br/>");</script>Preview:document.write(Math.round(0.60) +""); document.write(Math.round(0.40)...

Read more »

How to Concatenate, Join and Sort Array in JavaScript?

In the previous post, I have already described about "How to Loop Through JavaScript Array". Along with accessing an element of an array using looping statements, you can also concatenate, join and sort an array in JavaScript. In this post you will learn about How to Concatenate, Join and Sort Array in JavaScript.How to Join Two Arrays using Concat()Using concat() method, you can join to arrays array1 and array2 as below.<script>var array1=new Array(3);array1[0]="Saab"array1[1]="Volvo"array1[2]="BMW"var array2=new Array(3);array2[0]="Yamaha"array2[1]="Honda"array2[2]="Bajaj"var array3=array1.concat(array2);for(i=0; i<array3.length;i++){document.write(array3[i]+"<br/>")}</script>Preview:var array1=new Array(3); array1[0]="Saab" array1[1]="Volvo" array1[2]="BMW" var array2=new...

Read more »

How to Loop Through JavaScript Array?

You can loop any Array by using different types of looping statements in JavaScript, which I have previously posted. In this post you can loop through JavaScript Array. At first let you know basic concepts of Array ie. defining array, adding values to the array and accessing array elements.  The Array object is used to store a set of values in a single variable name. You can define Array object with the new keyword. The following line of code defines an Array object called  myArray.var myArray=new Array()You can also define the array size by passing an integer argument as follows.var myArray=new Array(5)You can add the values to an array as the following.var myArray=new Array()myArray[0]="value1"myArray[1]="value2"myArray[2]="value3"You can also give values to the arrays while defining...

Read more »

How to Loop using JavaScript?

Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.In JavaScript there are two different kinds of loops which are for loop, which loops through a block of code a specified number of times and while loop, which loops through a block of code while a specified condition is true. JavaScript For LoopThe for loop is used when you know in advance how many times the script should run.Syntax: for(var=startvalue; var<=endvalue;var=var+increment){code to be executed}Example:<html><head></head><body><script type="text/javascript">var i=0for (i=0;i<=10;i++){document.write("The number is" +i)document.write("<br/>")}</script></body></html>The above example defines a loop...

Read more »