Kathleen Kurkoski

If your browser has JavaScript enabled, you will see "breadcrumbs" to assist you in navigating this site in the upper right corner of the content.

• I used the venerable Webmonkey tutorial to build my first version of the breadcrumbs script.
• To the original script, I have added a function to output certain directories in all caps. This is used to ensure that the acronym ns, such as CSS and PHP, are displayed properly.
• The breadcrumbs are contained in a div element, with an id for styling. This entire div and it's contents are written by the script, so that no empty elements are displayed if the user is browsing with JavaScript disabled.
• If you inspect the background image on the navigation breadcrumbs, you'll see that it is a .PNG with alpha transparencies. Internet Explorer 6 and below is unable to display this file type correctly. I experimented with a few different methods of using the AlphaImageLoader, however none of the methods available were flexible for this use of the .PNG. To resolve this issue, I used conditional comments to feed a new style sheet to IE6 and lower only. This style sheet contains a CSS declaration to replace the .PNG with a .GIF.

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.

I didn't develop this script independently. I did discover, test, fine-tune, apply, and document the script, so that my entire workgroup would be able to use it. Any developer who fails to search for and leverage existing solutions is fooling themselves and wasting your time. Here's credit where credit's due:

• Bill Rawlinson - http://rawlinson.us/blog/index.php?p=147
• Stuart Landridge = http://www.kryogenix.org/days/2003/11/04/sortable
• Scott Andrew - http://www.scottandrew.com/weblog/articles/cbs-events
• Mike Hall - http://www.brainjar.com/dhtml/tablesort/

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

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 slow performance when sorting many similar values in a column.

This example uses the DOM & DHTML to enhance the user experience with a simple form. This form (and the incrementally named fields) would be dynamically generated by a server query results, and would have a varying number of paired boxes.

The goal is to enter a number in the right side box that is smaller than or equal to the number on the left side box. When the 'smaller number' box loses focus, a function is called to check this. If the 'bigger' number is smaller, and error window pops up, the fields are highlighted yellow, and the cursor is put back into the first box.

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.

Your random quote is:

The original version of my web resume features lots of JavaScript enhancements. Enjoy the source code!

• Image Rollovers with Status Bar Updates
• Pull-down Navigation Menu

Be aware that clicking on external links from this page will create 'page not found' errors. I left the navigation features intact, but didn't update the old code.