'deviceorientation' in Firefox? - javascript

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).

Related

Chrome touchenter touchleave

I've seen this question asked a couple times on here but no one has replied.
Before I go implementing the more resource intensive elementAtPoint method, can someone confirm that Chrome does not support touchenter and touchleave events?
The MDN documents it https://developer.mozilla.org/en-US/docs/Web/Reference/Events/touchenter
The latest W3C draft specifies it http://www.w3.org/TR/2011/WD-touch-events-20110505/
Does anyone know if any of the Chrome versions support it, even if it's in development, can I get it?
Well, pretty outdated I guess... Anyways, I've just used touch events, they are supported now, and Chrome will eventually emit touch events instead of clicking if you switch to device mode on the developer window (F12). Thus they are kinda easy to test.
CanIUse is also a friend: http://caniuse.com/#search=touch

javascript multi-touch on win 7

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.

Does IE9 have browser mode down to IE7 and does this mean different version of Javascript

I'm having some trouble setting up virtual machines for testing IE versions (I use a mac) and have noticed on IE8 it has a browser switching mode.
Does this mode do a full switch for CSS and Javascript, I need testing to be 100% reliable.
Also does IE9 have a similar feature going down to IE7?
It's not going to be 100% reliable, I can tell you that right now. The only way to really test on IE7 is to test on IE7. For most layout checks, using the newer browser in emulation mode will be fine, but there are definitely bugs and oddities in the actual older browsers that the newer browsers don't mimic faithfully.
When you change The browser mode from the IE developer tools, IE renders the site according with your selection.
IE 9 also has this option, and if say you pick IE7, you'll get pretty much the same expercience you would get in that browser (from a layout and functionality point of view), but it's not completely reliable, some Javascript quirks are not the same (I can't remember any specific ones)
If you really need to test in IE7, get IE7 :D
More info here!
Press F12, and in the developer tools toolbar change browser mode to IE7 and Document Mode: IE7 (if you change the browser mode, then doc mode automatically changes also).
As for whether you get a different Javascript API? I don't know.
I agree with #Pointy, though. Realistically you actually need to run IE7. A VM is often a good way to do this if you don't want to muck about getting the different versions running side-by-side.

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.

What are the quickest and easiest ways to ensure existing web pages display well on mobile platforms?

The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?
Opera has an option to view pages as through a mobile device. I've found it useful in the past.
I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.
One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.
You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.
It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.
BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.

Categories