Tricklin » Tutorials

Awesome Tables With Very Little Markup

Patrick — Tue, 12 Feb 2008 01:46:48 +0000

Creating nice looking tables in HTML can be quite annoying. You have to give the table an ID or class, then give each row a class or give each column a class. Then you have to add some crazy code to make each row alternate color and another set of crazy javascript to make the rows highlight when you mouse over them. Well... That is no longer the case. Below is an example of how to get nice looking HTML tables with very little code or markup.

Use Tables For Tables Only!
First things first, if your page is using tables for layout, then stop reading. This solution is for people who only use tables for their intended purpose. So, make sure you are using tables correctly before continuing on.

The Table Markup
The actual XHTML code for the tables themselves is extremely simple, and because of this is, it is nice and legible.


    
        
            Column Head
        
    
    
        
            Column Value

Column Head
Column Value

Give It a Little Style
Now that you have the HTML down, it's time to give this table it's looks.

table {
    border-collapse: collapse; /* removes unwanted
cellspacing garbage */
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    margin-bottom: 20px;
}

table thead {
    background: #ccc;
	text-transform: uppercase;
}

table thead th {
    border-bottom: 2px solid #333;
}

table thead th, table tbody td {
    padding: 5px 10px;
    border-right: 1px solid #999;
}

table tbody td {
    border-bottom: 1px solid #999;
}

Here's what you get:

Looks nice, eh? We're not done yet. Now we want to make each row alternate color and make each row change to a different color when you mouse over it. To do this, we need a little JavaScript.

function niceTables(evenclass,oddclass,hiliteclass) {
    if(document.getElementsByTagName('table')) {
		var tables =
document.getElementsByTagName('table');
		for (var nn = 0; nn < tables.length; nn++) {
		  var rows = tables[nn].tBodies[0].rows;
            for(var ii = 0; ii < rows.length; ii++) {
		    	var row = rows[ii];
		    	row.onmouseover = function () {
                        this.className=hiliteclass;
                    };
		    	if(ii % 2) {
		    		row.className = evenclass;
		    		row.onmouseout = function () {
		    		        this.className=evenclass;
		    		    };
		    	} else {
		    		row.className = oddclass;
		    		row.onmouseout = function () {
		    		        this.className=oddclass;
		    		    };
		    	}
		    }
		}
	}
}

This will set the class of all rows that are divisible by 2 to the variable evenclass and all other rows to the variable oddclass. It will also set a mouse over event on the row and when moused over change the class to the hiliteclass. So this is great and all, but how do I get this function to run? Simple... We're going to add an onload event to the window with javascript like this:

window.onload=function(){
    niceTables('light', 'dark',
'hilite');
}

So, if this javascript included in the head of all your html files, then every table that exists in the page will obtain this style when the page loads. Notice that calling this function set the evenclass to 'light', the oddclass to 'dark', and the hilite class to 'hilite'. What this means, is that we have to add these classes to our stylesheet:

.light {
    background: #fff;
}

.dark {
    background: #DFEEFF;
}

.hilite {
    background: #9FCDFF;
}

...and you end up with:

There you have it, nice, sleek looking tables with very little markup. See it in action.

Moving Windows With Your Keyboard

Patrick — Mon, 02 Apr 2007 01:29:46 +0000

The other day, I disconnected my dual display monitor from my laptop, and forgot that I had a few windows opened up in the now disabled display. Which meant that I couldn't see them, and couldn't use my mouse to drag them into view. This was extremely annoying, because the window I cared about was the "find & replace" window in my Dreamweaver. With a little bit of research, I figured out that I could move the window with a few little keyboard shortcuts.

Hit Alt + Tab until the window you need moved is enabled
Hit Alt + Spacebar
Type "m"
Use the arrow keys in direction you wish the window to move

And that is all! Hopefully this little tip will help you, like it helped me.

Sortable List Example With Scriptaculous and PHP/mySQL

Patrick — Thu, 04 Jan 2007 19:26:23 +0000

After spending a considerable amount of time looking for a decent example of "how to store the newly sorted order of a list after dragging and dropping", I realized that there isn't a whole lot of examples and documentation out there. I've decided that it's my turn to try and come up with a full blown, easy to understand example using XHTML, Javascript, PHP, and mySQL.

First off, you'll need both the scriptaculous and prototype javascript libraries (both available from script.aulo.us). Once you've downloaded these files, you'll need to reference them in the head of your file:

