Always display text in high table cells on top when scrolling - javascript

In my project I have a table. In the leftmost column groups are displayed; on the right the details. Sometimes there can be many entries in a group, so that the group may not fit completely on the screen. Since the text in the left column is displayed at the top, it is possible that the label disappears when scrolling.
I've added an example picture for you. The red area represents the viewport. If you scroll down, Group 1 should stay visible until the user scrolls down further.
Is there a way to pin the text to the top of the screen using CSS or JavaScript in such a way that it stays at the top while scrolling, as long as the cell is still in the viewport?

I found a solution. First, you have to put the group labels into a '' element. Then add bootstrap's 'sticky-top' class, or the following attributes:
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
}
An example would be:
<table>
<tr>
<th rowspan="2">
<span class="sticky-top">Group</span>
</th>
<td>Detail</td>
</tr>
<tr>
<td>Detail</td>
</tr>
</table>

Using "position: sticky;" can help you, I guess.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
<div>
<div class="sticky">Im sticky!</div>
</div>

Related

Scrolling with javascript and 'position: sticky' div

I have a react app that basically is a container with 2 columns. The left column is a list and the right column is a div with position sticky(It's actually a map with pins. Must be fixed on the screen). Each list item is a clickable in the right column. When the user clicks on the title, the screen must be scrolled to display the current list item on left column.
The problem is that when the screen scrolls to an item at the end of the list, the right column also scrolls and doesn't stay fixed.
I would like to keep the right column always fixed when the user clicks on some title, regardless of the element's position in the left column list.
Any idea how to fix it?
https://codesandbox.io/s/scrolling-with-react-yq81r
I change a couple of code on CodeSandbox.
.right {
background-color: #cacaca;
}
.right ul {
top: 0;
position: sticky;
}
If I understood correctly this gonna work.

Display an Image by Text rollover

I want to display an image when i rollover an text... like the "title" attribute in a small box at the mousepointer...
It should work without big extras or additional installations.
Thanks for the help!
The title attribute when hovered shows the text, not interpreted HTML.
One way you can show an image when the cell is hovered is to have the image sitting in the cell all the time but starting off with display: none.
With CSS you can set a different style when it is hovered, its child img element can be shown then and in this snippet it is shown with absolute positioning so it does not move adjacent elements.
This is just a start to give some ideas of how to get going on this. Obviously you will want to play with size and positioning of the tooltip to suit your use case. For example, is this text definitely within a table cell or just a div somewhere?
td img {
display: none;
}
td:hover img {
display: inline-block;
position: absolute;
z-index: 1;
}
<table>
<tr>
<td colspan="3">Castrol EDGE 5W-30 LL<img src="https://i.stack.imgur.com/63PQA.jpg"></td>
</tr>
</table>

CSS calc() using width and position of element

I have a table, where I would like to move element div (last div) to the right.
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
...
<th>
<div>
<span></span>
<span>
<div>Move me!</div>
</span>
</div>
</th>
<tr>
<thead>
The div has following CSS and it's important, that I can't change postion to relative
{
position: absolute;
top: 0;
width: max-content;
}
I would like to add property left like this:
left: calc(100% -(position+width)),
where postion is currently x-coord of div and width is the width of the div.
How could I access this values?
PS. Currently my div is placed in such way, that it crosses the border of main div and it leads to appearing of scrollbar. I would like to avoid this by moving div to left with negative value (for example if I assign
left: -20px;
it is moving to the right and I achieve whta I want, but I can't assign it to certain value, because the width of div always changes, ,so it should be dynamically calculated)
What could be possible soultion with Javascript? How could I extract the postion? Right now offsetLeft is 0...
What about right: 0; It should stay in your main div while positioning itself on the right side of it (0 pixels from the right side).
Can you post a codepen with an example so we might help you better :)

Autoscrolling a table

I'm working on a table which, depending on user data, may be too wide to fit on the display, so we made it "overflow: auto;".
I want to be able to automatically scroll the table so that a certain named cell -- say: ('cell_' + row + '_' + col) is visible.
How do I get this to happen? I've seen a couple of suggestions here involving jQuery but couldn't get them to do anything.
I don't need smooth animation, in fact I'd rather there wasn't any as I find it's a distraction for the users.
Check out this fiddle:
JavaScript
var container = $(".narrow");
container.scrollTop(0);
container.scrollLeft(0);
container.scrollTop($("#cell_3_3").offset().top - container.offset().top);
container.scrollLeft($("#cell_3_3").offset().left - container.offset().left);
HTML
<div class="narrow">
<table>
<tr>
<td id="cell_1_1">1. Content ...</td>
.....
</tr>
.....
</table>
</div>
CSS
.narrow {
max-width: 100px;
max-height: 200px;
overflow: auto;
}
UPDATE 1
New fiddle to demonstrate better. Looping through all cells.

Horizontally scrolling table with fixed first column

I want to create a table with a fixed first column so that when the user scrolls horizontally, the first column stays where it is, making it easier to interpret the data in the table. I gave the first column position: absolute but the issue with that is the <td> elements don't resize when the content takes up multiple lines. How do I fix this? I wouldn't mind a solution using javascript for this.
What I have so far: http://jsfiddle.net/Yw679/778/
Also, would it be possible to make the <thead> fixed also so that it doesn't go out of view when the user scrolls down but moves with the rest of the columns when the user scrolls horizontally?
I added a new column with class style-hidden for each td and th and some tricky css like this. I hope this will help:
.style-hidden{
width: 0;
opacity: 0;
display: block;
}
JSFiddle

Categories