ansaurus

Question

Table not refreshing properly after jQuery manipulations, in Google Chrome

Answer 1

+1 A:

NEWER ANSWER:

I was able to workaround the problem on Windows by just delaying the reset by one "frame" of execution. Wrap the else condition in a setTimeout:

                setTimeout(function() {
                    floatingHeaderRow.css("visibility", "hidden");
                    floatingHeaderRow.css("top", "0");
                }, 1);

OLDER ANSWER:

I don't think the problem manifests on Chrome for Windows (which I just tried). However, it's possible that switching to position:fixed instead of position:absolute would both perform better and workaround your issue. Just use your interval to check if you would have needed to scroll and set position:fixed, else set back.

sunetos 2010-07-21 14:57:48

Thanks for the suggestion. I was thinking maybe `position:fixed` would make horizontal positioning more challenging--for example, handling left margins, horizontal scroll. But perhaps it wouldn't be too difficult.

Craig McQueen 2010-07-21 23:50:25

I can recreate the problem on Chrome for Windows (Windows7/IE8). However, I can only recreate the problem on the first table and not the second (thinner) table.I also noticed that sometimes, on the first table, depending on my scrolling speed, I can get the header to only display part of one line so that the right column header reads only "table 1 col" and even then only half of that line is visible.

Alison 2010-07-24 16:02:38

I've checked on Windows XP, and I'm seeing it there also. However, it's more noticeable in Linux. Also more noticeable on the first table, as Alison said.

Craig McQueen 2010-07-27 10:27:53

I updated the answer with a new workaround.

sunetos 2010-07-27 19:43:26

My fix is simple, and it definitely solves it on Windows. Can you respond saying if it worked for you?

sunetos 2010-07-29 14:40:01

Yes that does seem to work-around the issue. On Linux, there is also some refresh issues when scrolling down on the first table, so I wrapped the entire function in the `setTimeout()`, and that fixed that too. It seems to make the scrolling a little more sluggish, but not by much. Definitely an idea worth considering further.

Craig McQueen 2010-07-30 09:21:13

I've noticed the [Drupal implementation](http://drupalcode.org/viewvc/drupal/drupal/misc/tableheader.js?view=markup) uses `position:fixed` and looks good in Chrome. So I also think your older answer has merit.

Craig McQueen 2010-07-30 09:22:40

Thanks; if the jerkiness/sluggishness gets to you, position: fixed is probably the better long-term solution. The browser will update the display much more frequently that way than with a javascript event handler on scroll.

sunetos 2010-07-30 14:56:33

Answer 2

A:

The solution is much simpeler, Chrome has problems with the fact that you have 2 's in your table header.

<thead>
<tr class="tableFloatingHeader" style="position: absolute; left: 0px; visibility: hidden; top: 0px; ">
    <th>table1 col header</th>
    <th>table1 col header</th>
</tr><tr class="tableFloatingHeaderOriginal">
    <th>table1 col header</th>
    <th>table1 col header</th>
</tr>
</thead>

remove one, and your problem will be solved

Nealv 2010-07-28 15:32:59

If I remove it, that would defeat the point of my [answer](http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table/1041566#1041566) to my [original question](http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table).

Craig McQueen 2010-07-28 23:24:06

I still don't see why one table needs 2 header row, you can implement a jquery scroll event handler. the add the scrolling position to the header row position when scroll position > header.position

Nealv 2010-07-28 23:38:07

ansaurus

tags:

views:

answers:

Table not refreshing properly after jQuery manipulations, in Google Chrome

related questions