The answer is Veerle's tutorial.

There is one extra tip I'd like to offer.

In Step 2 of Veerle's directions, she states the following:

"Since this curl doesn't show the back of our photo, it doesn't really look realistic. The only way I'm aware of to achieve this effect is that we draw it ourself. Select the Pen tool from the Toolbox and draw a path on top of the picture. Follow the borders of the curl you just transformed as guidance. ..."

Emphasis mine.

Tracing the curl with the Pen tool can be difficult when the contrast between the curled edge and the 'facing' edge of the photo is too faint. For instance, if you went through the tutorial with a blank beige square, your progress as you get to step 2 may look like this:

Stage 1: Drawing the marquee

Stage 2: Select to warp

Stage 3: Drag the corner

Stage 4: Hit enter

Uh-oh! Now what do we trace to make the curl? You can make it up if you're so inclined, but if you want a guide to trace, do the following:

1. Take a screen grab just before you hit enter.
2. Press enter to commit your warp.
3. Paste in your screen grab over your working page layer.
4. Change the opacitiy of the screen grab layer so you can line it up with the layer underneath.
5. Now you should have guides to draw your curl.

Once you've drawn your curl with the pen tool, you can trash the layer and go about the other steps in Veerle's tutorial to finish out the effect.

I always assign a class to every input that is the same to the input's type.

<input
  type="text"
  class="text" />

<input
  type="checkbox"
  class="checkbox" />

<input
  type="radio"
  class="radio" />

<input
  type="button"
  class="button" />

For input types that would be similar in presentation, I double up:

<input
  type="submit"
  class="submit button" />

<input
  type="password"
  class="password text" />

It's not uncommon for a project to require specified padding, width, and border colors for text inputs. I don't want to target all input tags, as it could have some unintended consequences for elements I don't want changed. So this practice has helped me greatly. Its html file size impact is miniscule, and it's also easy to remember, since the type value is always the class value.

Attribute selectors vs. class names

Attribute selectors almost remove the need for me to do this, but not quite. By attribute selectors, I mean the following:

