HTML Scroll table data using Frame Scroll Bars?


I know this has been asked 10K times, but I am looking for a HTML table scroll that uses the frame scrollbar, instead of creating a "table" scroll bar.

I found this, and it works for vertical scrolling, but not horizontal.  Any Ideas on how to get it to do both?  Is there an easier way to do this?

Thanks

bnhcomputing



<html>
<head>
<title>Table Scroll (WebFX)</title>
<style type="text/css">

body {
      border: 0;
      background: buttonface;
      overflow: hidden;
      margin: 0;
}

.scrollTable {
      border-left: 1px solid buttonshadow;
      border-right: 1px solid buttonhighlight;
      border-top: 1px solid buttonshadow;
      border-bottom: 1px solid buttonhighlight;
      background: window;

      width: 100%;
      height: 100%;
      overflow: hidden
}

.scrollTableHead {
      behavior: url("syncscroll.htc");
      background: buttonface;
      width: 100%;
      overflow: hidden;
}

.scrollTableHead table {
      background: buttonface;
      empty-cells: show;
      table-layout: fixed;
}

.scrollTableHead table td {
      border-left: 1px solid buttonhighlight;
      border-right: 1px solid buttonshadow;
      border-top: 1px solid buttonhighlight;
      border-bottom: 1px solid buttonshadow;

}

.scrollTableHead td,
.scrollTableBody td {
      color: windowtext;
      font: icon;
      padding: 2px;
}

.scrollTableBody {
      overflow: auto;
      /* height needs to be calculated from scrollTable */
      width: 100%;
}


</style>
<script type="text/javascript">

function initScrollTable(oElement) {
      resizeScrollTable(oElement);
      oElement.firstChild.syncTo = oElement.lastChild.uniqueID;
      oElement.firstChild.syncDirection = "horizontal";
      oElement.attachEvent("onresize", function () {
            resizeScrollTable(oElement);
      });
}

function resizeScrollTable(oElement) {
      var head = oElement.firstChild;
      var headTable = head.firstChild;
      var body = oElement.lastChild;
      var bodyTable = body.firstChild;
      
      body.style.height = Math.max(0, oElement.clientHeight - head.offsetHeight);
      
      var scrollBarWidth = body.offsetWidth - body.clientWidth;
      
      // set width of the table in the head
      headTable.style.width = Math.max(0, Math.max(bodyTable.offsetWidth + scrollBarWidth, oElement.clientWidth));

      // go through each cell in the head and resize
      var headCells = headTable.rows[0].cells;
      var bodyCells = bodyTable.rows[0].cells;
      
      for (var i = 0; i < bodyCells.length; i++)
            headCells[i].style.width = bodyCells[i].offsetWidth;
}

window.attachEvent("onload", function () {
      var testElement = document.getElementById("testScrollTable")
      initScrollTable(testElement);
});

</script>
</head>

<body>

<div class="scrollTable" id="testScrollTable">
      <span class="scrollTableHead">
            <table cellspacing="0" frame="border">
            <tr>
                  <td><nobr>Header One</nobr></td>
                  <td><nobr>Header Two</nobr></td>
                  <td><nobr>Header Three</nobr></td>
                  <td><nobr>Header Foour</nobr></td>
                  <td><nobr>Header Five</nobr></td>
                  <td></td>
            </tr>
            </table>
      </span>
      <span class="scrollTableBody">
            <table cellspacing="0">

            <script>
                  for (var i = 0; i < 20; i++)
                        document.write("<tr><td nowrap>Some text</td><td nowrap>Something else</td><td nowrap>More</td><td nowrap>less</td><td nowrap>And last but not least</td></tr>");
            </script>
            </table>
      </span>
</div>

</body>
</html>
bnhcomputingAsked:
Who is Participating?
 
EricCommented:
could you use an inline frame (iframe)
that'll give you the scroll bars you are looking for.
0
 
bnhcomputingAuthor Commented:

Yes, I had heard of that but as I am very new to HTML, I have no idea how to even get started.  Is there a simple example available that shows how to do this with an IFrame?
0
 
rockymageeCommented:
You can try this:

<style>
.scrollBox{
width: 200px;
height: 75px;
overflow: auto;
padding: 5px;
scrollbar-face-color: gray;
scrollbar-3dlight-color: black;
scrollbar-arrow-color: red;
scrollbar-base-color: blue;
scrollbar-darkshadow-color: purple;
scrollbar-face-color: yellow;
scrollbar-highlight-color: green;
scrollbar-shadow-color: orange
</style>

<div class="scrollBox">
      start of content
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      end of content
 </div>
_______________________________________________

If you want to use an iframe you simply create a seperate page with
all the data you would like to put into the scroll box and on the page with the
scroll box use the following syntax to call your page you created:

<iframe src="Your_Scrollable_Page.htm" title="Your Title">
<!-- Alternate content for non-supporting browsers -->
<H2>NO IFRAME SUPPORT</H2>
</iframe>

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
bnhcomputingAuthor Commented:
The scrollbox style appears to create its own scroll bar.  This is what I need to avoid.  I need to use the frame scroll bars only.

as to an iFrame, how do I get the headers and the data to scroll together?  Header should scroll left and right only, the table needs to scroll left and right & up and down and left to right scrolling needs the header synchronized with the table.

I'm still searching, but nothing yet...
0
 
bnhcomputingAuthor Commented:

Additional Information:

The code I posted(found) works fine if it is in its own window.  The Horizantal scrolling only fails when I put it in a frame.
0
 
bnhcomputingAuthor Commented:

I found the problem, so I will award points to those that answered.

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.