4

I want to sort a table that can be scrolled horizontally as the table is wider than the browser width. I am using PHP/JS but not using AJAX.

The problem is when I scroll to the right to sort on the rightmost column, I need to preserve the horizontal scroll position when sorting.

What I did was to fake the position by first using JS to scroll to the position. But that happens after page load. So I "see" translation.

So, to fake it, I used css to immediately translate (transform) the element to the right. Then when page loads I immediately translate to the left in JS (using the css transform, to restore position) then I use JS to scroll to the desired position.

Firefox and Edge do not have an issue doing this and don't show any intermediate translation flicker or artifacts.

Only my IE 11 shows the artifact of translation on page load.

How do I suppress this flicker effect in IE so the user only sees the table being sorted at its desired position?

I have provided some code in an earlier post

How do I prevent page flicker in IE which does not appear in Firefox?

Community
  • 1
  • 1
Vahe
  • 1,699
  • 3
  • 25
  • 76
  • I need a clean way to preserve horizontal scroll position every time the page loads to prevent jQuery from jumping to scroll position on the page load. – Vahe Oct 15 '16 at 22:32
  • Hi Vahe, isn't it possible to visually hide the table until right after you've translated it to the left in JS? – Lille Hummer Nov 01 '16 at 21:11
  • If you provide some more code in your question or even a working example I can work out a demo for you. – Lille Hummer Nov 01 '16 at 21:13
  • @Lillie, thank you for the prompt response! I was considering a variant of that by using some sort of output buffer mechanism like in PHP, unsuccessfully, however. If I hide the table, won't the flicker remain. – Vahe Nov 01 '16 at 21:14
  • @Lillie, I will be happy to. Give me some time to post a minimal verifiable example. – Vahe Nov 01 '16 at 21:16
  • 1
    If you use for example `opacity: 0;` on the table and change that to `opacity: 1;` after you've translated the table you shouldn't see the flicker. – Lille Hummer Nov 01 '16 at 21:17
  • 1
    Check out this answer to another question. It may be a better workaround for your issue: http://stackoverflow.com/questions/7577897/javascript-page-reload-while-maintaining-current-window-position – Sub 6 Resources Nov 01 '16 at 21:18
  • I was unable to create a plunkr/fiddle since this relies on server side fetching of a MySQL table. So instead I have provided a full link to my webpage showing the issue... Please see http://vahejabagchourian.net/ActionAIM/actionitems/allactionitems.php and sort the table by header in Internet Explorer to see the flicker. – Vahe Nov 03 '16 at 05:13

1 Answers1

1

I am not sure if you are looking for jquery or css solution so I will post what I have seen as a workable css solution..but the jquery being the most used. I always prefer css when possible where styling is considered.

<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
<![endif]-->
norcal johnny
  • 2,050
  • 2
  • 13
  • 17
  • thank you for the response. I have tried incorporating the IE fix previously but the flicker still remains. I do not mind which solution is provided (jQuery or css). – Vahe Nov 03 '16 at 14:24
  • I tried a more "drastic" approach. Since the meta tags did not work in my browser IE 11 (HTML5), I made use of animate.css to fadeIn the table and suppress the artifacts of translation. I am open to other solutions, however. – Vahe Nov 06 '16 at 20:20