The Code

Lets run through line by line the JavaScript. The first three lines after the DOM ready function are setup incase the user has JavaScript disabled. So if enabled we display the switch background image and hide the radio buttons as well as indent the text on the labels.

We’ve then setup a ‘change()’ function which means the function is executed each time the user selects either checkbox, we then check the value of the radio button thats been selected and adjust the background position of the sprite image.

Lastly for demo purposes im just displaying the status of the radio buttons in the div with the class ‘result’

$(document).ready(function(){

	$('.switch').css('background', 'url("switch.png")');
	$('.on_off').css('display','none');
	$('.on, .off').css('text-indent','-10000px');

    $("input[name=on_off]").change(function() {
      var button = $(this).val();

		if(button == 'off'){ $('.switch').css('background-position', 'right'); }
		if(button == 'on'){ $('.switch').css('background-position', 'left'); }	 

		 $('.result span').html(button);
		 $('.result').fadeIn();

   });

});

The HTML

Here we have a simple form with the two radio buttons in a fieldset.

<form action="" method="get">

<fieldset class="switch">
    <label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
    <label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>

<input type="submit" value="Submit"/>

</form>

<div class="result">The button is: <span>on</span></div>

The CSS

#container{background:#ebebeb;}

.switch{
	border:none;
	background:left no-repeat;
	width:105px;
	height:46px;
	padding:0;
	margin:0;
}

.on, .off{
	width:50px;
	height:40px;
	display:inline-block;
	cursor:pointer;
}

.result{display:none;}

The Code

Below we have the two lines of code which read the attribute ‘title’ and animate the progress bar. We then activate the tooltip plugin using the tipsy plugin.

$("document").ready(function (){ 

// animate the progress bar onload
var percent = $('.progress_bar').attr('title');
$('.progress_bar').animate({width: percent},1000);

// activate tooltip
	 $('.tip').tipsy({gravity: 's',fade: true});

});

The HTML

Very simple. Just one line of code with two div elements. Both the tooltip and the animation javascript read the ‘title’ attribute.

<div class="progress_container"><div class="progress_bar tip" title="78%"></div></div>

The CSS

body{
	padding:50px;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;}

.progress_container{
	padding:1px;
	width:195px;
	height:9px;
	overflow:hidden;
	background:url(progress_container.png);
	}

.progress_bar{
	height:9px;
	width:0px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	background:url(progress_bar.png);
	}