input[type="text"] { border:1px solid #000; }

... in which the value of the 'type' attribute is used instead of a class or id.

The main reason attribute selectors don't do the trick is that IE6 doesn't support them. And though I can be persuaded to let a little IE6 wonkiness slip through for some parts of web site projects, forms are where I draw the line. After all, forms are how get feedback and money from customers - why screw with that?

The secondary reason can be found from the password input example above. I want password inputs to inherit the same presentational treatment as text inputs. Using the class names defined above lets me do that.

For me, this practice has proven pretty effective. Your mileage may vary, but I'd love to hear any other tips you have in mind.

See also:

• Eric Meyer's Formal Wierdness
• Roger Johansson's Why styling form controls with CSS is problematic

So I created a tool to help create a table and throw in column classes quickly. I gave it a name so I can put it out there and let others use it, too.

It's called kotatsu.

I have a list of links in an unordered list. What I want is that when I click a list item, its color should change, and when I click some other list item, the color of the item which I clicked previously should return to its original state.

Can you help me in this regard?

Yes, I can help.

More advanced readers, move along. This is JavaScript beginner territory, but this is one of those steps that is really rich in DOM scripting nutrients, so I'm very pleased to discuss it.

What Prasun is describing, just by itself, is the behavior of a set of radio buttons. You click one, and it takes on the selected state. Then you click on another one, and the new one now becomes selected, while the previous one returns to an unselected state.

But radio buttons are form elements, not navigational elements, and upon clarifying with Prasun, it's navigation that we're after.

This is the fundamental behavior of a site that uses ajax for navigation or tabs, where each "page" is created by loading new content into the content section of the current page.

This is a relatively easy way to get your feet wet with DOM scripting. So I'll first show how to do it with some very basic JavaScript functions. Also, I'll show how to do it with jQuery.

First, the HTML

Let's start with an unordered list of links.

<ul>
  <li><a href="#">Heartbreak Hotel</a></li>
  <li><a href="#">Blue Suede Shoes</a></li>
  <li><a href="#">Hound Dog</a></li>
  <li><a href="#">Don't Be Cruel</a></li>
  <li><a href="#">Teddy Bear</a></li>
</ul>

See example 1.

Who are we kidding? Let's see it with some basic styling - example 2.

Since we're going to be changing around selected links, let's establish what a selected state looks like, and mark one item as selected by default. I'm going to do this by applying class="selected" to one of the links.

<ul>
  <li><a href="#">Heartbreak Hotel</a></li>
  <li><a href="#">Blue Suede Shoes</a></li>
  <li><a href="#" class="selected">Hound Dog</a></li>
  <li><a href="#">Don't Be Cruel</a></li>
  <li><a href="#">Teddy Bear</a></li>
</ul>

See example 3.

The JavaScript

Here's what we want to do in English. When someone clicks a link, remove class="selected" from any of the other links, and assign it to this one.

Another way to say that is "When someone clicks a link, run a function" and later I can be more specific about what that function is. Here's how I'll put that statement in the html.

<ul>
  <li><a onclick="applySelectedTo(this);" href="#">Heartbreak Hotel</a></li>
  <li><a onclick="applySelectedTo(this);" href="#">Blue Suede Shoes</a></li>
  <li><a onclick="applySelectedTo(this);" href="#" class="selected">Hound Dog</a></li>
  <li><a onclick="applySelectedTo(this);" href="#">Don't Be Cruel</a></li>
  <li><a onclick="applySelectedTo(this);" href="#">Teddy Bear</a></li>
</ul>

The "this" mentioned in the parentheses refers to the link that is being clicked. I'm thinking ahead here - I know that I'll want to do something with the link being clicked (assign it class="selected"), so I'm going to go ahead and pass that link as a parameter to the function. The term this is great for that sort of thing.

The function will be called "applySelectedTo()", and I'll write it in just a second. It's going to do exactly what it says it will do: Apply class="selected" to whatever link is given to it. It will also live in head of the document.

Notice that in the html, I'm passing the parameter this. And when I write the function, I'm using a made up term to help tell me what this was - the word link.

<script type="text/javascript">
function applySelectedTo(link) {
  link.className = "selected";
}
</script>

Check out Example 4 to see it in action.

Oh, but we're not done

All that JavaScript function did was add class="selected" to the new link. It didn't remove class="selected" from previously selected links. We need to fix that. Also, when we click a link, it adds the hash mark (#) to our url, and if our page were really long, it would jump to the top of the page again.

We'll tackle the second problem first. That hash mark is telling me something: it's indicating that the link is behaving like a link is supposed to behave. That behavior normally means that it will find the id of whatever I specified after the hash mark and the browser will bring that part of the page in focus. But in this case, we would rather ignore the default behavior of the link, so I'm going to tell my links to ignore their default behavior when clicked.

<ul>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Heartbreak Hotel</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Blue Suede Shoes</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#" class="selected">Hound Dog</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Don't Be Cruel</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Teddy Bear</a></li>
</ul>

Example 5

And back to the first problem - removing class="selected" from other links when a new link is selected. How do we get the link that already has class="selected", and remove the class? Well, to make it easy, I'm just going to say remove class="selected" from all links, then I'll add class="selected" to the one just clicked.

<script type="text/javascript">
function applySelectedTo(link) {
  var ul = document.getElementsByTagName("ul")[0];
  var allLinks = ul.getElementsByTagName("a");
  for (var i=0; i<allLinks.length; i++) { 
    allLinks[i].className = ""; 
  }
  link.className = "selected"; 
}
</script>

And so there you have it, Example 6 - final example.

And if you're so inclined, make it do something.

We could go much further

Ideally, you wouldn't even have an onclick attribute in the markup. That kind of thing can be inserted dynamically using more DOM scripting. It makes your html lots more readable and reusable, as well as separating behavior from structure.

Also, for kicks, here's one final example of doing the things mentioned in this article, but using the jQuery library instead of self-written scripts. In the instance that you are already pulling in a hefty JavaScirpt library into your web site, you might as well make use of it.

The value of <u>

The <u>, whose sole purpose was to underline inline text, was deprecated in HTML 4.01, and was destined to remain unsupported in future versions of HTML. However, arguments have recently been made to revive it in HTML 5, warning that <u> has a specific value that no other tag has, and that we never should've given <u> up. Watch Tim Berners-Lee defend this proposition to the World Wide Web Consortium in a heated March 2008 discussion.

I would've naturally thought that if someone is going to use background images to create a capsule effect, they would have used anti-aliased images. But upon closer inspection, no background images were used at all. Instead, a couple of nested tags within the link help create the effect. Instead of this:

<ul>
  <li>
    <a href="/">
      Visitors
    </a>
  </li>
</ul>

Some <b> tags are added (likely chosen because because of their length - one letter):

<ul>
  <li>
    <a href="/">
      <b>
        <b>
          <b>
            Visitors
          </b>
        </b>
      </b>
    </a>
  </li>
</ul>

Now whether or not this is the purest thing to do is not the subject of this article. Obviously, I don't support overnesting of tags. But the Analytics designers did this for a specific design purpose. Nesting one tag is quite common for achieving sliding-doors rounded tabs. Perhaps the reasoning was, 'Why not nest two more and drop the use of images?'

Also, similar techniques exist out there to get rounded borders with a greater radius than just one pixel. However, those techniques involve much more extra markup (or javascript to create it for them) in the form of empty tags, where success comes in the form of a pixelated curve reminiscent of an 8-bit Nintendo display. (I exaggerate, but still.) In the case of a one pixel notch, the effect at least looks intentional.

The notched corner is created by modifying the nested tags' border and position properties.

Here's the CSS:

li a {
  display:block; /* a must */
  border: solid #666;
  border-width: 0 1px; /* left and right borders only */
  text-decoration: none;
  outline:none; /* so as not to distract from the effect */
  color: #000;
  background: #e4e4e4;
}
li a b {
  display: block; /* another must */
  position:relative; /* because the child elements are positioned */
  top: -1px; /* drag it up a little, creates the top notches */
  left: 0;
  border:solid #666;
  border-width:1px 0 0; /* top border only */
  font-weight:normal;
}
li a b b {
  border-width:0 0 1px; /* bottom border only */
  top: 2px; /* pushed down a little to create the bottom notches */
}
li a b b b { /* i don't think three-deep tag is even necessary */
  top:-1px;
  padding: 1px 6px;
  border-width: 0;
}

To just get the notch, the third-deep <b> tag isn't needed. I think Google Analytics included it because they wanted to add some background images with it on their buttons. I think this effect can be achieved with one less nested <b>.

<ul>
  <li>
    <a href="/">
      <b>
        <b>
          Visitors
        </b>
      </b>
    </a>
  </li>
</ul>

In my example page, I left it at two deep.

It's free and open to everyone of any skill level.

Update (23 Mar 2008): I updated the title with the correct date, April 5.

Here's a list of what I have converted so far, with a downloadable zip.

The obligatory disclaimer - using any library's methods is no substitute for learning JavaScript basics. If you haven't already added JavaScript to your list of things to learn as a web designer, stop mucking around and pick up Jeremy Keith's DOM Scripting.

For a seasoned html/css person, learning jQuery is arguably much easier than learning JavaScript from scratch, since its selector syntax is based on CSS selectors. Since I'm the CSS Guy, it is my library of choice, but only when a library is needed. Some pages require so little DOM manipulation that self-written functions easily fit the bill, as well as saving some downloaded bits.

On a related note, someone turned my favicon article example into a jQuery plugin.

The idea would be that the cart would only start following the scrolling page if it had a product in it; an empty cart would not. I ended up not using the feature for a variety fo reasons, but I thought I could still share the logic behind the effect.

For those who like to skip ahead: view the final example or download a zip with all the html, CSS, JavaScript, and supporting images.

First, a storefront

To start off, here's example 1 - a very basic storefront. In this example, our storefront sells tea. The shopping cart, pictured with some items inside, is on the right. The shopping cart is 200 pixels wide, and I've reserved the right-side 200 pixels all the way down the page to serve as the shopping cart 'aisle'.

HTML

<div id="shoppingCartAisle">
  <div id="shoppingCart">
    <h3>Shopping Cart</h3>
    <ul>
      <li>product 1</>
      <li>product 2</>
      <li>product 3</>
    </ul>
  </div>
</div>

CSS

...
#shoppingCartAisle {
  width:200px;
  float:left;
}
#shoppingCartAisle #shoppingCart {
  width:200px;
  position:absolute;
  top:0;
  background:transparent url(images/bottom.gif) no-repeat bottom left;
}
#shoppingCartAisle #shoppingCart h3 	{
  background:transparent url(images/top.gif) no-repeat top left;
  margin-top:0;
  padding:4px;
 }
