I am developing a site for Apple iPad. In this, how can I apply shadow on mouseover and how to remove on mouseout? Like HTML a process, or any other way available with Javascript, I am using jQuery here.. any advice?
You can try to bind click or touchstart-touchend events. Like so:
//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu li a").bind('touchstart', function(){
console.log("touch started");
});
$(".menu li a").bind('touchend', function(){
console.log("touch ended");
});
}
Since there's no mouse and no pointer that moves around the screen (except from some jailbreaked iPads, but that's another story), these events are never fired by iPad's Safari.
You can bind the effects to other events (like mouse click) but maybe it's not necessary...
Switch to applying hover effects/shadow on mousedown and mousemove, and use some other event (a timed mousedown/mouseup), or a completely different button or touch location, for "clicking".
Note that some effects may never even be seen if they are hidden under the touch.
Related
My iPhone's screen is playing up. I had the idea, since I'm a web developer, to go to a page on my local machine's web server, or on jsfiddle, using my phone, and have some jquery running on that page which gives me some simple feedback about every touch event. (I have a feeling that I will see lots of spurious swipe events firing off even when i'm not touching the screen, for example).
So, something like this:
<div id="feedback">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function feedback(msg){
$("#feedback").append("<div class=\"line\">"+msg+"</div");
}
$(function() {
feedback("in $(function) block");
$(document).on("click", function(event){
feedback("clicked at "+event.pageX+","+event.pageY);
});
//can you replace the below with working code?
$(document).on("all events", function(event){
var msg = "Some basic info about this event: if it's a swipe, which direction. if it's a keypress, which character? etc"
feedback(msg);
});
});
</script>
I've set this up in a jsfiddle here: https://jsfiddle.net/sxqjp9xe/
Do I need to write a handler for every event i'm interested in, like I've done with the click handler? Or is there some more generic solution? Thanks, Max
EDIT: changed my "feedback" function to use prepend() instead of append() as it's easier to see once you get a lot of lines on there.
You can include more than one event in the handler:
function feedback(msg){
$("#feedback").append("<div class=\"line\">"+msg+"</div");
}
$(document).on("blur touchstart touchmove touchend touchcancel focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error", function(event) {
var msg = event.type
feedback(msg);
}
https://jsfiddle.net/e9e0ehyc/
Is there a better way to handle a "hover" (this tapped, then effect active until something else is tapped) event on touch devices than using a global event handler to detect when the user taps something else?
For example, this code might work, but it relies on an event listener attached to the document body, so it's questionable performance-wise.
//note a namespace is used on the event to clear it without clearing all event listeners
$('myDiv').on('touchstart.temp', function () {
//do stuff
$('body').not(this).on('touchstart.temp', function () {
//undo stuff
$('body').not(this).off('touchstart.temp');
});
});
In the future you should be able to use the touchenter and touchleave events, which apply to specific elements.
$("myDiv").on("touchenter mouseover", function() {
// do hover start code
}).on("touchleave mouseleave", function() {
// do hover end code
});
But according to MDN, this is just a proposal which hasn't been implemented yet.
If you use jQuery Mobile, you can use the vmouseover and vmouseleave events, which simulate the mouse events on mobile devices.
The Javascript onmouseover and onmouseout events work just fine! :)
It won't work on mobile devices, but I believe you anticipated that.
Edit: I also noticed you included the JQuery tag. You could also use the JQuery hover method if it is to your liking.
i.e.
$('div').hover(function(){
$(this).css('background-color', 'red');
}, function(){
$(this).css('background-color', 'blue');
});
Example: https://jsfiddle.net/sofdz0s2/
As for hovering on all touch devices, it is not constant between all touch devices. Mine does not keep hovering after a tap. (I tried tapping on the div that changes and then on the green div, but it kept hovering after a tap.)
Edit 2:
As talked about in the comments, touchenter and touchleave are probably what you want.
I hope this helps!
I had added an effect on hoverEnter and hoverLeave on my Divs assuming that these events wont fire on iOS devices. But on iOS devices the hoverEnter and click event fire and the hoverEnter effect is maintained. I don't want these hover events to fire on mobile devices. What should I do. I am attaching event via Javascript and the hover event is attached to the div before click event.
To emulate the hover you simply add an event listener to the element you want to have a hover event, you can use touchstart and touchend events instead of using hover
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu li a").bind('touchstart', function(){
console.log("touch started");
});
$(".menu li a").bind('touchend', function(){
console.log("touch ended");
});
}
Solution: https://github.com/alexgibson/tap.js
I have a conflict between 'touchend' and 'touchmove' events on the iPad in mobile Safari. I have images sitting next to each other like a gallery and they have a 'touchend' event attached to flip when touchend. However, you can also slide from one image to the other (like on iPhone sliding home screen to the next screen).
Now I can't figure out how to prevent the 'touchend' event from firing when I want to slide to the next image. Obviously, I don't want the image to flip if I slide, only if I tap.
My solution so far:
var img = $('.show-video');
var sliding = false;
img.bind('touchend', function(e) {
if (sliding === false){
Animate($(this), 'flip');
}
});
img.bind('touchmove', function(){
sliding = true;
$(this).bind('touchend', function(){
window.setTimeout(function(){
sliding = false;
}, 200)
})
});
````
I think this can be done much better.
You basically have two events when it comes to tapping the screen: touchstart and touchend. When a user touches the screen, the first event is captured, when he stops touching the screen, the second event is fired. The touchmove event should be captured to analyse the movement of the finger.
I'm not entirely sure what you're trying to say, but I'm assuming you you are capturing those events. What you can do is:
Instead of doing something on touchstart do it on touchend. This is more natural anyway, since something should happen after you lift the finger
After touchstart see if there is any movement using touchmove. If none and touchend is called, do what you wanted to do for a tap. If there was movement, do whatever you wanted to do for sliding.
I hope this helps.
I've made a workaround on this once.
You been already explained what are the events that are happening, and also you have a clue as a question.
For example lets say you have your gallery on a #galleryOverlay, and you scroller is inside it.
Then all you have to do is something like
$('#galleryOverlay').bind('touchstart touchmove touchmove', function(e){e.stopPropagation();})
So this way you keep your events inside your gallery, but you prevent them to happen outside.
Good luck
This library adds a 'tap' event which you can use to watch for a "tap" instead of "touchend".
https://github.com/alexgibson/tap.js
Is it possible to trigger a mouseout event on a link element using jQuery ?
I.e. Something of the sort
$(linkEle).mouseout()
I want this to work on an iPad, which even though does not have any mouse cursor, does actually have the event...
Yes, jquery has a mouseout event handler - http://api.jquery.com/mouseout/
$('some_selector_here').mouseout(function() {
// Do some stuff
}
$('some_selector_here').trigger('mouseout');
You might be able to use:
.trigger('mouseleave');
In the form of:
$('#elementToTriggerMouseLeaveOn').trigger('mouseleave');
References:
trigger().
I don't know about the ipad, but it works as you posted. http://jsfiddle.net/tESUc/
$(linkEle).mouseout();
or
$(linkEle).trigger('mouseout');
or
$(linkEle).trigger($.Event('mouseout'));
Try with tap event
tap - triggered after a tapping an pnscreen element.
http://www.roccles.com/?p=134
$('.link').live('tap',function(event) {
//TODO
});
mouse hover state does not exist on touchscreens
Mouse over/out events do not work as required on ipad. Take a look at touchstart/touchmove and touchend events which are specially for touch devices.
Something like this http://jsfiddle.net/hTYKQ/ Will work in ipad but in this fashion:
1st click to the element triggers the mouseenter function.
2nd click triggers stuff.. if it has stuff... like a link (
http://jsfiddle.net/qxM33/1/ i screwed the <a> href but you get
the point.)
Click outside the element triggers the mouseleave function.
What this story teaches is: jquery mouse over and mouse out functions work much like click functions in ipad.