Archive for the Category: JavaScript

AJAX progress bar

With few lines of JavaScript and CSS you can make a simple AJAX progress bar. JavaScript will periodically ask for progress value and server will respond with XML. Progress value should be extracted from the XML and displayed as width of the DIV element.

Download 48 Comments

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.

49 Comments

Drawing with JavaScript

This post shows how to implement simple JavaScript drawing. After page is loaded, JavaScript will generate HTML table and attach onMouseDown and onMouseOver event handlers to the each table cell. When user clicks the left mouse button and move mouse pointer over table cell, table cell will change background-color property.

7 Comments

Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another table 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 table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn't fire events to the elements beneath the dragged object.

Also posted in Drag and Drop Video Download / Preview GitHub 756 Comments

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.

Leave a comment

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.

3 Comments

JavaScript date validation

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

61 Comments

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.

5 Comments