dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: top of row visible above no-scroll header

  1. #1
    Join Date
    May 2007
    Posts
    4

    Angry top of row visible above no-scroll header

    This script is displaying a table with both a no-scroll header and resizable columns. I got most of the code from examples on the internet: a no-scroll heading example and a table with resizable columns example. I combined them. The problem is that when I scroll vertically, the top of the first row is visible above the header. Thanks in advance. Here is the script.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <!-- saved from url=(0075)http://jira.codehaus.org/secure/atta...leColumns.html -->
    <HTML><HEAD><TITLE>Test table with resizable columns</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <style type="text/css">
    div.tableContainer {
    width: 60%; /* table width will be 99% of this*/
    height: 450px; /* must be greater than tbody*/
    overflow: auto;
    margin: 0 auto;
    }
    table {
    width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
    border: none;
    background-color: #f7f7f7;
    }

    table>tbody { /* child selector syntax which IE6 and older do not support*/
    overflow: hidden;
    height: 100px;
    overflow-x: hidden;
    }

    thead tr {
    position:relative;
    top: expression(offsetParent.scrollTop); /*IE5+ only*/
    }

    thead td, thead th {
    text-align: center;
    font-size: 14px;
    background-color: lightblue; /*background in header row*/
    color: steelblue; /*text in header*/
    font-weight: bold;
    border-top: solid 1px #d8d8d8;
    }

    td {
    color: green; /*text in rows*/
    padding-right: 2px;
    font-size: 12px;
    text-align: left;
    border-bottom: solid 1px #d8d8d8;
    border-left: solid 1px #d8d8d8;
    }

    </style>
    <SCRIPT type=text/javascript>
    var markerHTML = "|";
    var minWidth = 150;
    var dragingColumn = null;
    var startingX = 0;
    var currentX = 0;

    function getNewWidth () {
    var newWidth = minWidth;
    if (dragingColumn != null) {
    newWidth = parseInt (dragingColumn.parentNode.style.width);
    if (isNaN (newWidth)) {
    newWidth = 0;
    }
    newWidth += currentX - startingX;
    if (newWidth < minWidth) {
    newWidth = minWidth;
    }
    }
    return newWidth;
    }

    function columnMouseDown (event) {
    if (!event) {
    event = window.event;
    }
    if (dragingColumn != null) {
    ColumnGrabberMouseUp ();
    }
    startingX = event.clientX;
    currentX = startingX;
    dragingColumn = this;
    return true;
    }

    function columnMouseUp () {
    if (dragingColumn != null) {
    dragingColumn.parentNode.style.width = getNewWidth ();
    dragingColumn = null;
    }
    return true;
    }

    function columnMouseMove (event) {
    if (!event) {
    event = window.event;
    }
    if (dragingColumn != null) {
    currentX = event.clientX;
    dragingColumn.parentNode.style.width = getNewWidth ();
    startingX = event.clientX;
    currentX = startingX;
    }
    return true;
    }

    function installTable (tableId) {
    var table = document.getElementById (tableId);
    // Test if there is such element in the document
    if (table != null) {
    // Test is this element a table
    if (table.nodeName.toUpperCase () == "TABLE") {
    document.body.onmouseup = columnMouseUp;
    document.body.onmousemove = columnMouseMove;
    for (i = 0; i < table.childNodes.length; i++) {
    var tableHead = table.childNodes[i];
    // Look for the header
    // Tables without header will not be handled.
    if (tableHead.nodeName.toUpperCase () == "THEAD") {
    // Go through THEAD nodes and set resize markers
    // IE in THEAD contains TR element which contains TH elements
    // Mozilla in THEAD contains TH elements
    for (j = 0; j < tableHead.childNodes.length; j++) {
    var tableHeadNode = tableHead.childNodes[j];
    // Handles IE style THEAD with TR
    if (tableHeadNode.nodeName.toUpperCase () == "TR") {
    for (k = 0; k < tableHeadNode.childNodes.length; k++) {
    var column = tableHeadNode.childNodes[k];
    var marker = document.createElement ("span");
    marker.innerHTML = markerHTML;
    marker.style.cursor = "move";
    marker.onmousedown = columnMouseDown;
    column.appendChild (marker);
    if (column.offsetWidth < minWidth) {
    column.style.width = minWidth;
    }
    else {
    column.style.width = column.offsetWidth;
    }
    }
    }
    // Handles Mozilla style THEAD
    else if (tableHeadNode.nodeName.toUpperCase () == "TH") {
    var column = tableHeadNode;
    var marker = document.createElement ("span");
    marker.innerHTML = markerHTML;
    marker.style.cursor = "move";
    marker.onmousedown = columnMouseDown;
    column.appendChild (marker);
    if (column.offsetWidth < minWidth) {
    column.style.width = minWidth;
    }
    else {
    column.style.width = column.offsetWidth;
    }
    }
    }
    table.style.tableLayout = "fixed";
    // Once we have found THEAD element and updated it
    // there is no need to go through rest of the table
    i = table.childNodes.length;
    }
    }
    }
    }
    }
    </SCRIPT>
    <META content="MSHTML 6.00.2800.1400" name=GENERATOR>
    </HEAD>
    <BODY>
    <div id="container">
    <H1>Tables with resizable columns.</H1>
    <div class="tableContainer">
    <TABLE id=testTable1 border=1>
    <THEAD>
    <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
    <TH>Header 3</TH>
    <TH>Header 4</TH></TR>
    </THEAD>
    <TBODY>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1</TD>
    <TD>column 2</TD>
    <TD>column 3</TD>
    <TD>column 4</TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1</TD>
    <TD>column 2</TD>
    <TD>column 3</TD>
    <TD>column 4</TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1</TD>
    <TD>column 2</TD>
    <TD>column 3</TD>
    <TD>column 4</TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1</TD>
    <TD>column 2</TD>
    <TD>column 3</TD>
    <TD>column 4</TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    <TR>
    <TD>column 1</TD>
    <TD>column 2</TD>
    <TD>column 3</TD>
    <TD>column 4</TD></TR>
    <TR>
    <TD>column 1 </TD>
    <TD>column 2 </TD>
    <TD>column 3 </TD>
    <TD>column 4 </TD></TR>
    </TBODY>
    </TABLE>
    </div>
    </div>
    <SCRIPT type=text/javascript>installTable ("testTable1");</SCRIPT>
    </BODY>
    </HTML>

  2. #2
    Join Date
    May 2007
    Posts
    4

    sorry about the angry icon

    I clicked on the wront Smilies.. Is it why I'm not getting suggestions on my problem or no one has an idea on how to fix this? Thanks

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Probably because that's a lot of code and only slightly CSS related. Putting it online and posting a pointer is by far the best way to get responses to a page like that.

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    and, -some of us actually do this for a day job and sometimes after 8 or 10 hours of it for client, we might just be to exhausted to do it again for fun.
    As Ray suggested, a live URL would be nicer sometimes. I at least, will need to copy & populate into my HTML-editor and in some liklihood, make paths absolute or use href="base" and whatever, to get it to function as-if live, prior to any kind of meaningful diagnosis.
    -I seriously would doubt if any post ever gets 'ignored'. Quite the opposite in fact. For a few of us (-and we know who we are! ), it's more like a foot-race to see whom can answer first and most correctly.
    If no reply is given after a day or two, a follow-up post on the same thread with *bump*, would 'refresh' the thread to the first page and top-of-page again... (don't double-or-cross post, as that will get one ignored)

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    (back: took supper break)

    I added this to STYLE, and it seems to have fixed it:

    <style>
    tr {background-color:white;}
    </style>

  6. #6
    Join Date
    May 2007
    Posts
    4

    very sorry

    I apologize for not setting up this thread the proper way with a link as you suggested. It was my first time... I'll start a new thread (WebJoel suggestion didn't work). Sorry also for the delay in replying. I'm in the midst of a tough project of which this is a small piece that took the backburner for a while.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    My suggestion didn't work, eh? It worked for me on my offline HTML-editor. What browser are you using? I might still have your code on my desktop... I will look at this again.
    It had appears that the <tr> was 'background-color:transparent;" and, by stating an actual color (I chose white), the 'transparency'-painted-white occluded the text (which then moves 'behind' the background...)
    That not working, I might try something like 'overflow:hidden;' and see if that 'hides' the content that slips up & beneith the top edge...
    Last edited by WebJoel; 05-16-2007 at 04:54 PM.

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Okay... I am STILL coming up with the same results:

    thead tr { background-color:white;
    position:relative;
    top: expression(offsetParent.scrollTop); /*IE5+ only*/
    }

    Try this... it is working ("hiding") the overflow-text that peeps along the top edge when scrolled-up...

    Screenshot image:
    I checked this with my graphics editor (made background-color:RED to highlight what I am saying). The 'overflow text' is now hidden! When you use the same color as the background of the document, it is truly 'hidden'..
    Attached Images Attached Images
    Last edited by WebJoel; 05-16-2007 at 05:13 PM.

  9. #9
    Join Date
    May 2007
    Posts
    4

    Thumbs up Thank you!

    Yes indeed, it's working. Thanks a whole lot for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles