Keep headings visible while scrolling 1

unclerico · Mar 7, 2006

In my previous thread thread215-1201089, I figured out how to keep headings visible while scrolling...cool stuff. I now have an issue when trying to adapt this concept to dynamic content. I have a Classic ASP page which queries Active Directory and returns results in an online phonebook. My form layout is simple, a select list, an input box, and a submit button. When the Submit button is pressed the form submits to itself and returns results from AD into a table. My dilemma is that I would like for the header rows in the table to be visible when the page scrolls down along with the input fields. If you want me to post my ASP page let me know and I will. Thanks ahead of time for any help.

Desired layout of the page before the form is submitted

Code:

--------------------------------------------------
| dropdown     inputbox        submit button     |
|                                                |
--------------------------------------------------

Desired layout of the page after the form is submitted; the top portion stays visible when the the page needs to scroll down

Code:

--------------------------------------------------
| dropdown     inputbox        submit button     |
|                                                |
| heading  heading  heading  heading  heading    |
--------------------------------------------------
| content  content  content  content  content    |
| content  content  content  content  content    |
| content  content  content  content  content    |
| content  conetnt  content  content  content    |
--------------------------------------------------

unclerico · Mar 8, 2006

anyone??

vacunita · Mar 8, 2006

Since no one has ventured a suggestion I will.

Personally I would create 2 Divs.

one that has the header and is fixed, and a second one that can scroll where i could pujt the results from the DB.

something like:

Code:

.fixedheader{
width:100%;
height:200px;
overflow:hidden;
}

.scrollablediv{
width:100%;
height:100%;
overflow:auto;
}

Something similar to that will give you 2 areas one that will stay where it is, and the second will have a scrollbar, different from the one that the browser produces, and will be able to scroll the info.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

unclerico · Mar 9, 2006

vacunita, thanks for the suggesion, I just can't seem to get it to work with the table header rows. I try to define a <div> around my table headers but it just treats the whole table as if it were part of the <div> not just the header rows. Any other ideas??

BillyRayPreachersSon · Mar 9, 2006

There are many scripts for fixed table headers that let you scroll the table data. You should be able to find one easily enough using Google.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

vacunita · Mar 9, 2006

Break the table headers from the rest of the table so you have 2 tables:

Code:

<div id="headers">
<table><tr><td>header</td><td>header...</td></tr></table>
</div>
<div id="results">
<table>
<tr><td>first row output.....</td></tr>
<tr><td>second row output....</td></tr>
</table>
</div>

Then give both divs a margn and padding of 0px so they sit close together.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

kaht · Mar 9, 2006

Break the table headers from the rest of the table so you have 2 tables

No offense, but I don't think that's a very clean way to do things. Use tables or use divs. When you start mixing and matching you're gonna end up with a huge mess. And, it's completely unnecessary.

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

vacunita · Mar 9, 2006

He is trying to display tabular data. And be able to scroll the results.

For me that speeks table, and the scrolling can be acomplished with a DIV.

So far it seems its exactly what one is recommended to do, use the tables for the tabular data, and the DIV's for the layout.

How else do you propose he displays tabular data?

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

vacunita · Mar 9, 2006

I believe this is what unclerico is after:

I put this together so he'd have an idea. its not nice but it will help him get the idea:

Code:

<style type="text/css">
  html, body {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
   }
.one{
top:0px;
left:0px;
width:100%;
height:150px;
color:#FFFFFF;
background-color:#000077;
margin-top:0px;
margin=bottom:10px;
padding:0px

}
.scrolling{
top:150px;
left: 0px;
margin-top:5px;
height:70%;
width:100%;
overflow:scroll;
color:#FFFFFF;
background-color:#444444;
padding:0px;


}
</style>
</head>
<body style="background-color:#AA0000;height:100%;position:relative;">
<div id="container" style="height:100%;width:100%;">
<div class="one" id="one">

<table height=100%><tr><td valign="bottom"  width="100px">Header1</td><td width="100px" valign="bottom">Header2</td><td width="100px" valign="bottom">Header3</td><td width="100px" valign="bottom">Header4</td></tr></table>

</div>

<div id="scrolling" class="scrolling">


<table style="height:100%px;background-color:green">

<tr bgcolor=blue><td width='100px'>Row 0, Field1</td><td width='100p'>Row 0, Field2</td><td width='100px'>Row 0, Field3</td><td width='100px'>Row 0, Field4</td></tr>

<tr bgcolor=red><td width='100px'>Row 1, Field1</td><td width='100p'>Row 1, Field2</td><td width='100px'>Row 1, Field3</td><td width='100px'>Row 1, Field4</td></tr>

