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

27 comments:

evestay said...

Hello Shahib

First of all, thank you so much for this script. It's making my life easier.

But I am having some trouble in IE and Chrome (FF works fine). When I go to your blog page, IE and Chrome display the scrolling table perfectly. But when I copy the code and create a document, Chrome does not size the table (40% or whatever). This is not a big problem. IE has a bigger problem. The header row does not remain fixed. I have this in my header before your code:



Thanks for any help.

Steve Read

Shahib Ulla said...

Hi Steve,

I have shared the source code here.
Source Code. Please verify this.

If your still facing problem. Please mail me your script to shahib713@gmail.com, I will have a look.

Regards,
Shahib

Anonymous said...

Hey, I've tryed your code too, and I get the same problem as evestay.
That the header is not fixed in IE.

I've tryed copying the source you provided, the source from the textarea, and the source directly from the page. None of them work in IE.

Anonymous said...

Ok, I managed to figure out why it didn't work.
It's because different types html.

Yours:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

Mine:
?xml version="1.0" encoding="UTF-8"?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Thorsten said...
This comment has been removed by a blog administrator.
xenides said...

Hi Shahib

Thanks for the great code. Unfortunately, loading this page causes a lockup in IE8.0.6001 with one CPU core hitting 50%. Makes it hard to debug : )

Since you are a better coder than me, you might have more success diagnosing!

-- Andrew C

Cristian said...

I do not speak English. Your table is great! Works for Internet Explorer 6.7 and 8. I can send a skin of the table please? my mail is cristian.ieci @ gmail.com thanks

Cristian said...

You may send a skin on the table please? my mail is cristian.ieci @ gmail.com thanks . Sorry in my last post I used the google translator

xenides said...

Funny... your blog page still makes my IE8 go crazy, but the Source Code page you put up works fine.

Thanks again.

Shahib Ulla said...

Hi Andrew,

Can you try code in Scrollable table post. This code uses CSS and I hope this will solve your problem.

If your still facing issues. Please drop a mail to shahib713@gmail.com,
I have sent email reply to ur comment but I am not sure if it has reached you.

Anyways, Thanks a lot for using my blog.

Shahib

PHP_GURU said...

Hi
Thanx for your unique idea,your code working fine in IE but mozilla and Chrome its not working with conjuction to mine css code.in mozilla border-collapse table got vanished and in chrome header table columns are not matched with td columns width, mine css is as below
table.tblBaseTblData{
margin:0px;
padding:0px;
*margin-left:10px;
*margin-left:0px;
border-bottom:1px solid #003366;
border-collapse:collapse;
}

table.tblBaseTblData th{
font-family:Arial,Verdana;
font-size:10px;
font-weight:bold;
background-color:#003366;
color:#F4EFEC;
height:25px;
margin:0px;
border:1px solid #003366;
}

table.tblBaseTblData td{
font-family:Arial,Verdana;
font-size:10px;
font-weight:normal;
color:#000000;
padding:2px 2px 2px 2px;
height:15px;
border:1px solid #003366;

}


table.tblBaseTblData .oddRow{
background-color:#DDDDDD;
}
table.tblBaseTblData .evenRow{
background-color:#FFFFFF;
}

Shahib Ulla said...
This comment has been removed by the author.
PHP_GURU said...
This comment has been removed by a blog administrator.
PHP_GURU said...

Hi

Shahib,I tried removing border-collapse:collapse property from table css class then am to reproduce table border but i need that collapse property see if any changes can be done from ur framework end

Shahib Ulla said...

hi PHP_Guru,

I have modified the script to suite ur requirement. Download the html page from

https://sites.google.com/site/javascriptutility/

PHP_GURU said...

Hi shahib thanx for ur repitative help,One more help please is there any way we can move scroll start position from table tbody as seen in mozilla but in IE 7 its start from table head,is it possible to move to tbody start position

Shahib Ulla said...

Dude,

Its possible.. but what ever u have now is better than that.

Regards,
Shahib

Anonymous said...

I changed a line so that mozzila, safari, chrome is working too

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

to

var isChrome = navigator.userAgent.toUpperCase().indexOf('MOZILLA')> -1;


Can you check if it's ok

Shahib Ulla said...

Thanks alot buddy.

After making changes to Mozilla, Its working in Safari, FF and Chrome.

Regards,
Shahib

Anonymous said...

Hi

Is it possible to always how the scrollbar even when there are not enough row for the table

Thanks in advance

Shahib Ulla said...

Hi Dude,

Its possible to have scrollbar when number of rows are less.

Just need to replace Overflow: Auto with Overflow: Scroll;

I hope, it will help

Regards,
Shahib
shahib713@gmail.com

Anonymous said...

scrolbar now show's but it also shows the horizontal scrollbar is there a way to prevent the horizontal scroll bar

thanks in advance

Shahib Ulla said...

Hi buddy,

Yes, its possible to remove horizontal scrollbar. Here I have specified width for the table in Table tag
< table cellspacing="1" class="" id="myScrollTable" width="600px" > Just replace this with 100%

Then, there is a script which will make table scroll. You can put custom width here if you want.

var t = new ScrollableTable(document.getElementById('myScrollTable'), 40 , 600);

Please email me if you face any issue. my email id shahib713@gmail.com

Regards,
Shahib

Ganesh said...

Hello Shahib,

Great piece of work!

I have a requirement to have horizontal scroll bar as well, having the First column to be freeze. Is there a way to accommodate my requirement with this ScrollTable script. Kindly let me know the possiblity.

Regards,
Ganesh
joingan@gmail.com

Unknown said...

Hi Shahib,
Thank you for this very useful code.
I need to read AND set the scroll position in the table.
Can you explain how to do this?
Thank you,
Adrian
adrianaj.browne AT gmail.com

Unknown said...

Think I have solved how to access the scroll position.
function foo(){
newTable = new ScrollableTable(document.getElementById('originalTable'), 45);
// use the tbody part
scrollTable=newTable.tbody; scrollTable.onscroll=onTableScroll;
} function onTableScroll() {
scrollTablePosition=scrollTable.scrollTop;
}
Hope this might help others.

Unknown said...

Sorry - have to modify to take care of IE

function foo(){
newTable = new ScrollableTable(document.getElementById('originalTable'), 45);
// use the tbody part
if(newTable.isIE)
scrollTable=newTable.containerEl;
else
scrollTable=newTable.tbody; scrollTable.onscroll=onTableScroll;
}

Search