Then, in your html file, make your list:


	Item 1
	Item 2
	Item 3
Item 4

Note that the ul and each li have unique ids. It is also important to note that the ids of the list items must have "_#" at the end (this number must be unique).

Next, add this after the list (because of IE):

Cool! It works! But...

Now that you've done this, go ahead and check it out. Cool... You can now sort your list by dragging and dropping! This is all fine and dandy, but how do I actually store this new order in my database?

It's pretty simple actually. In comes "serialize", to make life easy. This little gem creates a string containing information on of the current state of the list being sorted. How do you use it?

var listorder = Sortable.serialize('items_list');

Let's say that you've sorted your list as follows:

item 3
item 2
item 1
item 4

When invoked, the variable listorder would return as "items_list[]=3&items_list[]=2&items_list[]=1&items_li st[]=4". And this is what you need to update your database. Notice, the values returned are associated to whatever is after the underscore (_) in the id of the list item.

Now that you have this information, you can easily update your database with a simple AJAX call pointing to your php file ('save_items_order.php' in this case):

function saveOrder() {
	listorder = Sortable.serialize('items_list');
	var url = 'save_items_order.php';
	var pars = listorder
		+ '&rnd='
		+ new Date().getTime();
	var myAjax = new Ajax.Request(
		url,
		{
			method: 'post',
			postBody: pars,
			onComplete:  showList
		});
}

Finally, the PHP/mySQL piece:

if($_POST) {
  $items = $_POST['items_list'];
  $i = 1; # will represent the actual order (starting at 1).
  foreach($items as $itemid) {
    $query = "
      UPDATE items_table SET order_col = $i WHERE id_col =
$itemid
    ";
    mysql_query($query);
    $i++;  # add 1 to the current value of i (the next order
in the list).
  }
}

There you have it. An example of how to sort a list, and then store the new order in your database.

Another IE Bug: Unnecessarily Duplicating Text

Patrick — Thu, 24 Aug 2006 20:29:35 +0000

This issue has puzzled me for quite some time, and finally after some research I was able to figure out just what the heck was going on.

The Problem

For some odd and seemingly unexplainable reason, IE will display duplicate/repeating characters even though the code does not represent this.

...

< ;p style="position:relative;float:right;">01.01.01

< ;h2>Title
< ;p>Lorem Ipsum ...

...

Looks pretty legit, right? Well it is. Except IE doesn't render it correctly:

Why?

Well, after doing a bit of research, here is what I found:

The direct cause is nothing more than ordinary HTML comments, such as, , sandwiched between floats that come in sequence. Apparently, the comments are hard for IE to digest when they occupy those positions, resulting in a kind of "screen diarrhea". HTML comments inside the floats do not cause the bug, nor do comments before or after the float series. Only comments residing between floats cause the bug. -- positioniseverything.net

AND

It turns out that this duplicating characters bug can be triggered by other things than just HTML comments. Phil Baines points out that any elements given the style {display: none} will also induce the bug. In fact, even hidden inputs can do it, and presumably any other elements that don't actually display for some reason. Apparently the act of hiding a source element is the critical trigger for this bug. -- positioniseverything.com

After knowing this, can you guess what I needed to do to the above code? That's correct.

The Solution

...

< ;p style="position:relative;float:right;">01.01.01

< ;h2>Title
< ;p>Lorem Ipsum ...

« move div here



remove this altogether »
...

There you have it. Another IE issue that needs a workaround. Hopefully this helps a few people from going insane.

Alternating Row Colors Using Only JavaScript

Patrick — Wed, 05 Apr 2006 15:36:49 +0000

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!

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.

Simple AJAX Example Using ColdFusion

Patrick — Thu, 02 Mar 2006 22:54:09 +0000

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:

Table Name: Employee
Field Name	Data Type
EmpID	AutoNumber
FirstName	Text
LastName	Text
JobTitle	Text
Phone	Text
Fax	Text

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:


First Name:


Last Name:


Job Title:


Phone:


Fax:




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

The JavaScript

Once you've gotten all the form fields you need, you're now ready to start writing the JavaScript that will handle the AJAX portion. First, make sure you are referencing "prototype.js" () . Now that prototype is in place, we can begin writing the necessary code to populate the "Employee" table. Notice from the xhtml code (above) the onclick event attached to the save button: onclick="insertEmployee();". This function is going to be called everytime a user clicks the "save" button. Let's take a look at this function:

