Solved

Non-Scrolling Table Headers

Posted on 2004-03-25
22
1,369 Views
Last Modified: 2008-02-26
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
Comment
Question by:bgernon
  • 8
  • 7
  • 5
  • +1
22 Comments
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:bgernon
Comment Utility
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 225 total points
Comment Utility
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
 

Author Comment

by:bgernon
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:bgernon
Comment Utility
Thanks again.

Beatrice
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:bgernon
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Of course given past history there are probably still undetected typos anyway. :^(

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:bgernon
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:bgernon
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:bgernon
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now