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>

Application use

Open Search could be used to mash data using the MySpace API with other applications, for example automatically pulling in a users MySpace profile image, name, location and URL. Building a Facebook application that recommends bands to you on MySpace.

The Code

Just like the Twitter search API tutorial that I did a last year we’re using the CURL function in PHP5 to allow us to parse the XML file and format the data that we get back.

Here’s how it works

Any search that we make will send GET variables through the page URL therefore making it easy to see the data that we’re sending to the API generally you will see search pages use this method as we’re not transmitting private data such as usernames or passwords.

The search data is stored in the variable $q if nothing is searched for initially we run a default search mainly for demo purposes with the search term ‘Coldplay’. You’ll notice that the first result on the left is highlighted green, this is because it is the official profile for the Coldplay. you can see that we construct the URL and store it in the variable $search. There are many different variables that can be passed to the API. It’s worth pointing out that we’re using the People search call. You can see all the values that can be passed in here

Here is an example XML request: http://api.myspace.com/opensearch/people?searchTerms=ferrari&format=xml

//Search API Script

$q=$_GET['q'];

if($_GET['q']==''){

$q = 'coldplay';

}

if($_GET['pics']==1){

$pics[0] = '&hasPhoto=on';
$pics[1] = 'checked';

}

if(!empty($_GET['location'])){

$pics[0] = '&location='.urlencode($_GET['location']).'';

}

$search = "http://api.myspace.com/opensearch/people?searchTerms=".urlencode($q)."&format=xml".$pics[0]."";

$cu = curl_init();

curl_setopt($cu, CURLOPT_URL, $search);
curl_setopt($cu, CURLOPT_RETURNTRANSFER, TRUE);
$result = curl_exec($cu);
$search_res = new SimpleXMLElement($result);

echo "<h3>".$search_res->totalResults." MySpace results for '".$q."'</h3>";

// Echo the Search Data

foreach ($search_res->entry as $user) {

$officialprofile = null;

if($user->isOfficial==1){

$officialprofile = 'official';

}

echo "<div class='user ".$officialprofile."'><a href=\"".$user->profileUrl."\" target=\"_blank\"><img border=\"0\" width=\"68\" class=\"user_image\" src=\"".$user->thumbnailUrl."\" title=\"".$user->displayName."\" /></a>";
echo "<div class='text'>".$user->displayName."</div> <strong>".$user->location."</strong><br/><a href='".$user->profileUrl."' >Visit ".$officialprofile." profile</a><div class='clear'></div></div>";

}

curl_close($cu);

<div id="search">
<form action="" method="get">
  Search MySpace <input type="text" name="q" value="<?php echo $q;?>" id="searchbox" />
 Location <input type="text" name="location" value="<?php echo $_GET['location'];?>" id="location" />
  Only show users with profile pics <input name="pics" type="checkbox" value="1" <?php echo $pics[1];?> />
  <input type="submit" name="submit" id="submit" value="Search" />

</form>
</div>

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.

The Code

It’s extremely easy to get started using jQuery scroll. First we need to declare the element that the vertical scrollbar uses as it’s reference so in other words we want to scroll the main html body window for example.

$('html, body').animate({

The next line is saying scroll to the element defined (in this case the element .bottom) we’re not defining an offset so it takes the top of the element.

scrollTop: $(".bottom").offset().top

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

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

				$('.top-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".middle").offset().top
					}, 2000);

				 });

				$('.middle-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".bottom").offset().top
					}, 2000);

				 });

					$('.bottom-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".top").offset().top
					}, 2000);

				 });

});

What’s in the Package

jQuery Tools puts together some of the key user interface components in an easy to use package. They even make it easy to get started by including the latest version of jQuery minified alongside the Tools plugin all in one link, and you can hot-link to their CDN link so you don’t need to even host the plugin code.

What’s in the bundle?

1. jQuery Drag & Drop

   Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo

2. jQuery Delete

   Delete items using PHP jQuery using an AJAX request demo

3. PHP jQuery and MySQL Autosuggest

   A powerful autosuggest script that searches a MySQL database to return you result demo

4. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

5. CSS3 Buttons

   Styling elegant buttons using CSS3 demo

