I've been struggling with adding support for touch devices. The app works really well on desktop devices. So you can hover over the td element, then once you click and drag the td, the selection functionality is triggered, if the word is found the resultWords var then set it as marked, otherwise set selection to false.
There's a codesandbox for it:
https://codesandbox.io/s/determined-turing-50zbpj?file=/src/index.js
I am trying to add the same functionality for the touch devices, so onTouchStart is supposed to add the first letter to array and once the swiping over td's is happening then keep adding the letters, word found -> set it as marked, otherwise -> set selection to false.
I have tried using onTouchStart combined with onTouchMove (all in the td element). onTouchStart seems to work fine, although onTouchMove always brings back the first letter where the gesture was first triggered.
Any suggestions how I could move on with this?
Related
In Ion.RagerSlider plugin the interval bar is clickable.
This is an issue on mobile devices when the user accidentally click the element when he's trying to scroll.
How can i disable the click event on interval bar?
I was unable to find the solution in the official documentation.
I am facing the same issue where, if tapping outside the selected range on the bar, the whole range gets shifted across to the tap location. Depending on the location and size of the bar on the screen, it is quite easy to inadvertently do this and lose the slider values.
While it is not officially supported by version 2.3.1, I found that removing the binding of touchstart and mousedown events to the range line did the trick.
https://github.com/IonDen/ion.rangeSlider/blob/2.3.1/js/ion.rangeSlider.js#L686#L687
A more generic approach could be to create a new config parameter named something like disable_line_touch with a default value of false, and only skip the above binding if its value is set to true.
I know there are many similar topics but none of them has the solution to my problem so please read my question carefully before sending similar topic links and marking as duplicate question.
I have a content editable DIV object, something similar to TextArea control. My goal is to cancel key press events if content starts scrolling and there must be no flickering.
When i use keyUp event, it's too late to cancel and there is also no methods available to cancel changes. What's done is done at this stage.
When i use keyDown or keyPress events, they are cancelable. But new changes are not yet applied. So, i know which character is pressed etc. but i still don't know how it's going to affect the scrolling size.
Plus, i allow style changes like making the text bold or changing the font size. Since there is;
document.execCommand("undo");
command, i'm able to test these changes and undo if scrolling starts. To test things, i use a cloned div with same content. It works fine. Changes are applied to cloned div (which is visible at the moment for debugging purposes but will be invisible if the method works) and if cloned div has an overflow, changes are canceled.
My problem is at doing the same thing for key presses. It's harder to simulate what happens to editable div content than using document.execCommand for other styling options. What i need is to get the innerHTML result at keyUp stage before keyUp occurs and event is still cancelable like keyDown or keyPress.
To simulate things, i tried getting cursor position and adding pressed characters manually using substring function but content isn't plain text and i had many problems with it. For instance when i press enter, an HTML block <div><br></div> is added for newline character which messed up cursor position. I tried many ways to handle things but it's very open to bugs. So, i decided not to follow this path.
In short my question is;
How can i possibly limit an editable div area by height, not allowing
to overflow or scroll without any flickering, just canceling key press
events? Do i have to simulate something like willKeyUp or is there any
other cross browser way?
Here is jsfiddle link for my sample which works for document.execCommand case (changing font size, weight etc.) but fails at typing letters;
http://jsfiddle.net/7zQD2/
Edit: To clarify my goal at jsfiddle example, after writing 5 lines of text, either when you press enter or type to end of the line, cursor should never reach to the sixth line. Key presses should be canceled and cursor should stay at fifth line with no content changes or flickers.
One solution is to use the cloning setup you already have, but to set the opacity of the first copy to 0 and position it on top of the clone with position: absolute in the css. The first copy won't be visible, but will catch a click directed towards the visible one underneath it. You can change your event to fire on keyup.
Since the transparent div still exists, and still has height, it can measure text height for you without being visible to the user. The visible text then updates to match what is learned with the transparent text, and never reaches the 6th line or flickers.
http://jsfiddle.net/7zQD2/2/
I have buttons which have been given click depth (i.e. they move down a few pixels on :active state) but they are causing problems in that sometimes the button is clicked and nothing happens.
<button>Button</button>
button:active {
margin-top: 5px;
}
I have illustrated the problem in a jsfiddle:
http://jsfiddle.net/helenst/vUU55/
In Chrome, there is a thin strip above and below the text, height equal to the click depth, in which click events do not fire. (e.g. try clicking a pixel or two above the 'B') Both mousedown and mouseup are received, but click does not fire.
In Firefox and Opera, there is an area of the same size at the top of the button in which the mouse click does not respond. I find this slightly more logical in that the mousedown is inside the button but the mouseup is outside it. If I click down in this area but drag the mouse back into the button before releasing it, the click is activated.
However, it still doesn't completely make sense - if I wrap a container around the button (so that all button states are contained inside it), and detect events on the container, the problem still occurs.
If I remove the click depth, everything is fine.
I suppose I could make it respond to mousedown events and then detect mouseups on the document, this might get around it - but it violates normal button behaviour and I'd like to have a non-javascript solution. Can anybody help?
If you can make the :active style work using padding-top (or anything inside the border - even setting the border-top to 5px could work, sorry untested). Though of course that breaks your styling somewhat; a background top-aligned horizontal bar image could replace the top border if you need it in there, though a hacky idea).
Apologies, cannot test in newer browsers at present. I've seen this type of button several places before but cannot remember any offhand to test how well they cope with this issue/what code they use.
Almost made this a new answer, but SO is less fond of that:
The other alternative that I've seen, though harder to add really big depth (movement), is to use inset and outset in the border styles.
I'm making a little webapp for the iPad as a personal project. It has two iScroll (http://cubiq.org/iscroll-4) scrollers and a lists of divs inside it.
I initially used a single ontouchstart listener to select the rows but that would select the row even when swiping to scroll. So later I added in ontouchmove (sets a flag to stop event firing in ontouchend) and ontouchend. But I still have to outstanding issues:
Tapping to stop the momentum scrolling will select the row,
Implementing 'fastClick' (https://github.com/alexblack/google-fastbutton) on the row element inside the scroller disables the scrolling.
Any help on where to look to implement/fix these would be great.
Thanks in advance.
EDIT: I'm also trying to figure out how to stop fastClick from triggering the event when a touchstart event is triggered before touchmove. This means that the event fires even though the final touch coords where way outside the area of the 'button'.
I've got this little jquery plugin. There are some images in a vertically scrollable div. I can click on this div and scroll it by using arrow keys.
If you take a look at this example, you can see that I want observe if arrow key right/left is pressed and if so, jump to the next image. In Firefox and IE, the keyup() event is being called, and in safari and chrome it's not.
I have encountered several strange scrolling and focus behaviours in webkit browsers, but I don't know why the keyup() event is not being fired. If you have any idea, please let me know.
Just add the tabindex attribute to your div-element and it will work. This is kind of a hack to make an otherwise not focusable element focusable, just like any input or button.
Depending on the value given to tabindex, it will behave diffrently:
0 will allow you to focus the element with the keyboard arrows and tab key
-1 will disable tabbing, but it will still be focusable
Anything greater then 0 will allow you prioratize tab focusing, where 1 has the highest priority
I've updated the jsFiddle demo accordingly.