Archive for the Category: JavaScript

Maintain vertical scroll position

This post describes how to maintain vertical scroll position after form submission or clicking on the link. Script will read vertical scroll position and append scroll value to the URL. After page is loaded, JavaScript function will search for the scroll parameter in the URL and set the scroll position.

13 Comments

JavaScript dialog box

If you aren't satisfied with prompt, confirm, alert or window.open, then this JavaScript dialog box can be your choice. Dialog box is emulated with two DIVs. First DIV overlays whole page (transparency is styled to 60%) while second DIV is positioned at the page center. That's nothing new but JavaScript code is short, well commented and closed in own namespace (for easier integration with other frameworks).

Download GitHub 44 Comments

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

1 Comment

JavaScript autocomplete

This post shows simple autocomplete JavaScript library. For every text input, functions prepares URL and displays popup with answers returned from server. Popup is shown below input field with exact width as input field.

Download GitHub 1 Comment

Image hover using Javascript

In this post you will see how to implement image hover with iframe and div. My first try was with div and AJAX. Unfortunately in IE6, select (drop down menu) always stays on top of the hover image. Good old iframe is solution not only to put behind a select element in IE6, but to fetch a content without AJAX.

5 Comments

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

29 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