I have a set of Javascript functions I use with a table of input elements to enable navigation. Things like keeping track of the currently focused element, and overflowing from the end of one row to the start of the next. I have scrollbar support with a fixed first column by creating one table that is only one column wide as my fixed column and having a scrollbar for the other table.
However, I have been noticing recently, that the default behavior of the scrollbar is a bit deficient. When I navigate to the last column, Firefox leaves that column partially obscured by the scrollbar instead of scrolling far enough to see it. Likewise, once I scroll over so I can see the other part of the last column, when I move on to the next row and the nav code sets focus to a cell in the first column (the frozen table), Firefox doesn't change the scrollbar so I can see all of the first column.
Because of this, I've been looking into how to modify scrollbar positioning using javascript. My table doesn't use a vertical scrollbar, only a horizontal one. So I stumbled upon scrollLeft.
document.getElementById("meastable").scrollLeft = 1; // reset scroll to leftmost
Unfortunately this seems to only work once in a while. When I enabled Firebug and traced through my navigation code where this line is, it seems to work once in a while, but most of the time, this line will run but the tables scroll left property is unchanged and I can't see a change visually either.
I also set scrollLeft to a high number so it will be set to the maximum as is described in the documentation, and that also does not work (except once in a while).
I use the following code to set up the scrollbar with my table.
<div style="overflow:auto">
<table id="meastable" border="1">
According to Mozilla's documentation, this seems to be something that originated in IE but now works in Firefox. Does this actually not work in Firefox as the inhouse project this is for will be Firefox only.
So I'm trying to figure out what's wrong. Is scrollLeft known to not work right, or should I go back and see if I've screwed something up in my definition of the scrollbar or something along those lines?
The containing div is the element with overflow. You need to set the scrollLeft of the div, not the table.
Related
I have an Ant Design table where columns are resizable using react-resizable and drag-able using react-drag-listview.
All of the features are working nicely although there is a bug that exhibits itself under certain circumstances which means that the entire solution to having those features working together might not be viable or ready for production.
Here is the correct behaviour - when clicking on a table header cell the entire cell is dragged and you can see the box-shadow around its borders like this:
The bug is that sometimes after resizing a column and then clicking the header cell of the column to the right, the header cell is not dragged, only the the content (text in this case) / column title is, which looks like this:
Here is a code sandbox and a step by step guide on how to recreate the bug:
Go to the code sandbox
Click on the right hand border of any column
Drag and resize that column to the right / bigger until the mouse is over the title of the column to the right of it like this:
As soon as you have done this lift the mouse button up and press it down on the title of the column you are hovering over i.e. (click on the title of that column to the right)
Drag the column
Sometime the behaviour is intermittent but it is easily reproducible and may be more visible if the steps are repeated quickly.
How can this bug be solved?
Issue occurs because header text is selectable and dragable by default. Add following style for dragHandle class and th elements. You will not be able to select text in the header but on the bright side issue will be resolved.
thead tr th,.dragHandler {
user-select: none;
}
Take a look at the updated example.
Is it possible to programmatically change scrollbar's properties? Let's say I have a long table, where rows loaded lazily, and I want to emulate "paging" using vertical scrollbar.
Finite number of rows and current position in the dataset are known, based on that can I change scrollbar range and thumbtrack height? Let's say it displays only 100 rows at a time, but actual number of rows in dataset is 10000, can I make scrollbar look, like the table has 10000 elements?
Basically I want to control scrollbar's thumb height and position. Possible, no?
I guess somehow I can hide the scrollbar and build my own input type="range" and position it vertically, but I'm curious if it's possible to tweak scrollbar directly?
I do not believe it is possible as of today. (October 8th 2014)
If you use the latest stable version of chrome (37), the inspection tools do not show a shadow root for any scrollbars. We can use this as proof that it is not editable as a majority of the elements are now implemented and can be customized by shadow dom can be viewed having a shadow.
this gives an example of styling the video player.
example link shows them actually styling an input type="range" element. (in case that is of any use)
This probably for 2 reasons.
1 scrollbar implementation and its look and feel is os dependent.
The scroll bar on windows is a different size than the scroll bar on mac.
2 scrollbar user interaction is also dependent on the type of device.
For example on macbook pro laptop the scroll bar is different upon having a mouse plugged in.
Android does not even show a scrollbar at all except when actively scrolling.
tl;dr
as of right now the scroll bar world is too fragmented for native scrollbars to be styleable by html.
You could this with the Mousewheel jQuery plugin, but it will only work if the user uses the scroll wheel.
I don't think it's possible to disable the user from manually scrolling by dragging the scroll bar.
You could hide the scroll bar entirely, though, by setting overflow:hidden to body.
TL;DR: the "click" listener is not accurate for table cells (td) and headers (th), seemingly listening beyond the cell's border when tapping on an iPad 2 with mobile Safari. Is this a known issue and is there a workaround?
Pretty specific question, and no sample code (there's no need). Hope somebody out there finds this question and has solved this problem before!
I have a table, built using DataTables.net and jQuery UI. That should be incidental, but I wanted to mention it anyhow. The table listens for click events (which I believe mobile Safari simply translates as taps) on a number of different elements, including row headers (for sorting) and certain cell contents.
Using Inspector on a Mac (to which the iPad is connected) I can clearly see that there are no accidentally overlapping elements in terms of padding, borders, margins, or even content that is "visibility: hidden" or anything like that. Besides, they are table cells with default behaviour; not simulations of table cells.
In the top row of actual data, if I tap anywhere in the upper half of the cell, it is actually tripping the listener for clicks in the row header. I zoom in to a ludicrous level so that I know I'm not accidentally nudging the header, and I have confirmed that the tap occurs entirely within the table cell, not the header above.
Does anyone know if there is a meta property or some CSS or even a JavaScript workaround for this lack of precision? At least half the time that I tap the cell, it's actually triggering the column sort (from a ghost header tap) instead.
The only thing I can think of as a workaround is to wrap the contents of each cell in a div or span, pad them away from the edges of the cell a bit, and hopefully artificially reduce the tap target area that way.
If the x,y coordinate is outside of the table then can you not simply ignore it?
If the click is inside the table, and the x,y coordinates are wrong then that might be a scaling issue, or a bug.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I have an HTML textarea as a basis for a small text editor running inside Chrome, which includes search functionality (as I need search features beyond what the browser offers). For longer texts, this means I need the JavaScript to scroll to the correct position after selecting the found text. This works fine by calculating the font's line height times the found text's row number (the latter I get by counting line breaks) and then setting textareaElement.scrollTop... but only when the textarea is set to wrap="off". When it wraps, as I sometimes need it, I cannot simply count the rows by counting line breaks, and my scroll position algo will be off by a bit.
What can I do to get the correct position of the found, selected text?
I've tackled this issue for the search feature of the logging console in log4javascript. My code surrounds search results in tags whose style properties are changed as you flick through search results. Initially I called scrollIntoView() on the current search result span but I think I had problems in certain browsers (log4javascript supports IE 5, for example) and ended up writing my own scrolling function based on the offsetLeft and offsetTop properties of the span and the scrollLeft and scrollTop properties of the container. I suspect scrollIntoView() will work fine in Chrome though so you should be OK just using that.