I have a table that has a fixed header and a scrollable body. I want to know the scroll position in the table so that I can reference it on postback and set it to where the user was before postback. I would prefer JQuery to do this, but Javascript is fine too. Im not sure how much code to post here because Im not sure if the problem is that I just dont know the code to do this, or the code I have (css) is interfering with the solutions I have tried.
Any ideas where to start? Is there a method that does this? Ive tried putting this (table style="overflow:auto; height:150" onclick="alert(this.scrollTop)") in the table but it always returns 0.
Ive also tried various JQuery calls as well. They all return 0.
As far as I know (and I am dealing with this kind of stuff everyday), native tables can't handle scrollbars as your describing. I think that probably, your table actually contains a div or other container, which is actually scrolling the table cells. Something like this:
http://jsfiddle.net/mBDjx/46/
I recomend you to inspect your code using the browser developer tools (usually F12) and check if it is only a table, or another element the one which is generating the scroll.
If you realize that is is a div, just check the .scrollTop attribute of the div instead of doing it on the table :-)
Hope it works!
It is the tbody that is scrolling and that is what you need to test. this.scrollTop is referring to the table , and the top of the table is not changing position.
Related
While working on a large list of tabular data that needs an easy sorting/filtering system, I discovered the Isotope library, which seems to do exactly what I want, and provides a lot of nice visuals and functionality. I'd like to be able to sort and filter table rows using Isotope, and I've come up with a basic demo that seems to work. However, a few bugs are present:
I'm using the <thead> section for filters and row headers, so I'm applying the Isotope selector to the <tbody>. However, when Isotope is initialized with the tbody as a container, the table cells in each row lose the width assigned by the table formatting. This isn't a huge deal, as I can set column widths manually if I need to, but it is rather annoying in the current context.
The rows are placed outside the table, in the top left of the table's container element. The relative positioning on the tbody element seems to not affect the rows' absolute position style rules (applied automatically by Isotope) as it would with a normal div. Normally, the absolute positioning would be relative to its container element if the container was positioned using either absolute or relative positioning, but this doesn't seem to be the case here.
The table rows are being filtered properly, and the Isotope library is properly applying animations and styling with those exceptions. If at all possible, I'd like to keep the use of tables, as the people maintaining this page will be doing so through a CMS, and don't know enough about HTML or the WYSIWYG editor the CMS uses to consistently produce any HTML structures beyond a fairly basic table. Does anyone have any advice on fixing these two issues? Thanks!
Edit: As an addendum, I've solved the initial problems I was having. Turns out, the tbody element does not accept a position: relative or position: absolute attribute, so the table rows were not being placed properly. Setting the whole table to position: relative solved the main placement issue, though the rows were then moved to the top left of the table. I solved this issue by offsetting the table row top attribute by the height of the thead element in Javascript, since without Javascript the display is normal.
This works beautifully in Firefox, Chrome, Opera, and Safari. However, IE 7, 8, and 9 all have rendering issues--and worse, they're all different rendering issues. IE9 refuses to place the table cells with the correct offset, IE8 doesn't show the rows at all, and IE7 seems to interpret the whole situation to mean "EXPLODE!". At least the main problem I encountered was solved!
I've integrated Wesley's style suggestions to implement Isortope -- a jQuery plugin using Isotope for table sorting.
It addresses things like the column width issue by automatically converting the table's generated column widths into inline styles. That way, the final table displays like the initial one.
Simple demo here.
Download here.
I would like to write a java script that allows me to see the table headings of each column when at least one column of the table is visible. So I want an "excel-like" effect, when the user scrolls down a big table.
So I have to be able to check if an element is at the screen of the user at the moment. When he scrolls down long enough, the element "disappears" from his screen. How do I check that?
The only function I found was goog.style.isElementShown, but thats not what I want.
In jQuery it seems to be .scrollTop().
Try goog.style.getVisibleRectForElement.
If you look at jQuery source code, you will see that .scrollTop() just unify access to element/window scrollTop https://github.com/jquery/jquery/blob/master/src/offset.js#L264
For elements, you can just use scrollTop.
But scrollTop is probably not what you are looking for.
I've got my GridView inside another Panel and I got scrollbars but GridView is to big even with paging. So user needs to scroll down to scroll horizontal (to see horizontal scrollbar).
How can I add any horizontal scrolling trick for my GridView in the Panel. Maybe something from javascript ? My js knowledges is still being poor.
I really hard thinking on what that could be, maybe floating horizontal scrollbar ?
Thank you.
This can be done with the CSS Overflow property, see: http://www.w3schools.com/Css/pr_pos_overflow.asp
You may be able to add this to your asp Control, or see how the <asp:Panel> is rendered (I haven't used WebForms for a while, but I think it's a HTML <span>) and give it an appropriate element Id/class and set the CSS property in a seperate stylesheet.
I think this is what you are searching for? :
scrollLeft
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.
I'm trying to create a file listing a la windows explorer in HTML/Javascript. As such, I'd like the first row of the table, which contains the headings for all the columns, to be visible even when the columns are scrolled.
I've tried a few options involving placing the headings in a separate table, but all have failed for primarily one reason - when the file list is scrolled horizontally, the headings table does not scroll with it.
Hence, I'm essentially looking for an element linked to another in such a way that it scrolls with the other horizontally, but not vertically.
I realize many will think I should be using css and not tables, but this is moot as even using css I can't solve the problem of wanting the header bar to scroll with the files horizontally, but not vertically.
Any help you can offer would be greatly appreciated.
My suggestion is to use Javascript. Hook to the onScroll event of both scrollable elements, and on the event update the scrollLeft property of both elements.
var tableHeader = document.getElementById('tableHeader');
var tableBody = document.getElementById('tableBody');
function updateTableBody(e){
tableBody = tableHeader.scrollLeft;
}
function updateTableHeader(e){
tableHeader = tableBody.scrollLeft;
}
tableHeader.addEventListener('scroll', updateTableBody, false);
tableBody.addEventListener('scroll', updateTableHeader, false);
Of course, this is not bulletproof and could be optimized, but it will give you and idea and hopefully a good start.
NOTE: Make sure both element have the same dimensions, otherwise, the scroll will have a weird offset.
Unfortunately, this isn't available as a CSS-only solution. CSS has some features that theoretically should be capable of being used to scroll a TBODY, but browser support is far too inconsistent.
One solution not mentioned yet is the Ext JS library. It does a LOT more than just scrolled tables, and you'll have to review the licensing to see if it will work for you, but their grid object is the most robust rich-UI-like table replacement I've seen.