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

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfLewis John
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfswdukle
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...JIT KUMAR GUPTA
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufisiyoufihoussam
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 

Recently uploaded (20)

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdf
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 

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/