NodeList objects in the DOM are live

I was surprised when length of collected elements in DOM changed after new node was added. It seems that getElementsByTagName() doesn’t return static collection of found elements but a kind of reference to the node list. No, this is not a bug, it’s a feature and it has a name: “Live node list”.

Image hover using Javascript

This post shows how to implement simple image hover with IFRAME and DIV. In both cases JavaScript code will set innerHTML to DIV element and make it visible. IFRAME version will force browser to make connection each time while DIV version may have some problems with older browsers (dropdown menu stays in front of displayed image).

AJAX progress bar

With few lines of JavaScript and CSS it’s possible to make simple AJAX progress bar. JavaScript will periodically ask for progress value and server will respond with JSON data. Progress value is being read and displayed as DIV element width. To start progress bar demo, click on Start button and wait few seconds to begin. To watch how this page sends requests to Web server just open DOM inspector “Network” card.

Adding table rows and columns in JavaScript

With insertRow() method you can insert a new row at the specified position in HTML table. After row is created, use insertCell() method to insert a table cell. Wrap this methods in JavaScript functions and you have code to dynamically add new rows and columns in the HTML table.

Drawing with JavaScript

This post shows simple JavaScript drawing script based on HTML table. After page is loaded, JavaScript will generate HTML table and attach onMouseDown / onMouseUp event handlers to the document level and onMouseOver to each table cell. When user clicks the left mouse button and move mouse pointer over table, TD will change background colour.

Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination cell. Attaching onMouseOver handler on TD elements will not work, because browser doesn’t fire events to the elements beneath the dragged object.

Date shift in JavaScript

Date shift in JavaScript can be done by counting days of the month and thinking of 28 or 29 days in February. Don’t forget the year. This is a long and complicated algorithm. I suggest a simpler solution. Transform date to the number of milliseconds, and make easy arithmetic with integers. After addition and subtraction, create date from the milliseconds.

JavaScript fade menu

You can find a lot examples of JavaScript fade menu, but my goal was to make it short and simple – only 15 lines (if you don’t count comment lines). First JavaScript function will initialize event listeners, while second will recursively change opacity level. It should work on FireFox and Internet Explorer.

JavaScript date validation

JavaScript date validation can be done in many ways like month range testing, day range testing (depending on number of days in the month) and so on. Here is shown much simpler solution. Take day, month and year from input string to create JavaScript Date object. Compare input day, month and year with day, month and year extracted from the Date() object. If they aren’t the same then the input date is not valid.

Sending checkbox values with JavaScript

This example shows how to collect values from the checked checkboxes. JavaScript function uses getElementsByTagName method to collect all input objects of the HTML page (HTML form is not needed). With for loop, every collected object is tested against type and checked property. If type is checkbox and checkbox is checked then value will be concatenated to the final string.

Clear form with JavaScript

JavaScript is the only option, if you want to have the ability to clear all form fields. Yes, HTML form has Reset method, but if the form has initial values, then Reset will return the form to the initial state instead of clear input fields. In this post you will find clearForms JavaScript function and live demo.