[Webinar] Streamline your web hosting managementRegister Today

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

Horizontal and vertical scroll bar

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
NHBFighter
Asked:
NHBFighter
  • 3
1 Solution
 
NHBFighterAuthor Commented:
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
 
NHBFighterAuthor Commented:
So... does anybody have any idea how to approach this?
0
 
NHBFighterAuthor Commented:
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
 
Computer101Commented:
PAQed with points refunded (300)

Computer101
EE Admin
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

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