We Keep Coding

How to make a button work when touched using p5 code

I am making a game. In this a button goes to the next screen say from home screen to battle screen when clicked using a mouse.It works on computer/desktop but not on touchscreen device like mobile or tab.How do I make it work on touch screen devices ??? (It would be helpful if the answer is in p5 code, javascript or html). I can't afford to create button using HTML.
Currents I am using:
If(mousePressedOver(button)) {
gamesSate = "BATTLE";
battleScreen();
}
In above code battleScreen(); I am calling a function in function draw() named battleScreen.

I am a web developer. And click event works in all touch screen devices. And it works on every id, name, tag etc of html. you can try. Hope it will work
In javascript you can use addEventListener
document.getElementById("youId").addEventListener("click", function () {
//your action
// you can also use document.getElementsByClassName, document.getElementsByName, document.getElementsByTagName etc in the place of getElementById
})

Cocoa: drag and drop inconsistency

In my cocoa code, I’ve implemented a drag & drop for a file path. It is triggered not by a mouseDown, but as a result of a callback I receive from javascript code (after click-dragging an HTML object).
The problem is that it works only 80% of the time: I do the same click-drag operation over and over again and get two behaviors. In both, an icon representing the dragged file path begins following the cursor around (as expected).
Now, in most of the times the dragged file path is “accepted” by the receiver, an appropriate visual feedback is given during the drag, and eventually when the mouse is released – the file path is accepted and dropped.
However there are times where the file path is not “accepted” when hovering over the target. When this happens and the mouse is released, the icon slides back to its origin and the file path is not dropped onto the target.
Here’s my code (simplified), based on Apple’s docs:
void myInitiateDrag(const char * in_filepath, NSView * view)
{
NSString *nsfilepath = [NSString stringWithUTF8String:in_filepath];
NSEvent *theEvent = [[view window] currentEvent];
NSPoint dragPosition = [view convertPoint:[theEvent locationInWindow] fromView:nil];
NSRect aRect = NSMakeRect(dragPosition.x, dragPosition.y, 10, 10);
[view dragFile:nsfilepath fromRect:aRect slideBack:YES event:theEvent];
}
Using this exact code within mouseDown works perfectly fine, 100% of the times. However as I said, I don’t receive a mouseDown in my case.
Another observation: when the mouse button is released after a drag operation, mouseUp is not being called. This is regardless of where I initiate the drag operation, and is also mentioned in another SO question. So, I don’t know if this has to do with my problem.
Among the things I’ve done, I tried to find differences between the currentEvent when successful and when not successful, with no luck.
In the developer docs it explicitly says “A dragging session is initiated by the user clicking the mouse inside a window or view and moving the mouse [...] You invoke this method in the mouseDown: or mouseDragged: method of your subclass of NSView or NSWindow.”.
Is this mandatory? What is wrong with what I’m doing and what other options do I have?

Have the same issue, finally was able to make it work with event copy:
[ NSEvent addLocalMonitorForEventsMatchingMask:NSEventMaskLeftMouseDragged handler:^NSEvent * _Nullable(NSEvent * _Nonnull event) {
[self.controller mouseEventGlobal:event];
return event;
}];
After that in the controller, I'm able to use beginDraggingSessionWithItems:event:source after I have callback from JS.

Accessing touch properties on Windows Chrome #74

I was experiencing the issue raised here and here. My d3 app works perfectly on Chrome via a touch display on Mac, but d3.drag failed when I switched to the Windows production machine running Chrome v.74. I applied the solution .touchable(navigator.maxTouchPoints), as suggested by the linked pages above. This allowed me to drag the element in Windows Chrome v.74 using the touch screen, but am now getting:
UncaughtTypeError: Failed to execute 'elementFromPoint' on 'Document': The provided double value is non-finite.
so my drag events aren't firing.
I am using document.elementFromPoint() to detect when the dragged element is over another element:
this.svg.dragCirclesGroup
.call(drag()
.touchable(navigator.maxTouchPoints)
.on("start", this.dragStarted)
.on("drag", this.dragged)
.on("end", this.dragEnded));
dragged() {
select(this).attr("transform","translate("+[event.x,event.y]+")")
let hitZone = select(document.elementFromPoint(event.sourceEvent.clientX, event.sourceEvent.clientY)).attr("id");
if ((hitZone == "yHitZone") || (hitZone == "xHitZone")) {
select('body').classed("plus", true);
} else {
select('body').classed("plus", false);
}
}
This is a touch-only issue, as the drag and document.elementFromPoint work perfectly when I use a mouse.

