How can iScroll5 or HTML5 be used to allow touch/momentum scrolling with these attributes:
A Table with many items, and each item has many columns
Scrolls vertically and horizontally
Header is fixed vertically, but header scrolls horizontally with columns
In this scenario, vertical scrolling would affect which list items are displayed, and horizontal scrolling would affect which columns are displayed for the visible list items.
To see an example of this go here and click on "100" to show 100 records:
http://www.tablefixedheader.com/fullpagedemo
This example works correctly except for the scrolling does not have a touch/momentum/flick action.
Related
I have a large (some ~30 columns, 10k+ rows) data set I am displaying in a Tabulator table. The table has 100% height set and vertical scroll runs very smooth with the virtual DOM. But when I scroll horizontally (my columns span some 3-4 times the screen width on my resolution, and this is intended), the scrolling is again very smooth but the column headers (including their filter boxes) do not follow the scroll immediately, instead they sort of lag behind. When the scroll motion stops, the headers "catch up" in a second or so.
I guess this is because the table component supports sticky ("frozen") columns and therefore their position gets adjusted on-the-fly based on scroll events from the table content, but since I am not using such columns, I was wondering if the laggy / jerky movement of the headers can be disabled and have the headers directly scroll along with the table rows?
I have a page where there are 3 panels adjacent to each other with width 4-4-4.
I am looking for a solution by which if any of the columns if minimized/collapsed.... then the other 2 panels could resize itself and take the space left behind by the collapsed panel and make their width 6-6.
Same again if of the remaining 2 panels if any of them if collapsed the left over panel should resize itself to take over the whole page 12.
Is there any javascript library available which gives me a optimum solution for this?
We have this weird issue with fixed elements.
We have a site, where we display data in the table. Above the table, we have a fixed header and on the left side of the window, we have a sidebar. Now when sidebar is opened we move table 544 px to the right with tranformX.
Issue is present in next conditions. When width of the table is smaller then window width (no horizontal scrollbar) and then we open sidebar and move table right for 544px, and with that horizontal scrollbar is present now, which is ok. The problem is when we scroll vertically now, because it moves fixed elements up for 47px(height of scrollbars).
Does anyone have any clue, on how to fix this issue.
At the moment I'm creating a responsive web site so that it works on mobile devices as well.
The design is of such a nature that I hide a vertical menu that also contains a facebook like button when the screen width is less than 480px.
When the width is less than 480px I then display a horizontal menu (that was hidden) that also includes a Facebook Like button for the same page.
In other words, when screen width is greater than 480px then a vertical menu is displayed and the horizontal menu is hidden. When width is less than 480px the vertical menu is hidden and the horizontal menu is displayed.
The above scenario means that there will be 2 Facebook Like buttons on the same page with the same URL set.
Will this create problems?
Is there a way in jQuery Mobile to create a layout with dynamic multiple columns that is scrollable horizontally. (Something like a infinite carousel / picture slideshow but with DIVs and not images.)
You may want to take a look at iScroll-4. This can be used for vertical and horizontal scrollers