The Code

Firstly we setup three variables that are used in the function, notice that we’re chaining the variables instead of declaring ‘var’ each time which is the optimal way of declaring multiple vars in jQuery. You can adjust the delay and animate values to suit your needs. We then loop through each list item using the eq(); method which allows us to select which list item to animate, you can see we’re passing the variable ‘i’ to this method which is increased towards the bottom of the script. Within the loop we finally call the function again to start the process again.

$(document).ready(function() {

         var i = 0,
         delay = 2000,
         animate = 400;
         function animateList(){
                 var imax = $("ul#list li").length -1;
                 $("ul#list li:eq(" + i + ")")
                         .animate({"fontSize" : "80px"}, animate)
                         .animate({"fontSize" : "80px"}, delay)
                         .animate({"fontSize" : "30px"}, animate, function(){

                                 (i == imax) ? i=0 : i++;
                                 animateList();
                         });

                 };

	   animateList();
});

The HTML

<ul id="list">
<li>Advertising</li>
<li>Art</li>
<li>Automotive</li>
<li>Business</li>
<li>Celebrity</li>
</ul> 

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 Plugin

(function ($) {
    $.fn.showHide = function (options) {

	//default vars for the plugin
        var defaults = {
            speed: 1000,
			easing: '',
			changeText: 0,
			showText: 'Show',
			hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv').slideUp(options.speed, options.easing);
			 // this var stores which button you've clicked
             var toggleClick = $(this);
		     // this reads the rel attribute of the button to determine which div id to toggle
		     var toggleDiv = $(this).attr('rel');
		     // here we toggle show/hide the correct div at the right speed and using which easing effect
		     $(toggleDiv).slideToggle(options.speed, options.easing, function() {
		     // this only fires once the animation is completed
			 if(options.changeText==1){
		     $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
			 }
              });

		  return false;

        });

    };
})(jQuery);

The Usage

Here we setup the options for the plugin. you can set the speed of the toggle, if you include the jQuery UI plugin you can specify an easing effect. Also there’s an option to change the text for the button. 1 is change 0 is dont change. and the final options are the show and hide text.

$(document).ready(function(){

   $('.show_hide').showHide({
		speed: 1000,  // speed you want the toggle to happen
		easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
		changeText: 1, // if you dont want the button text to change, set this to 0
		showText: 'View',// the button text to show when a div is closed
		hideText: 'Close' // the button text to show when a div is open

	});

});

The HTML

Here you can see the simple usage for the plugin. We’ve already set the plugin options above in our DOM ready function now here we set our divs up. for element you want to toggle, you just need to add the div id to the rel attribute of the a tag as shown below. You can now add as many show hide divs as you want to.

If you want all the open divs to close when you click to open another simply add the class .toggleDiv to each element.

 <a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>
 <a class="show_hide" href="#" rel="#slidingDiv_2">View</a></pre>
<div id="slidingDiv_2" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>

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"/>

Advantages

• - Generating the same server side puts the strain on your server, using JavaScript means everything is handled client side
• - JavaScript allows for the time to be updated every minute, this wouldn’t be possible using server side technology
• - A lightweight jQuery plugin as opposed to a large PHP function

Disadvantages

• - If you have JavaScript disabled you see a date dependent on how you’ve formatted it

The Code

first you need to include the Timeago jQuery plugin and helper.js file. Then you simply call the function below and specify the class that your timestamp is.

 $(document).ready(function($) {
        prepareDynamicDates();
        $(".time").timeago();

      });

The HTML

    <div id="content"> 

      <p>
        You opened this page <abbr class="loaded time">a moment ago</abbr>. <span class="help">(This will update every minute. Wait for it.)</span>
      </p>
      <p>
        The 20th of June was <abbr class="time" title="2010-06-20 12:23:04">20th June 2010</abbr>.
      </p> 

    </div>

The Code

The code below works by searching the text in the list items on each key press. It then filters the results by sliding out the items that don’t match.

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function filterList(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {

		  $matches = $(list).find('a:Contains(' + filter + ')').parent();
		  $('li', list).not($matches).slideUp();
		  $matches.slideDown();

        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));

The HTML

<div id="wrap">
<div class="product-head">
  <h1>Product Search</h1>
    <div id="form"></div>
    <div class="clear"></div>
