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

3 comments:

Anonymous said...

did someone find the solution for Firefox 4? (bug: scrollbar not displayed)

Anonymous said...

This is not working in FF 4.0.1. I see the scrollbars however the header disappears when scrolling :(

Shahib Ulla said...

Guys,

Check other post which work in all browsers.

Regards,
Shahib

Search