Code

This page is generally more obsolete than my Articles page - I recommend that you go check that out. Some of my previous experiments with DHTML, JavaScript, CSS and whatever else I like reside here. You can skip directly to any of the following topics:

Fancy HRs with CSS
Last updated: 3.31.2008

Suppose you've got a lovely little graphic that you'd like to use for an HR in place of the boring old default straight line in most browsers. How do you implement your new graphic in a consistent and semantic method?

It's relatively simple to use CSS to style your HR in most browsers, including IE7:

<style type="text/css"> hr.fancy { background: transparent url(/images/hr.gif) center center no-repeat; height: 21px; margin-top: 2em; margin-bottom: 2em; } </style>

Here are the results:

Let us also speak of the 800 pound gorilla in the room. Internet Explorer 6 and IE7 will not render the CSS for the HR properly. You will need to add the following dandy patch by Borgar.

<!--[if lte IE 6]> hr.fancy { display: list-item; list-style: url(images/hr.gif) inside; filter: alpha(opacity=0); width: 0; } </style> <![endif]-->
A CSS Form
Last updated: 7.27.2007

I feel it's time I shared with you the magical CSS-styled form! Don't get too excited about submitting it. Nothing will happen.




This example is taken from Web Design in a Nutshell, 3rd Edition.

Here's the CSS that gets it done.

