Katie Kurkoski

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

 

CascadiaFest
Twitter
Stack Overflow

 

Pew Pew Laser Blog
Github
Codepen

jQuery

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

In addition to standard browser JavaScript, I've been working with jQuery since 2008. While there are several JavaScript libraries available, I selected jQuery because I judged it to be the best documented library. jQuery is also very much under development, and used by many well respected sites in the standards design community.

Smooth Animation: circa 2009

The basic solution is to store the height of each animating element before it is initially hidden, and then re-apply that height just before slideToggle()'s hiding animation.

  • To make the script flexible enough to handle a varying number of elements, I used an array (heightArray) to store and retrieve the appropriate height based on the definition's position in the list.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl ante, consequat sed, luctus et, malesuada vitae, erat. Proin in est. Phasellus dui ipsum, blandit non, varius ut, eleifend nec, turpis.
Cras Eros
Cras eros nisi, sodales a, consectetur sit amet, consequat ac, libero. Vivamus eget arcu id enim pellentesque euismod. Pellentesque rutrum nunc eu velit. Proin justo turpis, tempor eget, tristique ac, adipiscing eget, sem. Duis leo enim, ornare eu, consequat eu, luctus ut, magna. Sed libero. Proin fermentum tincidunt diam.
Nullam Sollicitudin
Nullam sollicitudin libero in mauris. Nam felis mi, aliquam et, pharetra vitae, scelerisque egestas, erat. Praesent molestie, sapien nec hendrerit congue, diam turpis luctus nulla, non dictum neque dolor id leo.
Table Functions (jQuery Core): circa 2008

The below table uses only core functions of the jQuery library.

  • The alternating row colors (zebra stripes) are applied using jQuery's tr:even selector.
  • The yellow highlighting when the user hovers over a row is applied and removed jQuery's mouseover and mouseout event.
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
Table Functions (Tablesorter plugin): circa 2006

The table below builds on core jQuery functionality using the Tablesorter plugin to add even more functionality to the table.

  • The Tablesorter plugin allows the user to sort the contents of the table by clicking on the row headers. The pluging handles this for all variable types.
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