A little info on jQuery mobile pagecreate event:

pagecreate
Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user’s wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.

$( '#aboutPage' ).live( 'pagecreate',function(event){
( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});

And the snippets:

Javascript

function initialize(lat,lng) {
	var latlng = new google.maps.LatLng(lat, lng);

	var myoptions = {
		zoom: 12,
		center: latlng,
		disableDefaultUI: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map = new google.maps.Map(document.getElementById("googlemap"),myoptions);

	var icon = new google.maps.MarkerImage('images/marker.png',
			new google.maps.Size(20, 20), // size
			new google.maps.Point(0, 0), // origin
			new google.maps.Point(20, 20) // anchor
		);

	var mymarker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: icon
	});
}

$('.page-map').live("pagecreate", function() {
        var lat = -33.887418, lng = 151.17403;
	if(navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position){
			initialize(position.coords.latitude,position.coords.longitude);
		}, function() { console.log('Error with getCurrentPosition'); });
	} else {
                // predefined location
		initialize(lat, lng);
	}
});

HTML

<div data-role="page" class="page-map">

	<div data-role="header">
		<h1>Google Map</h1>
	</div><!-- /header -->

	<div data-role="content">
		 <div id="googlemap"></div>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Footer content</h4>
	</div><!-- /footer -->

</div><!-- /page -->

Read Display a location-aware google map on page load with jQuery mobile on Web Development Blog!

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 = $(this).attr("rel");
	try {
		shareonfacebook(" likes Web Development Blog by Ei Sabai.", "http://eisabainyo.net/weblog/wp-content/uploads/2010/11/profile-small.gif", url);
	}
	catch(err) {
		console.log(err);
	}
	return false;
});

function shareonfacebook(text, image, url) {
	var client_id = "xxxxxxxxxxxxx"; // Your Facebook Client ID
	var redir_url = "http://www.facebook.com/connect/login_success.html";

	if (typeof fbPlugin === 'undefined') {
		fbPlugin = FBConnect.install();
	}
	fbPlugin.connect(client_id, redir_url, "touch");
    fbPlugin.onConnect = function() {
	    window.plugins.fbConnect.postFBWall(text, url, image, function() {
			navigator.notification.alert(
				'Thank you for sharing on Facebook.',
				function() {},
				'Thank you',
				'OK'
			);
		});
	};
}

For Android

Prerequsites
- Install Facebook for Android Phonegap plugin
- Copy facebook.js into your www folder and include it in your HTML file

The Javascript(jQuery) code:

$('#share-facebook').live("touchstart touchend", function() {
	var url = $(this).attr("rel");
	try {
		shareonfacebook(" likes Web Development Blog by Ei Sabai.", "http://eisabainyo.net/weblog/wp-content/uploads/2010/11/profile-small.gif", url);
	}
	catch(err) {
		console.log(err);
	}
	return false;
});

function postonfacebook(text, image, url, token) {
	$.ajax({
		   type: 'POST',
		   url: "https://graph.facebook.com/me/feed",
		   data: {
				message: text,
				picture: image,
				link: url,
				access_token: token,
				format: "json"
		   },
		   success: function (data) {
			   navigator.notification.alert(
					'Thank you for sharing on Facebook.',
					function() {},
					'Thank you',
					'OK'
				);
		   },
		   dataType: "json",
		   timeout: 10000
	});
}

function shareonfacebook(text, image, url) {
	var client_id = "xxxxxxxxxxxxx"; // Your Facebook Client ID

	window.plugins.facebook.authorize(client_id, function(res){
		if (res.token !== undefined) {
			postonfacebook(text, image, url, res.token)
		} else {
			// call authorization method
			window.plugins.facebook.getAccess(function(res) {
				if (res.token !== undefined) {
					postonfacebook(text, image, url, res.token)
				}
			});
		}
	});
}

Usage (for both iPhone and Android):

<a href="#" rel="http://eisabainyo.net/weblog/" id="share-facebook">Share on Facebook</a>

Read How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins on Web Development Blog!

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

Read 10 Useful Javascript Snippets for your mobile websites on Web Development Blog!

Followings are some of the most useful code snippets that I’ve used in my recent web app developed using jQuery Mobile framework.

1. Disable truncation for list items and buttons

If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. To disable this truncation, add “white-space: normal;” to the CSS selector in question.

For example, to disable truncation for buttons:

.ui-btn-text {
white-space: normal;
}

To disable truncation for list descriptions:

.ui-li-desc {
white-space: normal;
}

To enable truncation, set it to “white-space: nowrap;“.

2. Display a random background image on page load

jQuery Mobile has a number of page initialization events that you can use to trigger certain methods on page load. The following CSS + Javascript can be used to display a random background image every time a page is loaded.

CSS

.my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }

.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }

.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }

.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }

Javascript

$('.my-page').live("pagecreate", function() {
	var randombg = Math.floor(Math.random()*4); // 0 to 3
	$('.my-page').removeClass().addClass('bg' + randombg);
});

3. Disable a button action

To disable a button action (for eg: from opening a page), add the following Javascript.

$('#home-button').button("disable");

And to re-enable it:

$('#home-button').button("enable");

4. Disable loading pop-up message

I find the loading pop-up message a bit annoying because it gets triggered everytime you load a different page. To disable this: add the following line of code into your JS file.

$.mobile.pageLoading(true);

By default, it is enabled like so:

$.mobile.pageLoading();

5. Create a custom theme

jQuery Mobile framework comes with 5 themes – Theme A, Theme B, Theme C, Theme D and Theme E. But you can easily create a new theme for your web app.

The steps to create a new theme:
1. Copy CSS for any theme from jQuery Mobile CSS file and paste it into your own CSS file.
2. Give your theme a name and rename the CSS selectors appropriately. Your theme name can be any alphabet character (a to z). So for example, if you copied Theme C, and you want to call your theme Theme Z, rename .ui-btn-up-c to .ui-btn-up-z, .ui-body-c to .ui-body-z and so on.
3. Change colors and styles of your custom theme
4. To apply your custom theme z to any element, just set the data-theme attribute to z. For example:

<div data-role="page" data-theme="z">

6. Use a custom font

There are a few font-replacement methods available such as cufon, sIFR, FLIR, @font-face and Google Fonts API. When building a web app using jQuery Mobile, I found that @font-face method is the easiest method to work with and the performance is quite satisfactory. If you are interested in @font-face, here is a helpful tutorial with a demo on how to work with @font-face method.

7. Create an image-only button with no text

Sometimes, you may not want to have any text for your button but still use the rest of the features that comes with a button element. This is usually the case with a home button or an info button. To hide any text associated with the button, set data-iconpos attribute to “notext”. For example:

<a href="../index.html" data-icon="grid"
class="ui-btn-right" data-iconpos="notext">Home</a>

8. Open a link without using AJAX with page transitions

To open a link without using AJAX with page transitions (ie: reloading the full page the old-school way), set rel attribute to “external”.

<a href="../index.html" data-icon="grid"
class="ui-btn-right" rel="external">Home</a>

9. Remove an arrow from a list item

By default, jQuery Mobile framework adds an arrow next to every list item. To disable this, set data-icon attribute to “false” on the list item that you’d like the arrow to be removed.

<li data-icon="false"><a href="contact.html">Contact Us</a></li>

10. Set background color of a page

This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework, you need to set it to ui-page class.

.ui-page {
background: #eee;
}

Recommended Books

jQuery Mobile

jQuery Mobile First Look

The following two books on HTML5 and jQuery will also 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

Read Top 10 jQuery Mobile Code Snippets that you need to know on Web Development Blog!

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; }
    if (!document.getElementsByTagName){ return; }
    var inputs = document.getElementById(id).getElementsByTagName("input");
    for(var x=0; x < inputs.length; x++) {
        if (inputs[x].type == 'checkbox'){
            inputs[x].checked = !inputs[x].checked;
        }
    }
}

</script>

<div id="parent_box">

    <input type="checkbox" name="foo" value="1" /> 1<br/>
    <input type="checkbox" name="foo" value="2" checked="checked" /> 2<br/>
    <input type="checkbox" name="foo" value="3" checked="checked" /> 3<br/>

    <br/>
    <input type="button" value="Toggle checkboxes"
        onclick="toggle_checkboxes('parent_box')" />

</div>

