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;}
Related
I am writing a code which when a user clicks on premium plan button translateX(-300px) is set for a DIV which has property "overflow-x: scroll;" and the premium column is showing. but the problem is when user drag over the page to the right and left content should be visible, the remaining 300px view of DIV does not appear and show. I mean on mouse horizontal scroll, translateX(-300px) property limits us from scrolling to the left. should I call a function on mouse scrolling to override this property? excuse me because of bad English and Thank you for your response in advance.
Instead of using translateX, you should look into element.scrollLeft if you want to scroll a div.
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
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 am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
I have an issue when I'm clicking first time to column's span-resizer --> column width returns to some default calculated value. The same thing appears when I'm trying to resize it: it resizes not from current width, but from that calculated!
This shows my table after page load: columns' width are good.
screenshot after page load
But after clicking to resize State column --> it's just returns to some value (in that case
screenshot after click on column resize
How can I fix this issue?
P.S. Sorry, I have no enough rep to add images.
jqGrid hold column header and the column data in separate dives. So jqGrid have to hold scroll position of the header div (hDiv) the same as the scroll position of the div with the grid body (bDiv). I think that jqGrid have a bug in your situation. As the workaround you can use resizeStop where one set the scroll position of hDiv to the current scroll position of bDiv:
resizeStop: function () {
this.grid.hDiv.scrollLeft = this.grid.bDiv.scrollLeft;
}
I think that it should solve the problem.
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.