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.
Related
I decided to use a card UI in a project and checked a few Masonry-like libraries, it seems that all of these use position: absolute for arranging elements.
IMO this method is not the right tool for some purposes, for example my cards are expand/collapsible (like Google plus post comments) and although this can be animated in Masonry, it causes complete rearrangement in elements (it doesn't simply push elements down, elements jump from column to column).
I took a look at G+'s markup, they dynamically insert 1, 2 or 3 DIVs as columns depending on screen width (for responsiveness) then fill this columns with elements. In this way elements have their normal position and behavior, so if you need to add, remove or expand/collapse just insert the element into the DOM or change the height and browser does the positioning.
They also take care of overall height, so in the next Ajax loading, it calculates and distributes elements in columns in a way that columns height grow at nearly same total height (just like Masonry)
Do they use any specific library?
Is there any responsive framework/library that work in similar way?
I had the exact same problem and I think Salvattore is exactly what you are looking for.
It automatically creates some columns and puts all your grid elements into the right column.
The styling is then totally up to you, so no need for any position:absolute.
In fact thats all the styling you need:
.size-1of3 {
width: 33.333%;
}
Check it out: http://salvattore.com
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.
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.
// Major edit, sorry in bed with back pain, screwed up post
One of the ad agencies I code for had me set up an alternate scrolling solution because you know how designers hate things that just work but aren't beautiful.
The scrolling solution is applied to divs with overflow:hidden and uses jQuery's scrollTo(). It's a set of buttons top and bottom that handle moving the content.
So, this is married in places to their CMS. What I have not been able to sort yet is how to hide the scrolling UI when overflow:auto would not have been triggered by the CMS content and the buttons are not needed.
The divs have set heights and widths. Can i detect hidden content? Or measure the div contents' height?
Any ideas?
So you want to get the height of a hidden element? I found this post maybe it is what you are looking for.
Its using jQuery, but the concept is the same. Hope this helps!
Metropolis
I hope i am mistaken, but you would need to emulate overflow by setting properties using some js, then you can get these values using getAttribute or your own method. Otherwise when you set overflow to auto, then the browser will be doing its own thing and the only value returned as a property of overflow would be a string like 'auto'.
Can you explain this better? You want to hide the scrollbar of a div set to overflow:auto when it doesnt have enough text to overflow? Browser does this for you.
You want to hide the scrollbar of a div set to overflow auto when it is scrolled down to some point, but you arent looking at it or hovering or something? That will be sort of complicated.
If you want to know if a div has overflow set to something, you just do:
object.style.overflow
and it will give you a string.
possible values:
visible
hidden
scroll
auto
inherit
you can set overflow the same way
http://www.w3schools.com/css/pr_pos_overflow.asp
from what i understand now is you have these divs with hidden scroll, but some graphic designer custom scroll bar and you use scrollTo to do the actual scrolling. BUT you problem lies when you dont have enough data to actuall need a scrollbar, but your graphic stuff shows up anyway, so you want to hide it.
so the real question here is how do you get the height of content? you want the property offsetHeight, but im pretty sure its still IE only.
What do you mean by CMS?
Yes you can access the div's content height, since you can access all of the div's children in JavaScript. (Sorry for not including example. I haven't work with pure JS in a while now so I don't want to point you in the wrong direction.)
Doing this, you'll kind of be able to "detect hidden content" and then be able to do what you actually want to do.
About your first question, I doubt you can control scroll bars once you've set overflow to auto.
Using jQuery height() on a div containing the content I am able to show/hide the user interface as needed based on whether height exceeds the CSS height of the div with overflow:hidden.
Is it possible to programatically access a Div's scrollbar handle and change its size?
--Edit: Is there a mootools plugin for something like this?
I'm trying to implement a lazy pagination mechanism, where a div's content will be updated onscroll, but I'd like the handle on the scrollbar to show the final size. Meaning, if there will be only 10 elements in the div, the handle will be rather large, and if there will be 1000, the handle will be as small as possible, even if the user hasn't loaded all the 1000 elements yet.
I found this site, but I want to avoid using this class.
Thanks!
You would have to use a custom solution for something like this. You won't be able to change the actual native scrollbar height. The plugin you referenced is more along the lines of the route you need to go to acheive the desired results.
Another solution you could implement would be to show the number of results via some other visual method, and not the scrollbar. If you are showing 75 of 100 elements, you could make a fixed div span 75% across the screen.
You could put an empty div inside your scrolled element, and set its height dynamically to something proportional to the actual content size.
You don't get any interface to the scrollbar itself from JavaScript, but it sounds like you can certainly get what you want simply by making the scrolled content as tall as 1000 elements. To reduce the slowness of scripting a thousand items you could replace the above-and-below-the shown-items items with a single top and bottom margin of the same height as that many items, and catch the scroll event to fill in new items to replace them.