Oct 9, 2010

Dynamic Fixed Header Footer using Javascript

Thanks to developer who created initial version of scrollable table using JavaScript and shared with everyone on http://www.webtoolkit.info/. It was not working in Chrome, Safari and Opera, so just modified the script to work in all browsers.

Also added dynamic height to it.

How to use this script?
  • As mentioned in webtoolkit.info you just need to enter table id.
<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 40);
</script>
  • Here you need to mention height in percentage. something like 40 for 40% of screen height
How table should be structured:
  • Table should have thead which will be present at the top of the table.
  • Table should have tbody which will be scrollable.
  • Table can have tfoot its optional.


Name Surename Age City Country Pin
Shahib Ulla 25 Bangalore India 78
John Smith 31 John Smith 31
John Smith 32 John Smith 31
John Smith 33 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 36 John Smith 31
John Smith 37 John Smith 31
John Smith 30 John Smith 30
John Smith 31 John Smith 31
John Smith 32 John Smith 31
John Smith 33 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 34 John Smith 31
John Smith 35 John Smith 31
John Smith 36 John Smith 31
John Smith 37 John Smith 31
Name Surename Age Name Surename Age
Posted by at 27 comments:

Oct 3, 2010

Dynamic Height Fixed Header Table

What is meant by Dynamic?
Dynamic is something which changes depending on Environment. Here height and width will change according to System. i.e., it will change its height and width depending on System height and width.

Hundreds of monitors available with different dimensions. Few will have 1024 * 800 and few others 1200*1024. Things which works perfectly in 1024* 800 will not work perfectly in 1200*1024.

So everyone wants some thing dynamic which should change depending on monitor width and height. Here is something which does that function for you.

In the below script you just need to width, If you specify 100 it means 100% if you specify 50 it means 50%.
  • It does not use CSS Hacks
  • divHeight will represent the Div Height.
  • divWidth will represent the Div Width.
  • Cell width is calculated by dividing Div Width with number of columns
<script>
 var divHeight= 50;
 var divWidth= 50;
</script>

  
Advantages from previous version:

  • Works fine in Chrome. Google Chrome uses CSS2 new version when compared to other browser. So few things does not work fine in Chrome.
  • Width and Height is configurable. If you want table to cover 50% of screen just specify 50 to DivHeight and DivWidth variables.
  • If you add below code to first version it works fine in Chrome and FF.
<script>
var divHeight= 40;
var divWidth= 60;

var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1; 
var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -1; 

divWidth= (divWidth * 0.01 * screen.width - 20);
divHeight= (divHeight * 0.01 * screen.height);
document.getElementById('ScrollTableDS').style.height = divHeight; 
document.getElementById('ScrollTableDS').style.width = divWidth; 
var rows = document.getElementById('TableDS').getElementsByTagName('tr');   
for(var i =0; i< rows.length; i++){
 var cols = rows[i].getElementsByTagName('td');
 var divWd = divWidth/cols.length;
 for(j=0; j< cols.length; j++){
   cols[j].setAttribute("width", divWd); 
 }
}

if(isChrome){ 
 document.getElementById('scrollBodyDS').style.display ="block";
 document.getElementById('TableDS').tHead.style.display ="block"; 
 document.getElementById('TableDS').tFoot.style.display ="block"; 
 document.getElementById('ScrollTableDS').style.width = divWidth; 
} 

if(!isIE){ 
 //extra column for header
 rows =  document.getElementById('TableDS').tHead.getElementsByTagName('tr'); 
 for(var i=0; i < rows.length; i++){
  var cols = rows[i].getElementsByTagName('td'); 
  var tcell1 = rows[i].insertCell(cols.length); 
  tcell1.setAttribute("width", "17px"); 
 }
 //extra column for footer
 rows =  document.getElementById('TableDS').tFoot.getElementsByTagName('tr'); 
 for(var i=0; i < rows.length; i++){
  var cols = rows[i].getElementsByTagName('td'); 
  var tcell1 = rows[i].insertCell(cols.length); 
  tcell1.setAttribute("width", "17px"); 
 }
 var bRows=0;
 bRows = bRows  + document.getElementById('TableDS').tFoot.offsetHeight + document.getElementById('TableDS').tHead.offsetHeight +5;
 bRows = divHeight - bRows;
  
 document.getElementById('scrollBodyDS').style.height = bRows;
 document.getElementById('scrollBodyDS').style.overflow ="AUTO"; 
 document.getElementById('ScrollTableDS').style.overflow ="hidden"; 
} 
</script>



First Column Second Column Third Column Fourth Column Fifth Column Sixth Column Seventh Column Ninth Column
0 0 0 0 0 0 0 0
1 1 1 1 1 1 1 1
2 2 2 2 2 2 2 2
3 3 3 3 3 3 3 3
4 4 4 4 4 4 4 4
5 5 5 5 5 5 5 5
6 6 6 6 6 6 6 6
7 7 7 7 7 7 7 7
8 8 8 8 8 8 8 8
9 9 9 9 9 9 9 9
10 0 0 0 0 0 0 10
11 1 1 1 1 1 1 11
12 2 2 2 2 2 2 12
13 3 3 3 3 3 3 13
14 4 4 4 4 4 4 14
15 5 5 5 5 5 5 15
First Column Second Column Third Column Fourth Column Fifth Column Sixth Column Seventh Column Ninth Column
Posted by at No comments:
Subscribe to: Posts (Atom)

Search