function insertEmployee() {
	// begin form variables
	var fname = $F('FirstName');
	var lname = $F('LastName');
	var jtitle = $F('JobTitle');
	var phone = $F('Phone');
	var fax = $F('Fax');
	// end form variables
	var url = 'employee.cfm';
	var pars = 'FirstName='
			   + fname
			   + '&LastName='
			   + lname
			   + '&JobTitle='
			   + jtitle
			   + '&Phone='
			   + phone
			   + '&Fax='
			   + fax
			   + '&Action=Insert&rnd='
			   + Math.random()*99999;
	var myAjax = new Ajax.Request(
	url,
	{
	        method: 'post',
	        postBody: pars,
	        onComplete: listEmployees
	});
}

First of all, we're putting the values within each form field into variables. We'll then use these variables to pass them to the ColdFusion file, which in turn will insert these values into the database. The next step is to declare a variable that will contain the actual URL of this CF file. In this example, we're calling this variable url, and we're giving it the value of "employee.cfm". This value tells us that the CF file is located in the same directory as the ".html" file. Now that we have the values of each form field and the URL of the CF file declared, we're going to create another variable "pars" which will contain all the name/value pairs that will be passed to the CF file. In the code, we've written these name/value pairs separated by new lines, which improves readability. As you can see, these name/value pairs are passed to the CF file much like you'd pass them in a URL string. For example:

employee.cfm?FirstName=John&LastName=Doe&JobTitl e=Accountant...

One thing to take note of, however, is the fact that we are passing 2 additional name/value pairs that are not part of the form: "Action=Insert" and "rnd=[a random number]". The "Action=Insert" will make sense when we take a closer look at the CF file. The "rnd=[a random number]" is explained in detail in my previous post.

Now that we've got a good understanding of "pars" and "url", let's take a look at the actual request that we'll use to send to back-end:

    var myAjax = new Ajax.Request(
        url,
        {
            method: 'post',
            postBody: pars,
            onComplete: listEmployees
        });

What the above says, is that we're going to open an XMLHttpRequest that will "POST" the name/value pairs (pars) to "employee.cfm". Then, once the request is complete, the "listEmployees" function will be run. Now that we've got the insert request taken care of, let's take a look at what the CF file is doing on the back-end.

The ColdFusion File - "employee.cfm"

We know that we want to populate the database with the values in the form, and we know that the AJAX request will be "POSTing" this information. Since the request is using the "POST" method, we know we'll have to use the "FORM" variable (not URL) for grabbing the parameters being sent. Let's take a look at the CF code:


    
		        
			            INSERT INTO Employee (FirstName, LastName,
JobTitle, Phone, Fax)
			            VALUES ('#Form.FirstName#',
'#Form.LastName#', '#Form.JobTitle#',
'#Form.Phone#', '#Form.Fax#')

As you can see from the first line, this set of code will not be run unless the "Action" form parameter is defined, and that it's equal to "Insert". This is where the "&Action=Insert" name/value pair, added to the "pars" variable in the JavaScript code, comes into play. The next set of code uses a standard SQL statement to insert the data that is passed into the "Employee" table. The next set of code to get run is the query that will select everything from the "Employee" table, and then return these values in a table:


    SELECT *
    FROM Employee
    ORDER BY LastName


    

    
        Last Name
        First Name
        Job Title
        Phone
        Fax
    



        #LastName#
        #FirstName#
        #JobTitle#
        #Phone#
        #Fax#

Last Name	First Name	Job Title	Phone	Fax
#LastName#	#FirstName#	#JobTitle#	#Phone#	#Fax#

This table is what gets returned to the ".html" page. Remember we said that the "listEmployees" function would be run when the request is completed. It is this function that is responsible for making this table appear on the page:

function listEmployees(originalRequest){
    $('EmployeeList').innerHTML =
originalRequest.responseText;
    var doc = document.addEmployee;
    doc.FirstName.value = '';
    doc.LastName.value = '';
    doc.JobTitle.value = '';
    doc.Phone.value = '';
    doc.Fax.value = '';
}

When this function is run, the innerHTML of the "EmployeeList" placeholder div will contain the table that was created in "employee.cfm". Also added to this function is the clearing out of all the form fields.

There you have it: an example of inserting information into a database using AJAX and ColdFusion. As you can see from this example, you can use any programming language you prefer. The point of this tutorial was to explain the step-by-step process of using AJAX from front-end to back-end to front-end again, all without refreshing the users browser.