...

Notice that I have a 'shoppingCartAisle', which is the container for the 'shoppingCart' div. #shoppingCartAisle is set to position relative, and #shoppingCart is absolutely positioned to stick to the top of #shoppingCartAisle. (I'm using absolute positioning because I'm setting up what is to come.)

Using position:fixed

To illustrate the cart running up and down the page, I've created example 2, which has #shoppingCart using position:fixed; instead of position:absolute;. As the user scrolls, the shoppingCart follows the browser. Unfortunately, it overlaps the header area as well. I'd rather my cart stay in the aisle.

Deciding how to do this

This is where Derek Allard's article proved to be of great reference. I varied from his approach in two ways:

1. My cart does not hug the side of the browser, but instead stays within the right column of a fixed-width layout.
2. I planned for the distance from the top of the browser to the cart to vary based on promotional messages or whatnot that may/may not line the top of the page, so it was important for the cart to be positioned absolute to the aisle, not the browser window.

It's helpful for me to state what I want to happen in English before writing the JavaScript. When the browser scrolls, determine if it has scrolled down past where the 'shoppingCartAisle' begins. If so, change the 'shoppingCart' to position:fixed so that it follows the user down the page. If the browser scrolls back up to where 'shoppingCartAisle' starts, then switch 'shoppingCart' back to position:absolute so that it doesn't go into the header space of the page.

