Set number of rows based on not letting the page scroll (jquery) - javascript

We have a page with multiple content areas, in one of which we build a table from a result set. The user requirement is that the page not scroll. If we fix the number of rows to now allow scrolling at our preferred screen resolution, it looks great at the preferred resolution, but at lower resolutions the page scrolls. If we fix the number of rows so that the page does not scroll at our lowest supported resolution, we end up with a lot of wasted space at our preferred resolution. We have done some things with the viewport size (get viewport size, subtract all fixed elements, divide the result by normal row height to calculate number of rows to display), but these do not take into account that some of the rows wrap to be two lines. When that happens, we push down and end up scrolling at lower resolutions. Is there any way to dynamically fill an element with rows until it is full but not go past the point where the element would be forced to scroll?

Keep appending rows, all the while checking $('table').outerHeight() until it's greater than $(window).height(), then delete the last row.
Call this window fitting thing again on window resize events.

Related

Is it possible to manipulate the scrollbar thumb height regardless of the content?

so this one's a bit tricky. For context, I'm working on a table using https://www.ag-grid.com/react-data-grid/ and I can know in advance the size of the sample I will have to show.
Anyhow, I need to be able to show the user the whole sample of records just using the scrollbar. What I mean by this, is that I don't want to load 100k records, but rather calculate the corresponding height of the scrollbar thumb, based on said number of records, so that if I have 5 records, there should be no scrolling, but if I have 100k records, then the scrollbar thumb should be quite small.
I was able to achieve this behavior by pre-loading N records to the table, however this isn't desirable because of the performance impact of loading an 100k array. Another alternative would be to resize the table knowing the size of 1 row, and multiplying it by 100k.
So to sum it up: is there a way to manipulate the scrollbar thumb size ignoring the table content? Maybe doing something funky with the shadow dom, or resizing the table size.

Scrollbar 'representation'

I have a scrolling tbody in my html page. For certain reasons (mainly performance reasons) I only show 25 rows in that div instead of the 1.000 or 10.000 rows that exist in the underlying data variable / DB.
Right now I do something much alike to what DataTables.net does; I rotate the contents of those 25 rows on scroll event. Works fine.
One thing that annoys me though is that for instance you have 1000 rows, 25 showing: the scrollbar moves just like always but only takes in to account the 25 rows (because it only sees those, duh ;-) ).
DataTables' solution though show a scrollbar that moves down according to those 1000 rows so it moves a lot slower and dragging it all the way down really goes to record 1000 instead of 25.
Does anyone know how to maybe influence the 'presentation' of the scrollbar in a way that DataTables are able to? (I've googled a lot but no dice)
I use html5, Javascript / jQuery and PHP.
You can set the length of the scrolling container depending on the total number of rows, then dynamically load the visible rows into view, when the user stops scrolling.
This means that you need to know the exact height of one row, and you'll have to manually position the rows in the container. Sorting the rows might be an interesting problem then.
To make that all a little easier, it might perform well enough if you add only the 1.000 rows, without the data, then dynamically load the data.

Looking to dynamically set a min width on a html table if the column headers collide

I am trying to make this table that I am working on more responsive and visually appealing. I am using react.js. My table component has varying number of columns based on the data, so some tables I am finding it difficult to fit the information on the page without having resorting to horizontal scroll, or possibly things like the headers and the icons in the th's collide with one another. Initially I set a min width for the table so that the headers don't collide but that automatically made the table wider than it had to be causing immediate horizontal scroll.
Got this image from https://css-tricks.com/accessible-simple-responsive-tables/, looking to have the table initially with the squish method (no minimum width, just 100% width), but try to determine what min-width would be needed for the table not to collide on itself with a horizontal scroll. So maybe dynamically set a media query (if that's possible?) or open to other suggestions.
Here I set a minwidth for the table but even at full screen it goes straight to a horizontal scroll.
Here I removed the min width made the table 100% width and this would be ideal at full screen but when there are more columns or at smaller viewpoints it causes it to squish up to a point where it's unreadable.
Here I have a table with even more columns but even at 1461px screen width it starts overflowing. I also need to avoid having to break words in the headers.
Was hoping to learn to see if
There was a way to know at what screen size the column headers will overflow
If there is a way to dynamically set a media query to allow a min width at that point for horizontal scroll?
Or if I am just going about this the wrong way if there is a better way to address this? I would like to avoid collapsing columns if possible.

Position variable-size elements on screen

Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link

Google+ Style Image Gallery

I'm trying to emmulate the following:
Any ideas how? Basically all photos have the same height and photos are arrange/cropped/resized dynamically to fit perfectly on rows so there are no jagged sides left or right. If you resize the browser window it resizes the photos as well to fit. I have tried isotope and jquery masonry and neither give me this effect.
I just implemented this very thing. Here's how I did it:
When the page loads, I measure the available width of the target container (the container where my images will live), and call this maxWidth
I make an AJAX call, passing the maxWidth up to the server
I determine my list of gallery images to display on the server, and process each one by one
During iteration of my list, I keep adding images to a row, the row's length being the maxWidth available (which I passed up). Once an image overflows the maxWidth, I calculate the overflow amount
I take that overflow amount, divide it by the number of images in my row, and subtract that value off each of the images in the row (so one image doesn't get its width reduced too much)
I repeat this for each row, so each row adds up to exactly maxWidth
Some things I had to consider:
I had to take into account the width of the margins I wanted in between each image, and factor that into the maxWidth accumulated value when processing each row.
We needed a corner stamp image (an image that was larger and was fixed in the top left corner. This image encompassed two rows, and was wider than my other thumbnails. I had to calculate a different maxWidth for the first 2 rows as a consequence.
I had to recalculate the dimensions when the browser was resized. Binding to the resize event of the window caused multiple AJAX calls during dragging. I had to fix the resize event so it only fired when done.
Overall, the image gallery turned out quite well. He's a screenshot.
the fluid grid system will help you in such a case:
http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Categories