You can see this example in action by checking out a sample demo I've created for this tutorial. In this demo, you will see a little more functionality. Feel free to view the source of this file to see how other functions are handled.

My First AJAX Experience

Patrick — Tue, 21 Feb 2006 21:12:44 +0000

All in all, I'd have to say I had a very pleasant experience using AJAX for the first time. The most difficult aspect of working with AJAX, was learning how to implement it. Once I found the right documentation, it was relatively smooth sailing.

Getting Started

First off, you should download an AJAX library. I recommend the Prototype javascript library. What is prototype.js anyway?

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest AJAX library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Basically, a guy named Sam Stephenson spent, I'm sure, an inordinate amount of time writing this great javascript file in order to make life easier on all of us. Using this file makes writing your AJAX code much easier. As mentioned earlier, the hardest part about getting started was finding documentation. So, in order to make it simpler for you, I'm going to include links to the documentation that I used to get started.

Developer Notes for prototype.js - This documentation was exactly what I needed, and could quite possibly be the only thing you'll need. It contains some really great examples in the beginning of the document, and the contains more detailed information later on. After reading the first few paragraphs, I was able to get started, and then used the rest of the document for reference (this part of the document conveniently happens to be named "Reference for Prototype.js") haha.
Working With Events In Prototype - How to use prototype with Keystrokes, Mouse Clicks, Mouse Hovers, etc.
Eas y Ajax with Prototype

What To Watch Out For

Internet Explorer loves to cache everything. This is particularly a problem when you are using AJAX. What works well in Firefox, may not seem like it's working in IE. I learned this the hard way. The application I implemented AJAX on is my personal online checkbook register. So the idea was to allow a user to stay on one page, add a new transaction, submit it, and have the list show the latest transaction while also changing the account balance all without refreshing the window. This worked great in Firefox, yet nothing seemed to be happening in IE. When in actuality, the database inserts were definitely happening, yet the list and account balance refresh was not. It took me a while to figure out what and why this was happening, but finally figured it out when I came across this article "Ajax IE caching issue". It seems as though IE believes that GET requests (method="get") need to be cached, while POST requests do not. This meant changing all my requests from GETs to POSTs. Finding out how to do this took a bit of research as well, so I'm going to just give this to you here (if you already know how to do this, then feel free to ignore the following). The solution, as you'll see is extremely simple (changes are marked in bold & italic):
Example GET request:

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'get',
      parameters: pars,
      onComplete: runNextFunction
    });
}

Example changed to a POST request:

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post',
      postBody: pars,
      onComplete: runNextFunction
    });
}

Well there you have it. The IE issue is fixed, right? Well... Not exactly. This solution only seemed to work part of the time. So, after some more digging, I found the definitive solution. Although not elegant, it fixes the problem. That solution is to add a random number parameter onto the end of the parameters that get passed. "Why would this work?" you might ask. Well this random number will basically fool the browser into thinking it has to return a page from a URL it's never been to before, rather than thinking it has it in cache (learn more).

POST Example with Random Number

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
      + '&rnd='
      + Math.random()*99999; //using rather large multiplier to ensure uniqueness
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post',
      postBody: pars,
      onComplete: runNextFunction
    });
}

I feel that the information in this article is exactly what is needed to get your feet wet with AJAX. I plan to create a tutorial that will walk you through a real world working example of AJAX using ColdFusion and a simple MS Access Database.

Site Breakdown: Part I – Header

Patrick — Thu, 26 Jan 2006 23:07:53 +0000

I spent a considerable amount of my free time on this site, and enjoyed every single second of it. Perhaps a little too much (ask my wife). Since I've spent so much time, and have learned a ton while doing so, I feel that it's only right, as a designer who utilized information from other blogs to create this one, to give a relatively detailed breakdown of this site. Since this will be somewhat detailed, I've decided to break it down into parts:

Part I - Header
Part II - Body
Part III - Sidebar
Part IV - Footer
(links to the above list will be added as the entries are written)

The Header
The masthead consists of the logo and the navigation. This may not seem like a whole lot, yet some really nice CSS code is utilized here, making for some really clean markup, and a nice user experience. We'll start with the logo.
The Logo
The image itself is actually part of the background. Notice, when looking at the XHTML, there is no reference to the logo image itself:

Tricklin

The beauty of this is that the logo image is in the background, declared in the CSS. To help clarify, let's take a look at this code:

#logo {
    margin: 0 0 0 6px;
    position:relative;
    float:left;
    width:200px;
}
#logo a {
    height:60px;
    width:200px;
    background: url(http://www.patmullin.com/tricklin/images/tricklin_logo_2 00x60.png) no-repeat;
    text-indent: -9000px;
    display:block;
}
#logo a:hover {
    background-position: 0 -60px;
}

The first section, #logo, acts as the placeholder for the logo image. By looking at this we know that the logo will appear on the left of the screen, and a margin of 6 pixels will keep it from butting directly up against the left edge of the browser window. We also know that since the image is only 200 pixels in width, that is the widest we need this section to be, so it is set to 200 pixels.

The remaining sections, #logo a and #logo a:hover, are what declare the logo image, and the properties that make it clickable. We'll start with the default link state. First, #logo a means that an anchor tag within the "logo" div will aquire these properties. Meaning all other anchor tags will not be affected. That said, the anchor tag inside "#logo" will place the "tricklin_logo_200x60.png" into the background and only show it once (no-repeat). If otherwise declared, the starting point for showing the image is 0 pixels from the left and 0 pixels from the top. As you can see from the actual logo image (above), it's actually 120 pixels in height, yet the image will only appear in an available window that is 60 pixels tall. So the user will only see the top-half of the logo image. So that when the mouse is "hovered (#logo a:hover)" over the logo, the bottom half of the logo will appear in the available window - background-position:0 -60px.

Navigation Menu
Once again, the markup for the navigation is nice and clean. There are no image references in the actual XHTML code. Let's have a look:

Notice that each "button" has an accesskey associated to it. These were added to improve the accessibility of the site. Since Stuart Robertson does an excellent job explaining accesskeys in his article on A List Apart, I won't go into detail about this.

With some CSS coding, the navigation menu goes from looking like a bulleted list to a horizontal set of buttons:

#navigation ul.nav {
    padding: 0px;
    margin: 0px;
}
#navigation ul.nav li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#navigation ul.nav li a{
    float:left;
    display: block;
    list-style-type: none;
    margin: 0px;
    padding: 0;
}

Each button in the navigation menu has 3 states (using only 1 image), a mouser over (hover), a mouse out, and an active page state. Each state is represented using the same concept as with the logo:

#navigation ul.nav li a.portfolio, #navigation ul.nav li a.portfolio_c, #navigation ul.nav li a.portfolio:hover{
    width: 90px;
    height: 30px;
    background: url(http://www.patmullin.com/images/portfolio_nav_tab2.png) no-repeat;
}
#navigation ul.nav li a.portfolio{background-position:0 -50px;} // mouse out state
#navigation ul.nav li a.portfolio_c{background-position:0 -100px;} // active page state
#navigation ul.nav li a.portfolio:hover{background-position:0 0;} // mouse over state

So, that's the header in a nutshell. Next, I'll explain the Body, and all the little CSS elements and WordPress plugins used.

Static Rating System Using One Image & Some CSS

Patrick — Wed, 30 Nov 2005 19:04:48 +0000

After seeing Rogie King's 5 star rating tool which he created using CSS and only 1 image, I was inspired to create a similar, static version (i.e. a way to represent a score once it's already been set). For example, I wanted a way to represent a score of 3 out of 4 stars, or 2 out of 4 stars, using the same image for both examples. So, using Mr. King's concept, I was able to come up with an easy way to implement a light-weight static rating system. Let's start with the image:

The CSS:

.score{
margin: 0px;
padding:0px;
width: 80px;
height: 20px;
background: url(star.png) top left repeat-x;
}

We begin by establishing the area where the entire score will reside. As you can see, the area will be 80 pixels in width and 20 pixels in height. Because of this criteria, we know that this will be a 4 star rating system. How do we know this? Because the width of the entire score area is set to 80 pixels, and each star is 20 pixels in width (see image above): 80 / 20 = 4. If we wanted 5 stars, we'd simply add 20 pixels, making the total width 100px. We also know, that will will only see the empty stars: height:20px and background: url(star.png) top left repeat-x;. Now, all we need to consider is how to represent each rating. First off, since each rating will share similar CSS characterisitcs we'll combine them into one set:

.score_1, .score_2, .score_3, .score_4 {
margin: 0px;
padding: 0px;
height: 20px;
position: absolute;
font-size: 8px;
text-decoration: none;
text-indent: -9000px;
background: url(star.png) bottom left repeat-x;
}

