How to accomplish floating the tables header when the user scrolls? - javascript

Here are my use-cases:
I want to be able to float the tables headers in the page when the user scrolls down in the page. the headers should remain over the table until the user scrolls past the table. This should work for both for vertical and horizontal scrolling. It should also work after the user resizes the window and support ie8.
Bonus:
I also need to be able to do the same thing inside of a container that has overflow:scroll and a table inside.
Does anyone know of a plugin that tackles both of these use-cases?
edit: I should say that datatables is too big of a plugin for this. It does not support tables with complex headers that I use, and like i said, its 100+ K of code that I would rather not include for this feature.

Related

How to create fixed table headers using pivottable.js

I am using a JavaScript plugin (pivottable.js) to create pivot tables to display large data on a django site. I want to add a fixed/sticky table head that stays at the top of my div while I scroll down.
Due to the creation of the tables in the JavaScript I cannot easily select the pivot table headers.
Does anyone know of anyway they have accomplished this in the past? A large percentage of my users use IE so it is critical it works on that as well.
floatThead is what you need to look at http://mkoryak.github.io/floatThead/
According to its website:
jquery.floatThead is a floating/locked/sticky/fixed table header plugin that requires no special CSS and supports window and overflow scrolling.

Variable column page

Alright here is my dilemma. I have a bunch of divs with the same width
(but variable heights). I want them to be displayed on the page one on top of the next UNTIL the bottom of the page, if there is space for a second column of these items on the page without scrolling then I want it to continue in the second column, third column, etc. If there is no available space left on the page then it goes off the page requiring a scrollbar to see things underneath.
This would essentially be akin to having float:top if it existed (which it sadly doesn't). Also I want this to change dynamically with the window size. If I shrink my window to one column width I want the data to go straight down one column. If I resize to two columns wide then it divides the data between the two columns.
Lastly the order of the divs MUST be preserved. I am willing to use jQuery and CSS including CSS3 to do this, anything else and I will have to look at it. I am sure that if I worked at it I could write some custom jQuery script to do this but I can't help but feel like it should be easier. I have looked at css3 columns but couldn't get them to do what I want so if they can do it the be specific as to how they do it.
Have you heard of media queries? At specific break points you can apply different CSS rules, so you could change the layout of your columns.
Have a read.

How to mimic a swipe without a mobile device

In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.

Large contents within container size

I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.

Horizontally scrollable table column

I would need to build a html table that has a horizontally scrollable column. The scroll should be placed in the column's header.
My first question is: do you know any jQuery plug-in that is able to do this?
My second question: is this possible using a single table? I've heard that in order to do this you need to use multiple synchronized tables that look like a single one from the user's perspective.
Any idea/advice would be welcomed.
I've only seen something like this using jqGrid, but that was two tables (the master table has a second scrollable table within it). I'd like to know a plugin for this as well...
I would do as you suggested and use 2 containers. They'd both be set to overflow:scroll and have a set width, but the top one would simply contain a div that you can set to be the same width as your table. You can then bind to the "scroll" event in jquery, and set the scroll position of the divs to match each other in that event. Honestly I haven't tried this so I don't know how reliably that event fires, but in theory it should work.
Alternatively, you could do without the standard browser scrollbar and write your own scrollbar that uses javascript to set the position of your table in the overflow:scroll div. If you want draggable behavior (not just left/right arrows), it could be somewhat difficult, but wouldn't be impossible.

Categories

Resources