mikejuniper.com

I recently built a web application with a search field which geolocates whatever you typed into that field and zooms you to the results. We were severely constrained on UI space so we went without a search button and we just do the search when the user hits the enter key.

This worked fine on the iPad except that the keypad didn’t collapse. Of course, you can’t directly control the keypad in Javascript but I had a hunch that if I just removed focus from the search field, it would collapse. And it worked! Code (jQuery) below:

$(this).blur();

We recently built a web application (several actually) that we needed to work well on tablets. Since the first Android 3.0 (Honeycomb) tablet, the Motorola Xoom, is now out (and since I have one) we were specifically targeting the iPad and the Xoom. Though they both use Webkit based browsers, I ran into a couple of interesting differences between the two.

First off, I used -webkit-user-select:none; to prevent selection of various elements in the ui. This worked flawlessly in Mobile Safari on the iPad but Chrome on Android does not seem to respect it at all.

I also ran into a couple of issues using the ArcGIS Javascript API on the Xoom. Since Android doesn’t support SVG, the JSAPI uses canvas and there are evidently some small problems with their canvas implementation. TextSymbol doesn’t work and neither do any of the fill styles for simple fill symbol except solid and null. Overall the JSAPI works great on the Xoom, though.

I’m told that the text symbol issue will probably be fixed in the 2.3 release.

This is one of those things that I’m posting so that I can remember it in the future, but maybe it will help somebody else too.

Blueprint is a css framework I sometimes use. It’s easy to understand and use. But I’ve noticed that it stomps on some ArcGIS Javascript API styles and messes up the zoom slider. Also, don’t forget to assign the appropriate class to the body or some appropriate element so the JSAPI styles get applied!

Specifically, some of the table related styles in Blueprint’s screen.css file are to blame. Generally, I just get rid of all of them but it you want to get surgical about it, the following are the offending declarations:

table {margin-bottom:1.4em;width:100%;}

and

tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}