1. Geolocation 2. onLine 3. Audio and Video 4. Local Storage 5. History Geolocation Geolocation API is usually used together with Google Maps to show the current location of the device. Where would you use it? Geolocation is an essential feature for applications that needs to know information about the device’s current location such as [...]
Continue reading My favourite HTML5 Features
In this step-by-step tutorial, I’m going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter. 1. Changing the background color <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333"> <tr> <td> </td> </tr> </table> 2. Setting a fixed width and background color for the content area <table [...]
Continue reading How to code an HTML Email Newsletter
web 2.0 style call-to-action buttons can be purchased in psd format from graphic river Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using <button> tag instead of <input> tag. The <button> tag [...]
Continue reading How to style a Submit button in CSS – Example 2
The main purpose of this code is to have “Read more” for a long block of text (eg: comments) without having to separate the text into two div blocks and then use toggle to show/hide the 2nd block. This code simply uses CSS overflow:hidden property to hide long block of text. jQuery live event is [...]
Continue reading Read more using jQuery live event
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
HTML <input type="submit" id="submit" value="Search" /> CSS #submit { cursor: pointer; }
Continue reading Change the arrow into a hand when hovering over ‘Submit’ button
In header.php file of my WordPress theme, I have the following code to display a different header image for different pages. <?php if (is_page(‘about’)) { $image = ‘image_about.jpg’; } else if (is_page(‘projects’)) { $image = ‘image_projects.jpg’; } else if (is_page(‘services’)) { $image = ‘image_services.jpg’; } else if (is_page(‘contact’)) { $image = ‘image_contact.jpg’; } else { [...]
Continue reading How to display a different header image for different pages in WordPress
If you are hard-coding your navigation menu in WordPress rather than using wp_list_pages() template tag, you will need to add a class manually in order to highlight the current page it is on. <li<?php if (is_page(‘gallery’)) : echo ‘ class="current_page_item"’; endif; ?>><a href="gallery/">Gallery</a></li> Note: wp_list_pages() template tag automatically add current_page_item class to the <li> element [...]
Continue reading Highlight the current page link in WordPress
Problem in IE8: The upper half of the <fieldset> border goes missing. This problem has been discussed here and shown here. HTML: <form action="login.php" method="post" id="login"> <fieldset> <legend>Login</legend> <label for="username" class="label">Username</label> <input type="text" name="username" id="username"/> <label for="password" class="label">Password</label> <input type="password" name="password" id="password" /> <input type="submit" name="submit" value="Login" /> </fieldset> </form> CSS: fieldset { border: 1px [...]
Continue reading Fieldset and Legend bug in IE8
HTML: <a href="http://www.google.com" rel="external">Google</a> Javascript: $(document).ready(function() { $("a[rel=external]").attr(‘target’, ‘_blank’); }); Or $(document).ready(function() { $(‘a[rel="external"]‘).click( function() { window.open( $(this).attr(‘href’) ); return false; }); });
Continue reading Open link in a new window using jQuery
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 