The fun part - JavaScript

To determine where the shoppingCartAisle begins, I have a function called establishTopPosition(), which is the first of two functions you see below. The second function, pushMyCart(), does what the above paragraph describes in English. For the parts that look weird, just know that Derek Allard figured that stuff out for me.

<script type="text/javascript">
function establishTopPosition() {
  var shoppingCartAisle = document.getElementById('shoppingCartAisle');
  var y = 0;
  while (shoppingCartAisle!=null) {
    y += shoppingCartAisle.offsetTop
    shoppingCartAisle = shoppingCartAisle.offsetParent;
  }
    return y;
}
function pushMyCart() {
  var shoppingCart = document.getElementById('shoppingCart');
  var topPos = establishTopPosition();
  if( window.XMLHttpRequest ) { // IE 6 hates position fixed
    if (document.documentElement.scrollTop > topPos  || self.pageYOffset > topPos) {
      shoppingCart.style.position = 'fixed';
    } else {
      shoppingCart.style.position = 'absolute';
    }
  }
}
</script>

And I want JavaScript to pushMyCart() when the page is scrolling, so add this to the onscroll event of the body:

<body onscroll="pushMyCart();">

See example 3 where JavaScript is pushing my cart.

Let's enhance it some more

I only want a rolling shopping cart if there are products in the cart. If it's empty, I just want it to stay put.

To do this, I'm going to add a class to the shopping cart called 'rollingCart' when a product is added. Then I will tweak my JavaScript to only roll the cart if it has a class of 'rollingCart'.

I also need a way to clear out the items from my cart, so I've provided a link, 'Empty Cart', than when clicked, removes the class of 'rollingCart' from the shopping cart.

Once again, I'm relying on the great work of others to accomplish this, namely Robert Nyman, who wrote the very helpful functions getElementsByClassName, addClassName, and removeClassName, and also one Simon Willison, who wrote the addLoadEvent function. (Yes, I know there are libraries that can do this, but this assumes there are none being used.)

Here are the functions I wrote to accomplish my new task. The first one sets up the 'add to cart' links so that once clicked, they give a 'rollingCart' class to the cart, then tell the browser to push my cart. The second function sets up the 'clear cart' link, so that once clicked, it removes the 'rollingCart' class, then tells the browser to parkMyCart(). parkMyCart() attaches the cart to the top of the shoppingCartAisle element again.