The solutions offered by Can't get coordinates of touchevents in Javascript on Android devices and Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event? don't apply in Chrome #74 for Windows 10. To access the applicable TouchLists and coordinates for drag event e, you would use
e.sourceEvent.touches.item(0).clientX and e.sourceEvent.touches.item(0).clientY
for dragging and
e.sourceEvent.changedTouches.item(0).clientX and e.sourceEvent.changedTouches.item(0).clientY
for the coordinates upon drag end.
You can see this by logging e.sourceEvent. This SO answer, which details the different Touch Lists, is helpful as well.
So to execute document.elementFromPoint in this environment, you would use
document.elementFromPoint(e.sourceEvent.changedTouches.item(0).clientX, e.sourceEvent.changedTouches.item(0).clientY)

Jquery manipulate DOM on mobile only

I have a bootstrap column system, however the way they are stacked, on mobile I would like to move one of the elements to appear before another. I believe this can be done with .append().
Is it possible to move the element I want with append() but only on mobile?
Thanks

You can do it by first checking whether your device's browser supports touch events (e.g. desktop does not, mobile does)
If it does you can execute the append and if not, nothing will happen.
var isMobile = (function() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
})();
if(isMobile) {
your append action
}

http://detectmobilebrowsers.com/
Here you can get javascript/jquery file with the function based on regex for all the mobile/tablet devices.
If you select some of them and build two separate functions for the mobile/tablet you could do regex for tablet and for the mobile only.
Hope it helps :)

Touchswipe.js not allowing select box to open on desktop

I cant get my select box to work with i enable touchenabled in desktops. Viewing my fiddles you will see when you click on "ARTICLE" the select box will only work if i disable touchenabled for desktop users.
touchenabled:"on" http://jsfiddle.net/y82XD/ (ARTICLE select box will not work)
touchenabled:"off" http://jsfiddle.net/y82XD/3/ (ARTICLE select box works fine)
I am using a script to detect mobile devices and want to enable touchenabled: "on" , when device.mobile is detected. The mobile detection script has a JavaScript Method called device.mobile() that can be used . So using the below script for the slider , how would i go about incorporating the device.mobile() to set touchenabled:"on" for mobile , while setting touchenabled:"off" for everything else ?
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('#slidebox').services(
{
width:620,
height:460,
slideAmount:4,
slideSpacing:10,
touchenabled:"off",
NEED CODE HERE to enable touchenabled:"on" when device.mobile detected
mouseWheel:"off",
hoverAlpha:"on",
slideshow:3500,
hovereffect:"on",
callBack:function() { }
});
});

I was able to get the select box to function by changing the following two options in your slidebox services:
touchenabled:"off"
hoverAlpha:"off"
Those were previously on. When I turned them off, the parent slidebox div lost its mousedown and touchcancel event listeners.
I don't know enough about this package to understand what implications this might have. But it looked to be doing everything it was doing previously.
If you need to have these options on, then perhaps you could turn them off when this particular page is displayed? Or maybe you could unbind the two listeners that are causing the problems when the page is displayed.
UPDATE:
Ok, after reading your new comments, I'm not sure why this won't work, but it does seem a bit simple, so maybe I still don't understand it 100%.
var touchEnabledValue = (device.mobile) ? "on" : "off;
tpj('#slidebox').services(
{
width:620,
height:460,
slideAmount:4,
slideSpacing:10,
touchenabled: touchEnabledValue,
mouseWheel:"off",
hoverAlpha: touchEnabledValue,
slideshow:3500,
hovereffect:"on",
callBack:function() { }
}