Freezing Coloumn Headers

[johnny2bad]

Is there a way using HTML, DHTML or Javascript to Freeze the Coloumn Header Row like in MS Excel? I'm writing a series of web based reports and I'm trying to keep from breaking the information up into different pages, but the users have requested that the coloumn headers stay visible even when they scroll down. I've never seen this done before and I don't know that it's even possible.

John

 

[ToddWW]

Use a frameset.

ToddWW

 

[johnny2bad]

I thought of that but some of the reports would extend beyond the sides of the screen, this would prove difficult to keep aligned when scrolling from side to side.

john

 

[ToddWW]

Well, I'm not sure about the DHTML, and if there was a solution out there using that, I'm sure you would run into problems with Netscape.

However, I have seen one solution that used to only work in NS4, but is now honored in NS4 and up and IE 5 and up. And that is the scrollBy() JavaScript method.

The example I saw was a frame set with three frames. The top frame had the report header, the middle frame had the report content and the bottom frame had the scroll controls. Now, keep in mind that this frameset was launched into a new window which excluded the scroll bars. You can't get rid of the scroll bars in the main window, so the only way this will work is to launch the report into a new window without scroll bars. I mean, the scrollBy() method will work on a main window, but the physical scroll bars will be there also and those won't invoke the function to move both frames, so it could get confusing for the visitor.

Basically, the bottom frame had four images in it. One for each direction of scrolling. The up and down images only scrolled the middle frame vertically while the left and right buttons scrolled both frames horizontally. Each button scrolled 30 pixels, but you can set it to whatever you want. You could even put in two buttons for the verticle scroll. One for scrolling xx pixels and the other for duplicating a page-down or page-up effect using the innerHeight property.

Anyways, the buttons would fire functions that would look something like this.

var deltaN = 30
function moveVerticle(direction) {
  if (direction == "up") {
    deltaN = -deltaN
  }
  parent.middleframe.scrollBy(0,deltaN)
}
function moveHorizontal(direction) {
  if (direction == "left") {
    deltaN = -deltaN
  }
  parent.topframe.scrollBy(deltaN,0)
  parent.middleframe.scrollBy(deltaN,0)
}

Then you could make some small images with arrows and have them call the functions. Something like this.

<a href=&quot;javascript:moveVerticle('down');&quot;><img src=&quot;downarrow.gif&quot; border=&quot;0&quot;></a>

<a href=&quot;javascript:moveVerticle('up');&quot;><img src=&quot;uparrow.gif&quot; border=&quot;0&quot;></a>

<a href=&quot;javascript:moveHorizontal('right');&quot;><img src=&quot;rightarrow.gif&quot; border=&quot;0&quot;></a>

<a href=&quot;javascript:moveHorizontal('left');&quot;><img src=&quot;leftarrow.gif&quot; border=&quot;0&quot;></a>

That's the only method that I can think of that will be honored by NS(4+) and IE(5+). It probably seems a little complicated, but it does work. You'll lose a little functionality in that you won't be able to press and hold the button to make the screen scroll continuously. That's why I think having two more verticle buttons for page-up and page-down is a must. You could even have two more for top and bottom that would navigate to anchors at the top and bottom of the middle frame.

ToddWW

 

[johnny2bad]

Yeah, i believe that i stumbled across that method a while back. But the more that I think about it, i think i am going to split the info up into different pages. To many things break as is without throwing somthing else in there that won't work in defferent browsers. I appreciate all your help Todd.

John

 

[toolkit]

Could you not do the following:
(1) Create a hidden div to hold the table headings
(2) Make sure all columns have explicit widths, so that the hidden div and the table match up
(3) Determine the top/left coord of the table (using offsetWidths etc..)
(4) Position the hidden div, then show
(5) Have a vertical sroll handler to ensure the div always stays at the same position vertically.

Obviously, not a trivial piece of code :-(. I will be working on a similar idea in the coming months, and this is what I was intending to try.

Cheers Neil

 

[johnny2bad]

That sounds more like what i had in mind. I'll have to look into that. Thanks

John