6. Feedburner Stats

   Using PHP and CURL to get your feedburner subscriber count demo

7. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

8. jQuery image Zoom

   create a simple gallery with a hover image effect demo

9. jQuery PHP & MySQL inline editing

   Edit page content directly in the browser inline using jQuery AJAX requests demo

10. jQuery Gallery

    Animated jQuery gallery with title and description demo

11. Highlighting form inputs

    Highlight any input field using JavaScript demo

12. jQuery JSON & PHP

    Create a simple product gallery using JSONP PHP and MySQL demo

13. jQuery Tabs

    Simple tabs rendered using jQuery demo

14. jQuery XML

    build a product gallery parsing XML using jQuery demo

15. jTruncate

    Using the jTruncate plugin to truncate text with a ‘more’ link demo

16. PHP Page scrape

    Scrape page contents using PHP and CURL demo

17. AJAX Check

    Check to see if a normal GET or POST request was made or if an AJAX request was made demo

18. PHP Pagination

    A useful and raw PHP pagination script that could be adapted in to a class demo

19. jQuery Sliding Menu

    jQuery drop down slide in / out menu inspired by 9rules.com demo

20. jQuery Tooltips

    An experimentation into building jQuery tooltips with AJAX requests, images etc demo

Step 1

include the files in the plugin as shown below, remember to include jQuery.

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>

Step 2

Create a basic form with some validation requirements, notice that we’re adding a specific class to a text input that requires validation.

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

  <label>Username</label><br/>
  <input type="text" class="validate(required, username)" name="username"/><br/>
  <label>Password</label><br/>
  <input type="password" class="validate(required)" id="password" name="password"/><br/>
  <label>Retype password</label><br/>
  <input type="password" type="text" class="validate(match(#password))" name="passwordconf"/><br/>
  <label>Email</label><br/>
  <input type="text" class="validate(email) inputbox" name="email"/><br/>

  <input type="submit"  value="Sign Up"/>
  </form>

Step 3

finally we need to run the Ketchup plugin function specifying the id of our form

$(document).ready(function() {
  $('#signup').ketchup();
});

I’ve found this plugin really useful, and it’s a quick way to add validation to your forms. Remember it’s always advised to use server side validation along with client side to make sure that the data you collect is correct and your application secure. for more information about the Ketchup jQuery plugin click here.

Its got to the stage where I can no longer read Mashable or Techcrunch because of the saturation and influence that these so called ‘social media’ experts and journalists seem to be having on the industry. This so called next movement has unfortunately made everyone (even my Mum and Dad!) an expert in social media (whatever social media really is?) so it seems. I used to be an avid reader of Mashable and Techcrunch however i started to notice articles that were just plain crap observations, for example recently i found this post on Mashable, ‘The top ten Twitter trends this week.’ I mean WHAT THE HELL! This made it into an article! This is a classic example of so called social media biting itself in the ass. Im a savvy internet user if i want to know what’s trending on Twitter i’ll check the Twitter homepage. Social media really just stands for, ‘We’re going to make your browsing experience twice as complicated by bombarding you with pointless facts an figures and plain obvious tips on how to promote your business using Twitter, Facebook and social networking.’ I mean HELLO! bands and teenagers have been doing this stuff for years on MySpace, Hi5, and Bebo its nothing new.

It’s just plain marketing bullshit, and it just purports to makes anyone an expert if you have a Twitter or Facebook account, so in effect it just bastardises people who actually are knowledgeable in this area. I don’t class myself as an expert in anything. If your an expert you have nothing more to learn and we all have something to learn even more so on the internet.

Social Media = Way too much noise!

The Design

Once the basic concept was established I started with a brand and logo, I had already decided on the name ‘We Deliver’ so I chose a typeface and style and developed the brand for the site. The logo and type very much influenced the tone of voice for the project. Minimalist, modern, with a simple user experience.

Visit the site

You can check out the site here. Im always inspired by the fun mini projects that Carsonified do as well as other viral campaigns like the work of Poke London. As a designer and developer I think it’s important to challenge yourself sometimes and it’s the best way to learn new techniques. I’ve never built an e-commerce site before not that this project is, however it gave me an insight into using jQuery to calculate the number of products as well as dynamically working out the exchange rate to show the total price in GBP.