SlideShare a Scribd company logo
1 of 41
Download to read offline
stickyHeader.js
About Russell Heimlich
           ★ Sole developer at the
             Pew Research Center

           ★ Creator of
             dummyimage.com

           ★ Frontend and
             Backend Developer

           ★ @kingkool68
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 tables become easier to read


★ Has nothing to do with the Sticky Footer
  CSS technique
Inspired By Spreadsheets
Obsessable.com’s Comparator
Obsessable.com’s Comparator




http://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 any table with class=”stickyHeader”


★ 46 lines (uncompressed)
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/hide the DIV as needed using JavaScript
Code Time!
Wait For The Document To Load
$(document).ready(function () {
    ... the rest of the code goes here ...
}
Find All stickyHeader Tables
var tables = $('table.stickyHeader');
tables.each(function(i){
      ... the rest of the code goes here ...
});
Clone The <thead>
var table = tables[i];


var theadClone = $(table).find('thead').clone(true);


var stickyHeader =
$('<div></div>').addClass('stickyHeader hide');
.clone( [withDataAndEvents] )
A Boolean indicating whether event handlers
should be copied along with the elements.


As of jQuery 1.4, element data will be copied as
well.


http://api.jquery.com/clone/
Append the Cloned <thead>
stickyHeader.append( $('<table></table') )
  .find('table').append(theadClone);


$(table).after(stickyHeader);
The HTML So Far
<table class=”stickyHeader”>
   <thead>....</thead>
   ...
</table>


<div class=”stickyHeader hide”>
 <table>
    <thead>...</thead>
  </table>
</div>
Back to the JavaScript
var tableHeight = $(table).height();
Finding The Width Is Trickier
var 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,"") );
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> 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.
Now To Determine <th> Height
var headerCells = $(table).find('thead th');


var headerCellHeight =
$(headerCells[0]).height();
Match Header Cell Widths
for (i=0; i<headerCells.length; i++) {
    var headerCell = $(headerCells[i]);
    var cellWidth = headerCell.width();
    cellWidth = cellWidth + "px";
    $(stickyHeaderCells[i]).css('width', cellWidth);
}
Does The Browser Support postion:fixed?
var no_fixed_support = false;
if (stickyHeader.css('position') == "absolute") {
    no_fixed_support = true;
}
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 JavaScript instead
The Underscore “Hack”
★ .property: value; - Targets IE7 and below
★ _property: value; - Targets IE6 and below


★ Think of it like an unofficial browser prefix
Determining The Cutoff Points
var cutoffTop = $(table).offset().top;


var cutoffBottom =
cutoffTop + tableHeight - headerCellHeight;
Show/Hide The stickyHeader On Scroll
$(window).scroll(function() {
      var currentPosition = $(window).scrollTop();
      //More Code Will Go Here!
});
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) {
     stickyHeader.removeClass('hide');
     if (no_fixed_support) {
          stickyHeader.css('top', currentPosition +
 'px');
     }
 }
