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

Tips agar ruangan harum

Pagi hari istri saya tercinta sudah memberitahu kami kalau tempat sampah sudah penuh dan minta kami untuk buang sampah tapi kami tidak membuang sampah dengan segera karena sibuk dengan kegiatan yang lain, Sepulang kami dari pergi jalan-jalan mencari diskon #labourday kami sedikit bingung karena ketika masuk apartment ada sedikit bau tidak enak tapi kami tidak sadar kalau itu karena bau sampah. Pada tengah malam saya terbangun dan belajar untuk persiapan TOEFL, Bau itu tercium semakin kuat, padahal saya sudah beli pengharum ruangan beberapa bulan lalu supaya apartment kami tetap harum, Tadi pagi juga baru saya ganti lalu saya teringat kalau saya belum buang sampah, Langsung sampahnya saya buang dan setelah buang sampah bau tidak enak itu tidak tercium lagi. Seharum-harumnya parfum di ruangan, Jika ada sampah pasti ruangan kita baunya tidak enak, Sampah harus dibuang dulu supaya bau tidak enaknya hilang.
Read more