473,320 Members | 1,902 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

"floating" headers above scrolling grid

Hi,

I have a caontainer div that is 80% of the width of my display and 40em
high. It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines... so it will scroll. All of this is
working. Each column has a heading that, as the scrollbar is moved,
scrolls away just like the regular detail info.

So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible. I am having a heck of a time
making this work and wonder if any of you have ideas?

so I have something like

<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
</div>
</div>

I want something like:
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div style="float: left; width: 100%>
<h3 style="display: inline;">header</h3>
<h3 style="display: inline;>header2</h3>
<h3 style="display: inline;>header3</h3>
</div>
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
...content...
</div>
</div>
</div>
The problem is that the scrollbar interferes with the inner widths of
the content columns so that the headers do not line up correctly.
ideas?

Oct 2 '06 #1
7 9574
On 2006-10-02, seven.reeds <se*********@gmail.comwrote:
Hi,

I have a caontainer div that is 80% of the width of my display and 40em
high. It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines... so it will scroll. All of this is
working. Each column has a heading that, as the scrollbar is moved,
scrolls away just like the regular detail info.

So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible. I am having a heck of a time
making this work and wonder if any of you have ideas?

so I have something like

<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
</div>
</div>

I want something like:
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div style="float: left; width: 100%>
<h3 style="display: inline;">header</h3>
<h3 style="display: inline;>header2</h3>
<h3 style="display: inline;>header3</h3>
</div>
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
...content...
</div>
</div>
</div>
The problem is that the scrollbar interferes with the inner widths of
the content columns so that the headers do not line up correctly.
ideas?
You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.
Oct 3 '06 #2
You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.
interesting idea, thanks. It is not quite doing what I had hoped for
though. I just know I'm going to have to do some semi-heroic
javascripting to get column deminsion hints from the column divs inside
the scrolling div and then draw or adjust the headings. This seems
like way too much effort for column headings. Maybe the person
demanding this behaviour will eventually listen and let the headings
scroll.

Oct 3 '06 #3
"seven.reeds" <se*********@gmail.comwrote in
news:11**********************@e3g2000cwe.googlegro ups.com:
>You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.

It is not quite doing what I had hoped for
though.
Well, you originally asked for:
So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible.
Doesn't the "position: fixed" do exactly that?

Oct 3 '06 #4
seven.reeds wrote:
It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines...
[...]
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
Errr... this is a data table. Use <table>, <tr>, <th>, <tdand friends --
not this DIV muck.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Oct 3 '06 #5
seven.reeds wrote:
Hi,

I have a caontainer div that is 80% of the width of my display and 40em
high. It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines... so it will scroll. All of this is
working. Each column has a heading that, as the scrollbar is moved,
scrolls away just like the regular detail info.

So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible. I am having a heck of a time
making this work and wonder if any of you have ideas?
Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>

--
Gus
Oct 3 '06 #6
Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>
Hi Gus,

Yes, something exactly like that. I have also found other discussions
on doing this with non-standards complient browsers. For example:
http://www.agavegroup.com/?p=31 This example is not perfect for me but
it gets me in the ballpark

cheers,

Oct 4 '06 #7
seven.reeds wrote:
>Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>

Hi Gus,

Yes, something exactly like that. I have also found other discussions
on doing this with non-standards complient browsers. For example:
http://www.agavegroup.com/?p=31 This example is not perfect for me but
it gets me in the ballpark
Check out this:
<http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html>

--
Gus
Oct 4 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: John | last post by:
Hi everyone. I'm having a real problem with a drop-down menu that I'm using. Simply, as I scroll down the page, it follows me. I don't want this!! I guess it's all my fault for using...
1
by: Whitney Kew | last post by:
Hello everyone, I'm developing a mixed-mode Managed C++ DLL using .NET 2003, and to avoid the potential mixed-DLL-loading-deadlock issue discussed in MS KB article 814472...
4
by: GD | last post by:
I have a collection of asp:LinkButtons on a web form. Based on some reporting criteria, I will be "highlighting" some of these LinkButtons. I'd like the user to be able to mouseover the...
4
by: bugbear | last post by:
Hello; I have (tried) to change my geocities site to be "styled" not "tabled". It's certainly made the HTML nicer. But it doesn't work as nicely I'd like. And it almost doesn't work at...
18
by: woessner | last post by:
Does anyone know of a fast way to multiply floating point numbers by powers of two? Conceptually, all you need to do is add to the mantissa. But can I write C code (or x86 assembly) to accomplish...
4
by: John Friedland | last post by:
'printf' has a '%a' conversion for floating-point output: For example, printing '123456' with "|%13.4a|" produces | 0x1.e240p+16| I've looked through Josuttis and the header files, but I...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.