</div>
  <ul id="list">
		<li><img src="products/apple.png" width="30" height="30" align="absmiddle"/> <a href="#/Apple/">Apple</a></li>
		<li><img src="products/acorn_squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Acorn Squash</a></li>
		<li><img src="products/broccoli.png" width="30" height="30" align="absmiddle"/> <a href="#/Broccoli/">Broccoli</a></li>
		<li><img src="products/carrot.png" width="30" height="30" align="absmiddle"/> <a href="#/Carrot/">Carrot</a></li>
		<li><img src="products/celery.png" width="30" height="30" align="absmiddle"/> <a href="#/Celery/">Celery</a></li>
		<li><img src="products/lettuce.png" width="30" height="30" align="absmiddle"/> <a href="#/Lettuce/">Lettuce</a></li>
		<li><img src="products/mushroom.png" width="30" height="30" align="absmiddle"/> <a href="#/Mushroom/">Mushroom</a></li>
		<li><img src="products/onion.png" width="30" height="30" align="absmiddle"/> <a href="#/Onion/">Onion</a></li>
		<li><img src="products/potato.png" width="30" height="30" align="absmiddle"/> <a href="#/Potato/">Potato</a></li>
		<li><img src="products/pumpkin.png" width="30" height="30" align="absmiddle"/> <a href="#/Pumpkin/">Pumpkin</a></li>
		<li><img src="products/radish.png" width="30" height="30" align="absmiddle"/> <a href="#/Radish/">Radish</a></li>
	    <li><img src="products/squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Squash</a></li>
    	<li><img src="products/strawberry.png" width="30" height="30" align="absmiddle"/> <a href="#/strawberry/">Strawberry</a></li>
        <li><img src="products/sugar_snap.png" width="30" height="30" align="absmiddle"/> <a href="#/SugarSnaps/">Sugar Snaps</a></li>
        <li><img src="products/tomato.png" width="30" height="30" align="absmiddle"/> <a href="#/tomato/">Tomato</a></li>
	</ul>
</div>

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>

The plugin is fairly easy to integrate into a social application, all you need to do is add the following code to a page so when you click the ‘detect faces’ button the plugin is run.

you also need to include 3 javascript files. The algorithm for detecting faces was originally written by Liu Liu

$(function() {
		$('#detect').click(function() {

			var coords = $('#demo img').faceDetection({
				start:function(img) {
					$('.face').remove();
					$('#detect').text('Processing...');
				},
				complete:function(img, coords) {
					$('#detect').fadeOut();
				},
				error:function(img, code, message) {
					alert('Error '+code+': '+message);
				}
			});

			for (var i = 0; i < coords.length; i++) {
				$('<div>', {
					'class':'face',
					'css': {
						'position':	'absolute',
						'left':		coords[i].positionX	+'px',
						'top':		coords[i].positionY	+'px',
						'width': 	coords[i].width		+'px',
						'height': 	coords[i].height	+'px'
					}
				})
				.appendTo('#demo');
			}

			return false;
		});
	});

The Code

Firstly we need to add an image to the page and give the image tag the id ‘background-image’ it’s recommended to add the image right after the opening ‘body’ tag.

The JavaScript to calculate the client browser window and photo dimensions is relatively simple. the first block of code does some initial calculations to determine the image ratio, browser width etc.

Then using jQuery to manipulate the image CSS rules we can stretch the image to fit the browser but keep the image in proportion.

$(document).ready(function() {

 var bgImage = $('#background-image');		

    function resizeImg() {
      var imgwidth = bgImage.width(),
		   imgheight = bgImage.height(),
		   winwidth = $(window).width(),
		   winheight = $(window).height(),
		   widthratio = winwidth / imgwidth,
		   heightratio = winheight / imgheight,
		   widthdiff = heightratio * imgwidth,
		   heightdiff = widthratio * imgheight;

      if(heightdiff>winheight) {
        bgImage.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImage.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });
      }

	 $("#background-image").show();

    }
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 

});

A sprinkle of CSS

In order for the image to sit behind our page content we need to position it absolute with a lower z-index than the rest of our page content. You’ll also see that by default the image is set to display none, this is for users who dont have JavaScript enabled so they wont see the image at all.

#background-image{
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
	overflow: hidden;
    width: 100%;
	display:none;
	}

Conclusion

This technique could be used in a number of ways, one that springs to mind would be a dynamic gallery where you click the thumbnails and it fills the screen with the image.