All work hosted here dates from 2010 or earlier. Please check out these sites for more recent work samples:
- Pew Pew Laser Blog: Personal blog - handed coded from scratch.
- Stack Overflow: Answers and Questions.
- GitHub: My GitHub repos - including the Mug of Sublime Text, html5-slideshow and other various open source contributions.
- Navigation Breadcrumbs - Navigation breadcrumbs to assist the user's navigation through the site.
- Form - Highlight & Refocus - Uses the DOM & DHTML to enhance the user experience by highlighting an incorrectly filled out form as soon as the element looses focus.
- Random Quote - Displays a random quote selected from an array.
Scripts on Page 2:
- Onsite Visit Tomorrow? - Use the time objects to determine if a theoretical service technician can repair your equipment tomorrow.
- How Much Time Remains? - Indicates how much time remains to complete a repair order before the next day cut-off time expires.
- 180 Days Ago - Indicates what the date was 180 days ago.
- Time Now - A very basic script displaying the current time in the user's web browser.
- Navigation Breadcrumbs: circa 2005
- 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.
- 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
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:
- 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.
- Odd table resizing due to the removed arrow.
- Number columns with large differences (such as Amount in the example above) sorted as strings.
- 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.
- A Random Quote
Your random quote is:
- Resume Version 1.0: circa 2005
- 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.