Text

· · to read

UPDATE (2007-07-17): After searching for ‘sliding doors css “dead space”‘ I found that someone already solved the problem without using JavaScript.

About a year ago I read Sliding Doors of CSS on A List Apart. While I admired the elegance of the design, I found the dead space on the left side of the tabs to be annoying.

The problem comes down to not being able to wrap an individual anchor tag around a list item tag and have it work. The anchor tag had to be put inside the list item tag, and try as I and the author might, it couldn’t be made to include the entire tab. The left side of the tabs were unclickable, as can be seen in the example.

The other day, I got the idea to fix the problem with JavaScript. I could make the list item trigger an onclick event. I could also make it show a hand cursor when hovering over the list item. The hand cursor thing could be done with CSS, but I like doing it in the JavaScript better, because if somehow the JavaScript code doesn’t execute properly, it won’t show a hand cursor in an area that’s not actually clickable.

I use the following JavaScript code, which relies on the JQuery library, to make the dead space clickable. On the first try I had the whole page flicker in Firefox when part of the anchor was clicked (the part that wasn’t dead space before). I tested it on the old page and it didn’t have the whole page flicker issue. So I figured out that it was probably a result of both the link and the javascript being triggered, and I added an event for the anchor to tell it not to trigger the dead-space event if the user clicked on the anchor.

clickedAnchor = false;

function fixDeadSpace(headerDiv) {
  var items = $('li', headerDiv);
  items.css('cursor', 'pointer');
  items.click(function(arg) {
    if (! clickedAnchor) {
      window.location.href = $('a', arg.target).attr('href');
    }
  });
  $('a', headerDiv).click(function() { clickedAnchor = true; });
}

$(function() {
  fixDeadSpace($('#header'));
});

To use, make sure the JQuery library is available, and add the above in a script tag. Here is the example with my code added, and different query strings in the links.

It behaves just about the same as if the left part of the tab were part of the link. The only difference that might be noticeable to a very small number of users is that when you hover over the area outside the anchor tag, the location isn’t shown in the status bar.

Categories
Tags