Freeze Panes di PHP/java script

Beberapa minggu lalu saya mendapatkan tugas dari kantor untuk membentuk laporan dengan freeze pane seperti di excel, setelah bertanya kepada Google saya menemukan source code ini, mungkin berguna bagi teman-teman lain yang membutuhkan, sayangnya saya sudah lupa alamat asalnya :

[sourcecode language="html"]
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
[/sourcecode]

Comments

  1. slamatJune 12, 2013 at 1:17 AM

    'top.style.width='+top.style.width+"
    "+, kenapa tidak dekenal ya? dan program saya run, hanya yg bergeser scroll barnya doang, datanya juga tidak bergeser, masalahnya dimana ya?
    terimakasih

    ReplyDelete

Post a Comment

Popular posts from this blog

Operasi Lipoma

Image
[caption id="" align="alignleft" width="360" caption="Lipoma"] [/caption] Sekitar 1 tahun yang lalu ketika sedang memijat bahu dan leher sendiri, saya menemukan ada benjolan di punggung sebelah kiri di sekitar bahu dan leher tidak terasa sakit oleh karena itu tidak terlalu saya perdulikan tetapi pihak keluarga terus-menerus memberitahu supaya segera diangkat karena benjolan itu bisa membesar dan selama 1 tahun memang sedikit demi sedikit benjolan tersebut membesar. Pada saat kantor sedang libur lebaran pada hari Jumat(2 September 2011) saya sempatkan untuk ke Dokter Spesialis Bedah di Poliklinik RKZ Surabaya. analisa dokter benjolan itu adalah Lipoma, tidak ganas dan bisa membesar, tidak ada masalah kalau ingin dikeluarkan, kemudian saya bertanya kepada dokter berapakah biayanya, Dokter menjawab : "Kalau dikeluarkan langsung biayanya sekitar 3 juta dan bisa langsung pulang" Pikir saya mahal sekali :P kemudian saya memutuskan untuk rawat
Read more

My little brother 22nd birthday

Hari ini adalah hari ulang tahun adikku yang ke 22, ketika kita menoleh ke belakang dan melihat kondisi pada saat ini banyak hal yang patut disyukuri. Sekarang ini dia sudah semester 7, kerja prakteknya sudah hampir selesai lalu sekarang dia menjadi salah satu tokoh dan menjadi assisten dosen di kampusnya, cukup membanggakan, Sudah bisa mencari tambahan uang sendiri sehingga sangat meringankan tanggung jawabku. Jika melihat beberapa tahun lalu sulit membayangkan kalau dia akhirnya mau untuk kuliah, butuh usaha cukup ekstra dari pihak keluarga untuk mendorong dia kuliah, meski kondisi pada waktu bisa di bilang keluarga tidak memiliki cukup danauntuk mengkuliahkan dia tapi bersama-sama kita bisa, berkat Tuhan juga terus datang sampai sekarang, meski terkadang ada kondisi yang cukup sulit tapi akhirnya kita juga bisa melewatinya. Masa pertama kali dia mendapatkan uang sendiri dari internet juga cukup mengejutkan dengan kemampuan pemrograman yang masih belum seberapa tetapi memil
Read more