I have a icon with onmouseover event handler.
On mouseover it displays a table.
the Icon is at the right site of the screen.
If the table is small, it will be displayed within visible area. But if the the table is wide enough then only a part of the table is visible. One have to scroll to right to see the rest of the table.
What would be the solution to display it. I mean if the table will go 200px out of the visible area, then it should
moved 200px to left.
The table is displayed within an absolutlty positioned DIV.
The div.left + div.clientWidth should be less than document.body.clientWidth. In other words, the furthest to the right (max value of div.left) on the screen your div can be can be calculated as:
document.body.clientWidth - div.clientWidth
Give or take a pixel or two.
Related
On my site I have tables adapt to the size of the screen and use a horizontal scrollbar like this.
What I want is to show an arrow element within the table when there is more info to the right and clicking the arrow scrolls to it over to the right.
Something that looks like this.
Click the arrow and the table is scrolled over all the way to the right.
How do I display the arrow element only within the table and only when there's a horizontal scrollbar?
You need to compare the widths Element.getBoundingClientRect() of your table and the scrolling container. If the container width is smaller than the table, you can use show the arrow, else have it hidden.
I have 3 separate divs.
First one 100vw and 100vh.
Second one has 100vw and 100vh and it has a div(".move") inside of 400vw and 100vh - which will be moving later on to the left and to the right.
Third one is 100vw and 100vh.
When I scroll down, I want the second div to get position fixed. (at this point div third jumps into div second position).
Then I want to scroll to the right of div ".move".
At the end of scroll I want to add position absolute to div second and keep scrolling down through div third.
I dont know how much should I keep adding to scrollX (or translateX(-?px) or left = -? , doesnt matter I guess) so it is equal to normal scrollY at the end.
Also when I scroll quickly it jumps to div third and div ".move" barely get scrolled.
I would like to do it either useing scrollbar or mousewheel.
It should look like in this page:
bitsens.com/
And this is my current code:
codepen.io/Baromaro/pen/yLLMWMM
(the code is so sad..)
I'm using Google Charts (the Timeline in particular) and I am facing a weird issue.
When the timeline is placed inside a container that can scroll vertically, the bars' tooltip's vertical position is wrong if the container is scrolled.
Basically, the more you scroll the more the tooltip "drifts down", I've taken some screenshot to illustrate this:
Here is the tooltip when the container is not scrolled, the position is correct:
Now, let's scroll a bit, the tooltip vertical position starts to drift:
...and the more we scroll, the more it drifts:
I've tried reproducing this in JSfiddle but with no success, unfortunately the original code is quite complex and difficult to replicate as a simple example, but any suggestion on how to even approach this is welcome.
Well, while waiting for answers I developed this workaround:
//This instruction selects the internal div that actually shows the scrollbar
//The div is generated automatically by the Google library when you put the Timeline inside
//an element (#maincontainer in our case) that has a fixed height too small to fit the entire timeline
//It unfortuantely has no classes to make a more specific selector
let scrollElem = $(`#maincontainer > div > div:nth-child(1) > div > div`);
//We then monitor mouse movement on the scrollable div
scrollElem.on('mousemove', function( event ) {
//When mouse moves, we determine how much the container is scrolled vertically
let scrollAmnt = scrollElem.scrollTop();
//then we update a CSS style tag that forces the tooltip to a specific position
//Y-axis position = level with mouse pointer (= mouse Y-position relative to scrolling container - scroll amount)
//X-axis position = just to the right of the mouse pointer
$('#tooltip-style').text(`.google-visualization-tooltip{
top: ${event.offsetY - scrollAmnt}px !important;
left: ${event.offsetX + 15}px !important;
}`);
});
maybe not the prettiest of solutions, but works great.
I'll leave the question open for a few days to see if someone has a more "proper" solution.
Suppose two tables are in a row, when the user scrolls left the first table remains fixed. But when the user scrolls up both the tables scroll up.
This is simple first you have to fix the height of the table then put this attribute in your style sheet class if you need y axis do the same in
.class{overflow-x:scroll;}
Can someone break down CONCEPTUALLY how this was achieved?
http://content.time.com/time/beyond911/
I know it loads "grid.html" which is tiled and depending how you click, becomes "infinite" (try clicking a corner image over and over again). Just not sure how it centers on the element that is clicked, or the use of arrows to select adjacent elements.
thanks
They are using the -webkit-transform: translate(top, left); on the table to effect the centering. It shifts the table up and down and left and right. For the "infinte" scroll, they are literally moving the table rows and columns around in the DOM. Also, lots of math related to the size of the rows and columns.