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:

Sep 29, 2010

Fixed Header Footer without CSS hacks

Few CSS tags which I have used in my below posts are called as CSS hacks. Still I feel they are very save, because they are just changing styles with the browser.

Anyways, here is the new version. I think it is quite difficult to edit this version when compared to older one. If you need any kind of help, just let me know. I would be glad to help you.

Changes what I did from my previous version.
  • Removed CSS tags for cross browser scripting.
  • Added JavaScript code instead of CSS hacks.
You can get information about CSS Hacks here!!



This is similar to my first post Scrollable Table only thing is it has JavaScript which detects the browser and do changes. Here good thing is I have avoided CSS hacks. (Few words create disturbance in our mind. If we avoid those words we will be very happy. Hack is one kind of word which do the same :-) )

The below script does the magic part. First I am identifying if the browser. I am checking if the browser is Chrome and if it is IE.

<script> 

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


if(isChrome){ 
 document.getElementById('scrollHead').style.display ="block"; 
 document.getElementById('scrollBody').style.display ="block"; 
 document.getElementById('scrollFooter').style.display ="block"; 
 document.getElementById('tableHolder2').style.width ="580px"; 
} 
if(!isIE){ 
 document.getElementById('scrollBody').style.height ="200px"; 
 document.getElementById('scrollBody').style.overflow ="auto"; 
 document.getElementById('tableHolder2').style.overflow ="hidden"; 
  
 var rows = document.getElementById('Table0').getElementsByTagName('tr');   
 var cols = rows[0].getElementsByTagName('td'); 
 var tcell1 = rows[0].insertCell(cols.length); 
 tcell1.setAttribute("width", "12px"); 
 tcell1.setAttribute("style", "visibility:hidden"); 
 var tcell2= rows[rows.length-1].insertCell(cols.length); 
 tcell2.setAttribute("width", "12px"); 
  
} 
</script> 

First script is meant for Chrome browser. I am setting display attribute as block for THEAD, TBODY & TFOOT. I still need to dig other ways. But this is the thing which is working fine now

Second script is meant for Browsers other than IE. Here I am setting overflow property of TBODY to auto, Assigning height to TBODY. Then the last step was to add a extra cell to the THEAD and TFOOT.

After making all the changes the code works fine.
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
Posted by at 3 comments:

Aug 21, 2010

Fixed Header Footer Table

I am working on Fixed Header Footer table functionality almost from past 2 years. First version you can find in the same blog. That was my first post.

Now after two years, I am able to find something which works fine in Firefox as well as Chrome. Most difficult part was making the table scrollable in Chrome, FF and IE. (Only one dimensional scroll works in Firefox and Chrome, that means only fixed header and fixed footer not fix columns)

Now how to make Scrollable table in Chrome.
  • Copy this code and modify it to suite your requirements.
  • What ever highlighted in bold are important ones. Specify height and width for DIV.
  • Height for tbody should be less than Div width(Div width -100px)


I guess you want to know what is difference between present code which works fine in Chrome and Firefox and past code which only works fine in IE.

Here I have used HTML tags which changes the style sheet according to browser. The below code works only when browser is other than IE.
These CSS are regarded as CSS hacks, but they are still safe to to use. You can check this website http://www.webdevout.net/css-hacks for more information.


html>body div.tableHolder {
overflow: hidden;
}
html>body tbody.scrollBody {
height: 200px;
overflow: auto;
}

The code for IE is same. But for Firefox and Chrome what I am doing is; I am making TBODY scrollable by setting Overflow:auto


But if we make TBODY scrollable, there is one problem with the last column. It will have different width. And  it will behave differently when used in FF and Chrome. So I have added extra cell for header and footer by using the below code.


<!--[if !IE]><!-->
<td widtd="16px" style="background-color:#ffffff; visibility: hidden"> </td>
<!--<![endif]-->
If the browser is not IE then it will add a extra cell to header. and Similar code is kept in footer to do the same thing.

I don't have much knowledge on browser, but few things were not working fine in Chrome. So kept Javascript which will detect Chrome browser and change the properties accordingly.

<script>
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome')> -1;
if(isChrome){
document.getElementById('scrollHead').style.display ="block";
document.getElementById('scrollBody').style.display ="block";
document.getElementById('scrollFooter').style.display ="block";
document.getElementById('tableHolder2').style.width ="580px";
}
</script>

Rest of the code is explained in the my previous post.
first-column second second second second second second second second Last-column  
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column  
Posted by at No comments:
Subscribe to: Posts (Atom)

Search