orientationchange does not work in Mobile Firefox for Androids… WTF !

Yes, orientation change does not work in mobile Firefox. Strange!, but it is. So, when you rotate your mobile device from portrait to landscape mode and back to portrait mode, the orientationchange event is not fired in Firefox browsers for Android devices.

Normally for mobile browsers we detect the orientation change happening by registering to the orientationchange event.

window.addEventListener('orientationchange', function() {
  alert('orientation: ' + orientation);
}, true);

where the orientation property of the global object gives the current orientation that the device has been tilted to. For eg. 0 for portrait and 90/-90 for landscape.

However, when you run this code in firefox browsers for Android, the event is not fired (I tested it on Firefox 20/Galaxy S3). And this happens to be a bug. I mean how can you miss such a common thing in a big big browser!!

But there is an alternative way to detect the orientation changes in firefox browsers and that is by using Media Query detection technique. Also to let you know, I used the window.resize event to detect the orientation but it did not give correct results. The Media Query method worked perfectly. Here it is,

var test = window.matchMedia("(orientation: portrait)");
test.addListener(function(m) {
  if(m.matches) {
    // Changed to portrait
    alert('portrait');
  }else {
    // Changed to landscape
    alert('landscape');
  }
});

Still the window.orientation property is undefined for firefox browsers. So, you can use that to detect if it actually supports orientation change event. Who knows later they might start supporting. This is how you can do that,

if(typeof window.orientation === 'undefined') {
  //use media query technique
} else {
  //use orientationchange event handler
}
Advertisements

HTML5 SVG Support check using JavaScript – the simple way

My last post talked about how you can detect whether your browser supports HTML5 Canvas or not using simple JavaScript technique. Based on the same principles, this post illustrates how you can detect if your browser supports SVG elements. You may note SVG is Scalable Vector Graphics and HTML5 has native support for SVG tags. The difference with Canvas is that in case of SVG elements, they become a part of the DOM and you can manipulate each SVG elements, whereas in case of Canvas, the entire <canvas></canvas> tag becomes one node in the DOM and anything inside the Canvas <canvas> tag (for eg. a Rectangle) cannot be manipulated individually using standard DOM methods. Browse the web and you will find a hell lot of topics on this.

Alright, now back to the detection code. Just copy/paste this inside your window load / body load or in case of JQuery the $(document).ready() method,

if(!document.createElement('svg').getAttributeNS){
  document.write('Your browser does not support SVG!');
  return;
}

So, if your browser does not support SVG, then it will not process further (in case your application cannot live without SVG). But if you have a back up plan and you can live without SVG in your browser, then you can add an else block along with the if so that you can write your backup logic.

Explanation
Well, the code is very simple. Inside the if condition I create a SVG element using the standard DOM createElement() method. Now this will create a <svg></svg> object. Now next thing I do is to check if the getAttributeNS() method is defined or not. If you browser does not support <svg> then there is no way it will understand getAttributeNS() and that’s the catch.

HTML5 Canvas Support check using JavaScript – the simple way

This is how you can check for HTML5 Canvas support in your browser by using JavaScript, there’s no need of an external library like Modernizer to do a simple check like this. In fact most of the feature checks can be done natively, that’s what I prefer.

Here is the code,

var canvasEl = document.createElement('canvas'); //create the canvas object
if(!canvasEl.getContext) //if the method is not supported, i.e canvas is not supported
{ 
  document.write("HTML5 Canvas Not Supported By Your Browser");
  return;
}

As you can see in the first line I create a HTML5 Canvas element by using createElement() DOM method. As you might know that to work with Canvas, you have to get it’s context object (2d for now), which can be retrieved by the getContext() method. So, if a browser does not support the <canvas> tag or the canvas element, then no way the getContext() method will be defined for it. That’s what I check in the second line – the if condition. Remember that a function/method name is a variable which holds a reference to the function block. So we can check whether it is defined or not, in a normal way like we do for object properties. IE8 doesn’t support HTML5 Canvas. So try this code in IE8 for a quick test.

How can I use it with my code?
Use this code block inside the window load event handler or when the DOM ready event is triggered (using document.onreadystatechange, more). You can modify it as per your need.
Leave behind a comment if you are upset with this attempt.