[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Non-Scrolling Table Headers

Posted on 2004-03-25
22
Medium Priority
?
1,381 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 5
  • +1
22 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 10678907
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
ID: 10679152
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 900 total points
ID: 10679481
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
Independent Software Vendors: 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!

 

Author Comment

by:bgernon
ID: 10679603
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
ID: 10679696
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
ID: 10679726
Thanks again.

Beatrice
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10680003
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
ID: 10680172
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
ID: 10681348
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
ID: 10681386
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
 

Author Comment

by:bgernon
ID: 10681586
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
ID: 10681925
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
ID: 10682585
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
ID: 10682596
Of course given past history there are probably still undetected typos anyway. :^(

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10694990
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
ID: 10704772
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
ID: 10704899
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
ID: 10705154
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
ID: 10705276
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
ID: 10706285
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
ID: 10706476
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

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

656 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