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
}

Adobe Shadow is now Adobe Edge Inspect

In a major move on the 24th of September, Adobe has renamed Shadow to Adobe Edge Inspect and now it has become a part of the Adobe Edge Tools and Services : http://html.adobe.com/edge/
Shadow had been a great success for mobile web developers and designers to remotely debug applications on the mobile device in real time. I had been using the preview version of Shadow for quite a time and has found it really useful, the last one being the Shadow Labs Release 4. So now the preview period of Shadow is ending on the 31st of October and after that Shadow will be invalid. Instead you have to download Edge Inspect and start using it.
You can get Edge Inspect by signing up for a free Creative Cloud membership subscription or a paid subscription. Get a account for yourself at: https://creative.adobe.com/join/starter. The free version allows only one device to be paired with your computer while the paid full version allows multiple devices to be paired simultaneously with your computer. Here’s a video demonstration on the new Edge Inspect release

Read More »

Use your own Weinre server with Adobe Shadow – Step by step

Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your own Weinre debug server with Shadow. What it does is that it fastens up the connection time and reduces the wait time when you are using the default Weinre debug server that Adobe has hosted on their servers. So if you have a local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. So let’s see how to do it.

First of all you will need to have the Weinre server set up in your computer. For that you will need the weinre jar file and Java installed in your computer. I have a full detailed tutorial on setting up and using Weinre in one of my earlier post. So please have a look at it and set up the server. You can check out the “Configuring and running the Weinre debug server” section in the postAssuming that you have the server set it up on your computer, then you need to start it. You can check my previous post for that too. Its all there.

Then you can verify if the server has started. Open your browser and navigate to http://<yourip&gt;:port where <yourip> is your machine’s ip address and port is the port number where the Weinre debug server listens to. You can find out the port and the details from the command prompt after you have run the server. The screenshot below shows my instance,


Read More »

Adobe Shadow – another way of remote debugging mobile web apps in iOS and Android

Logo used from Adobe Labs site

Adobe has come out with the preview version of their new tool Adobe Shadow that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices. With shadow you can remotely preview your mobile web projects and also debug them. In fact Shadow uses the WEINRE debug/web inspector client to allow developers to remotely inspect HTML , view console logs and also make changes to the DOM. In the last post I have talked about WEINRE in details. You can refer it if you are new to WEINRE.

Shadow allows multiple devices (mobile devices) to connect wirelessly to your computer and as you browse in your computer all the target mobile devices will be in sync. So when you make changes to the HTML DOM in the computer you can see the changes instantly on all the target devices.

You need three things to configure Shadow and get started,

1) Shadow helper application. Install this in your computer. Shadow is not available for Windows XP so you need a Windows 7 machine or a Mac (OS X 10.6 and 10.7) machine. This helper application must keep running at the time of a debug session that you will carry.

2) Google Chrome browser extension for shadow. You need to install the extension. You will get the link to this in the downloads page below.

3) Shadow client app for iOS or Android. Whichever mobile device you have, go to the app market and search for Adobe Shadow, find it and then install it. For example go to Apple App Store and get the Shadow app and install it.

You can find all the downloads in the Adobe Labs site : http://labs.adobe.com/downloads/shadow.html

You can also find a very nice video demonstration to get started : http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow.

Personally, after trying both Adobe Shadow and Weinre, I found Shadow easier to configure and get started with debugging mobile web applications remotely. For Weinre you have to install Java separately, use command line instructions and also inject javascript into the client code. This at times is a hassle and confusing for first timers.

This post was just a kind of teaser for you and in case you have not heard about Adobe Shadow you can give it a try. I also look forward to come out with a detailed tutorial on how to use Shadow with screenshots of my instance. Till then I am continuing to explore Shadow and similar tools.

Below are some of my previous tutorials that should help you.

  1. Debugging mobile web applications remotely with Weinrehttps://jbkflex.wordpress.com/2012/04/12/debug-mobile-web-applications-remotely-with-weinre/
  2. Use your own Weinre server with Adobe Shadow – Step by stephttps://jbkflex.wordpress.com/2012/08/28/use-your-own-weinre-server-with-adobe-shadow-step-by-step/
  3. WEINRE – Web Inspector Remote Video by Patrick Muellerhttps://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-video-by-patrick-mueller/

Update
1) Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your own Weinre debug server with Shadow. What it does is that it fastens up the connection time, performance and keeps the remote traffic local. So if you have a local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. Read how to do it here.

2) Adobe Shadow is now Adobe Edge Inspect: Read the post and find out what changes has been made : https://jbkflex.wordpress.com/2012/09/27/adobe-shadow-is-now-adobe-edge-inspect/

How to detect the orientation of device at page load – iPhone

This is one situation which baffles me sometimes and I face this one regularly while developing mobile web apps – I want to know whether the device is held in portrait or landscape mode when the page first loads and then based on the result I change the look n feel. Remember landscape mode of the device is more wider and the screen width increases, so does the viewport width so you have to adjust your page layout accordingly.

Read More »

JavaScript: How to detect orientation change of a mobile web app

Update:
1) For Firefox browsers on Android mobile devices, the orientation change event is not fired. See how to have an alternate detection mechanism for mobile firefox – https://jbkflex.wordpress.com/2013/05/23/orientationchange-does-not-work-in-mobile-firefox-for-androids-wtf/

Now back to the original post,

orientation changeIf  you have worked on a mobile web application using Sencha Touch, you might not have come across this problem of detecting the orientation change (portrait to landscape and landscape to portrait) of the mobile device, as Sencha Touch detects it for you (you do not have to write any extra code for it). However, when you are developing a mobile web app purely with HTML5, JavaScript and CSS/CSS3 which I did (without using Sencha Touch) then it becomes highly important for you to detect the orientation mode of the device and change the UI accordingly. JavaScript now allows us to detect the orientation mode of the device be it a iPhone, Android or a BlackBerry device. You can detect whether your viewing mode is portrait or landscape. Here is how to do it,

window.addEventListener('orientationchange', handleOrientation, false);
function handleOrientation() {
if (orientation == 0) {
  //portraitMode, do your stuff here
}
else if (orientation == 90) {
  //landscapeMode
}
else if (orientation == -90) {
  //landscapeMode
}
else if (orientation == 180) {
  //portraitMode
}
else {
}
}

As you can see we have used W3C’s DOM Level2 event registration method of addEventListener() to handle the orientationchange event. Now, as you change the orientation of the device the method  handleOrientation() will be called. Inside the handleOrientation() method we have a series of if-else blocks to handle the correct mode and make the UI changes accordingly. Note that the orientation variable gives the current orientation value. It is a pre-built variable, so no need to declare it.

There is another method of making the necessary UI changes for your mobile web app based on the orientation – using CSS3 Media Queries. However, I prefer the java script way as I had to do a lot of DOM manipulation and changes in my project which cannot be done using CSS.

Also I have used percentage widths of elements in CSS to make them auto adjust to the screen size of the device. So, this way also sometime solves the problems. Will write a small post on it soon.