36051

Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page

Question:

I have a fixed header scrolling table with horizontal and vertical scroll bars, for which I can presently sort on each column <strong>but am unable to properly preserve horizontal position of the table when loading the page</strong>.

Using the following inline css I get scrollAmount from php from a hidden input whose value is from a jquery code and input it into the inline css

style="transform:translateX(<negative offset value of scrollAmount>)"

<strong>My question is how do I properly maintain scroll position for a table that overflows with a horizontal scroll bar using CSS and jQuery without waiting for the page to completely load / finish rendering?</strong>

<strong>Inline style</strong>

transform:translateX(-<?=scrollAmount()?>px)

<strong>jQuery Scroll Position Function</strong>

function setScroll(id_header, id_table) { $('div.'+id_table).on("scroll", function(){ //activate when #center scrolls var left = $('div.'+ id_table).scrollLeft(); //save #center position to var left $('div.'+id_header).scrollLeft(left); //set #top to var left $('#scrollamount').val(left); });

<strong>Hidden Input HTML Code</strong>

<input type="hidden" id="scrollamount" name="scrollamount" value=<?=scrollAmount()?>"/>

<strong>PHP Code</strong>

function scrollAmount() { if (isset($_POST['scrollamount'])) return $_POST['scrollamount']; return ""; }

Answer1:

The problem is that .scrollLeft() will change every time you scroll, so you're simply setting it to where it's scrolled to. You could probably find the position of the table <a href="https://api.jquery.com/position/" rel="nofollow">with jQuery</a>, set that to a universal variable at the start, and then later use $('div.'+id_header).scrollLeft(globalLeftPosition) to set it. Hope this helps.

Answer2:

Using the following code, I was able to produce a visually acceptable solution that keeps the table horizontally offset by the user's scrolled amount.

<strong>JS Code - Executes on document.ready() when table has finished fetching/loading</strong>

//Translate 0px, undoing the original translation $('table#'+ id_table).attr("style", "transform:translateX(0px)"); $('table#'+ id_header).attr("style", "transform:translateX(0px)"); //Scroll left to the desired amount as defined in the hidden input `#scrollamount` $('div.'+ id_table).scrollLeft($('#scrollamount').val()); $('div.'+ id_header).scrollLeft($('#scrollamount').val());

<strong>HTML / PHP Code - Fixed Header Scrolling Table (Header and Table Body)</strong>

<div class="summary_header"> <table id="summary_header" border=1 style="transform:translateX(-<?=scrollAmount()?>px)"> ... <-----Table Header Definition </table> </div> <div class="summary_table" style="overflow-x:scroll"> <table id="summary_table" style="transform:translateX(-<?=scrollAmount()?>px)"> ... <--Table Body Definition </table> </div>

Recommend

  • Bundled scripts not working MVC
  • Forcing a context switch from the userland on Linux?
  • How to read data from socket connection - android
  • css Star-rating html
  • javafx 3d performance large data set
  • Error building image: Error building rlang - not available on R 3.5.0 (Uploading shiny)
  • How to replace TouchesBegan with UIGestureRecognizer
  • How to align an image side by side with a heading element?
  • How to wait for all async tasks to finish in Node.js?
  • Rails 5 - Google Maps - Javascript error - initMap is not a function - fixing one js issue creates a
  • div fade-in when window is scrolled a certain distance from the top
  • How to define an array of floats in Shader properties?
  • What's the name of this finding square root algorithm?
  • A new chart every sheet
  • Splash Screen will not display
  • How to render a pixel array most efficiently to a window in c++?
  • Clear activity stack before launching another activity
  • Cast between interfaces whose interface signatures are same
  • C# program and C++ DLL compiled for 32-bit system crash on 64-bit system
  • Loading .coffee files via a view in Rails
  • Create DicomImage from scratch using Dcmtk
  • With Hadoop, can I create a tasktracker on a machine that isn't running a datanode?
  • Ajax Loaded meta Tags
  • Q promise. Difference between .when and .then
  • Xamarin Forms - UWP Fonts
  • QLineEdit password safety
  • Display issues when we change from one jquery mobile page to another in firefox
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • jQuery tmpl and DataLink beta
  • Unanticipated behavior
  • Arrays break string types in Julia
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • How to load view controller without button in storyboard?