function addToCartLinks() {
  var links = getElementsByClassName('addToCart','a',document);
  var cart = document.getElementById('shoppingCart');
  for (var i=0; i<links.length; i++) {
    links[i].onclick = function() {
      addClassName(cart,'rollingCart');
      pushMyCart();
      return false;
    }
  }
}

function clearCart() {
  var dumpit = document.getElementById('clearCart');
  var cart = document.getElementById('shoppingCart');
  dumpit.onclick = function() {
    removeClassName(cart,'rollingCart');
    parkMyCart();
    return false;
  }
}

function parkMyCart() {
  var cart = document.getElementById('shoppingCart');
  cart.style.position = 'absolute';
}

See it in action with example 4 - remember to 'add to cart' and 'clear cart' to see the effect. Feel free to download the zip as well.

Note that I kept these functions simple for the sake of demonstration - no products are added or removed from the cart when links are clicked; just the class name changes. Also, this doesn't work in IE6, and the JavaScript allows IE6 to 'gracefully degrade' by always having a positioned absolute cart.

I hope you find the post helpful. I am no JavaScript genius, so if you see anything that could make this better, please leave a comment.

Why tea?

This post is so themed to raise awareness for Ron Paul in honor of this weekend's fundraiser event, which purposefully coincides with the anniversary of the Boston Tea Party. If you don't know who Ron Paul is, I encourage you to google him or search YouTube for supporter-made videos. Or start with these: one, two, three. Thanks.

I have a request: could you PLEASE tackle the rounded corner issue? I seem to get a request all the time to add some rounded corners to sites and I have looked at at least a dozen different solutions and was never happy. What do you recommend? How do you create rounded corners?

Let's cut to the chase - I have no new or special method for rounded corners. Also, there is no one way that I can recommend, as some methods are better suited than others based on context and need. I have no intention of doing a rundown of every method, but I'd still be happy to share how I've created rounded corners in the past.

Simplest way I know

I've been fortunate enough to work on projects that have only required rounded corners on elements with a fixed width and a solid color (no gradients). That makes it pretty easy for me - I just use a giant gif.

Gif's are relatively light-weight, even big ones if it's a solid color. For this example, I'll create one at a fixed width of 380px, and make it long - 780px. See example.

Then I'll markup my box.

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
</div>

And give it the background.

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}

Note that the width of my box is set to 340px in the CSS, because I have left and right padding of 20px, totalling the width of my image: 380px.

To get the bottom corners to show up, more markup is needed:

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

The 'boxBottom' div should be styled to fit at the bottom and stretch to the full 380px.

.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

And now I've got a rounded corner box that can stretch down pretty far - in this case, 780px.

Other methods I've used (besides... um... tables)

Another way I've made rounded corners is illustrated on this very website, in the upper right-hand corner of the content. It's using the -moz-border-radius-topright, and since it's just a trivial presentational dollop, I couldn't care less than it's mozilla-only.

In the past, I've attempted to use absolutely positioned divs with negative margins to make each corner of a bordered box, but that didn't go well with IE (not even 7), so IE didn't get rounded corners that day. When I redid the project, I used the gif method described above.

Flexible alternative

If dynamic width and height are required, I'd recommend checking out this article.

We need someone who can write HTML, CSS, and JavaScript. The well-structured, valid, semantic, accessible, progressive enhancement/graceful degradation kind of stuff.

It's a plus, but not a requirement, if you're familiar with jQuery and have worked on gargantuan international travel web sites.

It's full-time work, but a temporary position, lasting a minimum of six months. The candidate must play well with others, and must be able to commute to Memphis, TN.

Send a resumes, links to some of your work (descriptions would be helpful), and hourly rates to askthecssguy+hiltonjob@gmail.com.

Update Nov 7, 2007: time frame added.

Update Nov 23, 2007: The position has been filled.

...For example - clicking on a cell should highlight the associated cell in the top row and left most column.

One good example is orbitz.com.

