I have an element hidden by default and show when a user hovers over this element with the mouse. On touchscreens, this event is only fired when the element is tapped. What Im looking for is a way to make this show as soon as the user's finger touches that element, I can't seem to find an event like that.
I have tried the following code:
//OnTouch event for about text
$('#about thumbnail').on('touchstart', function(){
$(this).find('.mask').addClass('touch');
}).on('touchend', function(){
$(this).find('.mask').removeClass('touch');
});
with no success either, I have the default Wordpress jQuery included, do I need an additional library to make my code work? I can't find out how to do this.
thanks guys!
As long as you are not developing for the latest Apple iPhone which has 3D touch you cannot detect slight and hard touches. Every touch input is considered as click. but you can try reducing the response time delay though.
use this library http://hammerjs.github.io/ it has the ability to overcome the 500ms lock in phone browsers.
If you reduce the response time it can somewhat emulate the slight touch you are asking for.
UPDATE: Here is this another library which provides more events like
tap, Single-tap, Double-tap, Hold, 2x Fingers Tap, 2x Double-tap, Swipe Drag, Rotate, Pinch, Pinch Out, Fingers
http://quojs.tapquo.com
I forgot to get back here but found a solution to achieve a hover effect on touch devices.
What you can do:
1-> achieve hover effect by touching the object on a touchdevice, this hover effect stays active until you activate another hover effect. You can do this by binding 'touchstart' to any object like so:
$('body .archive-item').bind('touchstart', function() {});
I did not find a way to stop the hover as soon as your finger gets of the touchscreen with the above function.
2-> You can bind touchstart and touchend to the above selector and have them addClass on touchstart and removeClass on touchend
$('body .archive-item').bind('touchstart', function() {
$(this).addClass('hover');
});
$('body .archive-item').bind('touchend', function() {
$(this).removeClass('hover');
});
now you can style the .archive-item.hover with css to achieve a hover effect.
To avoid duplicating css to achieve the hover effect on :hover and the touchstart you can just do this:
.archive-item:hover,
.archive-item.hover {
text-decoration: underline;
color: red;
}
I couldn't find anything on the web so this is what I figured out by combining some code from various snippets, what do you guys think about this?
Related
I have some problems with handling events like scrolling using the mouse wheel or key press. I' ve tried something like this but it won't work:
this.cy.on('wheel', event => {
//somecodehere
});
I didn't find wanted events on Cytoscape.js documentation page: http://js.cytoscape.org/#events. But I thought a thing like this should work fine - unfortunately I was wrong. I try to figure out how to handle this event on my canvas.
What do I want to do with this? I want to make tooltip disappear when the user wants to scroll the page. I've already disabled zoom on scrolling - I want to enable zooming only while "CTRL" key is pressed and in this case, I also didn't find wanted event to handle this. Any solutions? Thanks.
Use DOM API.
document.getElementById("cy").addEventListener("wheel", function(){
console.log("Wheeeellll");
});
How should I create a custom page transition which listens to tap and swipe/drag even?.Suppose, if the page is dragged right/left (while still holding), then drag/slide the page to the value of swipe/threshold. And when the tap is released, if value is equal to or greater than the center of the page or maximum threshold, slide to the next page (link), or else slide back to its original position. Example. I would like to apply it in my jquery mobile app. An example demo would be great. Thank you.
Use a JavaScript library, such as HammerJS for easy touch gesture handling. Swipe is probably what you are looking for.
Also TouchSwipe jquery plugin is commendable, because it's easy to implement and provides swipe, pinch, touch and threshold events and triggers:
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
This is more the theoretical type of question.
In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.
To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)
In the optimum case the mouse cursor hides while the drag operation is on.
My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.
How would i accomplish that using javascript/jQuery?
Making the cursor invisible isn't too difficult, see the top two answers on this question.
As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.
You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.
So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.
The easiest approach would probably be to just apply different CSS styles on the click event of the button.
Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.
On click the function might look like this:
$('#myButton').click(function(){
$('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
$(this).removeClass('draggable');
});
Have I understood the question correctly?
I want to make mouseOver or hover like command in Javascript. I want when you hold your finger on an element that element changes attribute(get darker) and when you drag your finger on another element it changes to it's original state but the element on which is my finger currently changes. If someone knows what I am talking about please help me.
Check out this https://developer.mozilla.org/en/DOM/Touch_events as you can tell touch events are still in development. But the latest browsers have started implementing them.
If you can't find a CSS only solution, you can capture the touchstart, touchmove and touchend events on your document and processing the touchemove (on each firing) by checking the x,y against the ones you want to highlight and add/remove the highlight class appropriately.
use vMouseEvents from JQuery. That's the working thing.
Virtual mouse event by JQuery mobile is quite welldone.
https://api.jquerymobile.com/vmouseover/
http://jsfiddle.net/nicktheandroid/GPFxM/28/
I've also explained the situation in the JS Fiddle example.
I binded hover and mousemove, but when unbinding them, i have to ALSO unbind mouseenter and mouseleave to get it to work a little better, but still it doesn't work correctly.
I changed the cursor to Pointer in the hover bind, but when unbinding it I thought the cursor would go back to normal, but it doesn't?
My plugin adds a 'cursor image', which is an image that follows the cursor around when hovering over specific elements. I made a div that has a cursor image when hovering this div, when clicking on the div it unbinds the hover, which should unbind the cursor image, what happens though is that the cursor image sticks to the box, and doesn't fade out like it should.
I just need help getting this straightened out and if you could explain to me what I did wrong, that would be greatly appreciated, thanks so much.
unbind only takes one event at a time, so your code only ever unbinds mouseover.
Note that hover simply binds both mouseenter and mouseleave.
Why do you think that simply unbinding the events will remove the image also? If you add $('#tehCursor').fadeOut('fast'); to the click handlers for the disable span and .myBox, you should see it work like what I think you expect.
You probably should another function to remove the effects of change cursor from the element it was bound to - I'm not sure what the best way to do this might be (keeping in mind jQuery plugin conventions).
Update
My first ever jQuery plugin; I can't claim to understand it all and it probably isn't the most efficient since I basically took the code in this tutorial and adapted it to your needs. This fiddle should be what you're looking for.