Category: Web

Journey through the clickable elements for Android

Before going into the topic, I have to say, mobile browser compatibility issues are much uglier than desktop browsers. I should have appreciated the days when I was a desktop web guy:)

When there are more and more mobile devices with large touch screen available, a lot of companies are making touch friendly version of their websites for those devices. For example, Google Reader for iPhone and Android devices, and mobile portal of St. George Bank.

One thing you would notice is that they all use large clickable area for the finger to press. These are usually not implemented with buttons or images, rather using the anchor tag <a>.

Of course there are many ways to implement this, but when it comes to Android devices, things are becoming a bit tricky.

You see, when you pressed on a clickable element in the Android browser, you usually see the orange border telling you that you have pressed the element and the browser is doing it’s work right now:
Android browser highlighting pressed hyperlink

Ideally this should happen when you press on anywhere of the clickable element including the empty area. But the fact is, it doesn’t work so for all the implementations. In fact, it only works with 1 hacky implementation. Let’s us view the following 4 examples in the default Android browser:

Method 1

Wrapping a <a> with 100% width/height in <div>

Method 2

Wrapping a <span> displayed as block in <a>



<a>
    <span style="display: block">
        Contents...
    </span>
</a>


Method 3

Wrapping a <div> in <a>


<a style="display: block;">
    <div>
        Contents...
    </div>
</a>

The large empty area in the above examples are intended for your finger to press on them. If you really try these on the default Android browser, you’ll notice only Method 3 is a fully working implementation, as the browser still highlights the entire clickable block when pressing on the empty area. This is bad because method 3 is a non-standard compliance implementation (wrapping the block level element <div> in the line level element <a>), which means there’s no guarantee for the browser to support it in any future versions.

So it’s pretty clear that there’s only 2 options ahead: you either disregard the standard and go with the visually correct method (3) or stick to the standard and leaving a less perfect user experience on your website hopping it would be fixed in the Android browser one day.

JavaScript: Recursive and iterative object deletion

The use of object is quite important in javascript especially in complicated web applications. Although JavaScript engines clean up after themselves once the variable is no longer referenced, but from time to time there might be needs to manually “dispose” objects to free up memories or for security reason. In JavaScript, this can be achieved by the delete keyword.

So a very simiple way of doing this is just iterating through all child objects and do the work:

var person = {firstName:"Leon",lastName:"Zhou",age:"28",sex:"male"};
for (var obj in person) delete person[obj];
delete person;

However, what if you want to delete children objects that are more than 1 level deep? This is usually done in a recursive way:

function dispose(obj) {
    for (var o in obj) if (isNaN(parseInt(o))) dispose(obj[o]);
    delete obj;
}

var person = { name: { first: "Leon", Last: "Zhou" }, age: "28" };
dispose(person);
delete person;

Note that in the recursive function dispose, I had to check if o is an integer. This is to prevent the function going into infinite recursion because when obj is a single letter, the first var o in obj will always be “0”, and obj[o] will always return obj itself.

JavaScript: Creating inline DOM objects

Honestly, it’s been a long time since I touch any javascripts but they still remain fun and powerful for me. Recently I came across a situation that I need to create some DOM objects using javascript. After a little search, I found out that it’s exactly how JSON objects are created:

var myObj =
[{
  title: 'My Object',
  dataList:
  [
    {name: 'data 1', value: 'value 1'},
    {name: 'data 2', value: 'value  2'}
  ]
}]