Otherwise Hide The stickyHeader
else {
    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.stickyHeader th { ... }


/*Cloned stickyHeader table header styles */
div.stickyHeader th { ... }
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
Thoughts On Different Libraries
★ Prototype: Extends JavaScript Language
★ jQuery: Makes JavaScript Easier
★ MooTools: Hybrid Prototype/jQuery
★ Dojo Toolkit: WTF?!?!
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
The Code Is Available
★ https://github.com/kingkool68/stickyHeader


★ http://svn.kingkool68.com/projects/
  stickyHeader/


★ Demos: http://dev.kingkool68.com/
  stickyHeader/

More Related Content

What's hot

jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
Auto tools
Auto toolsAuto tools
Auto tools祺 周
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSSSayanee Basu
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
 
An introduction to jQuery
An introduction to jQueryAn introduction to jQuery
An introduction to jQueryJames Wragg
 
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, GermanyLet's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, GermanyBalázs Tatár
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery PresentationRod Johnson
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Jack Franklin
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your FrontendArush Sehgal
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery LearningUzair Ali
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersJustin Lee
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.jsjeresig
 
Scalable vector ember
Scalable vector emberScalable vector ember
Scalable vector emberMatthew Beale
 
PhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development ConceptsPhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development ConceptsCindy Royal
 

What's hot (20)

jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Yuihacku iitd-sumana
Yuihacku iitd-sumanaYuihacku iitd-sumana
Yuihacku iitd-sumana
 
Auto tools
Auto toolsAuto tools
Auto tools
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSS
 
NodeJS in Windows Azure
NodeJS in Windows AzureNodeJS in Windows Azure
NodeJS in Windows Azure
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
An introduction to jQuery
An introduction to jQueryAn introduction to jQuery
An introduction to jQuery
 
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, GermanyLet's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
 
Jquery 5
Jquery 5Jquery 5
Jquery 5
 
NoSQL - Hands on
NoSQL - Hands onNoSQL - Hands on
NoSQL - Hands on
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.js
 
Scalable vector ember
Scalable vector emberScalable vector ember
Scalable vector ember
 
PhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development ConceptsPhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development Concepts
 

Similar to stickyHeader.js

Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Filippo Dino
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application DesignBryce Kerley
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyjdramaix
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyArcbees
 
Becoming a better WordPress Developer
Becoming a better WordPress DeveloperBecoming a better WordPress Developer
Becoming a better WordPress DeveloperJoey Kudish
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Designmlincol2
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsAdrian Roselli
 
HTML Templates Using Clear Silver
HTML Templates Using Clear SilverHTML Templates Using Clear Silver
HTML Templates Using Clear SilverPaulWay
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created itPaul Bearne
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers PerspectiveMediacurrent
 
J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012ghnash
 

Similar to stickyHeader.js (20)

Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
Becoming a better WordPress Developer
Becoming a better WordPress DeveloperBecoming a better WordPress Developer
Becoming a better WordPress Developer
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
 
Web2.0 with jQuery in English
Web2.0 with jQuery in EnglishWeb2.0 with jQuery in English
Web2.0 with jQuery in English
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics
 
HTML Templates Using Clear Silver
HTML Templates Using Clear SilverHTML Templates Using Clear Silver
HTML Templates Using Clear Silver
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created it
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
Variations on a Theme
Variations on a ThemeVariations on a Theme
Variations on a Theme
 
Team styles
Team stylesTeam styles
Team styles
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012
 

More from Russell Heimlich

Cache Rules Everything Around Me
Cache Rules Everything Around MeCache Rules Everything Around Me
Cache Rules Everything Around MeRussell Heimlich
 
Video Captioning on the Web
Video Captioning on the WebVideo Captioning on the Web
Video Captioning on the WebRussell Heimlich
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning TalkRussell Heimlich
 
Building An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpBuilding An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpRussell Heimlich
 

More from Russell Heimlich (6)

Cache Rules Everything Around Me
Cache Rules Everything Around MeCache Rules Everything Around Me
Cache Rules Everything Around Me
 
Analytics And You
Analytics And YouAnalytics And You
Analytics And You
 
Video Captioning on the Web
Video Captioning on the WebVideo Captioning on the Web
Video Captioning on the Web
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning Talk
 
Charting with Google
Charting with GoogleCharting with Google
Charting with Google
 
Building An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpBuilding An Accessible Site from the Ground Up
Building An Accessible Site from the Ground Up
 

Recently uploaded

韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdfSwaraliBorhade
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一A SSS
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfSumit Lathwal
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Sitegalleryaagency
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 

Recently uploaded (20)

韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 

stickyHeader.js

  • 2. About Russell Heimlich ★ Sole developer at the Pew Research Center ★ Creator of dummyimage.com ★ Frontend and Backend Developer ★ @kingkool68
  • 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
  • 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. I Thought I Could Just Use CSS... thead { position:fixed; }
  • 10. NOPE! (but this CSS works better on today’s browsers)
  • 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
  • 13. Wait For The Document To Load $(document).ready(function () { ... the rest of the code goes here ... }
  • 14. Find All stickyHeader Tables var tables = $('table.stickyHeader'); tables.each(function(i){ ... the rest of the code goes here ... });
  • 15. Clone The <thead> var table = tables[i]; var theadClone = $(table).find('thead').clone(true); var stickyHeader = $('<div></div>').addClass('stickyHeader hide');
  • 16. .clone( [withDataAndEvents] ) A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well. http://api.jquery.com/clone/
  • 17. Append the Cloned <thead> stickyHeader.append( $('<table></table') ) .find('table').append(theadClone); $(table).after(stickyHeader);
  • 18. The HTML So Far <table class=”stickyHeader”> <thead>....</thead> ... </table> <div class=”stickyHeader hide”> <table> <thead>...</thead> </table> </div>
  • 19. Back to the JavaScript var tableHeight = $(table).height();
  • 20. Finding The Width Is Trickier var 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. Why So Complicated? ★ width() doesn’t account for padding and border widths. ★ Should have used outerWidth() instead.
  • 22. Why Do We Need Table Dimensions?
  • 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. Now To Determine <th> Height var headerCells = $(table).find('thead th'); var headerCellHeight = $(headerCells[0]).height();
  • 25. Match Header Cell Widths for (i=0; i<headerCells.length; i++) { var headerCell = $(headerCells[i]); var cellWidth = headerCell.width(); cellWidth = cellWidth + "px"; $(stickyHeaderCells[i]).css('width', cellWidth); }
  • 26. Does The Browser Support postion:fixed? var no_fixed_support = false; if (stickyHeader.css('position') == "absolute") { no_fixed_support = true; }
  • 27. stickyHeader.css .hide { display:none; } div.stickyHeader { position:fixed; _position:absolute; top:0; }
  • 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. The Underscore “Hack” ★ .property: value; - Targets IE7 and below ★ _property: value; - Targets IE6 and below ★ Think of it like an unofficial browser prefix
  • 30. Determining The Cutoff Points var cutoffTop = $(table).offset().top; var cutoffBottom = cutoffTop + tableHeight - headerCellHeight;
  • 31. Show/Hide The stickyHeader On Scroll $(window).scroll(function() { var currentPosition = $(window).scrollTop(); //More Code Will Go Here! });
  • 32. Top of the Table (446px) Top of the Viewport (627px) Bottom of the Table (6000+px)
  • 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. Otherwise Hide The stickyHeader else { stickyHeader.addClass('hide'); }
  • 36. .stickyHeader Needs A Background Color ★ It is an overlay after all...
  • 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. 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. Thoughts On Different Libraries ★ Prototype: Extends JavaScript Language ★ jQuery: Makes JavaScript Easier ★ MooTools: Hybrid Prototype/jQuery ★ Dojo Toolkit: WTF?!?!
  • 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. The Code Is Available ★ https://github.com/kingkool68/stickyHeader ★ http://svn.kingkool68.com/projects/ stickyHeader/ ★ Demos: http://dev.kingkool68.com/ stickyHeader/