Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Horizontal and vertical scroll bar

Posted on 2006-10-31
6
Medium Priority
?
5,290 Views
Last Modified: 2008-08-19
Hi experts

I'm looking for some fancy scrolling to be done.  I have a table of data for which the header and first column should remain ‘fixed’ such that when the user scrolls down the header row needs to stay visible and the first column needs to scroll down with the body of the table. And when the user scrolls sideways the first column needs to stay visible and the header row needs to scroll sideways too.  

I realize it’s a bit hard to understand what I’m looking for here, if it helps imagine an excel worksheet with the first row and first column locked.


Thanks
David
0
Comment
Question by:NHBFighter
  • 3
5 Comments
 
LVL 4

Author Comment

by:NHBFighter
ID: 17847242
The functionallity that the Grid widget shows on the activewidgets home page http://www.activewidgets.com/ is the type of functionallity I'm looking for. (But without using the actiewidgets package)

Thanks
0
 
LVL 4

Author Comment

by:NHBFighter
ID: 17863260
So... does anybody have any idea how to approach this?
0
 
LVL 4

Author Comment

by:NHBFighter
ID: 17893096
Well if anybody is interested here is a solution I came up with.  

<html>
<head>
    <style>
        #corner {
            position:absolute;
            top:0px;
            left:0px;
            background-color:green;
            z-index:4;
            width:28px;
            height:20px;
        }
        #left_column {
            position:absolute;
            top:0px;
            left:0px;
            background-color:red;
            margin-top:20px;
            width:28px;
            z-index:3;
        }
        #headers{
            overflow:hidden;
            background-color:blue;
            position:absolute;
            top:0px;
            left:0px;
            height:20px;
            margin-left:28px;
            z-index:3;
            white-space: nowrap;
        }

        #data{
            position:absolute;
            top:0px;
            left:0px;
            margin-left:28px;
            margin-top:20px;
            z-index:2;
            white-space: nowrap;
        }

        #container {
            position:relative;
            top:0px;
            width:90%;
            height:50%;
            border:1px solid blue;
            overflow:hidden;
        }
        #scrollbar{
            position: absolute;
            overflow: auto;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            padding: 0px;
            z-index: 4;
        }
        .column1{width:60px;text-align: right;}
        .column2{width:90px;text-align: right}
        .column3{width:90px;text-align: right}
        .column4{width:70px;text-align: right}
        .column5{width:90px;text-align: right}

        .row1{height:20px;}
        .row2{height:20px;}
        .row3{height:20px;}
        .row4{height:20px;}
        .row5{height:20px;}
    </style>
    <script>
        var data;
        var top;
        var left;
        var scrolled;
        var scrollbars;
        var container;
        var contentwidth;
        var contentheight;
        function init(){
            data=document.getElementById('data');
            top=document.getElementById('headers');
            left=document.getElementById('left_column')
            scrolled=document.getElementById('scrolled');
            scrollbars=document.getElementById('scrollbar');
            container=document.getElementById('container');
            contentheight=container.scrollHeight;
            contentwidth=container.scrollWidth;
            scrolled.style.height=contentheight+"px";
            scrolled.style.width=contentwidth+"px";
        }
        function scroll(){
            display();
            var x = scrollbars.scrollLeft;
            var y = scrollbars.scrollTop;
            data.style.left = "-"+x+"px";
            top.style.left="-"+x+"px";
            data.style.top = "-"+y+"px";
            left.style.top = "-"+y+"px";

        }

        function resize(){//This only matters if the div or window or what ever container can resize
            contentheight=container.scrollHeight;
            contentwidth=container.scrollWidth;
            scrolled.style.height=contentheight+"px";
            scrolled.style.width=contentwidth+"px";
            display();
        }
        function display(){
            var str='scrollbar.scrollLeft='+ scrollbar.scrollLeft+'<BR>'+
            'scrollbars.scrollTop='+scrollbars.scrollTop+"<BR>"+
            'scrollbar.style.width='+scrollbar.style.width+"<BR>"+
            'top.style.width='+top.style.width+"<BR>"+
            'top.width='+top.width+"<BR>"+
            'top.scrollWidth='+top.scrollWidth+"<BR>"+
            'contentheight='+contentheight+"<BR>"+
            'contentwidth='+contentwidth;
            document.getElementById('display').innerHTML=str;
        }
    </script>
</head>
<body onload="init()" onresize="resize()">

<div id="container" >
    <div id="corner"></div>
    <div id="headers">
        <table cellspacing="0" cellpadding="0" border="0"><tr>
        <td><div class="column1">header 1<div></td>
        <td><div class="column2">header 2<div></td>
        <td><div class="column3">header 3<div></td>
        <td><div class="column4">header 4<div></td>
        <td><div class="column5">header 5<div></td>
        </tr></table>
    </div>
    <div id="left_column">
        <table cellspacing="0" cellpadding="0" border="0">
        <tr class="row1"><td>left</td></tr>
        <tr class="row2"><td>col</td></tr>
        <tr class="row3"><td>3</td></tr>
        <tr class="row4"><td>4</td></tr>
        <tr class="row5"><td>5</td></tr>
        </table>
    </div>

    <div id="data">
        <table cellspacing="0" cellpadding="0" border="0">
        <TR class="row1">
            <td><div class="column1">data 1</div></td>
            <td><div class="column2">data 2</div></td>
            <td><div class="column3">data 3</div></td>
            <td><div class="column4">data 4</div></td>
            <td><div class="column5">data 5</div></td>
        </TR>
        <TR class="row2">
            <td><div class="column1">data 1</div></td>
            <td><div class="column2">data 2</div></td>
            <td><div class="column3">data 3</div></td>
            <td><div class="column4">data 4</div></td>
            <td><div class="column5">data 5</div></td>
        </TR>
        <TR class="row3">
            <td><div class="column1">data 1</div></td>
            <td><div class="column2">data 2</div></td>
            <td><div class="column3">data 3</div></td>
            <td><div class="column4">data 4</div></td>
            <td><div class="column5">data 5</div></td>
        </TR>
        <TR class="row4">
            <td><div class="column1">data 1</div></td>
            <td><div class="column2">data 2</div></td>
            <td><div class="column3">data 3</div></td>
            <td><div class="column4">data 4</div></td>
            <td><div class="column5">data 5</div></td>
        </TR>
        <TR class="row5">
            <td><div class="column1">data 1</div></td>
            <td><div class="column2">data 2</div></td>
            <td><div class="column3">data 3</div></td>
            <td><div class="column4">data 4</div></td>
            <td><div class="column5">data 5</div></td>
        </TR>
        </table>
    </div>
    <div id="scrollbar" onscroll="scroll();">
        <div id="scrolled"></div>
    </div>
</div>
<div id='display'>&nbsp;</div>
</body>
</html>
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 18400421
PAQed with points refunded (300)

Computer101
EE Admin
0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

876 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question