Solved

Horizontal and vertical scroll bar

Posted on 2006-10-31
6
5,284 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 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Suggested Solutions

Title # Comments Views Activity
html form layout 4 52
Html using "Or" in condition 3 40
send html form with multipe immages as buttons 2 37
Jquery syntax 12 29
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.
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 to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

737 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