Dynamic update of table cells

Dynamic update of table cells

I have a big array and I need to render it into a table. Instead of
rendering all items I am rendering only few items horizontally and
vertically. Then on scroll based on mouse scroll whether happened vertical
/ horizontal updating table values. But I have two problems in this
My current code is unable to recognise Horizontal scroll, it is
considering horizontal scroll also as a vertical scroll.
Scroll position is not updated properly.
Here is the jsbin link http://jsbin.com/agalis/5/edit
Here is the JS code, I know code is not clean but I will clean it later.
var arr =
["a0,b0,c0,d0,e0,f0,g0,h0,i0,j0,k0,l0,m0,n0,o0,p0,q0,r0,s0,t0,u0,v0,w0,x0,y0,z0","a1,b1,c1,d1,e1,f1,g1,h1,i1,j1,k1,l1,m1,n1,o1,p1,q1,r1,s1,t1,u1,v1,w1,x1,y1,z1","a2,b2,c2,d2,e2,f2,g2,h2,i2,j2,k2,l2,m2,n2,o2,p2,q2,r2,s2,t2,u2,v2,w2,x2,y2,z2","a3,b3,c3,d3,e3,f3,g3,h3,i3,j3,k3,l3,m3,n3,o3,p3,q3,r3,s3,t3,u3,v3,w3,x3,y3,z3","a4,b4,c4,d4,e4,f4,g4,h4,i4,j4,k4,l4,m4,n4,o4,p4,q4,r4,s4,t4,u4,v4,w4,x4,y4,z4","a5,b5,c5,d5,e5,f5,g5,h5,i5,j5,k5,l5,m5,n5,o5,p5,q5,r5,s5,t5,u5,v5,w5,x5,y5,z5","a6,b6,c6,d6,e6,f6,g6,h6,i6,j6,k6,l6,m6,n6,o6,p6,q6,r6,s6,t6,u6,v6,w6,x6,y6,z6","a7,b7,c7,d7,e7,f7,g7,h7,i7,j7,k7,l7,m7,n7,o7,p7,q7,r7,s7,t7,u7,v7,w7,x7,y7,z7","a8,b8,c8,d8,e8,f8,g8,h8,i8,j8,k8,l8,m8,n8,o8,p8,q8,r8,s8,t8,u8,v8,w8,x8,y8,z8","a9,b9,c9,d9,e9,f9,g9,h9,i9,j9,k9,l9,m9,n9,o9,p9,q9,r9,s9,t9,u9,v9,w9,x9,y9,z9","a10,b10,c10,d10,e10,f10,g10,h10,i10,j10,k10,l10,m10,n10,o10,p10,q10,r10,s10,t10,u10,v10,w10,x10,y10,z10","a11,b11,c11,d11,e11,f11,g11,h11,i11,j11,k11,l11,m11,n11,o11,p11,q11,r11,s11,t11,u1
1,v11,w11,x11,y11,z11","a12,b12,c12,d12,e12,f12,g12,h12,i12,j12,k12,l12,m12,n12,o12,p12,q12,r12,s12,t12,u12,v12,w12,x12,y12,z12","a13,b13,c13,d13,e13,f13,g13,h13,i13,j13,k13,l13,m13,n13,o13,p13,q13,r13,s13,t13,u13,v13,w13,x13,y13,z13","a14,b14,c14,d14,e14,f14,g14,h14,i14,j14,k14,l14,m14,n14,o14,p14,q14,r14,s14,t14,u14,v14,w14,x14,y14,z14","a15,b15,c15,d15,e15,f15,g15,h15,i15,j15,k15,l15,m15,n15,o15,p15,q15,r15,s15,t15,u15,v15,w15,x15,y15,z15"];
var cellHeight = 30, cellWidth = 40;
var str = "";
var hMin = 4, vMin = 4;
var vFrom = 0, vEnd = 4, hFrom = 0, hEnd = 4;
var originalData = arr;
arr = originalData.slice(vFrom, vEnd);
for(var i = 0, l = arr.length; i < l; i++){
var data = arr[i].split(',');
data = data.slice(hFrom, hEnd);
data = '<div class="row" h="' + i + '"><div class="cell">' +
data.join('</div><div class="cell">') +
'</div></div>';
str += data;
}
var listHold = document.getElementById('foo');
var wrapper = document.getElementById('wrapper');
var fooDummy = document.getElementById('fooDummy');
wrapper.style.width = (hMin * cellWidth + 30) + "px";
wrapper.style.height = (vMin * cellHeight) + "px";
fooDummy.style.height = (originalData.length * cellHeight) + "px";
fooDummy.style.height = (originalData[0].split(',').length * cellWidth) +
"px";
listHold.innerHTML = str;
var update = function(type){
var elements = document.querySelectorAll('[h]');
if(type === "v"){
for(var j = 0; j < elements.length; j++){
var dta = originalData[vFrom + j].split(',');
var cells = elements[j].childNodes;
for(var k = 0; k < cells.length; k++){
cells[k].innerHTML = dta[k];
}
}
}else if(type == "h"){
for(var j = 0; j < elements.length; j++){
var dta = originalData[vFrom + j].split(',');
var cells = elements[j].childNodes;
for(var k = 0; k < cells.length; k++){
cells[k].innerHTML = dta[hFrom + k];
}
}
}
}
var lastScrollLeft = 0;
var lastScrollTop = 0;
function MouseWheelHandler(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Trying to identify left scroll ,right scroll
/**
var documentScrollLeft = fooDummy.scrollLeft, prevScroll =
lastScrollLeft;
if ((documentScrollLeft - prevScroll) > 0 ) {
console.log("Scroll right");
}else if((documentScrollLeft - prevScroll) < 0 ){
console.log("Scroll left");
}
**/
// For top and bottom scroll
if(delta == -1){ // Show bottom content
var a = vFrom, b = vEnd;
vEnd = Math.min.call(Math, originalData.length, b + 1);
if( b == vEnd){
return false;
}else{
vFrom = vEnd - vMin;
update('v');
}
}else{ // Show upper content
var a = vFrom, b = vEnd;
vFrom = Math.max.call(Math, 0, a - 1);
if( a == vFrom){
return false;
}else{
vEnd = vFrom + vMin;
update('v');
}
}
}
if (listHold.addEventListener) {
listHold.addEventListener("mousewheel", MouseWheelHandler, false);
listHold.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else listHold.attachEvent("onmousewheel", MouseWheelHandler);
Here is the HTML
<div id="wrapper">
<div id="foo" class="table"></div>
<div id="fooDummy" class="table"></div>
<div>
Here is the CSS
div.table{
display:table;
table-layout:fixed;
width:200px;
}
div.row{
display:table-row;
}
div.cell{
display:table-cell;
background-color:#F2F2F2;
text-align:center;
height:30px;
width:40px;
}
#wrapper{
position:relative;
overflow:auto;
}
#foo{
position:absolute;
top:0;
left:0;
}