Latest topics

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

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

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

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" is used which opens a new, unnamed window. The third optional argument of window.open() method is a comma-separated list of size and features attributes f...

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 history history.forward(); //Go forward to the browsing history Creating Buttons for History Back and Forward You can create buttons to navigate browsing history back and forward using the following code. <input type=button name="back" value="Go Back" onclick="history.back();"> <input type=button name="forward" value="Go Forwa...

Buttons on a web-page allows users to submit data or to do any action on it and generally the actions are performed by clicking on it. Different types of buttons are used on web-page and they may be inside a form or outside a form for certain action to be performed. Buttons used within a form may be Submit Button, Reset Button, Browse Button etc. You can set the actions performed by submit and reset buttons on a form with in a &lt;form&gt; tag as below. <form action="submitpage.html" onsubmit="return validate(this)" onreset="return conform()" method="post"> <!--Other Form Elements--> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> In the above code, when submit button was clicked it goes to the page "submitpage.html" after validating the form by the function validate() and when reset button was clicked it clears all the form dat...

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 with add new bookmark option on the browser. Here is a simple HTML code to create JavaScript URL link with a simple JavaScript code to display current time which I have previously mentioned on...

You can write JavaScript function as like URL in hyperlink on href attribute of <a>....</a> tag. Writing JavaScript codes in a URL is another way that JavaScript code can be included in the client side using javascript: protocol specifier. This special protocol type specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter. The "resource" identified by a javascript: URL is the return value of the executed code, converted to a string. If the code has an undefined return value, the resource has no content. You can use a javascript: URL anywhere you'd use a regular URL: on the href attribute of <a> tag, on the action attribute of a <form>, on the click event of a button, on the method like window.open() etc. The syntax for writing JavaScript function within href attribute of <a> tag is given below. <a href="javascript:myfunction();">JavaScript Link</a> And the synta...

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 are setTimeout(): 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: var t=setInterval("javascript statement", milliseconds) clearTimeout() and clearInterval(): Like setTimeout() and setInterval() returns a value that can be passed to clearTimeout...

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 on OnClick event of equal to sign button. Full HTML code for a Simple HTML calculator <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <...

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 JavaScript Using 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: How to use Random() in JavaScript You can use the random() method in math object,you can return a random number between 0 and 1 as given below. <script> document.write(Math.random()); </scri...

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: Here the method array1.concat(array2) concentrates two arrays array1 and array2. How to Put Array Elements Into a String using Join() You can use the join() method to put all the eleme...