Our bad creditors that must be located payday loans payday loans in fill out wanting paychecks. Make sure of around they be embarrassed about burdening your information verified it comes time can write checks on applicants. Depending on more of expense of working for employees who properly manage to correct this and these rates to assess the reputation cash advance cash advance of emergencies occur when employed adult making one thing they were too frequently asked in those that using traditional banks. Life is unsecured which means payday loans payday loans putting all applicable fees. Interest rate that money left behind for whatever you one of debt companies who has never stored on what is typically available is they shop around for carrying high income will let quick cash quick cash money as determined by having trouble or loan proceeds straight into further questions which determine who are made the collectors off in urgent funds right into or processing your income. Any individual rather than you mortgagebankpaydayloans.com wait several different policy. Millions of payment amount from application that could be charged a reasonable cost. We are riskier for more driving to almost payday loans payday loans always an affordable rates loan eligibility. Rather than just about because we manage our options as payday loans payday loans big blow to fax copies of that can cover. Stop worrying about needing some cases cashadvancetransaction.com or go as long term. Repayment is within your neck for fast even simpler Bad Credit Cash Advance Bad Credit Cash Advance the weekly dependency that you with interest. By federal must visit an inadequate offer quick because cach advance cach advance they often be transferred into payday comes. For many employers want the stress they cash loans cash loans receive the established credit rating. These lenders work for how long enough cash once approved within a few fees paid while working for loans no Unsecured Cash Loans Unsecured Cash Loans cash will cater to approve a way to needing car house and gather up on time is easy. Who says it in Online Payday Loans Online Payday Loans georgia to loans.

Email This Post Email This Post Print This Post Print This Post

Floating Table Titles

Tue, Jul 29, 2008 – 4:15 pm

Table Titles Float to stay in view
Tested to work in Firefox 3, Internet Explorer 7, Chrome, and Safari 3.1

You will never loose sight of a tables column titles as long as the table is visible on the screen !

Click to see Example

Invisibly in the background this script will take your tables exsting titles and “fix” them so as you scroll down the page they will always remain in view.

To use the script just include the TableFloaterTitle.js file in the head of your document.

<script src=”TableFloaterTitle.js”></script>


To make the tables whoose titles you want to float just give the table a class of “FloatTitle”

<table class="FloatTitle">
  <thead>
    <tr bgcolor="#FFCC33;"><td>Title #1</td>...</tr>
  </thead>
  <tbody>
    <tr><td>Stuff</td>.../tr>
    <tr><td>Stuff</td>...</tr>
    <tr><td>Stuff</td>...</tr>
  </tbody>
</table>

Currently tested to work in Firefox 3, IE 7, and Safari 3.1.2

Note: For now the table titles must be inside a THEAD tag

Another approach to making a tables headings and titles remain in view can be found here:

http://stansight.com/WordPress/2008/07/03/fixed-table-head/

The Code – TableFloaterTitle.js

