[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 887
  • Last Modified:

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>
0
bnhcomputing
Asked:
bnhcomputing
  • 4
2 Solutions
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now