Freeze Panes like Excel

Introduction

The script described in this article simply hides/unhides columns or rows using scrolling buttons, creating an Excel-like effect.

Background

There are already a few scripts around that demonstrate how to freeze an HTML table top row and first column.

Most of these scripts are specific to Internet Explorer, while a couple I have tried are cross browser compatible using CSS, but require the columns to be set to a specific width... for example, all column widths must be set to 100px wide.

I found this not to be ideal because the columns hide any content that is wider than 100px and there is no way of adjusting the column widths to view the hidden data via an onscreen control....not ideal for dynamically created data from a database.

Another solution I found was quite good but required a very large and complex amount of JavaScript code.

Using the code

The script simply hides/unhides columns or rows using scrolling buttons:

<button title="Up" onmousedown="upp();" onmouseup="upp(1);">Up</button>
<button title="Left" onmousedown="left();" 
        onmouseup="left(1);">&lt;&lt;</button>
<button title="Right" onmousedown="right();" 
        onmouseup="right(1);">&gt;&gt;</button>
<button title="Down" onmousedown="down();" onmouseup="down(1);">Dn</button>

Naturally, images can easily be used for a more attractive display.

Place the JavaScript function in either the head or body of your page. The function setUp() initializes the table the first time one of the buttons is clicked. Make sure to modify:

if(!myTable){myTable=document.getElementById("t1");

to match the ID of your table if it is not "t1". The script could be better optimised, but for demonstration, the code is easy enough to follow.

  var myRow=1;
  var myCol=1;
  var myTable;
  var noRows;
  var myCells,ID;
  
function setUp(){
    if(!myTable){myTable=document.getElementById("t1");}
     myCells = myTable.rows[0].cells.length;
    noRows=myTable.rows.length;

    for( var x = 0; x < myTable.rows[0].cells.length; x++ ) {
        colWdth=myTable.rows[0].cells[x].offsetWidth;
        myTable.rows[0].cells[x].setAttribute("width",colWdth-4);

    } 
}

function right(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="";
        }
        if(myCol >1){myCol--;}

        ID = window.setTimeout('right()',100);
    }
}
  
function left(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells-1)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="none";
        }
        myCol++
        ID = window.setTimeout('left()',100);
        
    }
}
  
function down(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<(noRows-1)){
            myTable.rows[myRow].style.display="none";
            myRow++    ;
        
            ID = window.setTimeout('down()',100);
    }    
}
 
function upp(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<=noRows){
        myTable.rows[myRow].style.display="";
        if(myRow >1){myRow--;}
        ID = window.setTimeout('upp()',100);
    }    
}

See a working Freeze Pains Demo here.

Here is an updated version for better layout within a scrollable div, using custom horizontal and verticle scrollbars: demo.