Web Development Blog

The following snippet of code will display a google map with user’s default location on jQuery mobile page if location services is enabled. Otherwise, it will use predefined lat and long values to create the map. The code uses jQuery mobile pagecreate event.
A little info on jQuery mobile pagecreate event: [...]

Continue reading Display a location-aware google map on page load with jQuery mobile

For iPhone / iPad (iOS)
Prerequsites
- Install ChildBrowser Phonegap plugin
- Copy FBConnectExample/FBConnect.js into your www folder and include it in your HTML file
- Read and follow the instructions from How to post to the Facebook wall in an iPhone app with phonegap, FaceBook Connect and ChildBrother plugin by MosaCrea
The Javascript(jQuery) code:

$(‘#share-facebook’).live("touchstart touchend", function() {
var url = [...]

Continue reading How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins

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 [...]

Continue reading 10 Useful Javascript Snippets for your mobile websites

jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile. The framework is built on top of one of the most popular Javascript frameworks, jQuery.
Followings are some of [...]

Continue reading Top 10 jQuery Mobile Code Snippets that you need to know

The following Javascript snippets are sourced from snipplr, a Social Snippet Repository. They are written in pure Javascript lanaguage, without using any Javascript framework like jQuery, MooTools, Dojo, etc.
1. Email Validation
Source

function checkMail(email){
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(email)) {
return true;
}
return false;
}

2. Toogle Checkboxes
Source

<script type="text/javascript">

function toggle_checkboxes(id) {
if (!document.getElementById){ return; }
[...]

Continue reading 10 most useful Javascript snippets from snipplr

Following are 10 Useful jQuery snippets for any website. To use these snippets, you must include jQuery library in your page first and then add the snippets inside DOM ready function as follow:
$(document).ready(function() {
// add your snippets here
});
1. Display Warning Message for IE 6 Users
if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < [...]

Continue reading 10 Useful jQuery Snippets

The following Javascript will clear default text value in input boxes when you click on them. To trigger the Javascript, you’ll need to specify both title and value attributes and set class of the input field to “text”. jQuery library is required for this to work.
Javascript

$(‘.text’).focus(function () {
if ($(this).val() == $(this).attr(“title”)) [...]

Continue reading Clear default text in input boxes on click with jQuery

I needed a script that copies a text (in my case, coupon code) onto clipboard and then open the web address associated with the coupon in a new window for my Coupons for Webmasters page. For the clipboard copying, I’m using ZeroClipboard script written by Joseph Huckaby. ZeroClipboard is a free and [...]

Continue reading Click to copy and open site script

This is one of the most commonly used piece of code for jQuery. Often times, we need to check if a div/element exists in the page before processing a block of script (eg: replacing the content of the div).

if ( $(“#message”).length ) {
$(‘#message’).text(“Hello!”);
}

Continue reading How to check if div exists in jQuery

Here’s a snippet of CSS and HTML code that aligns an image in center (horizontally) and middle (vertically). Tested in Firefox, IE, Chrome and Safari.

CSS
#enter {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
margin: -120px auto 0 -130px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of [...]

Continue reading Align an image in center and middle using CSS