Web Development Blog

After developing a few mobile websites in the past few months, I notice that I am reusing certain Javascript code in every project. Followings are the 10 Useful Javascript Snippets that I use for mobile sites. Note that some snippets require jQuery mobile framework.

1. Add class name “iPhone” or “Android” to body element if the page is viewed on iPhone or Android browser

if (navigator.userAgent.match(/iPhone/i)) {
	$('body').addClass('iPhone');
} else if (navigator.userAgent.match(/Android/i)) {
         $('body').addClass('Android');
}

Examples of iPhone user agent string:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A537a Safari/419.3
Mozilla/5.0 (iPhone; U; XXXXX like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A477d Safari/419.3

Examples of Android user agent string:
Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 1.6; en-gb; Dell Streak Build/Donut AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/ 525.20.1
Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; HTC Desire 1.19.161.5 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
Mozilla/5.0 (Linux; U; Android 2.2; en-us; DROID2 GLOBAL Build/S273) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 2.2; en-gb; GT-P1000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; E10i Build/2.0.2.A.0.24) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

2. Remove the browser address bar

window.scrollTo(0, 1);

3. Prevent touch scrolling on a page

notouchmove = function(event) {
	event.preventDefault();
}

<div data-role="page" id="home" ontouchmove="notouchmove(event);">
...
</div> 

OR

document.body.addEventListener('touchmove', function(event) {
	event.preventDefault();
}, false);

4. Display a message when the page is viewed in landscape

var updateorientation = function (){
	var classname = '',
	top = 100;
	switch(window.orientation){
		case 0:
		classname += "normal";
		break;

		case -90:
		classname += "landscape";
		break;

		case 90:
		classname += "landscape";
		break;

	}
	
	if (classname == 'landscape') {
		if ($('#overlay').length === 0) {
			window.scrollTo(0, 1);
			$('body').append('<div id="overlay" style="width: 100%; height:' + $(document).height() + 'px"><span style="top: ' + top + 'px">Landscape view is not supported for this page.</span></div>');
		}
	} else { 
		$('#overlay').remove();
	}
};

Usage:

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
	updateorientation(); 
}, false);

5. Truncate a description and show full description when touched

var truncatedesc = function(trunc, len) {
	if (trunc) {
	  var org = trunc;
	  
	  if (trunc.length > len) {
		trunc = trunc.substring(0, len);
		trunc = trunc.replace(/w+$/, '');
	
		trunc = '<span class="truncated">' + trunc;
		trunc += '<strong class="more-description">...</strong></span>';
		trunc += '<span class="original" style="display: none;">' + org + '</span>';
	  }
	  
	  $('.truncated').live("touchstart touchend", function() {
		$(this).closest('div').find('.original').show();
		$(this).closest('div').find('.truncated').hide();
		return false;
	  });
	  
	  return trunc;
	}
};

Usage:

truncatedesc(item.description, 100);

6. Redirect to another page upon successful ajax request (jQuery mobile)

var ajaxurl = ‘http://…’; // Your web service URL

$.ajax({
	url: ajaxurl,
	type: 'GET',
	processData: false,
	contentType: "application/json",
	dataType: "jsonp",  
	success: function(data) {
		$.mobile.changePage("results.html");
	},
	error: function() {
		alert('Error!');
	}
});

7. Remove active state from links in listview (jQuery mobile)

$('div').live('pageshow', function (event, ui) {
	$('[data-role=listview] li').removeClass("ui-btn-active");
});

8. Disable default jQuery mobile style from select dropdown (jQuery mobile)

$(document).bind("mobileinit", function(){
  	$.mobile.page.prototype.options.keepNative = "select";
});

9. Dynamically update listview (jQuery mobile)

var output  = '<li><img src="' + item.image + '" alt="' + item.title + '" />';
output += '<h3><a href="' + item.url + '">' + item.title + '</a></h3>';	
output += '</li>';	

$('#mylistul').append(output).listview('refresh');

10. Dynamically add form input and apply default style (jQuery mobile)

var html = '<input type="search" name="suburb" id="suburb" placeholder="Enter suburb" />';
$('#searchform').append(html);
$('#suburb').textinput();

Recommended Books

While no book has already been released at Amazon on jQuery mobile, the following two books on HTML5 and jQuery will help you understand and work with jQuery mobile framework better as jQuery mobile is based on jQuery and uses HTML5.

HTML5: Up and Running

jQuery: Novice to Ninja

Found this article useful? Share it with your friends: