2010 is predicted to be the year of mobile and mobile web browsing is expected to increase this year. To help you build a website that is accessible not just to normal web users on desktop or laptop computers but also to mobile users, let’s have a look at some of the tips on building [...]
Continue reading Tips on building websites for mobile browsers
24 Nov, 2009
How to add a breadcrumb to your blog and have it appear on Google’s Search Result Snippet
Google Search has recently introduced breadcrumbs in their Search Result Snippets replacing the URL displayed below the individual snippet. There are both advantages and disadvantages of this new feature. One immediate advantage that I see is if your search result snippet has a breadcrumb, your website will probably get more pageviews because the user is [...]
Continue reading How to add a breadcrumb to your blog and have it appear on Google’s Search Result Snippet
SEO site checker is the iPhone webapp we launched a few days ago. This is the fourth iPhone web application we’ve developed and we thought it’d be useful to share some tips we learnt along the way. 1. Get inspiration Before building anything, we like to browse through existing iPhone web apps that are available. [...]
Continue reading Tips for iPhone Web App Development
This example code shows you how you can have a top branding bar similiar to diggbar in just a few lines of html and css. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title>framebar example by Web Development Blog</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin: 0; padding: 40px 0 0 [...]
Continue reading Framebar (like diggbar) example in html and css with no javascript
I have been using reCAPTCHA a lot lately, but the default UI is not very intuitive nor pretty. Thanks to reCAPTCHA Wiki, I found out that you can customise the look and feel of reCAPTCHA using theme option. See below for my sample code. <script type="text/javascript"> var RecaptchaOptions = { theme : ‘custom’ }; </script> [...]
Continue reading Customising reCAPTCHA Theme
This example shows how to populate dropdown menus automatically with values from a JSON object using jQuery. Among other things, it demonstrates: How to define a JSON object in Javascript How to write a custom function in jQuery using $.fn How to traverse a JSON object using jQuery How to populate a dropdown menu dynamically [...]
Continue reading Dropdown menu population using JSON and jQuery
This is a lazy fix to redirect any url that doesn’t exist (resulting in 404) to the homepage. Add the following line of code into the .htaccess file inside the root directory of your website. ErrorDocument 404 /
Continue reading Redirect to homepage when page not found
Unlike any other mobile web browsers, iPhone comes with Safari browser which makes it possible to view any website that works on Safari. However, the challenge is that the screen size of an iPhone is not as big as a traditional monitor and therefore, if you have got a website which has a width of [...]
Continue reading Making a website iPhone-friendly using CSS
Javascript $.fn.checkAvailability = function() { $("#check-username").click(function() { if ( $(‘#username’).attr("value") != ”) { $(‘.loading’).show(); var username = $(‘#username’).val().toLowerCase(); $.get("check-username.php", { username:username } , function(data) { //if username is already taken (FALSE) if (data == 0) { $(‘.loading’).hide(); $(‘.error’).remove(); $(‘.available’).remove(); $(‘#check-username’).after(‘<span class="error"></span>’); $(‘.error’).text(‘Username is already taken.’); } else { $(‘.loading’).hide(); $(‘.error’).remove(); $(‘.available’).remove(); $(‘#check-username’).after(‘<span class="available"></span>’); $(‘span.available’).text(‘Username is [...]
Continue reading Check username availability using AJAX and jQuery
.transparency { background: #f4f4f4; opacity: 0.7; /* Modern Browsers, eg: Firefox, Safari, Opera, Chrome */ filter: alpha(opacity = 70); /* IE */ -moz-opacity: 0.7; /* Old Mozilla, eg: Netscape */ -khtml-opacity: 0.7; /* Old Safari */ zoom: 1; /* Requires for IE if the element is not positioned relatively */ }
Continue reading Opacity in CSS
Hello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more 