(You have to actually perform a search to see the actual matrix.) The top row consist of the airline names and the left column is non-stop, 1 stop or 2 stop flight...as you move your cursor, the color of the associated top cell and left most cell changes to yellow...

Nice idea. I'll cover one way to create the effect using JavaScript and CSS. (For those who have been here before, I realize there is lots of repeated material here from my previous post, but that's the good thing about reusable JavaScript... it's reusable in different situations!)

For those who like to skip ahead: view the final example

Getting Started

A table of this type has headings across the top as well as down the left side. I'll use a thead with th's across the top, line the left column of the tbody with th's, too. like so:

View example 1, the bare table.

Who are we kidding? View example 2, a styled table.

Next Step: Add class

To help establish the relationship between cells, add classes. (This will be used by the JavaScript to know which cells to highlight.

<table>
  <thead>
    <tr>
      <th class="null">
      <th class="stones">
      <th class="u2">
      <th class="crue">
    <tr>
  </thead>
  <tbody>
    <tr>
      <th>
      <td class="stones">
      <td class="u2">
      <td class="crue">
    </tr>
    ...
  </tbody>
</table>

View example 3, classes added. (Or don't, since there is not much visually different yet).

Next Step: Establish what an selected state looks like

I'm going to use class="on" again to add the highlight to the appropriate cells.

<table>
  <thead>
    <tr>
      ...
      <th class="u2 on>
      ...
    </tr>
  </thead>
  <tbody>
  ...
    <tr>
      <th class="on">
      <td class="stones">
      <td class="u2 on">
      <td class="crue">
    </tr>
   ...
  </tbody>
</table>

and the CSS...

tbody td.on {background:#f3f0e4;}
thead th.on {background:#ffe068;}
tbody th.on {background:#ffe068;}

View example 4, the selected state.

Next Step: Using JavaScript

We can't really use :hover to make this stuff work. Instead, we're going to highlight the appropriate cells using onmouseover and onmouseout events.

In English, here's what we want to happen:

1. When someone hovers over the Nikki Sixx table cell
2. add class="on" to the Nikki Sixx cell
3. as well as adding class="on" to the "Mötley Crüe" and "Bass Guitar" cells.
4. When someone moves their mouse away from that cell, remove class="on" from all of those cells we just added to previously.

Here are the tools needed to do that:

• A javascript function called getElementsByClassName, which allows us to target elements based on their class value. (via Robert Nyman)
• A javascript function called addClassName (via Robert Nyman). This function will be used to add "on" as a class name to our desired cells.
• A javascript function called removeClassName, (via Robert Nyman). This is used to unselect cells by removing the "on" value from their class attributes
• A custom javascript function to tie the behavior together.
• A javascript function called addLoadEvent (via Simon Willison), which is just a way of attaching these behaviors when the page loads instead of putting onmouseover and onmouseout event attributes to every cell by hand.

And here's the end result - view example 5, the final product. Just view source to copy it and take it with you.

See also

I could see how someone could want to apply highlights to entire rows and entire columns (as opposed to just the header cell of that row or column)... it wouldn't be a long stretch from this (corresponding how-to post found here).

Also, here's a way to indicate relationships similarly to what is described above, but without JavaScript.

Update Aug 28, 2007: links to examples fixed. Again.

I like Crazy Egg's pricing table on their Pricing & Signup page. When you click on "Sign Up" for an option, that plan's column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

If you just clicked over to look at Crazy Egg's site, then clicked back, consider visiting there again when you're finished reading this tutorial. If you're as impressed with the way their site is put together as I am, you, or someone you know/work with, could probably benefit from Crazy Egg's amazing click tracking visualization tools. Their prices sure make it easy to get started, so give it a consideration while you're giving them traffic.

For those who like to skip ahead: view the final example or download a zip with all the html, CSS, JavaScript, and supporting images used in this article.

Getting Started

First I need a table, and I'll model my example off of Crazy Egg. I'll use a left column for the descriptions, a top row for headings, and a matrix of features in the body. We're going to make use of thead, tfoot, and tbody.

<table>
  <thead>
    <tr>
      <th>'s go here
    <tr>
  </thead>
  <tfoot>
    <tr>
      <td>'s go here
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>'s go here
    </tr>
  </tbody>
</table>

View example 1, the bare table.

Next Step: Add class

By default, all the table cells look alike. To establish that cells in each column are related, I need to add classes to all the <td> and <th> tags.

<table>
  <thead>
    <tr>
      <th class="desc">
      <th class="choiceA">
      <th class="choiceB">
      ...
    <tr>
  </thead>
  <tfoot>
    <tr>
      <td class="desc">
      <td class="choiceA">
      <td class="choiceB">
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="desc">
      <td class="choiceA">
      <td class="choiceB">
    </tr>
  </tbody>
</table>

View example 2, adding class, which also shows the checkbox added. Here's a screenshot.

Next Step: Establish what a selected state looks like

We'd like to indicate a selected column by adding class="on" to the appropriate cells. Since all cells already have a class name assigned, the on class name will added to the class attribute value with a space.

<table>
  ...
  <tbody>
  ...
    <tr>
      <td class="desc">
      <td class="choiceA on">
      <td class="choiceB">
    </tr>
   ...
  </tbody>
</table>

View example 3, the selected state.

Next Step: Switching selected columns with JavaScript

When someone hits the "Choose" button in a particular column, we want that entire column to take on the selected state. We need a JavaScript for that.

In English, here's what we want to happen:

1. When someone clicks "Choose" for choice A
2. remove the class name of "on" from all other cells
3. then, take every cell with the class for choice A
4. and add " on" to it.

Here are the tools needed to do that:

• A javascript function called getElementsByClassName, which allows us to target elements based on their class value. (I'm using one written by Robert Nyman)
• A javascript function called addClassName (also via Robert Nyman, although the one I'm using he hasn't placed on his web site yet. This function will be used to add "on" as a class name to the selected columns.
• A javascript function called removeClassName, which is used to unselect cells by removing the "on" value from their class attributes (via Robert Nyman)
• A custom javascript function to tie the behavior together.

Attach the custom function to the "Choose" link's onclick event:

...
<tfoot>
  <tr>
    ...
    <td class="choiceA">
      <a href="#" onclick="activateThisColumn('choiceA');return false;">
        Choose
      </a>
    </td>
    <td class="choiceB">
      <a href="#" onclick="activateThisColumn('choiceB');return false;">
        Choose
      </a>
    </td>
    ...
  </tr>
</tfoot>
...

View example 4, selectable columns. Try it - it works!

Next Step: Introducing Images

If we were just changing background colors, it wouldn't have nearly the same coolness as the Crazy Egg table, whose selected column seems to pop out, or extend beyond the boundaries of the table.

It's obvious that a background image is used with the selected table header cell. What isn't obvious is that the neighboring table header cells are also using background images, which have a solid color on the bottom, and white along the top. This is evident when turning on cell outlines using Firefox's Web Developer toolbar:

I'm going to make some images that accomplish the same thing. Here are the images I'll be using:

regular <th>
selected <th>
left column <th>
regular <td>
selected <td>
left column <td>
regular <td> in tfoot
selected <td> in tfoot
left side <td> in tfoot
choose button

View example 5, images and cell dimensions in place. Looking good - we now have a decent-looking table with some dynamic behavior.

But we can't stop. Let's introduce even more dynamic behavior.

Next Step: Showing a form, hiding some table columns.

On Crazy Egg, when a column is selected, all the other columns disappear, the selected column moves to the left, and a form appears in the space to the right. The cancel button of the form then reshows all the other previously hidden columns.

First, I'll draw out the form that will exist outside the table.

View example 6, a form is born.

Then we must style the form to take up the exact dimensions of the four unselected columns.

View example 7, a form is styled and dimensionalized.

The form will have to be absolutely positioned over table. So we'll introduce a container element to both the form and the table to be our relative positioned parent.

<div id="prices">

  <div id="formcontainer">
  ...
  </div>
  
  <table id="pricetable">
  ...
  </table>
  
</div>

View example 8, a form is positioned.

Ooops! The form shouldn't show by default, and we need to have all other cells except the cells in the selected column and cells in the far left column. We'll make use of a new function, hasclass, that checks for class="side". We'll modify our JavaScript function "activateThisColumn" to only hide and show the appropriate cells.

function activateThisColumn(column) {
  var table = document.getElementById('pricetable');
  var form = document.getElementById('formcontainer');

  // first, remove the 'on' class from all other th's
  var ths = table.getElementsByTagName('th');
  for (var g=0; g<ths.length; g++) {
    removeClassName(ths[g], 'on');
    if (!hasclass(ths[g],'side')) {
      ths[g].style.display = 'none';
    }
  }
  // then, remove the 'on' class from all other td's
  var tds = table.getElementsByTagName('td');
  for (var m=0; m<tds.length; m++) {
    removeClassName(tds[m], 'on');
    if (!hasclass(tds[m],'side')) {
      tds[m].style.display = 'none';
    }
  }

  // now, add the class 'on' to the selected th
  var newths = getElementsByClassName(column, 'th', table);
  for (var h=0; h<newths.length; h++) {
    addClassName(newths[h], 'on');
    newths[h].style.display = '';
    // not all browsers like display = 'block' for cells
  }
    // and finally, add the class 'on' to the selected td
  var newtds = getElementsByClassName(column, 'td', table);
  for (var i=0; i<newtds.length; i++) {
    addClassName(newtds[i], 'on');
    newtds[i].style.display = '';
    // not all browsers like display = 'block' for cells
  }
  // show the form!
  form.style.display = 'block';
}

View example 9, a form is revealed when requested.

But we still need to hide the form and keep our selected columns when the form is cancelled. We'll add a function to the onclick event of the cancel button.

<input
  type="image"
  alt="Cancel"
  src="i/button_cancel.gif"
  onclick="hideTheForm();return false;" />

And the function says:

function hideTheForm() {
  // get the form
  var form = document.getElementById('formcontainer');
  // hide the form
  form.style.display = 'none';

  // now get the hidden table cells and show them again
  var table = document.getElementById('pricetable');
  var tds = table.getElementsByTagName('td');
  for (var i=0; i<tds.length; i++) {
    tds[i].style.display = '';
  }
  var ths = table.getElementsByTagName('th');
  for (var k=0; k<ths.length; k++) {
    ths[k].style.display = '';
  }
}

View example 10, a form is revealed when requested, and dismissed from view when cancelled.

Download a zip with all the html, CSS, JavaScript, and supporting images.

There's more going on with Crazy Egg's form than what I've mentioned in this article. Mainly, Crazy Egg invokes a JavaScript library to animate the form's appearance rather than switching from 'none' to 'block' and back again so bluntly. That extra step is beyond the scope of this article, but that kind of detail and work put into the form gives a clear indication that the folks at Crazy Egg really know what they are doing. (Also, IE has some display issues for my form, but those could easily be overcome with conditional comments.)

I hope you enjoy the post, and see what some scripting packaged with images and CSS can accomplish in a small amount of space.

I am working on developing a reporting form for a mobile device as a part of NASA's Constellation project and I'm trying to figure out how to do entirely CSS tooltip pop-ups onclick instead of a hover effect, without use of Javascript DOM since it is not supported in IE Mobile 5. I've been trying to figure out ways but so far haven't found a good method. Do you have any ideas?

Yes, I have ideas, but I have no way of testing this in IE Mobile 5.

We could start with a basic CSS hover tooltip example. My first thought is to tweak it to work with :focus instead of :hover.

Here's a simplified :hover example.

If we just swap out :hover with :focus, we get a method that works in Firefox, but not in IE6 or IE7 (or Safari).

Let's try :active instead of focus. It works fine in IE7, but not the other browsers.

Let's combine :active and :focus and see what happens. It works fine in IE7 and Firefox, but not in IE6 or Safari.

In conclusion, not only do I know next to nothing about the mobile world, I can't find an example that works in all regular browsers consistently. Perhaps you know your target audience well enough that you know you just need it to work in IE5 Mobile and no other browser. In that instance, my only suggestion would be to test one of the above methods to see if they work. If they don't, I've got nothing further to offer, but I would appreciate hearing your results.

If anyone else knows a possible solution, feel free to share.