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