javascript multi-touch on win 7 - javascript

Is there any good solution for developing web applications that can work with iOS multitouch and Win 7 multitouch? Being limited to a specific browser such as firefox or chrome is acceptable but all of the browser combinations I have tried don't seem to work with any of the multitouch demo applications I have tried such as:
Touch Events demo from mozilla
http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx
This (very cool) demo of firefox multitouch does not seems to have an actual demo page that I can find and the Moz event functions used seem to be deprecated anyway according to the Touch Events page. Any pointers you can give will be very much appreciated.

Related

'deviceorientation' in Firefox?

I'm working with 'deviceorientation' on my laptop and an example jsfiddle seems to work fine in Chrome but is not responding in Firefox. I think that line 15 of JS is not working somehow...
window.addEventListener('deviceorientation', devOrientHandler, false);
The MozOrientation version on line 18 doesn't seem to be picking up the slack
window.addEventListener('MozOrientation', mozDevOrientHandler, false);
Just updated Firefox. And no change. I've tried to test on a desktop and (unsurprisingly) the machine doesn't seem to have the necessary accelerometers/sensors so the fiddle doesn't work on any browser on that machine. I've been scouring questions, reading the w3c specs, the MDN support and I still can't get it.
Does anybody know if this is a Firefox issue? Did I mess up settings or something? Any help is much appreciated. Any ideas as to why that example jsfiddle isn't working on Firefox?
note: the example "green ball" in the MDN link above isn't working on FF either. First time asking a question on SO.
Thanks!
Edit: I should clarify that the jsfiddle is the best example I could find, and is NOT my code. I believe it was from HTML5rocks.com but I can't find that source.
Firefox does not, at this time of writing, expose DeviceOrientation events on any Desktop platform. Your event handler is not triggered in Firefox simply for the reason that the API is not enabled in their Desktop browser builds.
On the other hand, Chromium-based browsers have enabled DeviceOrientation events with some important caveats. Chromium-based browsers generally only return DeviceOrientation events consistently on Mac OS X due to the general availability of gyro + accelerometer hardware sensors that are available in Apple computers. Additionally, Chromium-based browsers report the event.alpha value as undefined due to no compass or magnetic sensors being available to compute that correctly.
The situation on mobile browsers is much better and is arguably the main target for this API. All major mobile browsers (Safari on iOS, Chrome/Opera/Firefox on Android) do support this event in its un-prefixed form i.e. window.addEventListener('deviceorientation', function(event) { /* ... */ }, false).

Javascript fast button click for IE6 and IE7 for mouse-down

I am programming an application by using Windows ActiveX web control which uses html buttons for input interaction. On differing versions of Windows XP this control may be IE6 or IE7. On Winodws 7 x64 with IE11 installed it is still IE7. I do not know what version is available on Windows 8.
Operating within these limitations (IE6/IE7), is there a javascript fast click solution for these browsers?
I found that handling both the .click and .dblclick events with jQuery will simulate fast click for events which trigger on "mouse up". However, I would prefer for this particular application for the event to fire on mouse-down instead of mouse-up. I can get half of it with .onmousedown, but .dblclick activates on mouse up which makes interaction jumpy on double click.
I tried various fast click implementations on the internet and was unable to find an adequate solution. I am able to use versions of jQuery prior to version 2.0.
If you feel comfortable running an executable, I've written a simple demo application which accepts a single command-line parameter for passing the target web page url. This demo will utilize your operating system's IE ActiveX control for testing purposes.
You can pass a file path as the url with this program. However, it was only tested with the IE7 ActiveX control. I don't know if a file path will work for IE6, but I believe it should.
http://codespunk.com/files/upload/html_test.zip
If someone out there is using Windows 8 and 8.1, I would be interested to know what the result is for "http://whatbrowser.org" so we can see what version of IE the control is using.

Is html5 drag and drop broken on safari browser for windows?

Is html5 drag and drop broken on safari browser for windows ? If so, are there any work arounds ?
I'm using Safari 5.1.2 on Windows 7 and the drop targets always show up as non droppable. Tried this on 2 different windows 7 computers with clean install and latest setup.
Tried with both this demo and my own code which works on every other latest browser.
http://html5demos.com/drag
Indeed D&D for Safari doesn't work.
Kind of work around for Safari:
Put the logic in the 'dragend' event of the draggable object
Instead in the 'drop' event of the dropping on object.
Yes. After a lot of self-doubt, experimentation, and research, I can say that it is definitely broken for me too (Safari 5.1.7 on Windows) as at today: 15 Nov 2012. This has been quite confusing and distressing!
Hope Apple comes to the party soon.
From http://html5doctor.com/native-drag-and-drop/#dragging_anything
add this:
[draggable=true] {
-khtml-user-drag: element;
}
Non-HTML5 drag and drop is available via jQuery UI:
http://jqueryui.com/demos/draggable/
You can build a download with only that specific function if you want it to be lightweight.
You can use Modernizr to detect whether it's supported and fall back on jQuery if needbe:
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution.
}
From http://www.html5rocks.com/en/tutorials/dnd/basics/

debugging css ipad

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.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

Categories