I have a project created with canvas. This project works fine on every browser on my iMac (Safari, Chrome, Opera, IE, Mozilla). For this I have created a normal click function:
$('#canvas').click(function(e) {}
When opening this project on a Windows7 SmartBoard (with Multisync s521-p nec) it also works fine, except at Chrome, you cannot touch it. If you click with the mouse on the SmartBoard, that is not a problem at all, but you just cannot touch it with the fingers. Since my project will just be used on this SmartBoard, and preferable at Chrome I really need to fix this, but I have no idea how.
Use Javascript touch events instead of click:
https://developer.mozilla.org/en-US/docs/DOM/Touch_events#Setting_up_the_event_handlers
click is a mouse operation and because the device has "mouse" it is reserved for it.
Related
I have developed an app using HTML5 and CREATEJS. I am encountering some issues that I cannot find a solution, for weeks. I hope someone can help.
1)On Android Google Chrome there is a problem that appears when I simply click anywhere on the screen: the FPS drops and any animation that is playing freezes for the duration of my touch. The problem is only in Mobile Chrome browser, on Android. It does not exist in other mobile browsers, neither in iPhone, neither in Safari, Firefox, etc.
I created a simple apk using webview and it doesn't have the problem either. So for some reason, the problem is only in mobile android chrome.
The code is optimized at maximum. 2 months ago we used only 1 canvas, but now we use multiple canvases and we have less animations in each canvas running everytime. While in android firefox it works perfect, but in android chrome it freezes for a single click.
I tried to disable stagemousedown/up events, because they are being triggered when I simply click anywhere in the stage. This didn't fix the problem or it is possible that there are some hidden stagetouch events that I don't know how to disable.
2)On Android Google Chrome and iPhone6 Safari, when I click the SPIN button, the game starts the SPIN, but with a delay of at least 1.5 seconds, but there is no such delay added with intention inside the code. On PC any browser, Android/iOS Mobile Firefox, this works perfect, no delay. In iOS Safari iPhone8 again it works perfect.
I created a simple apk using webview and it doesn't have this problem either. So for some reason, the problem is only in mobile android chrome.
UPDATE 11/10/19: Issue 2 has been solved by reducing canvas size and removing all shadow effects which consumed a lot of memory. Issue 1 still remains unsolved with absolutely no ideas left to try out. Any help is appreciated.
My project is 99% completed except these 2 issues. I am hoping to be able to fix them, because I really do not want to throw away months of work and switch to other javascript library for gaming, that doesn't have the problem, like PIXIJS.
I tried with RAF and RAF_SYNCHED, but still no improvement in any scenario.
Stage.update() is required for any animation. Having them on ticker is the reason why its getting slower.
To see the problem in action, please open this URL: http://www.nevergone.biz/DEMO_CODE/index.html
How to test: Open the link above in Android Google Chrome portrait mode and then click SPIN. During SPIN click above the game canvas or anywhere. Notice that everything freezes.
The code was extracted only for testing these issues, so after a few spins it may freeze. I will fix this tomorrow, but I hope someone can give some ideas for solving the problem.
Problem #1 is apparently isolated on some older devices that use Android Google Chrome. The problem is somehow caused by CREATEJS using too many listeners on the stagedown event. I am currently waiting for the developer of the framework to give an answer or for Chrome to receive a serious update.
Problem #2 was fixed by removing all text-shadow CSS effects which apparently were consuming a lot of memory.
cache might work.
var testShape=new createjs.Shape();
testShape.graphics.beginFill("red").rect(0,0,100,100);
testShape.cache(0,0,100,100);
stage.addChild(testShape);
// If you make changes and want to refresh the cache
testShape.updateCache()
I'm working on a painting application with multitouch.
This should work on a 32" inch Intellitouch 2521". Unfortunately as expected it is not plug and play together with the Fabric.js which used event.js to catch the touch event.
If i write simple js with touchstart, touchstart and touchmove events these do work with multi touch. But if I try the event.js pinch, touch,... these do not.
Any Idea what could be the reason for this? I already wrote the whole application in expectation that it would just work as it would on a phone (On Mobile the touch functions does work). But with Windows it does not.
I fixed this by using android on desktop for my installation.
I have an app which is an Ionic Project.
in android it is working fine. But when I build and run the project in ios I have to click Every button twice (double tap) in Simulator and in Device also.
I don't know what exactly is the issue. and how to debug.
Is their someone who knows what to do ?
Edit this is happening for Buttons and a tag.
I put this CSS:
.button:hover
{background-color:red;}
and when I run my project and click on button then this :hover css is applied and click event not triggers.
On iOS devices, I believe the first touch is seen as 'hovering' in a similar way to when you hover over something with your mouse. Essentially, the first touch on iOS is seen as hover and the second is seen as a real click.
You can listen for .hover events instead of .click events based on the browser, which will be Safari on iOS and Chrome on Android. Although some iOS devices may be running chrome, this could work for the majority of the cases, assuming it is possible with Ionic.
I'm create a website specifically for the ipad. What tools should i use to help me debug CSS? I'm developing from a desktop environment, but testing and viewing my changes on the iPad.
I use firebug to debug your normal website. But my ipad website doesn't show up at all in firefox. It shows up in Safari, but Sencha's drag, touch and slide event handlers don't respond well to my mouse events.
What tool do I use to debug css (and possibly javascript) issues on an ipad website built with Sencha?
Try the Phantom Limb.
It simulates touch events on a desktop browser to enable testing. (it also turns your mouse pointer into a giant hand, which I guess adds to the effect.... hmmmm)
This is quite a new thing -- I haven't tried it myself yet; it's still on my 'todo' list, so I can't tell you how great it is, just that it is supposed to solve the kind of problems you're asking about.
I ended up using google chrome's developer tools. It uses the webkit engine just like safari, so it's the closes thing I have.
I'm trying to make a jquery tooltip that appears when a user mouses over a link. In my case the link is using display:block style so that it covers a large area. It works perfectly in Chrome and Firefox but in Internet Explorer it doesn't work at all. The tooltip doesn't show, the browsers own tooltip shows etc... IE!!!!
http://pastebin.com/1kBaMujV
Any ideas? Got to love internet explorer...
Ok well i took your advice and went for a pre existing one using jQueryTools from flowplayer. This is the result:
http://pastebin.com/gxSQx64B
Works great in chrome, firefox and internet explorer. I guess it is best to use one that is mature. The only thing that still annoys me is in firefox if you click on the link then click the browser back button, the tooltip is statically displayed over the link area until you move the mouse back over the link area. This doesn't happen with the other browsers.
Which version of IE you are using? In IE 8 it is fine.