3. Image Preloader

Source

var images = new Array();

function preloadImages(){
    for (i=0; i < preloadImages.arguments.length; i++){
         images[i] = new Image();
        images[i].src = preloadImages.arguments[i];
    }
}

preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

4. Javascript cookies

Source

/**
 * Sets a Cookie with the given name and value.
 *
 * name       Name of the cookie
 * value      Value of the cookie
 * [expires]  Expiration date of the cookie (default: end of current session)
 * [path]     Path where the cookie is valid (default: path of calling document)
 * [domain]   Domain where the cookie is valid
 *              (default: domain of calling document)
 * [secure]   Boolean value indicating if the cookie transmission requires a
 *              secure transmission
 */
function setCookie(name, value, expires, path, domain, secure) {
    document.cookie= name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
}

/**
 * Gets the value of the specified cookie.
 *
 * name  Name of the desired cookie.
 *
 * Returns a string containing value of specified cookie,
 *   or null if cookie does not exist.
 */
function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    } else {
        begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1) {
        end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
}

/**
 * Deletes the specified cookie.
 *
 * name      name of the cookie
 * [path]    path of the cookie (must be same as path used to create cookie)
 * [domain]  domain of the cookie (must be same as domain used to create cookie)
 */
function deleteCookie(name, path, domain) {
    if (getCookie(name)) {
        document.cookie = name + "=" +
            ((path) ? "; path=" + path : "") +
            ((domain) ? "; domain=" + domain : "") +
            "; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
}

5. Sort Dropdown Menu

Source

function sortList(id) {
	var obj = document.getElementById("id");
	var values = new Array();
	for(var i = 0; i < obj.options.length; i++) {
		values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
	}

	values = values.sort();

	for(var i = 0; i < values.length; i++) {
		valueArray = values[i].split('--xx--');
		obj.options[i].innerHTML = valueArray[0];
		obj.options[i].value = valueArray[1];
	}
}

6. Determine if Browser Understands HTML5 Video

Source

// Check if the browser understands the video element.
function understands_video() {
  return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
	// Must be older browser or IE.
	// Maybe do something like hide custom
	// HTML5 controls. Or whatever...
	videoControls.style.display = 'none';
}

7. Get browser viewport width and height

Source

<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }

 // older versions of IE

 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

8. getElementsByClassName

Source