/*-----------------------------------------------------------------------------------*/
/*Tipsy Tooltip style
/*-----------------------------------------------------------------------------------*/  

  .tipsy { padding: 5px; font-size: 11px; position: absolute; z-index: 100000; }
  .tipsy-inner { padding: 6px 8px 6px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-arrow { position: absolute; background: url('tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
  .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
  .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
  .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
  .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
  .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
  .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
  .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }	

The result

It’s worth noting that this technique is only compatible with Firefox and Chrome browsers, and those that allow the border-radius css class.

The Code

Most of the code is CSS for this one so lets start here

body{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}

The JavaScript

Using jQuery UI is pretty painless. It’s very easy to setup you simply add a holder div for your slider, in this case we’re specifying the div with the class ‘.slider’ we then call the slider() method passing the in some values.

 $( ".slider" ).slider({
	        animate: true,
                range: "min",
                value: 50,
                min: 10,
                max: 100,
				step: 10,

				//this gets a live reading of the value and prints it on the page
                slide: function( event, ui ) {
                    $( "#slider-result" ).html( ui.value );
                },

				//this updates the hidden form field so we can submit the data using a form
                change: function(event, ui) {
                $('#hidden').attr('value', ui.value);
                }

				});

The HTML

Pretty simple snippet of HTML…

       <div class="slider"></div>
        <div id="slider-result">50</div>
  	<input type="hidden" id="hidden"/>

The Code

This code snippet is pretty easy to grasp. We’re simple replacing the background image of the div #avatar each time the user clicks out of the email input field. you’ll notice that we’re also calling the function MD5(). This is because Gravatar uses your email address encoded into an MD5 hash as an id to pull your avatar. You also need to include the function MD5() which is available in the Download.

$(document).ready(function(){

var email = $("#email"),
avatar = $("#avatar");

email.blur(function() {
avatar.css("background-image","url(http://www.gravatar.com/avatar/" + MD5(email.val()) + ")");

});

});

The HTML

<div id="avatar"><img src="thumb.png" width="80" height="80"/></div>

<form class="gravatar">
<input type="text" onFocus="if(this.value=='Email Address') this.value='';" onBlur="if(this.value=='') this.value='Email Address';" value="Email Address" name="s" id="email" />
</form>

Add a Mobile Stylesheet

In the code below we’ve included two stylesheets, the first main.css targets desktop computers and laptops using the ‘screen’ media type, while the second mobile.css targets mobile devices. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both.

<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />

Make phone numbers clickable

It’s easy to make phone numbers clickable, just like we can use ‘mailto:’ to link email addresses through (although this isn’t advised due to email harvesting) we can add ‘tel:’ followed by the number as shown below.

<a href="tel:+44203948578" class="phone-link">(+44) 203 94 8578</a>

Make filling in forms easier

HTML5 input types allows us to make it easier for users to fill in forms by providing the correct keyboard configuration. this can be achieved by changing the input type to either ‘email’ or ‘tel’.

<input type="email" name="email" />
<input type="tel" name="telephone"/>

Take if a step further with JavaScript and jQuery

jQuery just released the mobile version of its popular framework that allows you to use Its lightweight code is built with progressive enhancement, which also has a flexible, easily themeable design.

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

1. Call to action

Users will click on a call to action buttons because they expect to see information that a button says the next page would provide. If your users don’t quickly recognise the content on the corresponding landing page, they will leave. Therefore, make sure that whatever message your CTA button promotes is the focus of the landing page.

2. Make forms easy to use

Providing the least amount of hoops to jump through for a user means your conversions will be higher. Users hate forms and complicated user flows. if you’re landing page is designed to push users to signup to your site make the process easy with the least amount of required fields, and keep the form above the page fold to maxamise its exposure.

3. Clear Messaging

You have one shot at convincing a user to buy your product or service. If you’re offering something free then make it clear what the benefits of signing up are. Make sure that your marketing campaign has continuity when it comes to design and messaging. As a user you don’t want to click a banner and be greeted by a page that bears no relevance to the message you’ve just seen

4. Give a little extra

Everyone loves a free lunch. Add value to your product by giving a little more away. Even the opportunity to win a t-shirt is enough to get users interested in your product.

5. Engage your audience

The use of online video viewership, by both businesses and consumers, is at an all time high. The average person watches 180 videos online each month. These are statistics just can’t be ignored. Video is a great medium to engage your audience and simple informative content can work wonders to drive conversions.

Check out the Mailchimp landing page to promote their free product as well as their social tools

The JavaScript

firstly we assign a class of ‘form-field’ as well as adding the attribute ‘defaultVal’ with the text that we want to display in our input field.

The code below simply adjusts the input value attribute depending on if the user click in the field and types text so we have a state of change for ‘focus’ and ‘blur’.

$(document).ready(function(){

  $('.form-field').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'#ccc'});
      });

  $('.form-field').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'#000'});
    }
    });
  $('.form-field').blur(function(){
    if ($(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'#ccc'});
    }
    });

});

The HTML

 <form method="post" action="">

	    <input type="text" class="form-field" name="Name" defaultVal="Name" value="" />
            <input type="text" class="form-field" name="Phone" defaultVal="Phone Number" value="" />
            <input type="text" class="form-field" name="Email" defaultVal="Email address" value="" />
            <input type="text" class="form-field" name="Url" defaultVal="Site URL" value="" />

	</form>

Generate the font

first of all you’ll need to head here and convert your font ready for cufon. There are plenty of options to adjust how the font renders, you can include different fonts for weights as well as italic etc.

Include the JavaScript

Once you have your font converted in the Cufon format you’ll need to include the Cufon JavaScript file which you can find here as well as the font file that you converted above.

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="junction_400.font.js"></script>

Specify your elements

	Cufon.replace('h1, h2, h3', { fontFamily: 'Junction' });

I thought i’d cover how to create a 3d animated poll using jQuery and CSS similar to the polls page on Easy Poll.

The Code

I don’t usually do this but here’s the complete code snippet so you can see the JavaScript CSS and HTML all in one space. most of the configuration is achieved thought the CSS but you’ll notice that on page load the bars animate to the correct height using the jQuery animate function which we’re passing a percentage height into.

<head>
<style>
.rating {
float:left;
width:180px;
background-image:url(images/poll-bottom.png);
background-position:bottom left;
background-repeat:no-repeat;
padding-bottom:40px;
}

