Comments on: Floating Table Titles

By: Francois

Francois — Sun, 19 Sep 2010 17:15:17 +0000

I got the same problem than bartD.
By sustracting 3 px (!!) on line 134 :

titleTableCells[i].style.width = (tableCells[i].clientWidth-3)+ ‘px’;

It works better (tested on firefox). I suppose this is in relation with the style cellspacing: 1px; and border-spacing: 1px; I use for the table.

I have to investigate more as this is a poor solution.

By: BartD

BartD — Mon, 26 Jul 2010 12:53:41 +0000

This script works really well, especially with the tips in the comments as well. However, the floating table’s columns are not aligned correctly with the data table columns & header. They start off pretty correct, but in the middle of the table it goes off by a long way, and by the end it’s almost correct again. Anyone knows how to fix that?

By: Belac

Belac — Thu, 22 Apr 2010 20:41:30 +0000

Great script, thanks so much.

I had the same problem as Phil did the the border collapse style skewing the titles to the right. It’s an easy fix though, just add:

titleTableObj.style.borderCollapse = “collapse”;

around line 124.

By: Arun

Arun — Tue, 06 Apr 2010 12:11:07 +0000

Can you please try this, i have requirement where the first 3 columns in a table should be freezed during horizontall scroll. I tried a lot but coudn’t acheive this. Can you please help with this?

By: Stan Slaughter

Stan Slaughter — Thu, 11 Feb 2010 22:50:13 +0000

Mahesh – just post a link to the page having the problem.

By: Mahesh Pinnamaneni

Mahesh Pinnamaneni — Thu, 11 Feb 2010 18:45:20 +0000

Hi Stan,

I have a table that I want to float the headers within couple of tables. But he issue is the floating header is moving to the right and the not aligning with the actual table header. I have n’t seen this behaviour with other tables where I have used. I can send you my code if I can get your email.
Thanks,
Mahesh

By: Steve

Steve — Sat, 28 Nov 2009 06:44:39 +0000

This is a great script. Thanks Stan!
I was having a problem with a centered table (margin-left:auto; margin-right:auto;). As soon as the header started floating, it would jump to the left edge of the containing div. I fixed it by adding the a line of code in floatTitleLoop(), just after titleObj gets defined:

// Make sure we’re aligned properly left-to-right.
titleObj.style.left = tablePos[0] + “px”;

… works great now.
Also, there’s a line in the for loop in createTitleObj() that reads:

titleTableCells[i].style.cursor = ‘normal’;
which was throwing nuisance errors because ‘normal’ isn’t a valid value for the cursor property. I changed it to:

titleTableCells[i].style.cursor = ‘auto’;

which stopped the complaining.

By: Thao Nguyen

Thao Nguyen — Sun, 19 Jul 2009 11:02:49 +0000

That’s really nice. Thank you very much for this post!!!

By: Heinz Stapff

Heinz Stapff — Sat, 18 Jul 2009 20:31:52 +0000

HI STAN I’VE BEEN TRYING TO GET THE ONLY TABLE HEADER TO CHANGE FROM ABSOLUTE POSITION TO FIXED WITH A TWIST. MY WEBSITE HAS TWO IFRAMES “DISPLAY” & “REGISTER”. I WANT A BUTTON IN “DISPLAY DOCUMENT” TO CHANGE THE THEAD STYLE POSITION IN “REGISTER DOCUMENT” AND GET THE ADDED ROWS TO SCROLL BELLOW IT. THE “REGISTER” FRAME IS ONLY TWO ROWS IN HEIGHT. WHEN THE CLIENT CHECKS OUT HE CLICKS ON THE ‘CHECKOUT’ BUTTON ON THE LEFT OF THE TWO IFRAMES IN THE INDEX/HOME PAGE AND THE TABLE LOADS TO THE “DISPLAY” IFRAME GRANTING THEM LOGIN AND PAYMENT OPTIONS WICH MEANS THE TFOOT HAS TO ARIVE AT THE TOP AND THE THEAD CAN NO LONGER ‘FLOAT’. I’VE GOT ALL THE PAGES LOADING PROPERLY EXEPT THAT I’VE SPENT THE LAST TWO WEEKS TRYING TO GET THE BUTTON IN “DISPLAY” TO ACCESS THE HEADER STYLE IN “REGISTER” IE8 MSDN SYNTAX ISN’T CLEARLY DEMONSTRATED FOR THIS PARTICULAR SITUATION. COULD USE SOME DIRECTION FOR THE SYNTAX OF JAVASCRIPT TO COMUNICATE FROM ONE IFRAME TO THE OTHER. ALREADY HAVE SCROLLTO AFFECTING THE “REGISTER” WITH THE BUTTON BUT SETTING THE SECOND FUNCTION ONCLICK=”SCROLLFUNCTION(); STYLEFUNCTION();” HAS DRIVEN ME INSANE. ANY HELP WOULD BE GREATLY APPRECIATED.

By: Stan Slaughter

Stan Slaughter — Fri, 12 Jun 2009 12:21:35 +0000

Syam,

There is no onload needed in the body tag. That is taken care of in line 249 with the statement:

window.onload = startFloatTitle;

If it is not working for you then it could be that you are doing something to over ride this assignment in another piece of code.