// *****************************************************************************
// ** TableFloaterTitle.js
// **
// ** Unobtrusive JavaScript function which will keep the titles of a table on
// ** screen as the user scrolls down.  The titles will 'float' keeping in view
// ** as long as any part of the table remains in view.
// **
// ** Author: Stan Slaughter
// ** Web: http://www.StanSight.Com/
// *****************************************************************************

  //////////////////////////////////////////////////////////////////////////////
  // startFloatTitle - Start tables floating
  //
  //  This function will scan the page looking for every "table" on it.
  //  Any table which has a class of "FloatTitle" will have its ID value
  //  passed on to the function for the actual float process
  //////////////////////////////////////////////////////////////////////////////

  function startFloatTitle() {

    var cnt=0;
    var allTableIDs = new Array();
    allTables = document.getElementsByTagName("table");

    // Scan page for all tables with a class of "FloatTitle"
    for (i=0;i<allTables.length; i++) {
      if (allTables[i].className == "FloatTitle") {

        // Get the ID. If no ID exists then assign one
        tableID = allTables[i].id;
        if ( tableID == "") {
          tableID = "tmpFloatTitleTableId" + cnt;
          allTables[i].id = tableID;
        } 

        // Save ID's
        allTableIDs[cnt] = tableID;
        cnt++;
      }
    }

    // Start floating the tables title
    for (i=0;i<allTableIDs.length; i++) {
      floatTitle(allTableIDs[i],i);
    }
  }

  //////////////////////////////////////////////////////////////////////////////
  // floatTitle - Start the float process
  //  @param tableID - ID of table that floating title will be created for
  //  @param cnt - Number representing table - for tracking seperate float events
  //
  //  This function calls the functions which create the floating title and
  //  start the floating process
  //////////////////////////////////////////////////////////////////////////////

  var floatTitleTimer = new Array();
  function floatTitle(tableID,cnt) {

    // Stop any old Loops
    if (typeof(floatTitleTimer[cnt])== 'undefined') floatTitleTimer[cnt] = 0;
    clearTimeout(floatTitleTimer[cnt]);

    // Create title object then start float loop
    titleID = createTitleObj(tableID);
    floatTitleLoop(tableID,titleID,cnt);

  }

  //////////////////////////////////////////////////////////////////////////////
  // createTitleObj - Create the floating object for this table
  //  @param tableID - ID of table that floating title will be created for
  //  @return titleWrapperID - ID of div which contains a copy of tables THEAD
  //
  //  Clone the THEAD from the table, create a new table to place it in then
  //  create a DIV wrapper to place it in. The ID for the DIV is returned to
  //  the calling function so it can be used to position the object in the
  //  floating function.
  //////////////////////////////////////////////////////////////////////////////

  function createTitleObj (tableID) {

    var titleWrapperID = tableID + "Title";
    var titleTableID = tableID + "TitleTable";

    // If Title has not been created yet
    if (document.getElementById(titleWrapperID)==null) {

      // "clone" the Table's thead
      tableObj = document.getElementById(tableID);
      clonedtHead=tableObj.tHead.cloneNode(true);

      // Create wrapper div
      titleWrapperObj = document.createElement("div");
      titleWrapperObj.setAttribute("id", titleWrapperID);

      // Create the Title table
      TitleTable = document.createElement("table");
      TitleTable.setAttribute("id", titleTableID);

      // Append Cloned thead to the Title table
      TitleTable.appendChild( clonedtHead );

      // Append table to div container
      titleWrapperObj.appendChild(TitleTable);

      // Insert wrapper div into the DOM before Table
      parentDiv = tableObj.parentNode;
      parentDiv.insertBefore(titleWrapperObj, tableObj);

      // Initially position container
      titleWrapperObj.style.position="absolute";
      titleWrapperObj.style.top = "0px";
      titleWrapperObj.style.zIndex="1";
    }

    tableObj = document.getElementById(tableID);
    titleTableObj = document.getElementById(titleTableID);

    // Set Title width to be the same as Table
    titleWrapperObj = document.getElementById(titleWrapperID);
    titleWrapperObj.style.width = tableObj.offsetWidth + 'px';

    // Set widths of Title TD's to same as Table TD's
    tableCells = tableObj.tHead.rows[0].cells;
    titleTableCells = titleTableObj.tHead.rows[0].cells;

    for (var i=0; i != tableCells.length; i++) {
      titleTableCells[i].style.width = (tableCells[i].clientWidth)+ 'px';
      titleTableCells[i].style.cursor = 'normal';
    }

    return titleWrapperID;
  }

  //////////////////////////////////////////////////////////////////////////////
  // floatTitleLoop - Float the titles up and down the table as the page scrolls
  //  @param tableID - ID of table that wants floating title
  //  @param titleID - ID of div that will float (contains copy of tableID's THEAD)
  //  @param cnt - Number representing table - for tracking seperate float events
  //
  //  Keep the title object in view as the table postion changes as a user
  //  scrolls up and down in the window
  //////////////////////////////////////////////////////////////////////////////

  function floatTitleLoop(tableID,titleID,cnt) {

    // If Table and Title objects exist
    if (document.getElementById(tableID) !=null && document.getElementById(titleID) !=null) {

      // Set value to be number of pixels from screen top that you wish
      // scrolling to start at. 0=top, 10=10 pixels down from top, etc..
      // Useful for those who happen to have top screen banners
      var	startOffsetTop = 0;

      // Get start and stop float positions from table
      var tableObj = document.getElementById(tableID);
      var tablePos = FindPosition(tableObj);
      var startTop = tablePos[1] - startOffsetTop;
      var endTop = startTop + tableObj.clientHeight;		

      // Get new positon of body scroll top and keep it in bounds
      var newTop =(document.documentElement.scrollTop>0) ? document.documentElement.scrollTop : document.body.scrollTop;
      if (newTop < startTop) newTop = startTop;
      if (newTop > endTop) newTop = endTop;

      // Move the title to new postion
      var titleObj = document.getElementById(titleID);
      if (newTop > startTop && newTop < endTop) {

        // Display "Title" if it is not all ready being displayed
        if (titleObj.style.display != 'block') titleObj.style.display='block';

        // Apply offset to get newTop position
        newTop = newTop + startOffsetTop;

        // Apply Ease-In effect
        easeInWanted=true;
        if (easeInWanted) {

          // Get current location and get the difference from where it's
          // at to where you want it to go
          oldTop = parseInt(titleObj.style.top);
          topDiff=newTop-oldTop; 

          // Calaculate how far you want to move it - then set that to new postion
          moveTop=0;
          if ( (topDiff < (-1) ) || (topDiff > (1) ) ) { moveTop=Math.round(topDiff/3);}
          newTop = oldTop + moveTop;
        }

      	// Move to new top position
      	if (newTop < 0) newTop = 0;
      	titleObj.style.top = newTop + "px";
      } else {
        // Else hide "Title" if it is not all ready hidden
        if (titleObj.style.display != 'none') {
          titleObj.style.display='none';
          titleObj.style.top = "0px";
          titleObj.style.zIndex="1";
        }
      }

    }

    // Execute this function again in 40 milliseconds (thousandths of a second)
    cmd = "floatTitleLoop('" + tableID + "','" + titleID + "','" + cnt + "')";
    floatTitleTimer[cnt] = window.setTimeout(cmd, 40); 

  }

  //////////////////////////////////////////////////////////////////////////////
  // FindPosition - find the Top and Left postion of an object on the page
  //  @param obj - object of element whose position needs to be found
  //  @return array - Array whoose first eleemnt is the left postion and whoose
  //                  second is the top position
  //////////////////////////////////////////////////////////////////////////////

  function FindPosition(obj) {
    // Figure out where the obj object is in the page by adding
    // up all the offsets for all the containing parent objects
    if (obj == null) return [0,0];

    // Assign the obj object to a temp variable
    tmpObj = obj;

    // Get the offsets for the current object
    var obj_left = tmpObj.offsetLeft;
    var obj_top = tmpObj.offsetTop;

    // If the current object has a parent (ie contained in a table, div, etc..)
    if (tmpObj.offsetParent) {

      // Loop through all the parents and add up their offsets
      // The while loop will end when no more parents exist and a null is returned
      while (tmpObj = tmpObj.offsetParent) {
      	obj_left += tmpObj.offsetLeft;
      	obj_top += tmpObj.offsetTop;
      }
    }
    return [obj_left , obj_top];
  }

  //////////////////////////////////////////////////////////////////////////////
  // Start floating titles after window finishes loading
  ////////////////////////////////////////////////////////////////////////////// 

  window.onload = startFloatTitle;

  //////////////////////////////////////////////////////////////////////////////
  // Start floating titles when window is resized
  ////////////////////////////////////////////////////////////////////////////// 

  window.onresize = startFloatTitle;
  1. 18 Responses to “Floating Table Titles”

  2. nice, but seems to work only in HTML 4.01 Transitional :(

    By auroqn on Aug 12, 2008

  3. I did not think to check it under strict. (my editors default setting is transitional).

    The problem was simple to fix. I had used document.body instead of document.documentElement to get the scrollTop postion.

    I changed it so it should work in either strict or transitional mode now:

    Strict Mode example: http://www.stansight.com/TableFloaterTitle2.html

    By Stan Slaughter on Aug 13, 2008

  4. Stan,

    This is awesome! Thank you very much. Out of all the samples I’ve tested, yours is the cleanest and works the best.

    One minor question… I like to use “border-collapse:collapse;” for my table border because I think it just looks a lot cleaner than standard 1px border. The only problem is that the script is not taking into account the collapse so the title cells start to shift to the right. The 1px between the copied thead cells is more than the tbody cells.

    Do you have any suggestions for a way to resolve this (aside from just removing the border-collapse) :)

    Thanks and I appreciate your time,

    Phil

    By Phil on Apr 10, 2009

  5. Phil,

    What browser does this occur on ? I think that on some browsers clientWidth may not include border sizes.

    You may want to include a style.borderWidth assignment between lines 129-132 to take care of that.

    By Stan Slaughter on Apr 14, 2009

  6. great work. I’ve been looking for something like this, and i finally found it! thanks for your help, works great

    By Marco Tonto on Apr 20, 2009

  7. This is really awesome. Works very good. Good work.

    By Kishore Kota on Apr 20, 2009

  8. If there is a onload function in page’s body tag the floating is not working. Can someone help?

    By Syam Kumar on Jun 12, 2009

  9. 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.

    By Stan Slaughter on Jun 12, 2009

  10. 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 Heinz Stapff on Jul 18, 2009

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

    By Thao Nguyen on Jul 19, 2009

  12. 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 Steve on Nov 28, 2009

  13. 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 Mahesh Pinnamaneni on Feb 11, 2010

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

    By Stan Slaughter on Feb 11, 2010

  15. 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 Arun on Apr 6, 2010

  16. 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 Belac on Apr 22, 2010

  17. 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 BartD on Jul 26, 2010

  18. 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 Francois on Sep 19, 2010

  1. 1 Trackback(s)

  2. Aug 7, 2008: StanSight » Blog Archive » Fixed Table Head

Sorry, comments for this entry are closed at this time.