Solved

Horizontal and vertical scroll bar

Posted on 2006-10-31
6
5,281 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
6 Comments
 
LVL 16

Expert Comment

by:manav_mathur
ID: 17847170
0
 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

943 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

Need Help in Real-Time?

Connect with top rated Experts

4 Experts available now in Live!

Get 1:1 Help Now