www.webdeveloper.com
Results 1 to 2 of 2

Thread: Excel Freeze pane scrolling in HTML

  1. #1
    Join Date
    Nov 2006
    Posts
    2

    Excel Freeze pane scrolling in HTML

    Hey everyone, I had a requirement to implement scrolling that is similar to something done with Excel Freeze panes. 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 came up with a solution that seems to work on IE6 and FireFox. I wanted to share it with you incase it might be useful to someone and to see if I could get any feedback or comments.

    Code:
    <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>
    Thanks
    David

  2. #2
    Join Date
    Jul 2007
    Posts
    6
    For working out troubles with excel files you can use repair excel file. It has easy to use interface for any user, working under all Windows OS. The program can work with corrupted or lost excel workbooks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles