mkoryak / floatthead Goto Github PK

$.browser is not available anymore in JQuery, and in any case it sounds like a better idea to use feature detection rather then browser detection.

The impact on the code is not light though, so wanted to know opinions before even trying to fork, patch and make a pull request...

Hi,

I tested your plugin on my project, and it works really great.

I was wondering if it was possible to also add a sticky column for floating vertical headers, like one can see on the last example on this page?

Does your plugin allows that? If not, are you planning to add it? If not, would you have some recommandations on the best way to implement it?

Thank you for the good work anyway.
Cheers.

Hi, very nice plugin. However, I found an issue when using a table with a fully floating columns (no fixed widths set on any columns). If the width of the data in the sizing-row tds is less than the width of the header-data in the ths, the header columns will move relative to the tbody.

See the following fiddle: http://jsfiddle.net/vV8qF/1/

(Rendered table is supposed to be in a windows with horizontal and vertical scroll bars, not sure if that affects the issue)

testcases that need to be fixed:

big-table.htm
border-collapse.htm (collapsed border table)

it might be sad, but i probably dont need the whole thing. maybe fall back on underscore impls if underscore exists

The second table on this page integrates your plugin: http://dertipp.fortuna-duesseldorf.de/fortunaddorf/tippuebersicht
First I load this page with a large window size, then scroll down until the header is fixed. Then I resize the window to a smaller size, the header is getting wider. When I scroll to the top the wide header is hidden of course again but it reappears on scrolling down. Tested with ubuntu 13.04/Firefox 23

If you need more information, I am eager to help.

Hello, I'm unable to install floatThead through bower:

$ bower install floatThead --save
bower cached        git://github.com/lodash/lodash.git#2.4.1
bower validate      2.4.1 against git://github.com/lodash/lodash.git#~2.4.1
bower cached        git://github.com/theshock/atomjs.git#474cdf1ee5
bower validate      474cdf1ee5 against git://github.com/theshock/atomjs.git#*
bower cached        git://github.com/mkoryak/floatThead.git#1.2.1
bower validate      1.2.1 against git://github.com/mkoryak/floatThead.git#*
bower ENOTFOUND     Package install not found

Thanks !

floating table width seems to be off in many tests

Just out of curiosity, are there any plans to support fixed footers as well? I haven't really looked into the code yet so I don't know whether this is a lot of extra work or not. In my mind it's exactly the same but the other way around by positioning it at the bottom and copying the footer.

I know this might not be the correct place to ask for this information but I couldn't figure out where else :)

I'm not sure what the exact trigger is, but when you have lots of columns possibly with col spans. The header shifts to the left/right after you start scrolling.

This was happening in our code base, but i've demonstrated the problem in a jsfiddle here: http://jsfiddle.net/PYVFd/4/

Really enjoying how lightweight and effective this library is though :)

Thanks,

Richard

If a table has a caption tag, it's hidden after applying floatThead().

I was able to temporarily fix it placing the caption below the table with CSS "caption-side: bottom;" property.

break up init into 2 phases. finish up init on mouse over or scroll

can be seen on the first demo

From the file header:

Licensed under Creative Commons Attribution-NonCommercial 3.0 Unported - http://creativecommons.org/licenses/by-sa/3.0/

It says Attribution-NonCommercial, but links to Attribution-ShareAlike. Which is it?

Hi,

i Have a Big Table it contains 50 columns now i am changing the browser zoom level to 33% the headers alignment is messed up. in the last column header is partly visible..

I ran into a case where I'm selecting my tables by class name in a javascript context and I end up getting double results for tables with which I have used floatThead.

This is because of this line, which copies my table's classes to the new $floatTable that you are creating: (https://github.com/mkoryak/floatThead/blob/master/jquery.floatThead.js#L204)

$floatTable.attr('class', $table.attr('class'));

I see one benefit with this: that my original thead style selectors do not need to be altered in my CSS. However, it does create an annoying scenario: when selecting these tables by class name from a javascript context, I have to purge these new $floatTables from my selections.

What are your thoughts on this? Is there a better way to mark the $floatTables such that this behavior could be avoided? Is it even worth it?

If the table has multiple rows in the header:

eg

<thead>
  <tr>
     (the title of the table)
  </tr>
  <tr>
     (the column headers in multiple <th>
  </tr>
</thead>

This plugin breaks - what if we want to include the column headers as part of the scrollable part along with the table title?

floated header has bottom corners rounded if the original table has rounded corners.

bottom corners should not be rounded.

This would be a great addition for mobile sites as table headers tend to go out of view much faster on that platform! I tested it on chrome ios and safari ios, also on some blackberries. None of them work.

It looks like bower.json was updated to release 1.2.2 but there's no tag in GitHub?

If we know them and we know that they will not change (as px or %) then we should pass them to the plugin and let it init much faster.

Hi,

I'm Having Issues with Extra tags.

My Scenario is
i have 15 columns in total.
i Have to show 10 Columns by default based on some condition so i'm hiding those columns and showing only 10 columns but this plugin is generating 15 tags so at the end i'm having lots of waste space and column alignment is also missed,

On my Macbook Pro Retina using Chrome, initiation of a 100 row/20 col table (page scroll) takes about 2 seconds and floatThead('reflow') even more. Ok, this is a big table, but I guess it is not uncommon. 250 rows takes 3-4-5 seconds, 10 rows initiates in an instant.

Snapshot of table (first rows):

Almost all the cpu is used by get offsetWidth (see simple cpu profile below)

I am using floatThead with DataTables and Bootstrap 3 and am finding that there is a 6px gap between the top of the floating header and the top of the viewport. See the attached picture:

I am calling dataTable and floatThead like so:

jQuery ->
  $('.results_round').dataTable
    bPaginate: false
    bInfo: false
    sDom: 't'
    aoColumnDefs: [
      aTargets: ['recalled_header', 'adjudicator_header']
      bSearchable: false
    ]

  $('.results_round').floatThead()

And I have the following (S)CSS:

thead {
  background-color: red;
}

table.results_round {
  td {
    white-space: nowrap;
  }

  td.mark_cell, td.result_cell {
    width: 1em;
    text-align: center;
    i.fa-heart {
      color: #1D9D74;
    }
  }
}

table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: #FFF;
}

(I made the thead red to show the issue).

You can see the text poking through the top of the header. The issue seems to be the presence of

table.dataTable {
  margin-top: 6px !important;
}

In jquery.dataTables.bootstrap3 which I am using from the jquery-datatables-rails gem. If I manually disable that rule in FireBug, the gap goes away, but there doesn't seem to be a way to override the !important directive. Is there anything which floatThead can do about this?

i removed setting the size on the table because it broke % table widths.
this broke the 2nd test case in big-table testcase

testcase:

http://programmingdrunk.com/floatThead/examples/border-collapse.htm

When you scroll down the page on this project's home page after clicking the button, the internal scrolling gets scrolled with the window. Also, if you scroll internally then the floating thead starts going in the opposite direction of scrolling.

Hi I am using bootstrap Sortable table using http://drvic10k.github.io/bootstrap-sortable/ this plugin & also needed fixed head for the same table, now I got the floated head but now sorting is not working, will you please help me with this.

There is some stuff in here that I want to eventually do.

simplify options object keys

i cant remember what some of the options are called. make them simpler and bump major version

Data attributes and plugin init

I am going to add the ability to initialize the plugin via data attributes

When using data attributes it would make sense to be able to init the plugin on when using overflow scrolling like this:

<div style='overflow:auto; height:100px' data-provide='floatThead'>
   <table>.... </table>
</div>

which would be the equivalent to this (in the current version):

$('table').floatThead(scrollContainer: function($table){ return $table.closest('div'); })

except that I am thinking that it makes sense to allow you to run the floatThead plugin on non-table elements, and doing so will make the plugin assume that this is the scrollContainer element. It will then find the first table element within that DOM element and initialize it with overflow scrolling.

Right now I throw an error if you run the plugin on non-table elements.

The alternative would be to support this kind of syntax:

<div style='overflow:auto; height:100px' id='my-container'>
   <table data-provide='floatThead' data-fth-scroll-container='#my-container'>....         </table>
</div>

Doing this will not introduce any 'breaking' changes but its not quite as nice.

How to add iscroll? The plugin has support?
Example:
http://lab.cubiq.org/iscroll5/demos/event-passthrough/

I have a table where I use FloatTHead on, however, in IE9 the columns get another size sometimes.
You can check this on http://www.jonkmanopleidingen.nl/planning

Sometimes it is incorrect at loading, some other times only after filtering another date.
If I remove the floatthead on it, it displays correct

needs to copy those over since people still use them

I have a table that can get very wide, dozens of columns and around 4000px wide, and am seeing issues.

• Many column headers are never visible, due to the way the width of the generated floatThead-container div is calculated and the use of overlay: hidden.
• Scrolling horizontally (by dragging the scrollbar, for example) often doesn't move the headers, scrolling vertically triggers that.

An additional issue, not with the header but the content, is that the rightmost content column is cutoff by the vertical scrollbar--that is, the rightmost 15px or so are overwritten by the scrollbar. On a Mac you may need to go into System Prefs | General and change the Show scrollbars setting to Always show in order to see this.

