Techniques and Web Technologies
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”.
This post shows simple autocomplete JavaScript library. For every text input, method prepares URL and displays box with answers returned from server. DIV box is shown below input field with exact width as input field.
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).
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.
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.
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.
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 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.
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 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.
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.
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.