stickyHeader.js
About Russell Heimlich           ★ Sole developer at the             Pew Research Center           ★ Creator of           ...
What Does stickyHeader.js Do?
What Does stickyHeader.js Do?★ Table headers stick to the top of the viewport  when you scroll down data tables★ Long data...
Inspired By Spreadsheets
Obsessable.com’s Comparator
Obsessable.com’s Comparatorhttp://www.youtube.com/watchv=SN7aslrx2TE&feature=player_detailpage#t=150s
stickyHeader.js★ Written by me sometime in 2008 while at  USNews.com★ Just include the script and 2 CSS rules★ Works on an...
I Thought I Could Just Use CSS...thead {    position:fixed;}
NOPE!(but this CSS works better on today’s browsers)
Plan B★ Create a DIV after the table★ Clone the table header and insert it into the DIV★ Position the DIV using CSS★ Show/...
Code Time!
Wait For The Document To Load$(document).ready(function () {    ... the rest of the code goes here ...}
Find All stickyHeader Tablesvar tables = $(table.stickyHeader);tables.each(function(i){      ... the rest of the code goes...
Clone The <thead>var table = tables[i];var theadClone = $(table).find(thead).clone(true);var stickyHeader =$(<div></div>)....
.clone( [withDataAndEvents] )A Boolean indicating whether event handlersshould be copied along with the elements.As of jQu...
Append the Cloned <thead>stickyHeader.append( $(<table></table) )  .find(table).append(theadClone);$(table).after(stickyHe...
The HTML So Far<table class=”stickyHeader”>   <thead>....</thead>   ...</table><div class=”stickyHeader hide”> <table>    ...
Back to the JavaScriptvar tableHeight = $(table).height();
Finding The Width Is Trickiervar tableWidth = $(table).width() +Number( $(table).css( padding-left ).replace(/px/ig,"") )+...
Why So Complicated?★ width() doesn’t account for padding and  border widths.★ Should have used outerWidth() instead.
Why Do We Need Table Dimensions?
Table Cell Shiftiness★ Table cell widths adjust based on the contents★ When we take the <thead> away from the  <table> wid...
Now To Determine <th> Heightvar headerCells = $(table).find(thead th);var headerCellHeight =$(headerCells[0]).height();
Match Header Cell Widthsfor (i=0; i<headerCells.length; i++) {    var headerCell = $(headerCells[i]);    var cellWidth = h...
Does The Browser Support postion:fixed?var no_fixed_support = false;if (stickyHeader.css(position) == "absolute") {    no_...
stickyHeader.css.hide {    display:none;}div.stickyHeader {    position:fixed;    _position:absolute;    top:0;}
IE6 Doesn’t Support position:fixed★ We can use CSS to determine if we’re dealing  with IE6★ IE6 will be positioned using J...
The Underscore “Hack”★ .property: value; - Targets IE7 and below★ _property: value; - Targets IE6 and below★ Think of it l...
Determining The Cutoff Pointsvar cutoffTop = $(table).offset().top;var cutoffBottom =cutoffTop + tableHeight - headerCellH...
Show/Hide The stickyHeader On Scroll$(window).scroll(function() {      var currentPosition = $(window).scrollTop();      /...
Top of the Table (446px)   Top of the Viewport (627px)Bottom of the Table (6000+px)
If The Viewport Is Within The Cutoff Points if (currentPosition > cutoffTop && currentPosition < cutoffBottom) {     stick...
Otherwise Hide The stickyHeaderelse {    stickyHeader.addClass(hide);}
Notes About Styling
.stickyHeader Needs A Background Color★ It is an overlay after all...
If You Need To Get Specific/*Global table header styles */th { ... }/*Original stickyHeader table header styles */table.st...
Other Versions★ Ported over to the 4 most popular libraries★ Prototype 1.6.0.3★ jQuery 1.3.2★ MooTools 1.2.2★ Dojo Toolkit...
Thoughts On Different Libraries★ Prototype: Extends JavaScript Language★ jQuery: Makes JavaScript Easier★ MooTools: Hybrid...
Other Things I Learned★ jQuery handles dimensions the best, other  libraries made me have to write my own.★ For logging ev...
The Code Is Available★ https://github.com/kingkool68/stickyHeader★ http://svn.kingkool68.com/projects/  stickyHeader/★ Dem...
Upcoming SlideShare
Loading in …5
×

stickyHeader.js

6,772 views

Published on

stickyHeader.js is a script I wrote to make table headers stick to the top of the viewport of a browser when scrolling down them. This makes it easier to understand the data. This presentation walks you through how I built it.

The code is available at https://github.com/kingkool68/stickyHeader

Published in: Design, Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,772
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

stickyHeader.js

  1. 1. stickyHeader.js
  2. 2. About Russell Heimlich ★ Sole developer at the Pew Research Center ★ Creator of dummyimage.com ★ Frontend and Backend Developer ★ @kingkool68
  3. 3. What Does stickyHeader.js Do?
  4. 4. What Does stickyHeader.js Do?★ Table headers stick to the top of the viewport when you scroll down data tables★ Long data tables become easier to read★ Has nothing to do with the Sticky Footer CSS technique
  5. 5. Inspired By Spreadsheets
  6. 6. Obsessable.com’s Comparator
  7. 7. Obsessable.com’s Comparatorhttp://www.youtube.com/watchv=SN7aslrx2TE&feature=player_detailpage#t=150s
  8. 8. stickyHeader.js★ Written by me sometime in 2008 while at USNews.com★ Just include the script and 2 CSS rules★ Works on any table with class=”stickyHeader”★ 46 lines (uncompressed)
  9. 9. I Thought I Could Just Use CSS...thead { position:fixed;}
  10. 10. NOPE!(but this CSS works better on today’s browsers)
  11. 11. Plan B★ Create a DIV after the table★ Clone the table header and insert it into the DIV★ Position the DIV using CSS★ Show/hide the DIV as needed using JavaScript
  12. 12. Code Time!
  13. 13. Wait For The Document To Load$(document).ready(function () { ... the rest of the code goes here ...}
  14. 14. Find All stickyHeader Tablesvar tables = $(table.stickyHeader);tables.each(function(i){ ... the rest of the code goes here ...});
  15. 15. Clone The <thead>var table = tables[i];var theadClone = $(table).find(thead).clone(true);var stickyHeader =$(<div></div>).addClass(stickyHeader hide);
  16. 16. .clone( [withDataAndEvents] )A Boolean indicating whether event handlersshould be copied along with the elements.As of jQuery 1.4, element data will be copied aswell.http://api.jquery.com/clone/
  17. 17. Append the Cloned <thead>stickyHeader.append( $(<table></table) ) .find(table).append(theadClone);$(table).after(stickyHeader);
  18. 18. The HTML So Far<table class=”stickyHeader”> <thead>....</thead> ...</table><div class=”stickyHeader hide”> <table> <thead>...</thead> </table></div>
  19. 19. Back to the JavaScriptvar tableHeight = $(table).height();
  20. 20. Finding The Width Is Trickiervar tableWidth = $(table).width() +Number( $(table).css( padding-left ).replace(/px/ig,"") )+ Number( $(table).css( padding-right ).replace(/px/ig,"") )+ Number( $(table).css( border-left-width ).replace(/px/ig,"") )+ Number( $(table).css( border-right-width ).replace(/px/ig,"") );
  21. 21. Why So Complicated?★ width() doesn’t account for padding and border widths.★ Should have used outerWidth() instead.
  22. 22. Why Do We Need Table Dimensions?
  23. 23. Table Cell Shiftiness★ Table cell widths adjust based on the contents★ When we take the <thead> away from the <table> widths can change, and the illusion of the stickyHeader effect will be broken.★ We need to loop through the cells and set the width manually to fix this.
  24. 24. Now To Determine <th> Heightvar headerCells = $(table).find(thead th);var headerCellHeight =$(headerCells[0]).height();
  25. 25. Match Header Cell Widthsfor (i=0; i<headerCells.length; i++) { var headerCell = $(headerCells[i]); var cellWidth = headerCell.width(); cellWidth = cellWidth + "px"; $(stickyHeaderCells[i]).css(width, cellWidth);}
  26. 26. Does The Browser Support postion:fixed?var no_fixed_support = false;if (stickyHeader.css(position) == "absolute") { no_fixed_support = true;}
  27. 27. stickyHeader.css.hide { display:none;}div.stickyHeader { position:fixed; _position:absolute; top:0;}
  28. 28. IE6 Doesn’t Support position:fixed★ We can use CSS to determine if we’re dealing with IE6★ IE6 will be positioned using JavaScript instead
  29. 29. The Underscore “Hack”★ .property: value; - Targets IE7 and below★ _property: value; - Targets IE6 and below★ Think of it like an unofficial browser prefix
  30. 30. Determining The Cutoff Pointsvar cutoffTop = $(table).offset().top;var cutoffBottom =cutoffTop + tableHeight - headerCellHeight;
  31. 31. Show/Hide The stickyHeader On Scroll$(window).scroll(function() { var currentPosition = $(window).scrollTop(); //More Code Will Go Here!});
  32. 32. Top of the Table (446px) Top of the Viewport (627px)Bottom of the Table (6000+px)
  33. 33. If The Viewport Is Within The Cutoff Points if (currentPosition > cutoffTop && currentPosition < cutoffBottom) { stickyHeader.removeClass(hide); if (no_fixed_support) { stickyHeader.css(top, currentPosition + px); } }
  34. 34. Otherwise Hide The stickyHeaderelse { stickyHeader.addClass(hide);}
  35. 35. Notes About Styling
  36. 36. .stickyHeader Needs A Background Color★ It is an overlay after all...
  37. 37. If You Need To Get Specific/*Global table header styles */th { ... }/*Original stickyHeader table header styles */table.stickyHeader th { ... }/*Cloned stickyHeader table header styles */div.stickyHeader th { ... }
  38. 38. Other Versions★ Ported over to the 4 most popular libraries★ Prototype 1.6.0.3★ jQuery 1.3.2★ MooTools 1.2.2★ Dojo Toolkit 1.3.1
  39. 39. Thoughts On Different Libraries★ Prototype: Extends JavaScript Language★ jQuery: Makes JavaScript Easier★ MooTools: Hybrid Prototype/jQuery★ Dojo Toolkit: WTF?!?!
  40. 40. Other Things I Learned★ jQuery handles dimensions the best, other libraries made me have to write my own.★ For logging event data, use document.title instead of console.log
  41. 41. The Code Is Available★ https://github.com/kingkool68/stickyHeader★ http://svn.kingkool68.com/projects/ stickyHeader/★ Demos: http://dev.kingkool68.com/ stickyHeader/

×