JQuery_ Novice to Ninja - Earle Castledine [127]
With our thead mimic now nicely in place, we need to react to the scroll event and position it appropriately:
chapter_08/06_fixed_table_headers/script.js (excerpt)
$(window).scroll(function() {
setTimeout(function() {
if ($table.data('top') < $(document).scrollTop() &&
↵$(document).scrollTop() < $table.data('bottom')) {
$list
.show()
.stop()
.animate({
top: $(document).scrollTop(),
opacity: 1
});
} else {
$list.fadeOut(function() {
$(this).css({top: $table.data('top')});
});
}
}, 100);
});
We set the timeout for 100 milliseconds after the scroll event fires; it’s a very short time, but enough to ensure that we avoid constantly animating as the user scrolls. We check to see if we’ve scrolled the thead out of the viewport, but not past the bottom of the table; if we have, we reveal our mimic and animate it to the correct position. If we’ve scrolled back high enough so that the original thead is visible, or down past the bottom of the table, we fade out the impostor list (and position it back at the top, so that it animates from the correct position when it reappears).
And there you have it! We can call our TABLE.fixHeader("#celebs") and scroll the page, and the new “thead” follows along to keep the identifying labels visible at all times.
Repeating Header
Another approach to the disappearing header row problem is to simply repeat the header at regular intervals. This is particularly handy if the intention is for the data to be printed out—as cool as it looks, our animated table header is unhelpful if you need to sort through a dozen pages of printed tables! The goal would be to take the first row of the table, and copy it every, say, ten rows.
The result is shown in Figure 8.6.
Figure 8.6. Repeating the table header
Copying the header row and putting it elsewhere should be old hat for you by now. But how exactly do we add the header every ten rows? Do we loop over every row and check its index? Well, we could … but yet again jQuery comes to the rescue with a powerful built-in filter:
chapter_08/07_repeating_table_header/script.js (excerpt)
$('#celebs')
.find('tr:first')
.clone()
.insertAfter('#celebs tr:nth-child(10n)');
This solution starts out simply enough—grabbing the first table row, then cloning it with the clone method. Then comes the clever bit: the nth-child selector is perfect for adding the rows right where we want them. You might be a little baffled by the way we’ve used it, though, as its syntax differs a bit from the other filters we’ve seen. At its most basic, if you give it a simple integer, it will select that index. For example, if you selected :nth-child(2), you’d receive the third child element.
But the :nth-child selector also accepts other values, which cause it to select multiple rows as the same time. If you pass in the text values even or odd, you’ll select all of the even or odd child elements. Coolest of all, you can pass it an equation to figure out which children to select!
You can use the letter “n” to indicate repetition; for example, :nth-child(10n) will select every tenth row. You can then augment this with a plus or minus to offset which rows are selected. For example, if you want to select the third row, and then every tenth row after that, you could use :nth-child(10n+3). Finally, if you like to think backwards, you could achieve the same result with :nth-child(10n-7).
That all works okay, but it does have a bug: if the last row of the table matches our equation, the header row will be repeated as the final row—which looks a bit weird. Also, we want to apply the repeating header to a couple of tables, and want to avoid having to copy/paste code. Next chapter, we’ll look at making our code reusable via plugins—but for now, we’ll keep it simple