.graph {
float:left;
margin-top:10px;
position:relative;
height:380px;
padding:0;
}

.graph .bar1, .graph .bar2, .graph .bar3{
display:block;
position:absolute;
background-image:url(images/poll-body.png);
background-position:top left;
color:#fff;
width:159px;
min-height:70px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em;
bottom:0;
}

.graph .bar1 span, .graph .bar2 span,  .graph .bar3 span  {
position:absolute;
left:50px;
top:20px;
font-size:33px;
color:#333;
text-shadow:0 1px #fff;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript">

  $(document).ready(function(){

  $('.bar1').animate({'height':'22%'},500);
  $('.bar2').animate({'height':'58%'},1000);
  $('.bar3').animate({'height':'88%'},1500);

  });

</script>

</head>

<body>

<div class="polls">

        <div class="rating">
            	<div class="graph">
                	<strong class="bar1">
                    <span>22%</span>
                    </strong>
                </div>
			<div class="ans">Answer 1</div>
	    </div>

	     <div class="rating">
            	<div class="graph">
                	<strong class="bar2">
                    <span>58%</span>
                    </strong>
                </div>

		   <div class="ans">Answer 2</div>
	    </div>

            <div class="rating">
            	<div class="graph">
                	<strong class="bar3">
                    <span>88%</span>
                    </strong>
                </div>

		   <div class="ans">Answer 3</div>
	    </div>

        <div class="clear"></div>

</div>

</body>

The Code

Getting started with this plugin is really simple, you first need to include the cycle.js plugin you can find more info about the plugin including all the settings available here. This div structure allows you to assign different background images to each slide.

You can easily change the effect of the image transitions by replacing fx:’scrollVert’ with ‘fade’ for a simple transifion between frames, or ‘scrollHorz’ for the images to slide in horizontally.

Setup of the cycle plugin is simple with the settings below. you can adjust the speed, the initial timeout for when the page loads that the first frame is seen for and the delay between transitions.

  $(document).ready( function($) {

    $('#slider').cycle({
      fx: 'scrollVert',
      speed: 1000,
      pause: 1,
      timeout: 7000,
      delay: 500,
      prev: '#slider_next',
      next: '#slider_prev'
    });

  });

The HTML

  <div id="slider">
    <!-- slider -->
    <div id="iphone" class="slider">
      <a href="http://papermashup.com" title="iPhone 4 coming soon" class="slider_content">iPhone 4 coming soon</a>
    </div>
    <!-- slider -->
    <div id="macbook" class="slider">
      <a href="http://papermashup.com" title="Macbook Get One" class="slider_content">Macbook Get One</a>
    </div>
    <!-- slider -->
    <div id="ipad" class="slider">
      <a href="http://papermashup.com" title="The new iPad" class="slider_content">The new iPad</a>
    </div>
  </div>
  <div id="slider_controls">
    <ul>
      <li><a href="#" id="slider_prev">Previous</a></li>
      <li><a href="#" id="slider_next">Next</a></li>
    </ul>
  </div>

The CSS

#slider {
	width: 100%;
	overflow: hidden;
	height: 301px;
}
.slider {
	height: 301px;
	width: 100%!important;
}
.slider_content {
	width: 1020px;
	height: 301px;
	margin: 0 auto;
	display: block;
	text-indent: -9999px;
}
#ipad {
	background: url('images/ipad-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#ipad .slider_content {
	background: transparent url('images/ipad.jpg') no-repeat top left;
}
#iphone {
	background: #000000 url('images/bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#iphone .slider_content {
	background: transparent url('images/iphone.jpg') no-repeat top left;
}
#macbook {
	background: #000000 url('images/macbook-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#macbook .slider_content {
	background: transparent url('images/macbook.jpg') no-repeat top left;
}

#slider_controls {
	width: 958px;
	position: relative;
	margin: 0 auto;
	height: 1px;
}
#slider_controls ul {
	background: transparent url('images/nav.png') no-repeat bottom center;
	display:block;
	height:32px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	top:-31px;
	width:164px;
	z-index:9998;
}
#slider_controls li {
	float: left;
	width: 82px;
	height: 32px;
}
#slider_controls li a {
	display: block;
	height: 32px;
}

This slider is both elegant, simple to maintain and easy to code as well as being lightweight on the browser.