Tricklin

I was recently working on an idea I had to be able to increase and decrease the size of a div using a little JavaScript. I figured the best way to do this was by using DOM objects and methods. The specific nodes I was going to use were getAttribute (to grab the height of the div) and setAttribute (to set the new height of the div). Guess what? It worked great in Firefox, while returning an error in IE. Surprise, surprise!

getAttribute('style') - The Problem

Using document.getElementById('[id_of_element]').ge tAttribute('style') returns a string in Firefox (ex. "height: 200px"), yet in IE it merely returns an object. Which means additional code to get this into a string.

getAttribute('style') - The Solution

var el = document.getElementById('[id_of_element]');
var styleattribute = el.getAttribute('style');
if (typeof styleattribute == 'string') { // what Firefox returns
    ...
} else if (typeof styleattribute == 'object') { // what IE returns
    styleattribute = styleattribute .cssText;
}

One thing to note here, is that styleattribute.cssText returns ALL CAPS. Meaning: if the element contains style="height:200px;", styleattribute.cssText will return HEIGHT: 200px.

setAttribute('style') - The Problem

This just flat out doesn't work in IE. See entry at quirksmode.org.

setAttribute('style') - The Solution

document.getElementById('[id_of_element]').style.he ight = 250;

So, there you have it. Yet another reason to hate IE. At least there's a solution to the problem, albeit a rather annoying one.

Below is a JavaScript that will make alternating the row colors of a table extremely simple. The beauty of it is that the script is only 16 lines long!

function alternateRowColor(tableid,lightclass,darkclass,overclass) {
    var tableid = document.getElementById(tableid);
    var rows = tableid.tBodies[0].rows;
    for(var ii = 0; ii < rows.length; ii++) {
        var row = rows[ii];
        if(ii % 2) {
             row.className = lightclass;              row.onmouseover = function () {overRow(this.id,overclass);};
             row.onmouseout = function () {overRow(this.id,lightclass);};
        } else {
         &nb sp;  row.className = darkclass;
         &nb sp;  row.onmouseover = function () {overRow(this.id,overclass);};
         &nb sp;  row.onmouseout = function () {overRow(this.id,darkclass);};
        }
    }
}

I've added a nice little row highlighting function to the mouseover and mouseout events called overRow(). This function only adds 3 lines of code:

function overRow(rowid, classname) {
    document.getElementById(rowid).clas sName = classname;
}

The last thing to do is make sure that the alternateRowColor() function gets invoked every time the page loads. Instead of having to place this in the body tag of all pages, all that is needed is one line of code added to the same script that will automatically run the function each time a page loads:

window.onload=function(){ alternateRowColor('alternateRows','light','dark','over');}

That's all there is to it. See it in action.

As I mentioned in my previous post, I planned on creating a "tutorial that will walk you through a real world working example of AJAX using ColdFusion and a simple MS Access Database." Well, here it is:

In order to represent a working example of AJAX, there are a few things we're going to need.

• database
• HTML file
• JavaScript (located within the HTML file in this example)
• ColdFusion file (note: any programming language can be used)
• prototype JavaScript library

The Database

The database used in this example is an extremely basic MS Access database consisting of one table that contains 6 fields:

Now that we know what we are going to be storing, let's take a look at the ".html" file.

HTML File

This file will consist of the form fields needed to populate the database, along with the placeholder we will use to show the information being stored:

<form name="addEmployee">
First Name:<input type="text"
name="FirstName" id="FirstName"
value="" size="30" />
<br />
Last Name:<input type="text"
name="LastName" id="LastName"
value="" size="30" />
<br />
Job Title:<input type="text"
name="JobTitle" id="JobTitle"
value="" size="30" />
<br />
Phone:<input type="text" name="Phone"
id="Phone" value="" size="12"
/>
<br />
Fax:<input type="text" name="Fax"
id="Fax" value="" size="12"
/>
<br />
<input type="button" name="submit"
value="save"
onclick="insertEmployee();"/>
</form>
<div id="EmployeeList"></div> 
//placeholder div

Notice how there is no method or action in the form tag? Both of these will be taken care of by the JavaScript.

Read the rest of this entry »