Anybody familiar with zepto?
I'm open to other mobile frameworks suggestions,too if they have good implantation of doubleTap and they handle the job.
I need to detect coordinates on the second tap of doubleTap event in mobile Safari.
So far I've been using jQuery for the event-obj and that syntax was fine
x: e.pageX
y: e.pageY
But it doesn't work in iPad
Appreciate any kind help, BR
I don't know if this can be made to work on Zepto (I'm having the same issue on JQMobi) but if you use HammerJS http://eightmedia.github.com/hammer.js/ instead you can get the actual position of the tap
See my SoftPaws game for an example of this: https://github.com/gavD/soft-paws
I hope this helps!
As I've mentioned I found a solution so I'm posting it if other users face the same issue:
// double tap (tapped twice within 250ms)
if (touch.isDoubleTap) {
touch.el.trigger('doubleTap')
touch = {}
This code above in zepto.js detects that the touch event was doubleTap and triggers its handler. And here is a little modification:
// double tap (tapped twice within 250ms)
...............
touch.el.trigger('doubleTap', {touch: touch})
overriding it with passing the event as parameter solves the problem. Now the event object is accessible with all its properties including coordinates.
And here is an example how you extract them from defined handler:
Zepto('selector').doubleTap(function(e){
var dblTap = e.data.touch;
var coord = {
x: dblTap.x1,
y: dblTap.y1
}
});
This is valid for v1.0.rc1 don't know what the case will be in future releases
Related
I was testing out an approach to a solution and found that the methods or functions available for a programmatically triggered JavaScript event is different from ones that are available when the user clicks on the element. For instance, I wasn't able to get the mouse positions of the click event. If the user had clicked, I would have been able to get the mouse positions and a lot more. I am adding the events and triggering it via jQuery. Any reason for this? Any one know how I can get the mouse position after programmatically triggering it using jQuery?
you can use the offset jquery function:
var clickedPostion = $(this).offset();
alert(e.clientX - clickedPostion.left);
alert(e.clientY - clickedPostion.top);
I know the sample it is on click, but you can change it to mousemove()
Here is a working sample:
http://jsfiddle.net/6wccZ/
Currently I have an small application for drawing shapes.
Here is an example including my problem: http://jsfiddle.net/auyaC/
I get the error: Uncaught TypeError: Object [object Object] has no method 'getBBox'
Below stripped code where the error comes from
When the user clicks on a shape, I catch the event.target
var onMouseDown = function(event) {
setBBoxes($(event.target)); // Seems OK
};
I want the BBoxes back again but my shape has lost the BBox..
var setBBoxes = function(shape) {
shape.getBBox(); // Unable.. getBBox is part of Raphael shapes, but mine is not the real reference?
};
And a stripped example: http://jsfiddle.net/auyaC/2/
Edit
Ok so my problem was mixing up jQuery and Raphaeljs, because I am unable to use the mouse events of Raphael.
It seem that none of the examples online using mouse events or touch events work.
I have read these issue reports
https://github.com/DmitryBaranovskiy/raphael/issues/720
https://github.com/DmitryBaranovskiy/raphael/pull/737
Also Windows thinks I have touch input available for 255 touch points.
But I don't have a touchscreen anymore (had one but changed screen and deleted drivers).
So for me, even http://jsfiddle.net/5BPXD doesn't work on my computer...
You generally do not want to mix jQuery and Raphael like this, as it's easy to get confused about which library's event handlers and methods you're using. You also lose Raphael's fallback capabilities for old browsers when you start directly messing with the DOM elements that Raphael creates.
In this case, I recommend adding the .mousedown() listener directly to the Raphael element.
var paper = new Raphael($(".testarea")[0], $(".testarea").width(), $(".testarea").height());
var circAttr = {
"fill": "#4ba6e8",
"stroke": "#1a81cc",
"stroke-width": "2"
};
paper.circle(200, 200, 80).attr(circAttr).mousedown(function() {
someFunction(this);
});
var someFunction = function(shape) {
console.log(shape.getBBox());
};
Updated fiddle: http://jsfiddle.net/auyaC/3/
Of course, you lose the ability to select all the shapes at once with a selector and add the event to all of them at once. You'll need to add the mousedown event to each one as it's created. Small tradeoff, I think.
I've finally found the fix for my bug...
It seem that Raphael thought that I had a touch screen.
The "Tablet PC Components" Windows feature was turned on. After disabling this feature, I was able to use the mouse and touch events again!
I am looking for jQuery solution to detect mouseup outside the window. That is, after the mouse has been downed inside the window, dragged outside while still down, and then released outside, is when the event should fire.
I tried document.mouseup = function() {}, it didn't help. I tried to follow the example here, but couldn't properly understand it (I even left a comment asking for help, but no help yet..:( )
I have a website that uses this event and it works as you described:
$(window).on('mouseup', function(){
//your code here
});
Note: only tested in jQuery 1.8.3, but it should work in 1.9
jsFiddle confirms. Works in jQuery 1.9.1 and 2 beta: http://jsfiddle.net/udRNx/1/
In case you didn't know, this piece of code must be placed in either $(document).ready(fn) or $(window).onload(fn).
Can anybody tell me why this onTouch handler isn't firing.
var myDiv = document.getElementById('existingContent');
var myButton = 'log out';
myDiv.appendChild(myButton);
function logOut() {
alert('hello');
}
I am using iPad 1.
My recommendation would be the same as the one proposed here on MDN:
var el = document.getElementsByTagName("canvas");
el.addEventListener("touchstart", handleStart, false);
My hesitation with the ontouch attribute is cross-device support. For this you might consider feature detection.
Modernizr is a popular way to determine if touch is enabled at runtime.
If the events above are enabled, the classes touch or no-touch would be added to the html element and used to determine if the code above should run.
EDIT:
In subsequent days I ran across this document describing Touch Events. As with much of technology, there is still more to it...
There is no "touch" event at all. You can find touchstart, touchend, touchmove and touchcancel events, as is shown in this link. I think you must use touchstart in your HTML:
ontouchstart="logOut()"
Also see this webpage.
Try using onfocus="logOut()" instead of ontouch="logOut()"
I was looking on this post but it doesn't really help me. What I'm trying to do is to create event, or what would be even better, access current mouse screen coordinates.
I have a function with setTimeout inside it, where number of different checks on attributes are performed. In my program some of the elements are changing position and what I want to do is check whether mouse is still over some elements or not.
Many thanks,
Artur
You just want to bind to the onmouseover and onmouseout events of an object. I found this to be unreliable however as some users can't keep a cursor over a small target so I found a great plug-in for jQuery called hoverIntent that works beautifully.
This solves the problem:
// Mouse coordinates for event.clientX, event.clientY respectively.
var myClientX, myClientY;
// This call makes sure that global variables myClientX, myClientY are up to date
window.document.addEventListener("mousemove", function(event) {
myClientX = event.clientX;
myClientY = event.clientY;
}, false);
Making coordinates global let's me access them whenever I want :)