• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1383
  • Last Modified:

Non-Scrolling Table Headers

Re: eiribur's question concerning always visible headers.  While seanpowell's answer is good, my problem is slightly different.  I need to be able to scroll horizontially as well as vertically.  When scrolling side-to-side, I need the headers to move with the columns.  When scrolling up-and-down, the headers need to stay in place.  

My table is a rather large table, constructed with ASP vbscript.  I tried using expressions in my CSS:
DIV#Tbl-container {
  width:755px;
  height:400px;
  overflow:auto;
}  
THEAD th{
    Top:expression(document.getElementById("Tbl-container").scrollTop);
    z-index:20;

It works, except  it does not scroll smoothly.  It is jerky, with slight delays in the actual scrolling.  The larger the table, the longer the delays.  Any ideas for a better solution?

Beatrice
0
bgernon
Asked:
bgernon
  • 8
  • 7
  • 5
  • +1
1 Solution
 
seanpowellCommented:
Do you mean something like this:

http://www.pdgmedia.com/ee/scrolling1.html

If yes, then give me a minute to clean up the code. There's a lot of old non-standard rubbish in it...

Thanks,
Sean
0
 
bgernonAuthor Commented:
Yes!  Yes!  Nice touch with the non-scrolling left column.  I also had that going in the above mentioned table, but with the same problem.  I had used:

    Left:expression(document.getElementById("Tbl-container").scrollLeft);

I took a peek at your code.  Looks like you use Javascript.  I know just enough javascript to get by, but am no expert.  So, your comments about what is going on in the code would be appreciated.  Looking forward to viewing your cleaned up code.

Thank you,
Beatrice
0
 
seanpowellCommented:
Okay - have a look through this one.

It's highly styled to help show what's going on. From here on in it's just a numbers thing :-)

http://www.pdgmedia.com/ee/bgernon.html
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
bgernonAuthor Commented:
Thanks Sean.  I will study it carefully and play with it.  I will let you know if I have any questions.

Sean, I am hoping to take this table one level further.   Currently, viewers can sort the table in different ways.  However, each time they select a different sort, the page is reloaded from the server.  For this large table, there is almost a 15 second delay each time, while the page reloads.  I think I have seen it done with JavaScript...some way to capture the table data in an array and not have to return to the server everytime with an updated SQL "order by" statement.  Is this your area of expertise also, or should I post this in another area?

Thanks for all your help.  I will be getting back to you later.

Beatrice
0
 
seanpowellCommented:
Alas - no, that is not my area of expertise (but i'm working on it...)
The two options I can think of would be either a js array, or using the sort() methods of the DOM, which would likely be a better way to handle it.

One of the other top experts here - COBOLdinosaur - is a wiz in both areas, so I'll try and get his attention and bring him into the discussion... for both our sakes...:-)

Thanks,
Sean
0
 
bgernonAuthor Commented:
Thanks again.

Beatrice
0
 
COBOLdinosaurCommented:
Well i was looking for you anyway Sean.  I wanted to congratulate you and your new EE certification in Web Development... a tough TA to get certified in.

I'll take a look at the sort shortly.

Cd&
0
 
brunoCommented:
I know you can use Data Binding to do a sort like that, I haven't done it in ages, and couldn't find any really good examples, but here is one...


http://home.att.net/~online_tools/workingon4.html
0
 
COBOLdinosaurCommented:
Javascript sort spec is here if you want to play with the options:

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/array.html#1196882

For a basic sort on columns you put an on click event on the th tag:
<th onclick="dosort(this.cellIndex,'tableid')">
Then you use an array and the sort method of the array object

function dosort(idx,tabl)
{
   var pntrs= new Array();
   var arrx=0;
   tab=document.getElementById(tabl);
   for (i=0;I<tab.rows.length;i++)
   /* note row zero is the headings so we leave it out */
   {
      pntrs[arrx]=tab.rows[i].childNodes[idx].nodeValue+'|'+i;
   /* the index is appended to the end to preserve its original position
      which will be important in the next step */
      arrx++;
   }
   saveNodes= new Array();
   pntrs.sort();
   var cellcnt=tab.rows[0].childNodes.length;
   /* can save the rows in the sorted order */
   for (i=0;i<pntrs.length;i++)
   {
      x=pntrs[i].split("|");
      y=parseInt(x[1]);
      for (j=0;j<cellcnt;j++)
      {
          saveNodes[i*cellcnt+j]=tab.rows[y].childNodes[j].innerHTML;
      }
   }
   arrx=0;
   /* now we can slam it back into the table */
   for (i=1;i<tab.rows.length;i++)
   {
      for (j=0;j<cellcnt;j++)
      {
         tab.rows[i].childNodes[j].innerHTML=saveNodes[arrx];
         arrx++;
      }
   }
}
//-->
</script>

to work correctly you have to make sure there are no whitespace text nodes beteen the cells
so keep the start and end tags on the same line:
<tr>
<td>some stuff</td>
<td>some more stuff</td>
</tr>

will have problems but
<tr><td>some stuff</td><td>
some more stuff</td></tr>

Will have the right number of nodes

Cd&
0
 
COBOLdinosaurCommented:
I haven't done one of those in a while, and did not have time to set a table to play with it, so it may still have typos, and  it is probably not real fast for a large table.

Let me know how you do.

Cd&
0
 
bgernonAuthor Commented:
Wow! You guys are all great.  I will study all the possible solutions presented.  CD&, it is probably faster than the way I am currently handling the sort.  I'm glad you mentioned putting the click event on the th tag. That is a great feature I have been wanting to play with, but haven't found the time.  Currently, users select the sort desired from a drop-down list box.

Beatrice
0
 
seanpowellCommented:
Hmmm... something tells me we're going to have a problem because it's actually two separate tables...

But I could be wrong. I'm new at this DOM thing but I've been studying hard :-)
0
 
COBOLdinosaurCommented:
Sean,

Forgot is was two tables, but it should still work.  The click passes the name of the table as one of the arguments so the core data still sorts.

This (had a typo any way):
 for (i=0;I<tab.rows.length;i++)
   /* note row zero is the headings so we leave it out */

Just becomes the more normal:
for (i=0;i<tab.rows.length;i++)

The left table just needs to be saved to another array, and wee include population of those cells with the nodes in the primary table.  The only thing we could not handle without major surgery is sorting on the left column.

Cd&

 
0
 
COBOLdinosaurCommented:
Of course given past history there are probably still undetected typos anyway. :^(

Cd&
0
 
seanpowellCommented:
Hi bgernon,

Just want to see how you're making out. I think the first question was answered, but not sure about the second (Currently, viewers can sort the table in different ways)

Thanks,
Sean
0
 
bgernonAuthor Commented:
Sean,

I got the first part working late Friday.  I was going to send in a comment today.  

I ended up combining your method with another I found on EE:

   http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20905902.html

I wanted the column data or headers to dictate the column width.  So I needed the headers and data to be in the same table.  I used style="position:relative;top:expression(this.offsetParent.scrollTop);" in my <tr> for the headers.  Then, because I now had only two tables (one for the left column data, in my case SSN's, and the other with headers and data), I modified the javascript to one addScrollSynchronization statement:

 addScrollSynchronization(document.getElementById("div1"), document.getElementById("div2"), "vertical");

Works beautifully!  Today I plan to tackle the sorting piece.

Beatrice
0
 
seanpowellCommented:
That's great Beatrice - I'm glad you're making progress.

Perhaps it would be a good idea to open a secondary question with regards to the sorting, and we can carry along with you there. Cd& to perform the magic, and I'll sit in the front row.

Seriously, it help future EE users when searching for similar questions on sorting. They may not think to look in this thread given it's title :-)

Thanks,
Sean
0
 
bgernonAuthor Commented:
My avaiable points are low right now.  I will work with CD&'s suggestion and others I have found.  If I find I am having problems, I will put it up in the proper section, JavaScript.  I am a little confused about how to award points in this situation, because I had two things going.  Your thoughts?
0
 
seanpowellCommented:
My preference would be 2 separate questions, since we're dealing with two different issues here. This question is good for users trying to look at different ways of scrolling table data. A second question (How to sort table data), for instance, would be beneficial for the sake of EE's database.

My suggestion would be for me to reduce the points on this Q to 225, and and then you can accept it as you wish. Then open another Q for 225 with the correct title and Cd& can post there.

Let me know if that sounds okay :-)
0
 
seanpowellCommented:
Thanks bgernon,
Let me know if you want to ask another Q for your data sorting issue, okay? I'm happy to reduce the points on this one to allow for that.

Thanks,
Sean
0
 
bgernonAuthor Commented:
Thank you.  I may have you do that.  I was reading again the comments CD& made about the code maybe requiring major surgery if I want to sort on the left column.  Well, guess what?  I do need to sort on the left column.

My morning has been crazy, so I have yet to sit down and study the sort stuff.  I want to carefully compose my question to include the fact that I have non-scrolling headers and a non-scrolling left column.

Thanks again for your help.

Beatrice

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 8
  • 7
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now