/*
    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

9. Delayed Redirect

Source

setTimeout( "window.location.href =
'http://walkerwines.com.au/'", 5*1000 );

10. iPhone Style Change on Orientation Change

Source

window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);

function setOrientation() {
 var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
 var cl = document.body.className;
 cl = cl.replace(/portrait|landscape/, orient);
 document.body.className = cl;
}

Read 10 most useful Javascript snippets from snipplr on Web Development Blog!

$(document).ready(function() {
// add your snippets here
});

1. Display Warning Message for IE 6 Users

if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {
	$('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');
}

2. Add hasJS class to body tag when Javascript is enabled

$('body').addClass('hasJS');

3. Clear default text in input fields on click

Sample Usage:

<input type="text" name="search" class="search" value="Keywords" title="Keywords" />

$('input[type=text]').focus(function() {
    var title = $(this).attr('title');
    if ($(this).val() == title) {
        $(this).val('');
    }
}).blur(function() {
    var title = $(this).attr('title');
    if ($(this).val() == '') {
        $(this).val(title);
    }
});

4. Show/hide more content on click

Sample Usage:

<p><a href="#how-to" class="toggle">How to write a good article?</a></p>

<div id="how-to">
	How to tips go here.
</div>

$('a.toggle').toggle(function() {
	var id = $(this).attr("href");
	$(this).addClass("active");
	$(id).slideDown();
}, function() {
	var id = $(this).attr("href");
	$(this).removeClass("active");
	$(id).slideUp();
});

5. Open Print dialog

Sample Usage:

<a href="#" class="print">Print this page</a>

$('a.print').click(function(){
	window.print();
	return false;
});

6. Add “hover” class to table data (and change the background color of the class via CSS)

$('table').delegate('td', 'hover', function(){
	$(this).toggleClass('hover');
});

7. Open link in a new window if rel is set to external

Sample Usage:

<a href="http://www.google.com" rel="external">Google</a>

$('a[rel=external]').attr('target', '_blank');

8. Add “odd” class to alternate table row (and change the background color of the class via CSS to have stripes effect for table)

$('tr:odd').addClass('odd');  

9. Check if div exists on page

if ( $('#myDiv').length ) {
    // do something with myDiv
}

10. Check/Uncheck all checkboxes

Sample Usage:

<div class="options">
	<ul>
		<li><a href="#" class="select-all">Select All</a></li>
		<li><a href="#" class="reset-all">Reset All</a></li>
	</ul>

	<input type="checkbox" id="option1" /><label for="option1">Option 1</label>
	<input type="checkbox" id="option2" /><label for="option2">Option 2</label>
	<input type="checkbox" id="option3" /><label for="option3">Option 3</label>
	<input type="checkbox" id="option4" /><label for="option4">Option 4</label>
</div>

$('.select-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
	return false;
});

$('.reset-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
	return false;
});

Read 10 Useful jQuery Snippets on Web Development Blog!

Javascript

$('.text').focus(function () {
	if ($(this).val() == $(this).attr("title")) {
		$(this).val("");
	}
}).blur(function () {
	if ($(this).val() == "") {
		$(this).val($(this).attr("title"));
	}
});

Examples:

<input type="text" name="q" class="q text" value="Search for terms" title="Search for terms" />

<input type="password" name="password" class="text" value="Password" title="Password"  />

Read Clear default text in input boxes on click with jQuery on Web Development Blog!

HTML Code

<html>
<head>
<title>Zero Clipboard Test</title>

<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="clipboard.js"></script>

</head>
<body >
<h1>Zero Clipboard Test</h1>

<div class="coupon">
<h3>Hostgator Hosting Coupon</h3>
<div class="desc">20% off all plans for new customers</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="http://eisabainyo.net/view/hostgator">GREEN</div>
<div class="coupon-link">Click to copy</div>
</div>

<div class="coupon">
<h3>Godaddy Domain Name Coupon</h3>
<div class="desc">$7.49 for any .COM domain</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="http://eisabainyo.net/view/godaddy">OYH7</div>
<div class="coupon-link">Click to copy</div>
</div>

<div class="coupon">
<h3>Website Templates</h3>
<div class="desc">5% off any template (no coupon required)</div>
<div class="expiry">Expiry date: 10 June 2010 </div>
<div class="coupon-link"><a href="http://eisabainyo.net/website-templates" target="_blank">Go to site</a></div>
</div>

</body>
</html>

ZeroClipboard Script (download at Google Code)
You’ll need ZeroClipboard.js and ZeroClipboard.swf.

clipboard.js

ZeroClipboard.setMoviePath("http://fullpath.to.your.site/ZeroClipboard.swf");

var clip = null;
var url = '';

function init() {
	clip = new ZeroClipboard.Client();
	clip.setHandCursor( true );

	$('.coupon-code').mouseover( function() {
		clip.setText(this.innerHTML);
		if (clip.div) {
			clip.receiveEvent('mouseout', null);
			clip.reposition(this);
		} else {
                        clip.glue(this);
                }
		clip.receiveEvent('mouseover', null);
		url = $(this).attr('rel');
	});

	clip.addEventListener('mouseUp', function(client) {
		window.open(url);
	});
}

$(document).ready(function() {
	init();
});

See the code in action at Coupons for Webmasters. RetailMeNot is also using a similar script to achieve the same result.

Read Click to copy and open site script on Web Development Blog!

if ( $("#message").length ) {
  $('#message').text("Hello!");
}

Read How to check if div exists in jQuery on Web Development Blog!

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 left margin: width of the image divide by 2 (ie: 260 / 2) */
	width: 260px; /* same as the image width */
}

#enter span a {
	display: block;
	width: 260px;
	height: 240px;
	margin: 0 auto;
	position: relative;
	background: transparent url(images/enter.jpg) 0 0 no-repeat;
	text-indent: -5000em;
	outline: 0;
}

HTML

<body id="homepage">
    <div id="enter">
	<span><a href="/home">Enter Site</a></span>
    </div>
</body>

Read Align an image in center and middle using CSS on Web Development Blog!