Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. Then we implement row AND column highlighting with a bit of semi-clever JavaScript.
Links from Video:
Nice vid Chris! I am not a fan of tables, but using them this way sure makes it easier! I love the power that JQuery provides! Keep up the good videos!
~ Chris
Why is this screencast not in iTunes? I can’t wait to see this great screencast on my iPod.
Go home fuckin’ selfish hipster :-)
Nice vid Chris! While following your video, I created a table for one of my clients.
what about IE?
I was intrigued by this until I decided to fire up the demo in IE6… fail. Until IE is no longer relevant, techniques like this are only valid on sites that have specific requirements (only use a “modern” browser) for it’s users – in corporate environments (one of the main holdouts for IE6) and for clients who do not want to shut out any potential customers, this technique is useless.
great tutorial, keep ’em coming… but Joyrex is spot on regarding IE 6.
How could you go about sorting each column or would this be impossible with this kind of styling?
You run through all tds to add an ref with the column count, thats not necessary cause there is the DOM cellIndex property which told you the column count starting by 0. Btw you could using modulo (i%6) instead of setting your counter to 0 every 6 steps.
For IE7, if you add inside each table cell, they won’t collapse and you can see the highlighting working. However, I am still working on getting the position fixed on the header to work in IE7
Nice.
Here’s a challenge though:
For a page containing more than one table (plus text), make the header stay fixed at the top of the page as long as the table is still visible.
Or staded simpler: only fix the header when we scroll past it, but at least the last row is visible..
Is it even possible?
-R
Should be easy.
Just detect the y position of the end of the first table vs the y scroll position. If the the end of the table – header height is reached by the scroll position hide the first header.
For the second table. If scroll position = second table header y position make the header flow.
and so on
Thanks for your suggestion, Cipa. I implemented this just a few minutes ago using Prototype, and am extremely pleased with the result.
It was a real bonus to discover that if the page is reloaded while “scrolled”, the “scroll” event is automatically fired. Handy!
I was waiting for you to post this because I wanted to see how you did the column sorting. This is how I did mine:
http://pastie.org/533065
I’ve never heard of colgroup, thanks! :)
Nice vid!
I code for two years or so and I never used colgroup (even if i know about his existence). Anyhow, instead of
var i = 1;
$(‘colgroup’).each(function(){
i++
});
You can use:
$(‘colgroup’).each(function(i){
// now you have `i` starting from zero
});
don’t stop the screencasts!
they are awesome!
Slightly OT, but in regards to your jquery, is $(function() {…. the same as $(document).ready(function() {…. or is it something that occurs even before that?
Actually, elements that have position fixed don’t rely on a parent element. Even if it’s parent has a position relative.
If you don’t give the fixed-positioned element a coordenate, It will first appear in it’s original place (as if it were static) and then move along together with the scrollbar.
i need to learn about css. who can help with the necessary tools for me to start. thanks for your assistance.
Perhaps I’ve been doing things wrong for the last 15 years, but I thought was to contain a group of elements. :)
Everything you demonstate here (very nice btw) can and I think should, be done with and if you want to go even more semantic, use to contain the last 3 since they appear to have similar, but grouped significance.
Hey guys
I really like the idea of a scrolling table so that the headers are always visible.
I tried to use this approach but without the header image but my just collapses. Is there a way this approach can be used without the image header (ie just textual header row) and so that the columns line up with the columns in the .
Thanks and keep up the good work.
Steven