I've done minimal configuration, as shown here:

  var $table = $('.aggregate-records-table-view').find('> table');
  if ($table) {
    $table.css('table-layout', 'fixed');
    var scrollTop = $('#aggregate-records-viewer').offset().top;
    $table.floatThead({
        scrollingTop: scrollTop,
      scrollContainer: function() { return $('#aggregate-records-viewer'); },
      useAbsolutePositioning: false,
      cellTag: 'td'
    });
  }

Thanks for this plugin, it looks like it might solve a problem we have in a useful way.

A couple of questions I can't figure out from the docs/code:

• The contents that scroll up past the header are visible under/through the header, even if I set opacity=1; does the header needs to have a color other than white? (Image 1)
• The thead row moves a few (8-10?) pixels to the right when I scroll the body, but looking at the CSS of the #floatThead-table table I don't see any explicit styling to account for this. Image 1 shows that the body row cell contents are slightly to the left of the header row cell contents.

Note: The wrapper div for the table is absolutely positioned, and I'm passing useAbsolutePositioning: false in the initial options (passing true made the table invisible ;).

IMAGE 1

Having a problem with column alignments in IE11. We have verified same works fine in IE10. We're on the latest floatThead and using jquery 1.8.2.

We've tried adding the meta tag mentioned but that didn't have an effect.

If you set up a table with a caption and caption-side: bottom; The header is not at the top of the table when you scroll down.

Here is a jsfiddle: http://jsfiddle.net/PYVFd/

Otherwise a great library!

Thanks,

I've seen this in IE9, FF and Chrome:
I have a dynamic width table (table and wrapper width: 100%). If I maximize the browser on the screen by clicking the browser's resize button, then click the button again to shrink the browser to it's original size the whole table is no longer visible; it partially hides the last column.

If you click and drag the browser very slightly, the table will adjust to the proper size.

I tried playing with the debounceResizeMs value, but that didn't help. I also tried stripping out as much CSS as possible and shrinking the table's width to 90%.

http://jsfiddle.net/barryman9000/DxX2T/7/

Don't know if there is a specific problem on my end, but the replacement thead for the original table has a bigger height than it should. In my case thead has 24px, but the actual th, that has no borders, just padding, has 20px.

So, I changed the following variable in setHeaderHeight():
var headerHeight = $header.find('th').outerHeight(true); (instead of $header.outerHeight(true))

In initially thought to keep the bigger height, because it looks better, so I added the following line in the same function:
$floatTable.find('thead > tr').height(headerHeight);

We use JavaScript to dynamically calculate column widths in one type of table, so they get applied as td style="width: 123px". floatThead seems to overwrite this, when I inspect the elements in the inspector I see td style="width: %". Further, the colgroups injected do not pick up the widths set this way and instead have a width equal to 1/ of the table width.

<colgroup>
  <col style="width: 251px;">
  <col style="width: 251px;">
  <col style="width: 252px;">
  <col style="width: 252px;">
</colgroup>

<td class="column" width="%" style="padding-top: 7.8px; padding-bottom: 7.8px;">
  ... contents ...
</td>

I'm trying to implement floatThead and make it IE8 friendly, using the getSizingRow. The problem is, my table initially has all of its rows colspan'd, so it has nothing to work from.

Is it possible to reference another table's row (possibly hidden) which has the same column sizing? Or is there another way?

It seems when using this plugin for a table on a page $(window).height() no longer returns the correct value. If I were to guess, it seems like it's returning the total height of the entire page, not the height of the viewport. It's giving me the same result as $(document).height(). If I don't invoke the plugin, $(window).height() gives only the size of the current viewport.

This breaks some other code I have for testing visibility of table elements.

When the header is generated its z-index is above everything else so menus etc appear behind it. Any ideas how to resolve this issue?

In ie9 the column resizes to the width of the content in the first row. In IE8 it resizes to the largest width of the column.

I changed line 314 from

} else if (ieVersion == 8) {

to

} else if (ieVersion == 8 | ieVersion == 9) {

and it resizes correctly

The documentation http://api.jquery.com/outerWidth/ does not talk about using outerWidth(value) , just a boolean.

But with jquery 1.8 , it works and then the plugin is perfect thank you.

Come up with a style sheet that is recommended for use with Bootstrap 3

Hi,
I'm using bower to fetch floatThead, but after installing jquery and floatThead, I was seeing an error like:

_ is not defined, that appeared to be a underscore.js dependency.

I'm kinda new on using bower, but I think it would be great if dependencies were set in bower's file.

Thanks

The latest version doesn't work in IE8. When you run float head, the header dissapears. Check out the demo page in IE8