<tr bgcolor=blue><td width='100px'>Row 2, Field1</td><td width='100p'>Row 2, Field2</td><td width='100px'>Row 2, Field3</td><td width='100px'>Row 2, Field4</td></tr>

<tr bgcolor=red><td width='100px'>Row 3, Field1</td><td width='100p'>Row 3, Field2</td><td width='100px'>Row 3, Field3</td><td width='100px'>Row 3, Field4</td></tr>
...
</table> 




</div>
</div>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

kaht · Mar 9, 2006

So far it seems its exactly what one is recommended to do, use the tables for the tabular data

Tabular content put inside a table - sure, that's all good and fine. But what you proposed was to create a completely seperate table just to make a header - and that doesn't really make a whole lot of sense. If you have to use a completely seperate HTML element to display a header then why not use.... uhh, let's see... a header tag?

Or better yet, keep everything in one completely solid table instead of chopping it up with <div>s (since that is the objective - 1 table, not 2). Like this:

http://www.imaputz.com/cssStuff/bigFourVersion.html

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

BillyRayPreachersSon · Mar 9, 2006

I've always liked this one:

http://www.activewidgets.com/

The column headers scroll left/right as the content does, too.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

vacunita · Mar 9, 2006

Well i guess you learn something new every day, I had never heard of <theader> and <tbody> tags before.

Well having that knowledge simplifies the task at hand.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

kaht · Mar 9, 2006

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

unclerico · Mar 9, 2006

wow, thanks so much for the hefty responses...kaht I have used the link that you provided in your response as a starting point for this and I just can't get it to function correctly...I'm sorry, sometimes I am a dunce and fail to pick up on all of the details. Here is what I have, I have cut out a great deal of the "hacks" that were in that link since this is only going to be used with IE 6/WinXP Pro SP2 on an intranet:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 100%;
	overflow: auto;
	width: 100%
}

div.tableContainer table {
	float: left;
	width: 100%;
}

thead.fixedHeader tr {
	position: relative
}

thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

tbody.scrollContent {
        something should go here, but what??
}
</style>
</head>

<body>
<div class="tableContainer">
<table>
  <thead class="fixedHeader">
    <tr>
	<th>Name</th>
	<th>Phone</th>
	<th>Location</th>
	<th>Title</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr>
	<td>Doe, John</td>
	<td>123-456-7890</td>
	<td>Springfield</td>
	<td>Information Systems</td>
    </tr>
    <tr>
	<td>Doe, John</td>
	<td>123-456-7890</td>
	<td>Springfield</td>
	<td>Information Systems</td>
    </tr>
    <tr>
	<td>Doe, John</td>
	<td>123-456-7890</td>
	<td>Springfield</td>
	<td>Information Systems</td>
    </tr>
    <tr>
	<td>Doe, John</td>
	<td>123-456-7890</td>
	<td>Springfield</td>
	<td>Information Systems</td>
    </tr>
    .
    .
    .
    .
  </tbody>
</table>
</div>
</body>
</html>

Thanks again to all of you who have replied so far, you should do this for a living ;-)

kaht · Mar 9, 2006

I have cut out a great deal of the "hacks" that were in that link since this is only going to be used with IE 6/WinXP Pro SP2 on an intranet:

Those hacks are designed to work side by side with IE6 without adversely affecting it. I would leave them in if I were you.

Besides, if your company ever decides that they want to use firefox or something and that's less code for you to have to modify, just think of how much praise you'd get from your boss for your ingenious forward-thinking [wink]

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

unclerico · Mar 9, 2006

alright, I will take your advice and then I will tell my supervisor "you should hire kaht, he's much better at this than I am", although, I'm not sure how much you would like Minnesota

...Do you know how I could make it so that instead of having the table only be a few hundred pixels wide/high, make it the full width/height of the window and only have the one main scroll bar as opposed to multiple scroll bars?? Or am I totally dreaming?? Thanks again.

kaht · Mar 9, 2006

So you want the header to be the full width of the browser, and the scrollable part of the table to be controlled with the browser's scrollbar?

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

unclerico · Mar 10, 2006

yes, that is exactly the effect I am looking for

kaht · Mar 10, 2006

I don't know if that would be achievable in IE without javascript, perhaps someone else could shed some light cause I really don't know.

In firefox you can use position:fixed to keep an element in place, but you've already stated above that you have an IE audience so it won't help you much [sad]

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

unclerico · Mar 10, 2006

kaht, thanks for your help on this, you have given me a really good starting point so I am just going to play around and see what happens...star for your persistence

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Keep headings visible while scrolling 1

IS-IT--Management

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Similar threads

Log in

Part and Inventory Search

Sponsor