Based on the above, we see that each of these scores will use the bottom half of star.png: height: 20px and background: url(star.png) bottom left repeat-x. We also know that no text will appear in the browser: text-indent: -9000px;. I've set the font size to 8 pixels in order to guarantee that the layout won't be compromised. If it were to be set to a size greater than 20 pixels, you'd see some not too pleasing results. Now that we've got the shared attributes decided, the only thing left to do is establish the widths of each score separately. This is what will give each score it's unique presentation:

.score_1 {
width:20px;
}
.score_2 {
width:40px;
}
.score_3 {
width:60px;
}
.score_4 {
width:80px;
}

How does this work? Because, each score's background is repeated horizontally yet each contains a different width: background: url(star.png) bottom left repeat-x;. So score_1 will repeat, yet it will only be 20 pixels in width. Whereas score_4 will repeat and be 80 pixels in width, in effect showing all 4 stars.

What does the XHTML look like?

A score of 1

A score of 2

A score of 3

A score of 4

There you have it, a simple, easy way to represent a static rating system using a single image and some CSS. See it in action.

Zebra Striping Tables in ColdFusion, using CSS and JavaScript

Patrick — Fri, 04 Nov 2005 22:39:31 +0000

Want to create a table that contains rows of alternating color? This is a little tutorial dedicated to showing you how. I've also added a third color to the mix. This will be used as a highlighting tool when the user mouses over a row. Let's start by having a look at the XHTML and ColdFusion code.
XHTML and ColdFusion:

...

Since the main idea here is to alternate the colors between rows, the key set of code from the above example is the following: currentrow MOD 2. What in the heck does this mean?

ColdFusion offers a modulus function (MOD) that returns the remainder (modulus) after a number is divided by a divisor; for example,10 MOD 3 is 1. -- livedocs.macromedia.com

Since even numbers divided by the number 2 will divide evenly (i.e. no remainder), and odd numbers when divided by 2 will not, we use CurrentRow MOD 2.

The CurrentRow variable is one of a few variables that ColdFusion automatically exposes that provide information about the query. These variables are often called query variables. -- livedocs.macromedia.com

Based on what we know now, let's look at the entire "IIF" statement:

#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#

In ColdFusion, the "IIF" statement works like this:

#IIF(conditional statement, RETURN THE EXACT STRING:('value returned if the conditional statement is true'), RETURN THE EXACT STRING:('value returned if the conditional statement is false'))#

To help clarify the above even more, this: class="#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#", as a story would read "if the remainder of the current row divided by the number 2 is greater than zero (0), then the class will equal 'dark', otherwise, the class will be 'light'.

Now that we've taken care of the alternating rows, let's incorporate that 3rd color which will be used for highlighting a row. Before we go any further, let's first take a look at the JavaScript code.
Javascript:

// Determine browser
var isMinIE5 = (navigator.appVersion.indexOf("5.")) >= 0 ? 1 : 0;
var isDOM = (document.getElementById) ? 1 : 0;
function changeBgcolor(objId,objClass) {
  if (isMinIE5||isDOM) {
    document.getElementById(objId).class Name=objClass;
  } else {
    return;
  }
}

This is just a simple javascript that will change the class name of the id being passed to the function (objId) to the a new class which is also being passed to the function (objClass). These classes are simple background-color declarations in the CSS:

.light {
  background-color: #fff;
}
.dark {
  background-color: #efefef;
}
.rollovercolor {
  background-color:#ccc;
}

So, when looking at the following piece of code: onmouseover="changeBgcolor('#rowid#','rollovercolor'); ", we can determine that when the user mouses over the row, the class name of the id '#rowid#' will change to 'rollovercolor'.

At this point you may be asking, what is this '#rowid#'? In order for this entire set of code to function properly, we need to guarantee that the 'id' for the row (a.k.a. the 'tr') is unique. That is where this '#rowid#' comes into play:

All database tables must have a column that contains a unique identifier, called the primary key (most of the time). In the example above, we're setting the 'rowid' to be equal to the "EmployeeID", which in this case is the unique identifier for the "Employee" table. The reason for putting this value into a variable called "rowid" is so that you don't have to add "#EmployeeList.EmployeeID#" into the row's code 3 different times. It also makes it easier when you want to use this code in another section of your application!

The last thing that we need, is to make sure we set the classes back to what they were originally when the user moves the mouse off the row. So we need to add an "onmouseout" action: onmouseout="changeBgcolor('#rowid#','#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#');"

There you have it. A way to represent a table of information in a cleaner, easier to navigate fashion.
See alternating rows in action