Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Horizontal and vertical scroll bar

Posted on 2006-10-31
6
Medium Priority
?
5,288 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
6 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

670 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