I’m facing some misalignment problem in IE. I have more than 30 headers, it is working fine in FF but it fails in IE. If I give fixed width in CSS for all then it works fine.
You Fixed Header works well with normal HTML but can you show a simple demo with asp.net integration with gridview. Can i tried but its not working all my page turns red. So please show us the sample demo for asp.net
I encountered that and solve it.
It has something to do with the gridview wrapper . try to wrap your gridviw with an extra and use that wrapper as target. $(”wrapper”).fixedHeaderTable();
good luck.
Hello Mark,
Can you please paste code of your demos also somewhere ? I am not able to make it work with ASP.net. Also what do you think is valid HTML for table. In your documentation, there is no wrapping the in
Mark – what would you suggest in a scenario where your plugin is used for a table that starts w/ 0 rows every day. Example: if you have a rental car application that places the daily turn ins and take outs in a table, it would start w/ 0 entries. In this case, I’m returning a tag in the that says “no cars rented today so far”. But because the holder doesn’t have a valid element, it triggers the body:background-color: red directive. I know I could change that in the file, but would like to keep it. Any ideas on how to implement a conditional to invoke the fixedTableHeader function. By the way, this is really the best table scroll plugin I’ve seen so far.
There are several ways you could implement this. You could setup a conditional statement in javascript or whatever server side language you’re using that only calls the fixedheadertable function if your data size/length > 0 else display the ‘no cars returned’ message.
I’ve almost got it where I need it, but it looks like the element(s) that is controlled by the .fht_parent div.fht_table_body section is extending further than I wish it would.
Testing with IE7,IE8, and FF3.5. Column heading not always aligning with data columns. Not consistent. Varies depending on data set and number of columns.
Just thought I’d let you know that I’ve got it working. I don’t think its the best solution, but i’m just learning jquery so my programming skills there are very basic. The jquery tabs page says:
“There’s an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector “.ui-tabs .ui-tabs-hide” with
Great! Glad its working. I was actually going to suggest the same thing as an alternative by setting the top positioning to -1000px or something…but – left positioning works just as well.
It appears it works the first time the page loads in Safari and FF but if you reload the page it breaks it and the only way to get it working again is to clear your cache and reload the page. Try what I suggested below and if that doesn’t work I’ll take a look at it in more detail.
Mark – here is your plugin in use with jquery tabs UI… the first tab looks great, the 2nd tab is breaking…looks like the code isn’t getting correctly applied to the table when I click on the 2nd tab….any suggestions? Do you think I should reapply the fixedTableHeader function on the click event?
This is just a guess but I think the issue is that the 2nd table is hidden from view so the browser hasn’t formatted the table columns. The plugin allows the browser to set the column sizes before it applies the fixed header and styling. Try calling fixedTableHeader on the 2nd table when the user clicks the 2nd tab and see what happens.
Thanks Mark…I feel like a Moron. I’ve got a deadline on a project and the scrollable solution broke…I saw your and it appears to work. I knew it was something in my face. Thanks a million.
I’m trying to use this plugin and I can’t get it to work. Don’t know what I’m doing wrong, but I’ve copied the source from the 2 table demo and changed the directory structure to point to where I have my jquery files and the page loads as if there is no styling whatsoever? Any suggestions?
Hi Michael,
Just to make sure, are you linking to the stylesheet in the head as well? If you download the plugin zip it should include the stylesheet and the js for the plugin. You will need to include both. I would include the js at the bottom of your page just before the closing body tag.
Hi. Have you ever tried to use this plugin w/ jquery tabs UI? I’m going to, but I thought I would ask in advance. I’ve tried to find a scrollable table to work in tabs and to this date I have not. Great looking plugin by the way.
I will take a look at this issue. Are you using any other plugins or javascript libraries on the same page? Just so I can have a better shot at duplicating the issue so I can fix it.
I have the same error message. but I think in different situation.
I have a and it contains a table that will be fixedHeaderTable. But I find out that the will be modified after fixedHeaderTable is invoked. But I need that . So I wrap the table with a created dynamically by jQuery $(”"). Then I invoke fixedHeaderTable on it. Then I will receieve this error and the table scroll will not be generated. That syntax error must happen before the scroll generation.
How about footers that align with the headers but might show column totals? Even if the footer’s value is passed in having them align with the headers would be wonderful.
I am getting script error if i use huge amount of data. The error i m getting is :
“A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.”
I will take a look at this issue. It sounds like jQuery is taking too long to process the table because of the amount of data. I’ll see what I can do about that.
I see the fixed column demo but I can’t (no matter what I resize to) get scroll bars to show up for horizontal scrolling. As such I don’t see the column locking. I am using FireFox 3.5.2 under OSX 10.6.1.
Are you reloading the page after you resize? I’ve tested it in Firefox 3.5 on Mac OS X 10.6. The window also needs to be fairly small for it to side scroll since I don’t have that many columns with longer headers.
GREAT plugin, I really like the function & the feel that this provides. What I am wondering is if there is anyway to “extend” this plug-in in a way that would allow users to select COLUMNS they wish to lock as well? I would like to lock the header just as this plug-in does but I would also like to lock the 1st, 2nd columns as well. Heck, ideally I would like to allow users to simply click a column header and lock things that way as well so when they scroll horizontally the locked columns stay visible. Any thoughts on how to accomplish this?
I’m working on locking the first column. I’ve got a working solution just fixing a few bugs with it. I think it can definitely be extended to be user controlled with an onclick event. I will look into adding that functionality as well. I might not be able to get to adding it this weekend but I will for sure have the first column locked as an option later today.
Mark: Please keep me posted on your progress I would definitely like to test that out! One thing I am noticing with the existing plugin is that it seems to prevent .click events to the element. I have a function that highlights table rows when clicked but as soon as I add in the call to: $(”.table1″).fixedHeaderTable(); the function no longer does anything at all. If I comment out that line it works fine. Any ideas?
Nicholas, I will take a look at why onclick events aren’t working.
As for fixing the first column. I’ve got that working now just need to fix one bug with some columns not being properly aligned and do some code clean-up before releasing. Its been taking longer than I initially expected.
I am using IE 8. Its working superb in firefox but in IE when you resizes you will see the performance issue. I am just using your website.. your demos.. not any of my example. Just check your demos on IE 8
Thanks very much and Regards
Just curious if this can be used for horizontally built tables. Where s run down the left side of the table as opposed to the normal, across the top table. Think ‘comparing properties or products.’ basically we are trying to build table where the 1st column will remain fixed, and columns 2 – X scroll horizontally.
At the moment this is not supported but I’ve had a couple of requests to include support for a fixed first column. I will be working on that over the next couple of days. I will post my progress and an updated plugin this weekend.
Hi. auto height in is possible?
Hey Mark,
Thanks for all the hard work.
I have a dilemma, and I appreciate any help or guidance you can help me.
THe page I am working, with all its tables, but it doesnt have a
Is there is anything I can do to use your plugin, and go around that?
May be add the thead element dynamically?
Any insight or help is greatly appreciated.
And thanks again, for all your contribution.
love this, thanks you very much
Thanks for your wonderful effort!
I’m facing some misalignment problem in IE. I have more than 30 headers, it is working fine in FF but it fails in IE. If I give fixed width in CSS for all then it works fine.
Please help to resolve this.
Hello Mark,
I am adding a fixedheadertable dynamically from ajax callback to one of the accordion draw(jqueryui).
the problem is accordion “eat” my table fixed header.
it is gone. it is there if I don’t use accordion.
do you know the cause of that?
that is just want I am looking for.
you save my day.
Thank you, neat plugin.
Hi!
Wonderfull plugin, but…
When I had “colspan” in THEAD the cells in the table were displayed wrong.
Mickey
Hello Mark,
You Fixed Header works well with normal HTML but can you show a simple demo with asp.net integration with gridview. Can i tried but its not working all my page turns red. So please show us the sample demo for asp.net
Thanks
Rick
I encountered that and solve it.
It has something to do with the gridview wrapper . try to wrap your gridviw with an extra and use that wrapper as target. $(”wrapper”).fixedHeaderTable();
good luck.
Mark, you’re plugin solve my problem w/ fixed headers but my customer didnt want it because of its slow performance
Hello Mark,
Can you please paste code of your demos also somewhere ? I am not able to make it work with ASP.net. Also what do you think is valid HTML for table. In your documentation, there is no wrapping the in
Mark – what would you suggest in a scenario where your plugin is used for a table that starts w/ 0 rows every day. Example: if you have a rental car application that places the daily turn ins and take outs in a table, it would start w/ 0 entries. In this case, I’m returning a tag in the that says “no cars rented today so far”. But because the holder doesn’t have a valid element, it triggers the body:background-color: red directive. I know I could change that in the file, but would like to keep it. Any ideas on how to implement a conditional to invoke the fixedTableHeader function. By the way, this is really the best table scroll plugin I’ve seen so far.
There are several ways you could implement this. You could setup a conditional statement in javascript or whatever server side language you’re using that only calls the fixedheadertable function if your data size/length > 0 else display the ‘no cars returned’ message.
Mark – if you get a chance, would you look at this image of my implementation of your plugin?
http://www.crowncontainer.com/scroll/fth.html
I’ve almost got it where I need it, but it looks like the element(s) that is controlled by the .fht_parent div.fht_table_body section is extending further than I wish it would.
Can you tell me what is causing this?
What doctype are you using?
Doc type is 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
I’ll take a look at this later this evening and get back to you.
I’m curious…what if I wanted to have multiple instances of this plugin on my website, but with different style rules?
Thanks Michael
Testing with IE7,IE8, and FF3.5. Column heading not always aligning with data columns. Not consistent. Varies depending on data set and number of columns.
Is this with the 1.0 release or the fixed column demo?
Just thought I’d let you know that I’ve got it working. I don’t think its the best solution, but i’m just learning jquery so my programming skills there are very basic. The jquery tabs page says:
“There’s an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector “.ui-tabs .ui-tabs-hide” with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
”
That’s what I did and it appears to work. Thanks again for your help.
Michael
Great! Glad its working. I was actually going to suggest the same thing as an alternative by setting the top positioning to -1000px or something…but – left positioning works just as well.
-Mark
Mark – like most things I guess…it appears to work in Firefox but not IE (i tried IE8 with both compatability turned on and off)…
It appears it works the first time the page loads in Safari and FF but if you reload the page it breaks it and the only way to get it working again is to clear your cache and reload the page. Try what I suggested below and if that doesn’t work I’ll take a look at it in more detail.
forgot to add the link:
http://www.crowncontainer.com/scroll/scroll.php
Mark – here is your plugin in use with jquery tabs UI… the first tab looks great, the 2nd tab is breaking…looks like the code isn’t getting correctly applied to the table when I click on the 2nd tab….any suggestions? Do you think I should reapply the fixedTableHeader function on the click event?
This is just a guess but I think the issue is that the 2nd table is hidden from view so the browser hasn’t formatted the table columns. The plugin allows the browser to set the column sizes before it applies the fixed header and styling. Try calling fixedTableHeader on the 2nd table when the user clicks the 2nd tab and see what happens.
-Mark
Thanks Mark…I feel like a Moron. I’ve got a deadline on a project and the scrollable solution broke…I saw your and it appears to work. I knew it was something in my face. Thanks a million.
No problem! Glad it’s working now…it happens to the best of us. Sometimes an extra set of eyes helps find the problems quicker.
Good luck with your project!
-Mark
Hi Mark…I looked at my error log in Firefox and it says Error: $(”.table1″).fixedHeaderTable is not a function
Source File: http://www.crowncontainer.com/scroll/scroll.php
Line: 880
Posted the problem and solution with your previous comment. Should work once you make the change.
-Mark
Hi. I don’t know what I’ve left out… here is a link to a test page I’m trying to get to work:
http://www.crowncontainer.com/scroll/scroll.php
can you just take a quick look to see if you can tell me. It’s probably hitting me directly in the face.
Hi Michael,
I found your issue. Your linking to the plugin js file is broken. you are using:
fixedHeaderTable/fixedHeaderTable/jquery.fixedheadertable.1.0.js
you should be using:
fixedHeaderTable/jquery.fixedheadertable.1.0.js
the reason its not working is because you are getting a 404 error with the fixedheadertable js src file.
-Mark
Testing jQuery.1.3.2.js with FF, IE 7, and IE8. Encounter ‘Invalid argument, Code 0′ at line 1061 in jquery-1.3.2.js with IE 8.0.
Do you have any explanation for this problem? It does not occur with FF3.5 or IE7.
I haven’t been able to duplicate the error in IE8. Are you getting this error in my demo page as well?
Resolved problem. Error was with the DOCTYPE specification.
I’m trying to use this plugin and I can’t get it to work. Don’t know what I’m doing wrong, but I’ve copied the source from the 2 table demo and changed the directory structure to point to where I have my jquery files and the page loads as if there is no styling whatsoever? Any suggestions?
Hi Michael,
Just to make sure, are you linking to the stylesheet in the head as well? If you download the plugin zip it should include the stylesheet and the js for the plugin. You will need to include both. I would include the js at the bottom of your page just before the closing body tag.
Hope this helps.
Mark
Hi. Have you ever tried to use this plugin w/ jquery tabs UI? I’m going to, but I thought I would ask in advance. I’ve tried to find a scrollable table to work in tabs and to this date I have not. Great looking plugin by the way.
michael
I haven’t tested that yet but please let me know if it works!
Thanks,
Mark
Great plugin. I’m getting a exception error in the jquery library using the plugin.
it is at line 19 in jquery-1.3.2.min.js, error is Exception thrown and not caught. the JQuery code highlighted is:
throw”Syntax error, unrecognized expression: “+ad
this is in IE8 with Developer Tools
Can you help me resolve this?
After I click through the error, the table formats correctly.
Thanks in advance
Brian
Hi Brian,
I will take a look at this issue. Are you using any other plugins or javascript libraries on the same page? Just so I can have a better shot at duplicating the issue so I can fix it.
Thanks!
Mark
I have the same error message. but I think in different situation.
I have a and it contains a table that will be fixedHeaderTable. But I find out that the will be modified after fixedHeaderTable is invoked. But I need that . So I wrap the table with a created dynamically by jQuery $(”"). Then I invoke fixedHeaderTable on it. Then I will receieve this error and the table scroll will not be generated. That syntax error must happen before the scroll generation.
the error is from this line of code.
obj.find(’.fht_parent table thead’).clone().prependTo(’.’ + objClass + ‘ .fht_fixed_header_table’);
just figure out my error. the wrapper must have a class. so I assign one and works fine. but the fix column still doesn’t work.
How about footers that align with the headers but might show column totals? Even if the footer’s value is passed in having them align with the headers would be wonderful.
That sounds like a good idea. I will look into adding that functionality as well.
Thanks!
Hi ,
I am getting script error if i use huge amount of data. The error i m getting is :
“A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.”
I will take a look at this issue. It sounds like jQuery is taking too long to process the table because of the amount of data. I’ll see what I can do about that.
What browser were you using?
I see the fixed column demo but I can’t (no matter what I resize to) get scroll bars to show up for horizontal scrolling. As such I don’t see the column locking. I am using FireFox 3.5.2 under OSX 10.6.1.
Are you reloading the page after you resize? I’ve tested it in Firefox 3.5 on Mac OS X 10.6. The window also needs to be fairly small for it to side scroll since I don’t have that many columns with longer headers.
Mark,
GREAT plugin, I really like the function & the feel that this provides. What I am wondering is if there is anyway to “extend” this plug-in in a way that would allow users to select COLUMNS they wish to lock as well? I would like to lock the header just as this plug-in does but I would also like to lock the 1st, 2nd columns as well. Heck, ideally I would like to allow users to simply click a column header and lock things that way as well so when they scroll horizontally the locked columns stay visible. Any thoughts on how to accomplish this?
I’m working on locking the first column. I’ve got a working solution just fixing a few bugs with it. I think it can definitely be extended to be user controlled with an onclick event. I will look into adding that functionality as well. I might not be able to get to adding it this weekend but I will for sure have the first column locked as an option later today.
Thanks for the good idea!
Mark: Please keep me posted on your progress I would definitely like to test that out! One thing I am noticing with the existing plugin is that it seems to prevent .click events to the element. I have a function that highlights table rows when clicked but as soon as I add in the call to: $(”.table1″).fixedHeaderTable(); the function no longer does anything at all. If I comment out that line it works fine. Any ideas?
Nicholas, I will take a look at why onclick events aren’t working.
As for fixing the first column. I’ve got that working now just need to fix one bug with some columns not being properly aligned and do some code clean-up before releasing. Its been taking longer than I initially expected.
Mark: Okay, sounds good. I’ll keep checking back here for replies, otherwise feel free to shoot me an email: niczak at gmail . com.
There is an issue with the resize. When the grid is resized again and again and i did the scrolling, then I noticed the rows are scolling very slowly.
thanks
Can you tell me…
What browser were you using?
Roughly how many rows of data were you displaying?
I will try to reduplicate this issue and see what is causing it.
Thanks!
I am using IE 8. Its working superb in firefox but in IE when you resizes you will see the performance issue. I am just using your website.. your demos.. not any of my example. Just check your demos on IE 8
Thanks very much and Regards
Greetings, sweet plugin!
Just curious if this can be used for horizontally built tables. Where s run down the left side of the table as opposed to the normal, across the top table. Think ‘comparing properties or products.’ basically we are trying to build table where the 1st column will remain fixed, and columns 2 – X scroll horizontally.
thanks for you work!!
At the moment this is not supported but I’ve had a couple of requests to include support for a fixed first column. I will be working on that over the next couple of days. I will post my progress and an updated plugin this weekend.
Thanks for your support!