<style type="text/css"> body { font-family: Arial, Verdana, Helvetica, sans-serif; } form { border: solid #FFFFFF 1px; width: 28em; margin: 5px; padding: 5px; } label { width: 6em; float: left; text-align: right; margin: .5em 1em; clear: both; } input, textarea { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: small; margin: .5em 0; width: 17em; } input[type="submit"] { float: none; clear: both; width: auto; margin-bottom: 1em; margin-left: 8em; } br { clear: both; } </style>

Notes:

  • The user-interactive fields (input and textarea) do not inherit font properties from the body. This is why I've all the font specifications in the input & textarea section of the style-sheet.
  • The magic here is that while the label elements are floated left and have their width fixed at 6em; the text inside them is aligned right. This keeps all the text lined up on the right side. The input and textbox elements are then pushed away from the
  • That fancy stuff on the selector for the submit button is the attribute selector. It selects any input elements with an attribute of type set to submit. It's very handy for separating the buttons from checkboxes and radio buttons.
  • At one time I desired a method to override the Google Toolbar's auto-fill occasional highlighting of form fields. Something along the lines of Disabling IE's Image Resizing would be lovely. However Chris Heilmann made the excellent point that your user chose to see the yellow highlighting by installing the Google Toolbar. But part of accessible and flexible design is allowing a user to interact with your site on their terms.
Equal Height Columns in CSS
Last updated: 5.27.2007

Back in the old days of web design, when a properly wrangled table was all the rage, it was easy to create multiple columns of the same height. Doing so with CSS has proven tricky - mostly due to the auto-expanding boxes. Many of the existing solutions to this problem use JavaScript or extra divs and background images, or don't even work in IE6. I find those to be rigid and sub optimal solutions.

I propose a new solution to the problem of creating columns of equal height in CSS. This solution is simple, JavaScript free, degradable and highly flexible. Messers Goomba and Starman will demonstrate:

 

It happened again today. I was just walking down the street, and BOP!, some damn plumber jumped on my head.

 

Doo doo doo dah doo doo dah doo doo!

Both of those boxes are a simpler variation of the fixed width Goomba box, and they have two background images to create a fancy-schmancy box. The key to the equal height columns is this line of CSS:

.box { min-height: 12em; }

which is applied to the .box that contains both the Goomba and Starman Quotes. I've specified a minimum height for both boxes, no matter how large their content is. Furthermore, I've done it using ems as the units - ems are a unit of size relative to the text size that's being displayed. So, as the text size of the browser increases, the height of both boxes also increases. For your boxes, just select a number of ems that's slightly taller than your tallest box.

There are a few oddities to this solution, but for the projects I've developed they've not been noticeable.

  • IE6 (and earlier) doesn't support min-height; instead the min-height value is treated as plain height. So you'll need to use conditional comments to specify the height as some other reasonable value. (I've used 15ems in this example.)
  • As the text size increases or lots of content is added to a box, the box heights may not match anymore. Just try to choose something reasonable for the initial min-height, and stick with ems for the best flexibility. If a height specification were used, the larger content would flow out of the boxes or create a scroll bar - which I find less desirable than mismatched boxes.
Width - Divs v. Spans

Observe the span and div below, where each has the width specified to 200 pixels.

Spans are inline elements.
Divs are block elements.

The important result here is that width can only be specified on block elements, not inline elements. Links are inline elements by default. So if you have a link that you'd like to be a certain width, you must also convert it to a block level element (below).

Super duper really fantastically extra-long.

Unfortunately, if you're working with a horizontal list, you cannot specify a width. The 'display: inline;' declaration on the LIs that makes the list horizontal opposes the 'display: block;' declaration necessary for specifying width.

Fixed Width Box

This content box uses CSS and cleverly-created images to create a comment box. The HTML is thin and semantic, though I did have to include one "hook" div. Thanks again to Bulletproof Web Design by Dan Cedarholm for providing the Indestructible Boxes information.

A Goomba's Christmas Wish:

I know what you want. Don't even think about jumping on my head. It's the same thing, day in and day out. I'm just walking down the street, and BOP!, some damn plumber jumps on my head.

I gotta get me one of those spikey helmets like Cousin Goomfry has. That should put a stop to those punk kids and their head jumping.

Goomba Icon from the good folks at IconBuffet.com

"Web 2.0" Photoshop techniques learned at AbTuts.com

Go ahead, increase and decrease your browser's font size. Observe! Unlike the rest of this site, the goomba box contracts and expands without breakage! (At least until you get to a ridiculously small or large sizes, at least.)

Sortable Table

This table uses the DOM & JavaScript to sort a table by multiple column headings. It's also JavaScript that provides the alternating row colors, so those are preserved even when sorting. For data that comes from a database, using client-powered sorting such as this prevents page reloads and server access. Click on any of the headers below to sort that column.

Customer Date City Store ID Amount
ASH (A) 5/03/2006 Bellvue 16 -$2250539.51
BARBUR (B) 7/26/2004 Portland 13 -$206012.91
COUCH (C) 07/04/2006 Seattle 23 -$462118.45
DIVISION (D) 07/11/2006 Tacoma 12 -$561203.32
BURNSIDE (B) 09/14/2004 Portland 17 $600.64
LOMBARD (L) 08/19/2005 Tacoma 29 $9.10
ASH (A) 5/09/2006 Bellvue 9 $99.01
BARBUR (B) 12/26/2005 Portland 13 $900
COUCH (C) 04/01/2005 Seattle 19 -$9
LOMBARD (L) 07/31/2005 Tacoma 27 $12.00
ASH (A) 6/03/2006 Bellvue 18 $0
BARBUR (B) 6/26/2006 Portland 15 $8
COUCH (C) 04/01/2006 Seattle 25 $.50
DIVISION (D) 08/13/2006 Tacoma 03 $9

I didn't make this all by myself. I did research, test, fine-tune, apply, and document the script, so that my entire work group could use it. Any coder who fails to search for and leverage solutions that others have created is fooling themselves and wasting your time. Here's credit where credit's due:

There are some issues (or 'opportunities') with the script. I have yet to resolve the following:

  1. Odd table resizing due to the removed arrow.
  2. Number columns with large differences (such as Amount in the example above) sorted as strings.
  3. Exhibits poor performance when sorting many similar values in a column.
A Random Quote

A friend asked me to write a JavaScript to randomly quotes from the movie Jaws. So I whipped up this little script up using an array and the Math library. Careful coding also ensures that the classy blockquote CSS shows through.

Your random quote is:

Go ahead and refresh the page to see a new quote. You know you want to.

Want to know your Starwars name?

I wrote this script quite a few years ago, before the very first days of AJAX. It is a study in working with HTML forms in JavaScript, and string manipulation.

Enter your first name:
Enter your last name.   
Enter your mother's maiden name:  
Enter the name of the city you were born in.  
Enter the name of the first car you drove:  
Enter the name of the last medication or supplement you took:  
Your Starwars name is:
Your Title is:

Optional Attributes
Check if you're a clone:  

More Fun Stuff:

How Much is Inside?

Ninja Burger

The Arcata Eye Police Logs

The Origin of Sock Monkeys

Not enough code?
Don't get your panties in a bunch. Entertain yourself by reading other people's code.
  • A List Apart: Code & techniques with an emphasis on usability and standards-based design.
  • Quirksmode: A pile of JavaScript code and CSS browser tests.
  • SimpleBits: Blog of Dan Cedarholm, master of CSS. Acutal code exists sprinkled throughout his entries, but there's no single repository of it.
  • Webmonkey: Oh Webmonkey, how it's been months since you wrote a real article. Now you only exist as one of Wired's many blogs.
  • PHP Manual: Quick answers and obscure details right from the source.