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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  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)
    I build for: Firefox and tweak for IE

  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>
    I build for: Firefox and tweak for IE

  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 03:54 PM.
    I build for: Firefox and tweak for IE

  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 04:13 PM.
    I build for: Firefox and tweak for IE

  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