Katie Kurkoski

www.linkedin.com/in/katiekurkoski
Seattle, Washington

 

CascadiaFest
Twitter
Stack Overflow

 

Pew Pew Laser Blog
Github
Codepen

JavaScript - Page 1

All work hosted here dates from 2010 or earlier. Please check out these sites for more recent work samples:


Index | HTML & XHTML | CSS | JavaScript | jQuery | PHP | Web Design | Graphic Design | Other

I've been working with JavaScript (and DHTML and DOM scripting) since 2001, and I've written quite a few scripts. There are several samples on this page and the next. Additionally, I've also developed several jQuery scripts.

Scripts on Page 2:

Navigation Breadcrumbs: circa 2005

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.
Sortable Table: circa 2006

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
FLANDERS (NE) 09/22/2004 Centralia 24 -$428710.00
HOLGATE (H) 12/2/2005 Bellvue 11 -$592496.15
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
HAWTHORNE (H) 02/13/2006 Tacoma 12 -$99
FLANDERS (NE) 06/22/2004 Centralia 21 -$999
HOLGATE (H) 11/17/2005 Bellvue 26 $6.00
KLICKITAT (K) 05/29/2005 Portland 8 $99.63
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
FLANDERS (NE) 09/18/2004 Centralia 22 -$30
HOLGATE (H) 11/15/2005 Bellvue 28 $9000
KLICKITAT (K) 06/19/2006 Portland 7 $60
SANDY (S) 07/31/2005 Tacoma 30 $12

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:

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.
Form - Highlight & Refocus

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.

Bigger Smaller




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.

Your random quote is:

Resume Version 1.0: circa 2005
Resume V1.0

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.

See more JavaScript examples on Page 2.