Nettuts+ » JavaScript & AJAX

Sorting Values with JavaScript

Andrew Burgess — Thu, 19 Nov 2009 19:29:06 +0000

Lists and tables are often the best way to display data on the web; but you shouldn’t have to worry about sorting that information manually. In today’s tutorial, you’re going to make a jQuery plugin that will put all your ducks in a row with JavaScript ease!

Preface

So, how exactly does sorting work in JavaScript? It’s not too complicated: any array object has a sort method. If you don’t pass it any parameters, it will convert the objects in the array to strings, sort them pseudo-alphabetically, and return them. Usually, this is terrible; consider sorting the numbers 0 – 10 alphabetically. You would get this: [0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9]. Fortunately, we can pass a function to the sort method. That function should take two parameters (the two items to be compared): then, it will return 0 if they are equal, a negative number if the first parameter takes precedence, or a positive number of the second parameter should come first. So numbers are actually the simplest thing to sort “manually”:

numberArray.sort(function(a, b) {
    return a - b
});

Obviously, this will return 0 if the numbers are equal, a negative number if a should be first, and a positive number if b should be first.

We’re going to look at sorting several different types of data, a few in multiple formats; but this will all be much more useful if we wrap it in a jQuery plugin, so let’s start by setting up that shell!

The Plugin Shell

If you’re not familiar with writing jQuery plugins, check out Jeffrey Way’s Screencast “You still can’t create a jQuery Plugin?” It’ll get you up to speed in no time if you’re comfortable with jQuery! (true confession: I’d actually never written a plugin until I made this one).

We’ll set up our plugin, called datasort, this way: we’ll pass it an array of items to sort; we can specify four parameters.

datatype (the type of data you’re sorting)
sortElement (the child element you want to sort by, if desired)
sortAttr (the attribute you want to sort by, if desired)
reverse (the direction they should sort in)

So a fully-modified call to our plugin might look like this:

$('ul.names li).datasort({
    		datatype    : 'alpha',
    		sortElement : 'span.first',
    		sortAttr    : 'rel',
    		reverse     : true
    	});

Here’s the plugin shell:

(function ($) {
  $.fn.datasort = function(options) {
    var defaults = {
    	//set the default parameter values
          datatype    : 'alpha',
          sortElement : false,
          sortAttr    : false,
          reverse     : false
          },
    // combine the default and user's parameters, overriding defaults
        settings = $.extend({}, defaults, options),
        datatypes = {},
        base = {},
        that = this;

    if (typeof settings.datatype === 'string') {
      that.sort(datatypes[settings.datatype]);
    }
    if (typeof settings.datatype === 'function') {
      that.sort(settings.datatype);
    }
    if(settings.reverse) {
      that = $($.makeArray(this).reverse());
    }
    $.each(that, function(index, element) { that.parent().append(element); });
  };
})(jQuery);

So here’s how it’ll work: we’ll set up all the variables at the beginning. Then, if the datatype parameter is a string, we’ll find the corresponding sort function in the datatypes object and sort with it; if the datatype parameter is a function, we’ll sort with it. Finally, if the reverse setting is set to true, we’ll reverse the order of the sorted items (since jQuery objects aren’t true JavaScript arrays, the reverse function won’t work on them; so we can use $.makeArray() to turn it into one; then, once it’s reversed, we re-jquery-fy it!).

Laying a Bit More Groundwork

At the very lowest level, you can sort almost any type of data in one of two ways: we’ll be calling them alphabetically and numerically. Let’s create these two functions as properties of your base object.

base = {
  alpha : function(a, b) {
    a = a.toUpperCase();
    b = b.toUpperCase();
    return (a < b) ? -1 : (a > b) : 1 : 0;
    //ternary operator: condition ? returnIfTrue : returnIfFalse
  },
  number : function(a, b) {
    a = parseFloat(a);
    b = parseFloat(b);
    return a - b;
  }
},

Pretty simple, eh? Simply normalize the two values, compare and return. The tricky part is parsing the data that we want to send to these functions; that’s what we’ll do now. However, there’s one more thing.

When sorting items in the array, we might not want to sort simply by the text of the element itself. The sortElement and sortAttr parameters of our plugin are to this end. For example, we will likely want to sort table rows based on a certain column of table cells. In that case, we’d use $(’table tr’).datasort({ sortElement : ‘td.price’ }). Or perhaps we want to sort a list of images by their alt attributes: $(’ul li’).datasort({sortElement : ‘img’, sortAttr : ‘alt’}). Because of all this, we need to add one more function to our base object:

base = {
  alpha : function (a, b) { ... },
  number : function (a, b) { ... },
  extract : function (a, b) {
  	var get = function (i) {
      var o = $(i);
      if (settings.sortElement) {
        o = o.children(settings.sortElement);
      }
      if (settings.sortAttr) {
        o = o.attr(settings.sortAttr);
      } else {
        o = o.text();
      }
      return o;
    };
    return {
      a : get(a),
      b : get(b)
    };
  }
},

It may look complicated, but it’s not. We just create a jQuery object with each item; if sortElement is set, we use the children() method to get the right elements. Then, if a sortAttr is set, we get its value; if not, we get the element’s text. We’ve set all this to an inner function, and return an object with two properites; these properties are the values we must parse and send to the appropriate base sorting function.

This probably seemed like a lot of prep work, but what we were really doing is abstracting as much code as possible. This way, they’ll be much less repeat code, because the important actions have been bundled away as functions.

Sorting Words and Numbers

We’re finally here: the fun part! We’ll start by building two simple functions for our datatypes object. These will simple pass values to base.extract() and then pass those return values to the appropriate sorting class.

datatypes = {
  alpha : function (a, b) {
    var o = base.extract(a, b);
    return base.alpha(o.a, o.b);
  },
  number : function(a, b) {
    var o = base.extract(a, b);
    for (var e in o) {
      o[e] = o[e].replace(/[$]?(-?\d+.?\d+)/, '\$1');
    }
    return base.number(o.a, o.b);
  },
},

Our alphabetic sorter should be obvious. The number sorter does a bit more: before passing the extracted values on, it strips out a dollar sign at the front. I’ve kept this regular expression simple, but you could parse a lot of different number formats here if you wanted to get complex. Let’s give our evolving plugin a try; create a basic html page:




  
  Data Sorting
  


  
    
      
        First Name
        Last Name
      
    
    
      Jeffrey  Way
      Sean  Hodge
      Adam  Miller
      Ian  Yates
      Adrian  Try
      Caleb  Aylsworth
    
  

  
  4.09
  4.10
  67.8
  100
  -98
  67.7
  23
   

  
    $299.66
    $299.57
    $0.14
    $80.00

First Name	Last Name
Jeffrey	Way
Sean	Hodge
Adam	Miller
Ian	Yates
Adrian	Try
Caleb	Aylsworth

I’ve included a table and two lists (and I’ve styled them briefly). Take note of our plugin calls: we’re using the default datatype for the table, but sorting by the table cells with a class of last; try changing this to ‘td.first.’ Then, we sort the lists numerically, and reverse one of them. Here’s the proof of our labours:

Pretty nice, but those were relatively simple values; what if we want to be able to sort multiple formats for one type?

Sorting Dates

There are a number of different ways to write dates, which makes it pretty tricky to parse them for sorting. However, we can cover most of them with this:

date : function(a, b) {
  var o = base.extract(a, b);
  for (var e in o) {
  o[e] = o[e].replace(/-/g, '')
             .replace(/january|jan/i, '01')
             .replace(/february|feb/i, '02')
             .replace(/march|mar/i, '03')
             .replace(/april|apr/i, '04')
             .replace(/may/i, '05')
             .replace(/june|jun/i, '06')
             .replace(/july|jul/i, '07')
             .replace(/august|aug/i, '08')
             .replace(/september|sept|sep/i, '09')
             .replace(/october|oct/i, '10')
             .replace(/november|nov/i, '11')
             .replace(/december|dec/i, '12')
             .replace(/(\d{2}) (\d{2}), (\d{4})/, '\$3\$1\$2')
             .replace(/(\d{2})\/(\d{2})\/(\d{4})/, '\$3\$2\$1');
  }
  return base.number(o.a, o.b);
},

So what are we doing here? First, here’s the logic: if all the dates are formatted YYYYMMDD, they will sort correctly with numerical sorting. Our parser can sort the following date formats:

YYYY-MM-DD
YYYYMMDD
DD/MM/YYYY
month DD, YYYY

First we strip our dashes, which will leave YYYY-MM-DD ready for parsing. Then, we replace every month name or abbreviation with its number value. Finally, we have to rearrange the numbers for DD/MM/YYY and month DD, YYYY. That’s what the last two expressions do. To give this a try, paste this list into our HTML:


  2009-10-06
  sept 25, 1995
  1990-06-18
  20100131
  June 18, 2009
  02/11/1993
  15941219
  1965-08-05
  1425-12-25

And call it with this:

    $('ul.date li').datasort({datatype: 'date'});

Is this a perfect date parser? Not by any means; we can’t sort DD/MM/YY, because there’s no way to know what century this is in. Also, we can’t tell the difference between DD/MM/YY and MM/DD/YY, so we just have to choose one.

Sorting Time

Sorting time values must be one of the most difficult values to sort: we need to be able to accept 12-hour time, 24-hour time, and values with or without AM/PM tags and seconds. I think it’s easiest to sort time alphabetically, even though its all numbers. Why? Consider these two timestamps: 00:15:37 and 12:15. The first one should come first, but if we sort them by number they’ll be parsed as floats, and end up like 1537 and 1215. Now, the second value will come first. Also, when sorting alphabetically, we don’t have to take out the colons (parseFloat() would choke on them). So here’s how it’s done.

time : function(a, b) {
  var o = base.extract(a, b),
      afternoon = /^(.+) PM$/i;
  for (var e in o) {
    o[e] = o[e].split(':');
    var last = o[e].length - 1;

    if(afternoon.test(o[e][last])) {
      o[e][0] = (parseInt(o[e][0]) + 12).toString();
      o[e][last] = o[e][last].replace(afternoon, '\$1');
    }
    if(parseInt(o[e][0]) < 10 && o[e][0].length === 1) {
      o[e][0] = '0' + o[e][0];
    }
    o[e][last] = o[e][last].replace(/^(.+) AM$/i, '\$1');

    o[e] = o[e].join('');
  }
  return base.alpha(o.a, o.b);
}

Let's go through this line by line.

  var o = base.extract(a, b),
      afternoon = /^(.+) PM$/i;

We start with our variables: our extracted values and a regular expression to check for PM label.

  for (var e in o) {
    o[e] = o[e].split(':');
    var last = o[e].length - 1;

    if(afternoon.test(o[e][last])) {
      o[e][0] = (parseInt(o[e][0]) + 12).toString();
      o[e][last] = o[e][last].replace(afternoon, '\$1');
    }

Next, we'll start a for loop, going through each of the values we're sorting; first, we split it into an array at the colons. We create an easy way to get to the last items of the array: our 'last' variable. Then, we test our PM regex on the last item in our array; if it returns true, this value has the PM tag. Therefore, we'll add 12 to the first item in our array, which will be the hour value; we do this because we need all the values to be formatted in 24-hour time. (Note that to do this, we must convert it to a number, add 12, and then turn it back into a string). Finally, we use the PM regex again to remove that label from the last item in the array.

    if(parseInt(o[e][0]) < 10 && o[e][0].length === 1) {
      o[e][0] = '0' + o[e][0];
    }
   o[e][last] = o[e][last].replace(/^(.+) AM$/i, '\$1');

    o[e] = o[e].join('');
}
return base.alpha(o.a, o.b);

In this last chunk, we check the hour value for two conditions: is it less than 10? and does the string have only one character? This is important because a value like 08 will parse as 8 and be less than 10; but we're trying to see if we need to add a zero to the front. If the string has only one character, then we add the zero, so 3 becomes 03. This will keep things in order!

Before joining the array, we remove any AM labels. So now this . . .


  1:15:47
  3:45 PM
  12:00:17
  06:56
  19:39
  4:32 AM
  00:15:36

. . . can be sorted with this . . .

$('ul.time li').datasort({datatype: 'time'});

And we're done! Behold the fruits of our labour:

More Random Values

We've set up our jQuery plugin so that users can pass sorting functions as the datatype parameter. This allows us to easily extend the plugin, although we don't have access to the base 'class' from the plugin call. We can easily write a function to sort psudeo-ratings:

$('ul.rating li').datasort({datatype: function(a, b) {
      var o  = {
      a : $(a).text(),
      b : $(b).text()
      }
      for (var e in o) {
        o[e] = o[e].replace(/poor/i, 0)
                   .replace(/satisfactory/i, 1)
                   .replace(/good/i, 2)
                   .replace(/excellent/i, 3);
      }
      return o.a - o.b;
    }
});

This uses the simplest regular expressions possible to sort a list like this:


  Good
  Excellent
  Poor
  Satisfactory

That's a Wrap!

Now you're in the know: sorting values in JavaScript really isn't as hard as you might have thought. You can imagine this being useful to sort a table, with something like this:

$('table#myTable thead th').toggle(
  function() {
    var $this = $(this);
    $('table#myTable tbody tr').datasort({
      datatype: $this.attr('rel'),
      sortElement: 'td.' + $this.attr('class')
    });
  },
  function() {
    var $this = $(this);
    $('table#myTable tbody tr').datasort({
      datatype: $this.attr('rel'),
      sortElement: 'td.' + $this.attr('class'),
      reverse: true
      });
  }
);

(Try replacing the jQuery code for the table in the first example with this!)

Of course, we could improve this plugin a lot; for example, we could have it check the rel atttribute for a datatype if one isn't given as a parameter, and default to alpha if there is no rel. But that's aside from the sorting.

In sum, to sort with JavaScipt, we follow these steps:

Determine the different formats you want to sort.
Decide what format you want to sort in.
Sort the array of items with the sort() method, passing in a function that will convert the two items to your desired format before comparing them

Have a datatype to add to our plugin? Have a better way of sorting one of these? Let's hear it in the comments!

The Basics of Object-Oriented JavaScript

Leigh Kaszick — Wed, 11 Nov 2009 14:10:24 +0000

Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet.

While in the past it was a common argument that JavaScript was a basic language and was very ’slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

JavaScript can have all that an Object-Orientated language has to offer, albeit with some extra effort outside of the scope of this article.

Let’s Create an Object

    function myObject(){

    };

Congratulations, you just created an object. There are two ways to
create a JavaScript object: they are ‘Constructor functions’ and
‘Literal notation’. The one above is a Constructor function,
I’ll explain what the difference is shortly, but before I do, here
is what an Object definition looks like using literal notation.

    var myObject = {

    };

Literal is a preferred option for name spacing so that your JavaScript
code doesn’t interfere (or vice versa) with other scripts running on the
page and also if you are using this object as a single object and not requiring
more than one instance of the object, whereas Constructor function type
notation is preferred if you need to do some initial work before the object
is created or require multiple instances of the object where each instance
can be changed during the lifetime of the script. Let’s continue to build
on both our objects simultaneously so we can observe what the differences are.

Defining Methods and Properties

Constructor version:

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Literal version:

    var myObject = {
        iAm : 'an object',
        whatAmI : function(){
            alert('I am ' + this.iAm);
        }
    }

For each of the objects we have created a property ‘iAm’ which contains a
string value that is used in our objects method ‘whatAmI’ which alerts a message.

Properties are variables created inside an object and methods are functions created inside an object.

Now is probably as good a time as any to explain how to use properties and
methods (although you would already have done so if you are familiar with a library).

To use a property first you type what object it belongs to – so in this case it’s myObject –
and then to reference its internal properties, you put a full stop and then the name of the
property so it will eventually look like myObject.iAm (this will return ‘an object’).

For methods, it is the same except to execute the method, as with any function, you must
put parenthesis after it; otherwise you will just be returning a reference to the function
and not what the function actually returns. So it will look like myObject.whatAmI()
(this will alert ‘I am an object’).

Now for the differences:

The constructor object has its properties and methods defined with the
keyword ‘this’ in front of it, whereas the literal version does not.
In the constructor object the properties/methods have their ‘values’
defined after an equal sign ‘=’ whereas in the literal version, they are
defined after a colon ‘:’.
The constructor function can have (optional) semi-colons ‘;’ at the
end of each property/method declaration whereas in the literal version
if you have more than one property or method, they MUST be separated with
a comma ‘,’, and they CANNOT have semi-colons after them, otherwise JavaScript will return an error.

There is also a difference between the way these two types of object declarations are used.

To use a literally notated object, you simply use it by referencing its variable name,
so wherever it is required you call it by typing;

    myObject.whatAmI();

With constructor functions you need to instantiate (create a new instance of)
the object first; you do this by typing;

    var myNewObject = new myObject();
    myNewObject.whatAmI();

Using a Constructor Function.

Let’s use our previous constructor function and build upon it so it performs some basic
(but dynamic) operations when we instantiate it.

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Just like any JavaScript function, we can use arguments with our constructor function;

function myObject(what){
	this.iAm = what;
	this.whatAmI = function(language){
		alert('I am ' + this.iAm + ' of the ' + language + ' language');
	};
};

Now let’s instantiate our object and call its whatAmI method, filling in the required
fields as we do so.

    var myNewObject = new myObject('an object');
    myNewObject.whatAmI('JavaScript');

This will alert ‘I am an object of the JavaScript language.’

To Instantiate or not to Instantiate

I mentioned earlier about the differences between Object Constructors and Object Literals and that
when a change is made to an Object Literal it affects that object across the entire script, whereas when
a Constructor function is instantiated and then a change is made to that instance, it won’t affect any
other instances of that object. Let’s try an example;

First we will create an Object literal;

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'

    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a new property', as expected

Even if you create a new variable and point it towards the object, it will have the same effect.

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'

    //define new variable with object as value
    var sameObject = myObjectLiteral;

    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';

    //alert current myProperty
    alert(sameObject.myProperty); //this will still alert 'this is a new property'

Now let’s try a similar exercise with a Constructor function.

	//this is one other way of creating a Constructor function
	var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will alert 'this is a property'

So as expected, both return the correct value, but let’s change the myProperty for one of the instances.

	//this is one other way of creating a Constructor function
	var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //change myProperty of the first instance
    constructorOne.myProperty = 'this is a new property';

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a new property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will still alert 'this is a property'

As you can see from this example, even though we changed the property of constructorOne
it didn’t affect myObjectConstructor and therefore didn’t affect constructorTwo. Even if
constructorTwo was instantiated before we changed the myProperty property of constructorOne,
it would still not affect the myProperty property of constructorTwo as it is a completely different
instance of the object within JavaScript’s memory.

So which one should you use? Well it depends on the situation, if you only need one object of its kind for
your script (as you will see in our example at the end of this article), then use an object literal, but if you need several instances of an object, where each instance
is independent of the other and can have different properties or methods depending on the way it’s constructed, then use a constructor function.

This and That

While explaining constructor functions, there were a lot of ‘this’ keywords being thrown around
and I figure what better time to talk about scope!

Now you might be asking ‘what is this scope you speak of’?’ Scope in JavaScript is function/object based, so that means if you’re outside
of a function, you can’t use a variable that is defined inside a function (unless you use a closure).

There is however a scope chain, which means that a function inside another function can access a
variable defined in its parent function. Let’s take a look at some example code.

As you can see in this example, var1 is defined in the global object
and is available to all functions and object, var2 is defined inside function1
and is available to function1 and function2, but if you try to reference it from the global object
it will give you the error ‘var2 is undefined’, var3 is only accessible to function2.

So what does ‘this’ reference? Well in a browser, ‘this’ references the window object, so technically
the window is our global object. If we’re inside an object, ‘this’ will refer to the object itself however
if you’re inside a function, this will still refer to the window object and likewise if you’re inside a method
that is within an object, ‘this’ will refer to the object.

Due to our scope chain, if we’re inside a sub-object (an object inside an object), ‘this’ will refer to
the sub-object and not the parent object.

As a side note, it’s also worth adding that when using functions like setInterval, setTimeout and eval,
when you execute a function or method via one of these, ‘this’ refers to the window object as these are methods of window, so
setInterval() and window.setInterval() are the same.

Ok now that we have that out of the way, let’s do a real world example and create a
form validation object!

Real world Usage: A Form Validation Object

First I must introduce you to the addEvent function which we will create and is a
combination of ECMAScript’s (Firefox, Safari, etc.. ) addEventListener() function and
Microsoft ActiveX Script’s attachEvent() function.

    function addEvent(to, type, fn){
        if(document.addEventListener){
            to.addEventListener(type, fn, false);
        } else if(document.attachEvent){
            to.attachEvent('on'+type, fn);
        } else {
            to['on'+type] = fn;
        }
    };

This creates a new function with three arguments, to being the DOM object we are attaching
the event to, type being the type of event and fn being the function run when
the event is triggered. It first checks whether addEventListener is supported, if so it will use that, if not it will check
for attachEvent and if all else fails you are probably using IE5 or something equally obsolete so
we will add the event directly onto its event property (note: the third option will overwrite any
existing function that may have been attached to the event property while the first two will add
it as an additional function to its event property).

Now let’s set up our document so it is similar to what you might see when you develop jQuery stuff.

In jQuery you would have;

    $(document).ready(function(){
        //all our code that runs after the page is ready goes here
    });

Using our addEvent function we have;

    addEvent(window, 'load', function(){
		//all our code that runs after the page is ready goes here
	});

Now for our Form object.

var Form = {

	validClass : 'valid',

	fname : {
		minLength : 1,
		maxLength : 15,
		fieldName : 'First Name'
	},

	lname : {
		minLength : 1,
		maxLength : 25,
		fieldName : 'Last Name'
	},

	validateLength : function(formEl, type){
		if(formEl.value.length > type.maxLength || formEl.value.length < type.minLength ){
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		} else {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)
			formEl.className += ' '+Form.validClass;
			return true;
		}
	},

	validateEmail : function(formEl){
		var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
		var emailTest = regEx.test(formEl.value);
		if (emailTest) {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)
			formEl.className += ' '+Form.validClass;
			return true;
		} else {
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		}
	},		

	getSubmit : function(formID){
		var inputs = document.getElementById(formID).getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++){
			if(inputs[i].type == 'submit'){
				return inputs[i];
			}
		}
		return false;
	}			

};

So this is quite basic but can easily be expanded upon.

To break this down first we create a new property which is just the string name of our 'valid' css class
that when applied to the form field, adds valid effects such as a green border. We also define our two sub-objects, fname and lname,
so we can define their own properties that can be used by methods elsewhere, these properties are minLength
which is the minimum amount of characters these fields can have, maxLength which is the max characters
the field can have and fieldName which doesn't actually get used, but could be grabbed for
things like identifying the field with a user friendly string in an error message (eg. 'First Name field is required.').

Next we create a validateLength method that accepts two arguments: formEl the DOM element to validate
and the type which refers to one of the sub-object to use (i.e. fname or lname).
This function checks whether the length of the field is between the minLength and maxLength range, if it's not
then we remove our valid class (if it exists) from the element and return false, otherwise if it is then we add the valid class and return true.

Then we have a validateEmail method which accepts a DOM element as an arguement, we then test this DOM elements value against an
email type regular expression; again if it passes we add our class and return true and vice versa.

Finally we have a getSubmit method. This method is given the id of the form and then loops through all input elements inside the specified form
to find which one has a type of submit (type="submit"). The reason for this method is to return the submit button so we can
disable it until the form is ready to submit.

Let's put this validator object to work on a real form. First we need our HTML.

    

    
        First Name

        Last Name

        Email

Now let's access these input objects using JavaScript and validate them when the form submits.

addEvent(window, 'load', function(){

	var ourForm = document.getElementById('ourForm');
	var submit_button = Form.getSubmit('ourForm');
	submit_button.disabled = 'disabled';

	function checkForm(){
		var inputs = ourForm.getElementsByTagName('input');
		if(Form.validateLength(inputs[0], Form.fname)){
			if(Form.validateLength(inputs[1], Form.lname)){
				if(Form.validateEmail(inputs[2])){ 					 

						submit_button.disabled = false;
						return true;

				}
			}
		}

		submit_button.disabled = 'disabled';
		return false;

	};

	checkForm();
	addEvent(ourForm, 'keyup', checkForm);
	addEvent(ourForm, 'submit', checkForm);

});

Let's break down this code.

We wrap our code in the addEvent function so when the window is loaded this script runs.
Firstly we grab our form using its ID and put it in a variable named ourForm, then we grab
our submit button (using our Form objects getSubmit method) and put it in a variable named submit_button,
and then set the submit buttons disabled attribute to 'disabled'.

Next we define a checkForm function. This stores all the inputs inside the form field as an array and we attach it to a
variable named.. you guessed it.. inputs!
Then it defines some nested if statements which test each of the fields inside the inputs array against our Form methods.
This is the reason we returned true or false in our methods, so if it returns true, we pass that if statement and continue onto the next,
but if it returns false, we exit the if statements.

Following our function definition, we execute the checkForm function when the page initially loads and also attach the function to a keyup event
and a submit event.

You might be asking, why attach to submit if we disabled the submit button. Well if you are focused on an input field and hit the enter key, it will
attempt to submit the form and we need to test for this, hence the reason our checkForm function returns true (submits the form) or false (doesn't submit form).

Conclusion

So we learned how to define the different object types within JavaScript and create properties and methods within them. We also learned a nifty addEvent function and got to use our object in a basic real world example.

This concludes the basics of JavaScript Object Orientation. Hopefully, this may start you on your way to building your own JavaScript library! If you liked this article and are interested in other JavaScript related topics, post them in the comments as I'd be happy to continue writing them. Thanks for reading.

Build a Simple Password Strength Checker

Siddharth — Wed, 04 Nov 2009 20:15:37 +0000

Providing instant feedback is the in-thing right now. Why limit yourself to checking usernames and email addresses? Why not extend this to provide quick visual feedback about the strength of the password the user has input? Today, we’ll take a look at how to create a simple password strength checker using the jQuery library, regular expressions and a simple algorithm.

A Word From the Author

As most security experts will tell you, the user is always the weakest link. The most secure of systems are vulnerable when a user chooses an extremely ill-advised password. With that in mind, the recent trend seems to be providing quick feedback to the user regarding the strength of the password so the user can extend or modify the password to make it more secure.

Today, we are going to use the jQuery library, a bunch of regular expressions and a very simple algorithm to create a basic password strength checker. Interested? Let’s get started right away! Here is a demo of what we are trying to build today:

Design Goals

Our design goals for this specific functionality is relatively small.

Provide visual feedback to the user regarding the strength of their password.
The feedback has to be instantaneous. This means no clicking on a button to test the strength.
The trigger event can be any of the key board events. I’ve chosen keyup since this is the most appropriate for our specific need.
For the visual feedback, modifying the text alone, while useful, is severely lacking. I’ve chosen to change the background colors as well to draw the user’s attention to this.
Provide additional quantifiable feedback so the user knows in which departments the password lacks strength and how it can be improved.

Now that we’ve adequately figured out our needs, we can move on to the next stage.

Plan of Action

We’ll now decide on the order of the individual steps that need to be done.

Hook up the event handler to the keyup event of the input box.
Let the event handler check the input but delegate everything else to individual helper methods.
The helper methods should take care of parsing the input and analyzing it, computing the complexity and printing out the results.
Make sure the event handlers fires off the helper methods only if the length of the input is greater than the expected minimum so as to not waste CPU cycles on invalid entries.
Return control to the event handler in case anything else needs to be done.

The Algorithm

In in the interest of keeping this write up succinct and approachable, I’ve decided to go with a very basic algorithm. The algorithm analyzes the string, gives bonuses for extra length, presence of numbers, symbols and upper case letters and penalties for letter or number only inputs. We aren’t going to look at matching common patterns or checking the input against a dictionary since this is out of the scope of the article. If interest peaks, I may do an article about this in the future.

First we check the length of the input string. If it’s greater than the minimum length, give it a base score of 50. Else make it 0. Next iterate through each character of the string and check if it is a symbol, number or upper case letter. If so, make a note of it.

Then check how many extra characters the string has, over the recommended minimum and grant a bonus for each character. Also grant a bonus if the string contains a combination of upper case letters, numbers and symbols or all three. Grant a bonus for each’s presence too.

Check if the string only contains either lower case letters or numbers and if so, penalize.

Add up all the numbers and decide the strength of the password accordingly.

That’s the long and short of the algorithm. It’s not going exceedingly suave but it catches a lot of bad passwords. You’ll understand this better once we see it in code.

Core Markup

The HTML markup of the demo page looks like so:




Simple Password Strength Checker - by Siddharth for NetTuts








Create a simple password strength checker

by Siddharth for the lovely folks at Net Tuts

Type in your password to get visual feedback regarding the strength of your password.
I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious.   



Enter a random value



Breakdown of points

Disregard all the usual markup. Do notice the input element with an ID of inputPassword, the div element with an ID of complexity which shows the complexity of the password and div element with an ID of details which shows the breakdown of points.

We’ve also included the jQuery library and our own script file. Extra points if you appreciate the name of our script file.

CSS Styling

body{
	font-family: "Lucida Grande", "Verdana", sans-serif;
}

h1{
	font-size: 30px;
	padding: 0;
	margin: 0;
}

h2{
	font-size: 18px;
	padding: 0;
	margin: 0 5px 30px 0;
}

input{
	width: 288px;
	height: 30px;
	margin: 50px 0 0 0;
	padding: 3px 5px;
	font-size: 22px;
	font-family: "Lucida Grande", "Verdana", sans-serif;
}

#container{
	width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
}

.block{
	width: 300px;
	margin: 0 auto 0 auto;
}

#complexity, #results{
	width: 300px;
	padding: 3px 0;
	height: 20px;
	color: #000;
	font-size: 14px;
	text-align: center;
}

#results{
	margin: 30px 0 20px 0;
}

.default{background-color: #CCC;}
.weak{background-color: #FF5353;}
.strong{background-color: #FAD054;}
.stronger{background-color: #93C9F4; }
.strongest{background-color: #B6FF6C;}

span.value{
	font-weight:bold;
	float: right;
}

Just boiler plate CSS for layouts and typography. We do have a bunch of classes at the bottom for each individual strength ratings. We’ll add them to the elements when needed.

JavaScript Implementation

Now that we have a solid framework and some basic styling in place, we can start coding up the required functionality. Do note that we make extensive use of jQuery. Feel free to link to Google’s CDN if necessary.

Variables and Event Handling

Since a lot of number juggling is going to go on, we need a bunch of variables to hold the values. Since is a demo and not production code, I’d decided to declare the variables as global and access them through the helper methods instead of declaring them internally and then passing it to the functions.

	var strPassword;
	var charPassword;
	var complexity = $("#complexity");
	var minPasswordLength = 8;
	var baseScore = 0, score = 0;

	var num = {};
	num.Excess = 0;
	num.Upper = 0;
	num.Numbers = 0;
	num.Symbols = 0;

	var bonus = {};
	bonus.Excess = 3;
	bonus.Upper = 4;
	bonus.Numbers = 5;
	bonus.Symbols = 5;
	bonus.Combo = 0;
	bonus.FlatLower = 0;
	bonus.FlatNumber = 0;

The variable names are pretty standard fare but I’d give a rundown anyway. strPassword holds the input box’s value, charPassword is an array holding each character of the string, complexity holds a reference to the div element. We also define the minimum password length, score and the base score.

We create a quick hash to hold the number of extra characters, upper case characters, numbers and symbols. We do the same for the bonuses. The num hash holds the number of characters while the bonus hash holds the bonus multipliers. You can just create individual variables but I think this looks cleaner.

Don’t forget to hook up the event handler to the event.

	$("#inputPassword").bind("keyup", checkVal);

checkVal is the event handler which we’ll create in just a tiny bit.

The Event Handler

function checkVal()
{
	if (charPassword.length >= minPasswordLength)
	{
		baseScore = 50;
		analyzeString();
		calcComplexity();
	}
	else
	{
		baseScore = 0;
	}

	outputResult();
}

We first check the length of the input string. If it’s greater than or equal to the minimum specified length, we can proceed. We set the base score to 50 and call the helper methods which take care of analyzing the string and computing it’s complexity.

If it’s less than the expected length, we just set the base score to 0.

We then call the outputResult function which takes care of making sense of the computed computations. We’ll see how it works later below.

Analyzing the Input

function analyzeString ()
{
	for (i=0; i
This maybe look a bit complicated but I promise you, it’s only because of the regular expressions. Let’s go over the code part by part.
First, we need to figure out the composition of the string in question. As in, we need to figure out whether the string contains upper case letters, numbers of symbols and if so, how many of them are present. With this in mind, we iterate through the character array and check each characters to see its type. The match method lets us match a string against a regular expression. If you are new to regular expression, I suggest you read Vasili’s great article here.
Next, we have determine the difference between the length of the input string and the specified minimum length of the password. This gives us the excess number of characters to play around with.
We then check if the string has upper case, numbers and symbols. If so, grant a bonus. We also check to see whether it has combinations of two of them and grant a smaller bonus if so.
Finally, we check to see whether a string is flat: whether it contains only lower case letters or only numbers. We check this with a regular expression and if so, penalize the password for this practice.
Calculate the Complexity
function calcComplexity()
{
	score = baseScore + (num.Excess*bonus.Excess) + (num.Upper*bonus.Upper) + (num.Numbers*bonus.Numbers) +
(num.Symbols*bonus.Symbols) + bonus.Combo + bonus.FlatLower + bonus.FlatNumber;
}

Just a simple addition. We add the base score to the product of the number of excess characters and it’s multiplier. Same for upper case letters, numbers and symbols. We then add a bonus for combinations, if present, and add penalties if the string is flat. 
Updating the UI
Now that all the computation is behind us, we can update the UI to reflect the changes. Here are each of the states.

   


   


   


   

function outputResult()
{
	if ($("#inputPassword").val()== "")
	{
		complexity.html("Enter a random value").addClass("default");
	}
	else if (charPassword.length < minPasswordLength)
	{
		complexity.html("At least " + minPasswordLength+ " characters please!").addClass("weak");
	}
	else if (score<50)
	{
		complexity.html("Weak!").addClass("weak");
	}
	else if (score>=50 && score<75)
	{
		complexity.html("Average!").addClass("strong");
	}
	else if (score>=75 && score<100)
	{
		complexity.html("Strong!").addClass("stronger");
	}
	else if (score>=100)
	{
		complexity.html("Secure!").addClass("strongest");
	}
}

Nothing fancy here but we’ll go through it line by line.
We first check to see whether input is empty. If so, change the result’s text and add a default class to change it’s background color back to it’s original gray.
If it’s less than the minimum specified length, we change the text accordingly and add a weak class so it’s background is red. We do the same if the total score is less than 50 but change the text to weak.
As the score increases, we change the text accordingly and add the necessary classes. Feel free to change the baseline scores for each rating. I just put in unscientific values to get the demo going.
Updating the Detailed Breakdown

   

With the main result updated, we can look at updating the stats now. 
function outputResult()
{
	// Previous Code

    $("#details").html("Base Score :" + baseScore  + ""
				  + "
Length Bonus :" + (num.Excess*bonus.Excess) + " ["+num.Excess+"x"+bonus.Excess+"] "
				  + "
Upper case bonus :" + (num.Upper*bonus.Upper) + " ["+num.Upper+"x"+bonus.Upper+"] "
				  + "
Number Bonus : " + (num.Numbers*bonus.Numbers) + " ["+num.Numbers+"x"+bonus.Numbers+"]"
				  + "
Symbol Bonus : " + (num.Symbols*bonus.Symbols) + " ["+num.Symbols+"x"+bonus.Symbols+"]"
				  + "
Combination Bonus : " + bonus.Combo + ""
				  + "
Lower case only penalty : " + bonus.FlatLower + ""
				  + "
Numbers only penalty : " + bonus.FlatNumber + ""
				  + "
Total Score: " + score  + ""
}

This part is not as confusing as it looks. Let me explain.
Instead of just updating the individual values for the detailed results, I’ve resorted to just updating the complete HTML value of the container. I know it is going to be sluggish when a number of these boxes add up but accessing each element individually and then updating it’s value for a tiny demo seemed to be rather counter-productive. So run with me here. 
This is just like injecting regular HTML into an element except that we’ve placed a couple variables inside to enable the details to be updated instantaneously. Each value gets a value class to make it bold. We also display the number of special characters and it’s multipler so the user can gauge which elements get more weightage.
A few Tweaks
At this point of time, there are 2 bugs which show up. 

If you type in a long password and then erase the text box, the background colors don’t change back.
In the same scenario, the details of the points break down don’t update as it should.

We’ll tackle them one by one.
For the first bug, the root cause happens to be the fact that we don’t remove all the other classes. This wouldn’t be a problem if the most recently added classes takes precedence over others. Unfortunately, it’s not so. Here is a quick fix.
function outputResult()
{
	if ($("#inputPassword").val()== "")
	{ complexity.html("Enter a random value").removeClass("weak strong stronger strongest").addClass("default");}
	else if (charPassword.length < minPasswordLength)
	{complexity.html("At least " + minPasswordLength+ " characters please!").removeClass("strong stronger strongest").addClass("weak");}
	else if (score<50)
	{complexity.html("Weak!").removeClass("strong stronger strongest").addClass("weak");}
	else if (score>=50 && score<75)
	{complexity.html("Average!").removeClass("stronger strongest").addClass("strong");}
	else if (score>=75 && score<100)
	{complexity.html("Strong!").removeClass("strongest").addClass("stronger");}
	else if (score>=100)
	{complexity.html("Secure!").addClass("strongest");}

	// Details updating code
}

You are probably asking why we don’t remove each and every class here. The answer is simple: we take advantage of one of the primary attributes of CSS: cascading. If you note the order of declaration of each class in the CSS file you’ll notice that default occurs the first and strongest comes the last which means if an element has the strongest class it’ll override any modifications made by any class above it. So we’ll have to only remove classes which occur below the relevant class. For example, for an element to have strong, we’ll have to remove the stronger and strongest classes. 
The reason the second bug exist is due to the fact that the individuals variables aren’t reset when a new event occurs. They carry over to the next event as well. In order to fix this, we create a quick function which reinitializes all the relevant variables and add it the checkVal event handler so it is called every time the input box’s text is updated.
function init()
{
	strPassword= $("#inputPassword").val();
	charPassword = strPassword.split("");

	num.Excess = 0;
	num.Upper = 0;
	num.Numbers = 0;
	num.Symbols = 0;
	bonus.Combo = 0;
	bonus.FlatLower = 0;
	bonus.FlatNumber = 0;
	baseScore = 0;
	score =0;
}

function checkVal()
{
	init();

	// Other code
}

Limitations

   

If you’ve been playing around with the demo a bit, you’ll notice that Pa$$W0rd$ turns up as a secure password while in fact it’ll be broken pretty soon. This is due to the simplicity of our algorithm here. We don’t check for character replacements. Or common passwords or patterns for that matter. Doing such things would increase the difficulty of this tutorial while reducing its approachability, both of which I didn’t want for this particular write up. 
This is intended as a basic password strength checker. If you need to beef it up, you could probably add a couple more regular expressions to check for patterns and character repetition and then tune the results accordingly.
Looking the input up against a dictionary is really out of the scope of this article and would require either a huge dictionary downloaded to the client side or hooking it up to a server side system to do that. Again, I really wanted to avoid both of them this time.
Conclusion
And there you have it: how to add a user friendly functionality, the ability to let the user know the strength of a password he just entered, to your projects. Hopefully you’ve found this tutorial interesting and this has been useful to you. Feel free to reuse this code elsewhere in your projects and chime in here if you are running into difficulties.
Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Simple Draggable Element Persistence with jQuery

Dustin Blake — Thu, 29 Oct 2009 19:27:18 +0000

At some point you may need to create a draggable element within your web application. This is great functionality, however you may want or find that you need the element to stay in place after being dragged around. In this tutorial I will show you how to easily drag an element and make it stick, even after a page reload, by grabbing and storing its X and Y coordinates.

Scenario

So you have an element in your web application. You can drag it around, put it here and put it there. But, when the page is reloaded in any way, the element returns to its default position. While you want the element to be draggable, you don’t want it to move after its been dragged. Let’s look at a simple solution to give us this ability.

Getting Started

For this tutorial we are going to need the jQuery library, jQuery UI, and the jQuery-JSON plugin by Brantley Harris. We will also be using some PHP and a MySQL database to parse and store our data. If your new to jQuery, no worries. jQuery is a highly extensible, fast, and lightweight JavaScript library which is both fun and easy to use. The library has very nicely structured documentation, and a huge community. This is my first tutorial on jQuery and JavaScript, so please bear with me. I hope to explain everything as best as I can and if you have any questions, please feel free to ask.

The HTML amd CSS

I wanted to start off with the HTML and styling for this tutorial since the effect is applyed to HTML elements, it helps to visualize what we are going to do, right off the bat. First the CSS:

html, body {
	background:#151515;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#glassbox {
	background:#333;
	border:1px solid #000;
	height:400px;
	margin:30px auto auto auto;
	position:relative;
	width:960px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#element {
	background:#666;
	border:1px #000 solid;
	cursor:move;
	height:143px;
	padding:10px 10px 10px 10px;
	width:202px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#respond{
	color:#fff;
	margin:0 auto 0 auto;
	width:960px;
}

The CSS is very simple. We set the html and body properties to clear margins and padding, and continue by setting some heights, widths, and other properties to our elements so it doesn’t look so bland. -moz-border-radius and -webkit-border-radius are two properties which allow us to create rounded borders (applicable only to Mozilla Firefox and Safari 3 at the moment) for our elements. Let’s take a look at the HTML:





Simple Draggable Element Persistence with jQuery










	
		Move the Box

As you can see we just setup a very nice and simple page which calls in our CSS, JavaScript library and plugins, and contains the elements which we will be using to apply some effects and events to. As a note,the jquery-ui file is a custom build which only includes the core and the draggable interaction functionality.

The Javascript

Now for some juicy interaction! Lets first take a look at some of the basic functions we will be using to apply some effects to our elements. Let’s tear it down.

Ok now for some devilry! In this snippet we are going to do a couple of things. First we want to setup an empty array, and then get some values to fill it with. By calling the event handler .mouseup() we are telling the browser to look for the event when you unclick your mouse. We set the variable coords to equal our empty array, and again set the variable coord to equal the position handler of our #element. Then we need to create a list of items, these will be coordTop: and coordLeft: respectfully equaling our #element’s left and top positions. With coords.push(item) we are literally pushing our item list and filling the coords array with it. Then set the variable order as a new list where the coords key will equal our coords array. Now for some AJAX.

$.post is an AJAX request handler which loads a remote page using an HTTP POST method. This function looks for the parameters: url, data, callback and data type to be returned. In this tutorial we specify the updatecoords.php file as our URL because this is where we want to send our post data, we then define our datatype by including the $.toJSON function defined in our jquery-JSON plugin and setting our variable order as the data to be handled by .toJSON. Next we create a callback which checks for a return response from our PHP file upon success, and add a bit of flavor by saying, “If whats returned is equal to success then…” We keep this html hidden by using the effect handler .hide, and tell it to fade in at 1000 milliseconds, wait with a timeout for 2000 milliseconds, and tell it to fade out again. In the end our JavaScript should look like this:

Place the JavaScript below the HTML, right after the closing body tag.

The PHP

Alright, now lets get to business on doing something with the data being posted from our jQuery. First lets create a simple database to store our coordinates, which we will then later retrieve to define the position of our element. Second will be our config.php file which will store our database connection settings, and then we will finish with updatecords.php.

Database: 'xycoords'

CREATE TABLE IF NOT EXISTS `coords` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `x_pos` int(4) NOT NULL,
  `y_pos` int(4) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

config.php

updatecoords.php

coords as $item) {
	//Extract X number for panel
	$coord_X = preg_replace('/[^\d\s]/', '', $item->coordTop);
	//Extract Y number for panel
	$coord_Y = preg_replace('/[^\d\s]/', '', $item->coordLeft);
	//escape our values - as good practice
	$x_coord = mysqli_real_escape_string($link, $coord_X);
	$y_coord = mysqli_real_escape_string($link, $coord_Y);

	//Setup our Query
	$sql = "UPDATE coords SET x_pos = '$x_coord', y_pos = '$y_coord'";

	//Execute our Query
	mysqli_query($link, $sql) or die("Error updating Coords :".mysqli_error());
}

//Return Success
echo "success";

?>

This is pretty simple to follow. The first thing we want to do is check to make sure our post data is being passed to the file. If that happens we include our config file for our database connection and set the variable $data to json_decode(passed post variable); json_decode is a PHP function implemented in PHP 5.2.0 which allows us to decode a JSON string.

Since our $data variable contains an array of data, we need to tear it apart to get the values we need. To do this we take foreach $data->coords (which is from our order variable in our JavaScript) as an item. This takes each key and value pair and creates an item object from the array, we then specify and create a variable out of it. We use this in conjunction with preg_replace so that we can take out the characters we don’t need. We then, as good practice and a measure of security, escape our values to prepare them for insertion into the database. If all goes well, we need to return success to our JavaScript to let it know everything went just fine.

Lastly

Now that we have what we need in place, to grab the position coordinates from our element and pass it to PHP for storing, we need to modify our HTML to reflect the position of our element. To do this we change the basic element HTML and instead create it with PHP:


Move the Box';
		}
?>

Here we setup a basic query to the database to select all the rows from the table coords. We then invoke a while loop which specifies each row we select as $row. Now we can set some variables to equal each individual row we pull from the database, and echo them in the proper place within the elements style (left and top).

Wrapping up

Well I hope that you enjoyed this tutorial as much as I did writing it! It may not be perfect. While this is just one way to get this functionality in a draggable element, there are other ways (and perhaps better) to achieve it. Once such way could be to store the coordinate values in a cookie, to keep calls to the database at a minimum. You could also serialize the values passed from jQuery to PHP instead of using JSON. This tutorial is just one example from which you can expand upon. Thanks for reading!

Learn how to Create a Retro Animated Flip-Down Clock

Alexandru Pitea — Wed, 21 Oct 2009 18:48:38 +0000

In this tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, I tried to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website, so let’s get started!

Tutorial Details

Program: Mootools
Difficulty: Easy
Estimated Completion Time: ~ 1 hour

Step 1: The Main Concept

The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes. Here is the basic scheme.

Step 2: Photoshop

First, we must create our images.

Select the “Rounded Ractangle Tool” (U), set the radius to 10px and the color to #0a0a0a and create a 126px by 126px ractangle, you can change the dimension according to your needs, just keep them an even number. Resterize the shape by going to Layer > Rasterize > Shape or Right Click > Rasterize Layer. Now we want to create that "gap" between the two parts and make the upper background a little bit lighter. Place a guide line at the horizontal half of our pad, then select the hole pad (Ctrl + Click on the layer icon) and with the Rectangular Marquee Tool (M) select the upper half in intersect mode (hold Shift + Alt). Now we just have to fill the selection with #121212 using the Paint Bucket Tool (G). Next trace a 2px, black line using our guide line as help, on a separate layer.

Now we have to add the digits. Using the Type Tool (T) make a new layer with the digits and place it under the line we’ve created earlier.

Just add a little overlay on the numbers to make them look a bit more realistic. Create a new layer above the digits layer, select the lower part of the pad and fill with #b8b8b8, then fill the upper part with #d7d7d7. Now set the blending mode to “Multiply”.

Ok. Now that we have our completed pad, we have to split it up. The main idea is to split the right digit from the left one, so instead of having 60 images for the minutes and seconds groups, you end up with 20 images that we will use for both groups. So basicly we have to split our pad into 4 images with the same dimensions. I used the Crop Tool (C) for this job.

After you crop the pad, change the digit and save each time as a separate .png so you end up with all the files you need ( numbers from 0 – 9 ). Repeat this step for all parts of the pad. Note that for the hours pad, you don’t separate the digits, you have just the upper and lower part. In the end here is our folder structure ("Double" for minutes and seconds, "Single" for hours):

Step 3: HTML Markup

Now that we have our files ready we can start coding. First of all, we need two containers for our images, one for the "upperPart" of our clock and one for the "lowerPart".

Next we add the images. Here is a scheme with the id’s I’ve used:

I had to use a transparent spacer image that is 1px wide and the same hight as the other images in order to keep the containers from shrinking when the pads flip. Also, there must not be any space between the images from the same group (e.g. "minutesUpLeft" and "minutesUpRight").

Ok. These will be the front pads of our clock that will flip down, now we have to set up the back ones, so when the front pads flip, the new digits can be seen on the them. We will wrap what we’ve done so far in a div and just duplicate it above itself, adding to each image id the word "Back" and changing to the appropriate source file.

Here is the complete .html file with reference to the stylesheet and the javascript file "animate.js" in which we will create the animation.



Create an Animated Flip Down Clock

Step 4: CSS

The main thing we have to do now is to overlap the “front” and “back” divs. First we position the main wrapper where we need it and then give the same absolute position to both containers.

#wrapper{
	position:absolute;
	top: 100px;
	left:400px;
}

#front, #back{
	position:absolute;
	top:0px;
}

Now we need to vertically align the upper part to the bottom and the lower part to the top, so that the pads would look like they’re anchored to the middle of the clock. I added the height and visibility properties for the front parts because we need them for the animation later on.

#upperPart, #upperPartBack{
	vertical-align:bottom;
}

#lowerPart, #lowerPartBack{
	vertical-align:top;
}

#upperPart img{
	position:relative;
	height:63px;
	vertical-align:bottom;
	visibility:visible;
}

#lowerPart img{
	position:relative;
	height:63px;
	vertical-align:top;
	visibility:visible;
}

#lowerPartBack img{
	position:relative;
	vertical-align:top;
}

#upperPartBack img{
	position:relative;
	vertical-align:bottom;
}

Finally all we have to do is to constrain the width of the pads because we want to play around only with their height. By default, if you change one of them, the hole image will be scaled.

#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
	width:126px;
}

#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
	width:63px;
}

Here it is all put together:

body{
	background:#000;
}

#wrapper{
	position:absolute;
	top: 100px;
	left:400px;
}

#front, #back{
	position:absolute;
	top:0px;
}

#upperPart, #upperPartBack{
	vertical-align:bottom;
}

#lowerPart, #lowerPartBack{
	vertical-align:top;
}

#upperPart img{
	position:relative;
	height:63px;
	vertical-align:bottom;
	visibility:visible;
}

#lowerPart img{
	position:relative;
	height:63px;
	vertical-align:top;
	visibility:visible;
}

#lowerPartBack img{
	position:relative;
	vertical-align:top;
}

#upperPartBack img{
	position:relative;
	vertical-align:bottom;
}

#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
	width:126px;
}

#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
	width:63px;
}

Step 5: Creating the Animation

First of all we need some variables to store the time that is shown on the pads. Note: h = hours, m1 = the left minute digit, m2 = the right minute digit, s1 = the left second digit, s2 = the right second digit.

	var h_current = -1;
	var m1_current = -1;
	var m2_current = -1;
	var s1_current = -1;
	var s2_current= -1;

Now we create a function that will run every second and update our clock. First we get the current time and determine the time of day, AM or PM.

function retroClock(){

       now = new Date();
       h = now.getHours();
       m1 = now.getMinutes() / 10;
       m2 = now.getMinutes() % 10;
       s1 = now.getSeconds() / 10;
       s2 = now.getSeconds() % 10;
       if(h < 12)
          ap = "AM";
       else{
          if( h == 12 )
              ap = "PM";
          else{
              ap = "PM";
              h -= 12; }
       }

Then we compare it to the time shown on the pads and change which group is different. It uses a function called “flip” that I will describe in a minute.

       if( h != h_current){
          flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
          h_current = h;
      }

      if( m2 != m2_current){
          flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
          m2_current = m2;

          flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
          m1_current = m1;
      }

       if (s2 != s2_current){
          flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
          s2_current = s2;

          flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
          s1_current = s1;
      }
}//end retroClock

Now, the flip function. It has a few parameters: upperId, lowerId = the ids of the upper and lower pads that will flip; changeNumber = the new value that will be shown; pathUpper, pathLower = the paths to the source files for the new value. The animation is composed of the following steps:
The front upper pad takes the value of the back one and it’s made visible, overlaing it, while the lower one is also made visible but it’s height is changed to 0px.

function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
    var upperBackId = upperId+"Back";
    $(upperId).src = $(upperBackId).src;
    $(upperId).setStyle("height", "63px");
    $(upperId).setStyle("visibility", "visible");

    $(lowerId).setStyle("height", "0px");
    $(lowerId).setStyle("visibility", "visible");

Now we change the back upper and front lower pad to the new value.

	$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
   $(lowerId).src = pathLower+parseInt(changeNumber)+".png";

Having this setup we can start the actual animation. As I mentioned earlier it consists of reducing the height of the front upper part to 0%, 0px, and increasing the height of the front lower part to 100%, 63px in this case. After the animation is complete, the back lower pad takes the new value and the front pads are make hidden.

    var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
    flipUpper.addEvents({
        'complete': function(){
            var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
                flipLower.addEvents({
                    'complete': function(){
                        lowerBackId = lowerId+"Back";
                        $(lowerBackId).src = $(lowerId).src;
                        $(lowerId).setStyle("visibility", "hidden");
                        $(upperId).setStyle("visibility", "hidden");
                    }				});
                flipLower.start('height', 64);

        }
                        });
    flipUpper.start('height', 0);
}//end flip

The final thing to do is to make our main function run every second.

	setInterval('retroClock()', 1000);;

Here it is all put together.

var h_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current= -1;

function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
    var upperBackId = upperId+"Back";
    $(upperId).src = $(upperBackId).src;
    $(upperId).setStyle("height", "63px");
    $(upperId).setStyle("visibility", "visible");

    $(lowerId).setStyle("height", "0px");
    $(lowerId).setStyle("visibility", "visible");

	$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
    $(lowerId).src = pathLower+parseInt(changeNumber)+".png";

    var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
    flipUpper.addEvents({
        'complete': function(){
            var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
                flipLower.addEvents({
                    'complete': function(){
                        lowerBackId = lowerId+"Back";
                        $(lowerBackId).src = $(lowerId).src;
                        $(lowerId).setStyle("visibility", "hidden");
                        $(upperId).setStyle("visibility", "hidden");
                    }				});
                flipLower.start('height', 64);

        }
                        });
    flipUpper.start('height', 0);
}//end flip

function retroClock(){

     now = new Date();
     h = now.getHours();
     m1 = now.getMinutes() / 10;
     m2 = now.getMinutes() % 10;
     s1 = now.getSeconds() / 10;
     s2 = now.getSeconds() % 10;
     if(h < 12)
        ap = "AM";
     else{
        if( h == 12 )
            ap = "PM";
        else{
            ap = "PM";
            h -= 12; }
     }

     if( h != h_current){
        flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
        h_current = h;
    }

    if( m2 != m2_current){
        flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
        m2_current = m2;

        flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
        m1_current = m1;
    }

     if (s2 != s2_current){
        flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
        s2_current = s2;

        flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
        s1_current = s1;
    }
}//end retroClock

setInterval('retroClock()', 1000);

Finished

We are finished! Hope you’ve enjoyed working on this little project, it has a somewhat complex concept, but in the end it is a really neat gadget for your websites. Please do not hesitate to send any suggestions you may have!

How to Create an Image Gallery Powered by Picasa

Mikhail Kozlov — Tue, 20 Oct 2009 18:11:48 +0000

In this tutorial we are going to create a simple image gallery powered by Google’s Picasa Web Albums. In order to enhance the user’s experience, we’ll throw some jQuery into the mix and create a scrollable album carousel.

Overview

We are going to use PHP’s SimpleXML extension to sort and access the data inside the XML feed provided by Picasa Web Albums. jQuery will be responsible for the DOM manipulation and AJAX request. We are also going to use the Scrollable library, which is part of jQuery Tools to create the carousel. Next, we’ll use jQuery’s MouseWheel plug-in to allow for cross-browser mouse wheel support. Finally, we’ll use the Fancybox plug-in to each image in a “lightbox.”

What We Need

Picasa Web Album ID (usually the same as your Gmail or Google account ID)
PHP with SimpleXML (it is enabled by default with new PHP install)
Latest jQuery
Recently Discovered jQuery Tools from flowplayer.org
Fancybox plug-in for jQuery
960 Grid CSS (it is not required but I’m using it in this tutorial)

Getting Started

We’ll begin by downloading the files and putting them into the same folder. I also combined all of the Fancybox images with jQuery Tools ones, and placed them inside the img folder.

PHP files

For our project, we are going to use following PHP files:

index.php
_ajax.php
_conf.php

index.php will be responsible for displaying albums, images, and sending requests to _ajax.php.
_ajax.php will be handling dynamic request and returning formatted thumbnails
_conf.php, as you may have guessed, will contain some configuration information that will be used by both files.

_code.php

This file is very simple and short.

// First we need to set some defaults
$gTitle=""; // title of your gallary, if empty it will show: "your nickname' Photo Gallary"
$uName= "kozlov.m.a"; // your picasaweb user name
$tSize="72c"; // thumbnail size can be 32, 48, 64, 72, 144, 160. cropt (c) and uncropt (u)
$maxSize="720u"; // max image size can be 200, 288, 320, 400, 512, 576, 640, 720, 800. These images are available as only uncropped(u) sizes.

Basically, in this file we set the username (Picasa Web Album ID), thumbnail size, and max image size that we are going to show in our gallery.

index.php

This file requires a bit more to make the gallery work. We begin with referencing our configuration file (_conf.php):



	Next we need to load the album feed. We are only retrieving publicly available albums, so our request will look something like: “http://picasaweb.google.com/data/feed/api/user/user_name?kind=album&access=public”.


$file = file_get_contents("http://picasaweb.google.com/data/feed/api/user/".$uName."?kind=album&access=public&thumbsize=".$tSize);


	file_get_contents will load content from the XML feed into $file variable. As you can see, we used the $uName variable defined in _conf.php to get the right feed. We also passed the additional parameter “thumbsize;” so that the returned feed will contain thumbnails of our chosen size.


	Now, let’s convert the contents of the feed into a SimpleXml object and define the namespaces we are going to use:

$xml = new SimpleXMLElement($file);
$xml->registerXPathNamespace('gphoto', 'http://schemas.google.com/photos/2007');
$xml->registerXPathNamespace('media', 'http://search.yahoo.com/mrss/');


	You can find all namespaces used in the API feeds by visiting http://code.google.com/apis/…, but we’ll only be using “media” and “gphoto” in our tutorial; you do not have to worry about the rest of them.


	Next, we’ll get the web album’s name in case we did not already set one in __conf.php file:

if($gTitle == null){ // if empty Gallery title will be "user id's  Photo Gallery"
$nickname = $xml->xpath('//gphoto:nickname'); // Mikhail
$gTitle =$nickname[0]."'s Photo Gallery";
}
?>


	Finally, it is time for some simple HTML. We’ll set our header and reference a few CSS files.




<?php echo $gTitle; ?>








". $gTitle ."";?>


	As you can see, we’ve set the page title to $gTitle and have added some CSS to make things pretty.

Style Files

	I do not think that reset.css needs any additional explanation, so let’s skip over it and take a closer look at the other stylesheet.


960.css allows for a more grid-like layout. 
style.css comes from the provided stylesheet from jQuery Tools. 
And fancybox.css is part of the FancyBox plug-in. 


Note: Please make sure that you change image path in both fancybox.css and style.css, so all background images point to img folder. 


Album Holder and Navigational Elements

  It is time to create our album holder and navigational elements. This is where jQuery Tools is a huge help. For the album navigation, we’ll be using the Scrollable library. If you visit the Scrollable reference page and take a look at some of the examples, you’ll see that we’re using it almost without any modifications.


  







 

 
 
 


	We’ll also need a holder for the album picture thumbnails, and the album title that will be loaded via AJAX:







JavaScript

	Let’s finish our page by referencing the JavaScripts we’ll be using.








PHP


	Now it is time to go through the XML file and sift the album thumbnails out. Place the following PHP code inside the  element.

entry as $feed){
$group = $feed->xpath('./media:group/media:thumbnail');
$a = $group[0]->attributes(); // we need thumbnail path
$id = $feed->xpath('./gphoto:id'); // and album id for our thumbnail
echo 'title.'" title="'.$feed->title.'" ref="'.$id[0].'" />';
?>
}



	Our plan was to load album pictures once visitors click on a specific thumbnail, therefore we have to create some kind of reference to connect the two. For this purpose, we are putting a ref attribute into each album’s img tag; so it will look something like this when compiled:

	

AJAX

	Finally, we’ll spice it all up with some jQuery. Firstly, we need to initialize the jQuery Tools plug-in with some additional parameters:

$("div.scrollable").scrollable({
	size: 10, // number of pictures per "page"
	next: '#next', // id of next control element
	prev: '#prev', // id of prev control element
	navi:'#navi' // id of navigation control holder
});

The code above will automatically add scrollable controls.


Note: It is better to set the scrollable size to an odd number. This way, selected images will appear right in the middle. 


	Next we’ll create on click event for the album thumbnail:

$("#albums img").bind("click", function(){
	$("#a_title").text($(this).attr('title'));
	$("#pic_holder").html('').load("_ajax.php",{"aID":$(this).attr("ref")},function(){
	$("#pic_holder").find("a").fancybox();
	});
});

	Let’s take close look at what we are doing here. First we define our click event trigger:

$("#albums img").bind("click", function(){


	We use bind instead of the simple click because we do not want to interrupt the work of the scrollable plug-in that we just initiated above.


	Next, we’ll apply the album title into the h2 tag with id “a_title” from the title attribute of the anchor tag:

	$("#a_title").text($(this).attr('title'));


	Finally, we send an AJAX request to _ajax.php and let Fancybox re-index the freshly loaded images:

$("#pic_holder").html('').load("_ajax.php",{"aID":$(this).attr("ref")},function(){
 	$("#pic_holder").find("a").fancybox();
});


	As you probably noticed, we are inserting a “loading image” inside “pic_holder” before sending the AJAX request.  This will provide the user with some feedback to let them know that their request is currently being processed. Once we receive a response from the server, jQuery will replace the contents of the “pic_holder” with data that came from _ajax.php.

_ajax.php

	Now it is time to serve the contents of the album to our visitors. Our plan is to show thumbnails linked to originals on the Picasa server. Once a thumbnail is clicked, Fancybox will take over and create a lightbox-like image gallery. We’ll start with the entire contents of the file, and then go over each line:

registerXPathNamespace('media', 'http://search.yahoo.com/mrss/'); // define namespace media
		foreach($xml->entry as $feed){ // go over the pictures
		$group = $feed->xpath('./media:group/media:thumbnail'); // let's find thumbnail tag
		$description = $feed->xpath('./media:group/media:description'); // file name appended by image captioning
		if(str_word_count($description[0]) > 0){ // if picture has description, we'll use it as title
			$description = $feed->title. ": ". $description[0];
		}else{
			$description =$feed->title; // if not will use file name as title
		}
		$a = $group[0]->attributes(); // now we need to get attributes of thumbnail tag, so we can extract the thumb link
		$b = $feed->content->attributes(); // now we convert "content" attributes into array
		echo 'title.'" width="'.$a['width'].'" height="'.$a['height'].'"/>';
		}
	}else{
		echo 'Error! Please provide album id.';
	}
?>


	First, we are going to reference our configuration file, so we can have access to the constant parameters: Picasa ID and thumbnail size.

include './_conf.php'; // getting constants


	Then we’ll check if the album ID was sent via POST request:

if(isset($_POST['aID'])){


	If we did not find an album ID, we’re simply going to print an error message:

}else{
   echo 'Error! Please provide album ID.';
}


	If _ajax.php received the album ID, we’ll get an XML feed and start working on it, so let’s create a link to the correct XML feed:

 $aID = $_POST['aID']; // let's put the album id here so it is easier to use later
 $file = file_get_contents('http://picasaweb.google.com/data/feed/api/user/'.$uName.'/albumid/'.$aID.'?kind=photo&access=public&thumbsize=72c&imgmax='.$maxSize); // get the contents of the album


	As you can see, we use the album ID that came via the POST request as well as constants from _conf.php file. Again, we are using file_get_contents to load the XML feed and store it in the $file variable. Next we convert it to a SimpleXMLElement object cycle through each entry nodes that contain information about each picture. To do so, we’ll use a simple foreach() loop. 
foreach($xml->entry as $feed){ // go over the pictures


	Next, we are ready to extract data needed for our link and thumbnail. I’ve commented every line and hopefully it is enough to understand what is going on:

$group = $feed->xpath('./media:group/media:thumbnail'); // let's find the thumbnail tag
$description = $feed->xpath('./media:group/media:description');  // let's find the description tag
if(str_word_count($description[0]) > 0){ // if the picture has description, we'll use it as the title
	$description = $feed->title. ": ". $description[0]; // file name appended by image captioning
}else{
	$description =$feed->title; // if not, will use file name as title
}
$a = $group[0]->attributes(); // now we need to get attributes of thumbnail tag, so we can extract the thumb link
$b = $feed->content->attributes(); // now we convert "content" attributes into array


	Finally, we are putting it all into HTML context. We’ll echo a link to the original image and thumbnail image:

echo 'title.'" width="'.$a['width'].'" height="'.$a['height'].'"/>';



	To force Fancybox to organize all of the images into a gallery, we are adding the rel attribute to each link. You can simply put same number or string as value, but I’m going to use the album ID.

Styling

	As I mentioned before, most of the styling was taken straight from examples at the jQuery Tools website. All you must do here is simply adjust the height and width to suit the design of your website.

Mouse Wheel Scroll

	Mouse Wheel Scroll is another beauty that you can easily use. As some may have noticed, we never initiated this plug-in; yet, if you hover over the album carousel and try to scroll with your mouse wheel, it will work thanks to jQuery Tools.

Conclusion

We’ve learned how to combine PHP’s SimpleXML extension with a handful of plugins and Picasa to create a beautiful and dynamic image gallery. I hope you enjoyed and learned from it!

Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.

Drag to Share

Dan Wellman — Mon, 19 Oct 2009 17:35:06 +0000

We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. It’s brilliant and intuitive, and in this article I’m going to show you how we can replicate this behavior with jQuery and jQuery UI.

The following screenshot shows what we’ll have at the end of the tutorial:

Getting Started

The latest version of jQuery comes with jQuery UI and in this example we only need the core, draggable and droppable components, so make sure only these are selected in the download builder. Once the jQuery UI archive has been downloaded, unpack the js folder from the archive (we don’t need the development bundle or CSS framework in this example) in a working folder.

Now let’s create a basic page, with some text and an image on it, to showcase the behaviour; create the following new page in your code editor:



  
    
    Drag to Share Example
    
  
  
    
      Lorem ipsum dolor...
      
      Lorem ipsum dolor...

Save this as dragToShare.html in the folder with the js folder in it. Here we’ve added our layout/example text and an image, both within a container. We’re linking to the jQuery and jQuery UI source files at the bottom of the and a custom style sheet in the . We don’t need many styles at this point as there isn’t much on the page to actually style, but let’s add it next anyway with some basic styles for the page elements in it; in a new file in your code editor add the following:

#content { width:440px; }
#content img { float:right; margin-left:20px; }

Save this tiny file as dragToShare.css in the same folder as our HTML page. Don’t worry, we’ll be adding some more styles to the style sheet very shortly. Our example page should look like this at this point:

Making the Image Draggable

We need to make the image draggable, which we can do with jQuery UI, add the following

That’s all we need to do! We just cache the selector for the element(s) that we’d like to make draggable, and call the draggable() method on the resulting collection of elements. Now by clicking and holding the mouse button, the image in our example can be dragged around the page. The image will be made draggable as soon as the document is loaded as our code is wrapped in the $(function(){}) shortcut.

As well as caching the selector that returns our images, we’re also caching a selector that stores the title of the page. IE returns an empty string when using jQuery to retrieve the page title so we revert to document.title in this case.

We still have a lot to do before we’re done though; what we need to do first is to let the visitor know that dragging the image does something. Firstly we can use a little CSS to set the ‘move’ mouse pointer when we hover over the image; add the following line to the end of dragToShare.css:

.ui-draggable { cursor:move; }

We’re targeting the class .ui-draggable which is added by jQuery UI with this style so that the image will only inherit the move cursor if the image is made draggable, which won’t happen if JavaScript is switched off or otherwise unavailable. Using the class name instead of the :hover pseudo class is also much better for cross-browser compatibility.

Information Overlay

To really make it obvious that dragging the image does something, we can also add a tooltip to explicitly tell the visitor what to do; after the draggable() method add the following new code:

var createTip = function(e) {
  //create tool tip if it doesn't exist
  ($("#tip").length === 0) ? $("").html("Drag this image to share the page<\/span><\/span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
};

images.bind("mouseenter", createTip);

images.mousemove(function(e) {

  //move tooltip
  $("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
});

images.mouseleave(function() {

  //remove tooltip
  $("#tip").remove();
});

We’ve basically added three new event handlers to our code; the first event handler is the createTip function, which is defined as a variable and passed to jQuery’s bind() method along with the string mouseenter specifying the event. The next two functions are anonymous and are passed inline to jQuery’s mousemove() and mouseleave() helper methods.

In the createTip function we first check whether the tooltip already exists by seeing if a selector for it has a length of 0. If it does (have a length of 0) we know it doesn’t exist and can then create it. We set the innerHTML of the tooltip so that it features a span containing the message to the visitor, and a second empty span which we’ll use for a little decoration when we add the additional CSS in a moment.

We give the tooltip an id so that we can select it efficiently later on and set its CSS left and top properties using the pageX and pageY properties from the event object (e) which is passed to our function automatically. We then append the tooltip to the body of the page and fade it in slowly. To avoid HTML errors, we need to escape the forward-slashes in the raw HTML we add to the tooltip.

The mousemove function is used to make the tooltip track with the pointer, so when the pointer moves, the tooltip moves with it. We use the css method again as well as the pageX and pageY properties. Finally, the mouseleave function simply removes the tooltip from the page.

Styling the Tooltip

Now we can add some CSS for our tooltip; in the interests of progressive enhancement we’ll use the sexy CSS3 rgba style to make out tooltip semi-transparent in capable browsers; at the bottom of dragToShare.css add the following new selectors and rules:

#tip {
  position:absolute; display:none; height:25px; padding:9px 9px 0px;
  color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px; font-weight:bold; border-radius:4px;
  -moz-border-radius:4px; -webkit-border-radius:4px;
  background:#000; background:rgba(0,0,0,.5);
}
#tip .arrow {
  width:0; height:0; line-height:0; border-right:8px solid #000;
  border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent;
  border-bottom:8px solid transparent; position:absolute; left:-8px;
  top:9px;
}

That’s all we need. Most of the styles are pretty basic but we use the border-radius styles to give the tooltip rounded corners in gecko and webkit browsers, and as I mentioned before we use rgba to make the tooltip semi-transparent. This is a great effect and while it’s only supported in a few of the common browsers, it’s much more efficient than using an alpha-transparent PNG.

The empty span that we added to the tooltip is styled so that it looks like a speech-bubble arrow pointing to the mouse pointer. This is created using the CSS-shapes technique and as it’s not CSS3 it’s supported in most browsers. It’s even supported in IE6, although the border transparency that we give it isn’t supported. We could fix this easily enough if we really wanted to, but for the purposes of this tutorial I’m not going to deviate to this topic.

Note that we also use rgba for the border-color of our span so that it blends in with the rest of the tooltip. Now, IE (any version) is not going to support these rgba styles, but as we have provided normal colors before the rgba declarations, in both the tip and the span, the tooltip will just appear solid black in IE. Here’s how our tooltip will appear at its best, beautiful isn’t it?

Adding the Drop Targets

Ok, so our visitors now know that they can drag the image somewhere in order to share the page, but where do they drag it to? And where can they share it? We now need to react to the image being dragged and show the drop targets, which will consist of a series of links to social networking sites. We’ve several things we need to do here; we need to add an overlay to the page and create the drop targets first of all.

We could create the drop targets entirely from scratch, on the fly, with jQuery like we did with the tooltip, but out in the wild this would probably result in an unacceptable delay for some visitors. We can minimise this by adding the underlying mark-up for the drop targets to the page, and just showing it when we need to. Directly before the

An Introduction to the Raphael JS Library

Damian Dawber — Wed, 14 Oct 2009 16:26:44 +0000

Raphael JS is a lightweight and super-sexy JavaScript framework that allows you to draw vector graphics in your browser! In this tutorial, I will introduce you to some basic drawing functionality, take a look at animation, provide DOM access and finally finish off by creating a cool widget for your site…

Tutorial Details

Framework: Raphael JS
Version: 1.0
Difficulty: Beginner to Intermediate
Estimated Completion Time: 30 minutes

1. Getting Set Up

Let’s get started by downloading the Raphael JS framework from here. At the top right of the page, you’ll see
compressed and uncompressed copies of Raphael version 1.0. I’d recommend you grab yourself a copy of the uncompressed source for the time being – this
way you can have a peek at the source and see what extra edge you can get on the documentation.

With that downloaded, let’s set up a simple HTML document called index.htm and include Raphael in it. We also include our_script.js, which is where
we’ll write our own JavaScript, and in the body of the document we create a minimally styled div with ID canvas_container, which will act as a
container for our drawings.


    
        Raphael Play

N.B. The first stable release of version 1.0 was only made available on the 7th October 2009, so it’s pretty new. It makes one very important change to the way
you draw paths, so if you’re using an earlier version of Raphael, make sure you upgrade and check out the documentation on effecting backwards compatibility.

2. Creating our Drawing Canvas

When we draw with Raphael, we do so onto a canvas. This canvas, which we’ll reference in a variable called ‘paper’, is created using the
Raphael() object. We always specify the width and height of the canvas, but have the option of also specifying either a) the absolute position of
the canvas relative to the viewport, or b) an element ‘container’ that the canvas is drawn inside.

var paper = new Raphael(x, y, width, height); //option (a)
var paper = new Raphael(element, width, height); //option (b)

I generally prefer the latter method (b), since we usually know where our divs are. In our_script.js, let’s wait for the DOM to load and then create a 500px by 500px
canvas inside our canvas_container div:

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
}

All our drawing methods will now be bound to the paper variable.

3. Built-in Shapes

Now that we have our canvas, let’s draw some shapes onto it. The origin, that is, the x = 0, y = 0 point, is at the top-left corner of
our canvas. This means that any x, y coordinates we specify in our methods are relative to this point.

First off, a circle. Modify our_script.js to look like this:

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var circle = paper.circle(100, 100, 80);
}

This will draw a circle with a radius of 80px with its center placed at x = 100, y = 100. We can draw as many circles as we like and we don’t have to
reference them in a variable:

for(var i = 0; i < 5; i+=1) {
    var multiplier = i*5;
    paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
}

Next, let's draw a rectangle. We do this using the rect() method, which takes as parameters: the x and y coordinates of the rectangle's top-left corner and the
rectangle's desired width and height.

var rectangle = paper.rect(200, 200, 250, 100);

Finally, we'll draw an ellipse. Its parameters are the same as the circle, i.e. x, y, radius, except that we can specify x and y radii specifically.

var ellipse = paper.ellipse(200, 400, 100, 50);

This will draw an ellipse with x-radius = 100, y-radius = 50 at x = 200, y = 400. Our our_script.js file should now look like this:

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var circle = paper.circle(100, 100, 80);
    for(var i = 0; i < 5; i+=1) {
        var multiplier = i*5;
        paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
    }
    var rectangle = paper.rect(200, 200, 250, 100);
    var ellipse = paper.ellipse(200, 400, 100, 50);

}

If we now open up index.htm in our browser, we should get a bunch of shape drawings:

Example Here

4. Drawing Paths

While the built-in shapes are handy to have, it is paths that offer us true drawing flexibility.
When drawing paths, it helps to think of an imaginary cursor or pen-point pressed against the screen. When we create our canvas, the cursor is rooted to the
top-left corner. The first thing we should do, then, is
lift up our cursor or pen-point and move it to a spacious region in which we can draw.

As an example, let's move our cursor to the centre of our canvas. That is, let's move it 250px in the x-direction and move it 250px in the y-direction.

We do this using a so-called path string.

A path string is a string comprised of 'action' commands and numeric values corresponding to the command. We move our cursor to x = 250, y = 250 using the following
string:

"M 250 250"

'M' means we want to move without drawing and is followed by x and y canvas co-ordinates.

Now that our cursor is where we want it, let's draw a line relative to this point using the lower-case 'L' command, 'l'.

"M 250 250 l 0 -50"

This will draw a line upwards 50px in the y-direction. Let's write a path string that will draw a tetris tetronimo:

"M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"

The 'z' command signifies the path closing - it will join a line from wherever we are to the point specified by our initial 'M' command.

We tell Raphael to actually draw this path using the path() method. Modify our_script.js to look like this:

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
}

If you load up index.htm, you should now see a tetronimo like this:

Path strings can become incredibly (brilliantly) complex using curve and arc commands. Full coverage of paths can be found at the
SVG Path specification page.

5. Attribute Styling

Our tetris tetronimo, whilst wonderful, is not very aesthetically pleasing. We'll fix that using the attr() method.

The attr() method takes an object consisting of various property-value pairs as its parameter. Since we stored a reference to our tetronimo in the variable tetronimo, we can take this variable and add the attr() method to it. We could equally well
chain the attr() method to the path() method, but let's keep things sane for the time being. I'll demonstrate the use of attr() by example:

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");

    tetronimo.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5});
}

produces this:

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");

    tetronimo.attr(
        {
            gradient: '90-#526c7a-#64a0c1',
            stroke: '#3b4449',
            'stroke-width': 10,
            'stroke-linejoin': 'round',
            rotation: -90
        }
    );
}

produces this:

The Raphael documentation is pretty extensive when it comes to the attr() method.
Have a play around with the various object property-value combinations.

6. Animation

The animate() method in Raphael is really, really good. It allows us to animate our drawings in a jQuery-esque manner, animating
the attributes we supply it over some period of time with an optional easing.

Let's rotate our most recent tetronimo by 360 degrees. The rotation
attribute is absolute, so this should take it one full rotation and bring it back to its un-rotated state.

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
    tetronimo.attr(
        {
            gradient: '90-#526c7a-#64a0c1',
            stroke: '#3b4449',
            'stroke-width': 10,
            'stroke-linejoin': 'round',
            rotation: -90
        }
    );

    tetronimo.animate({rotation: 360}, 2000, 'bounce');
}

The animation takes place over 2 seconds (2000 milliseconds) and is told to ease into its final state with a 'bounce'.

Example here.

We can also supply a callback function as an argument. This callback function is invoked after the animation finishes. The following example
will animate the tetronimo's rotation and stroke-width and then reset itself with another animation in the callback function.

tetronimo.animate({rotation: 360, 'stroke-width': 1}, 2000, 'bounce', function() {
    /* callback after original animation finishes */
    this.animate({
        rotation: -90,
        stroke: '#3b4449',
        'stroke-width': 10
    }, 1000);
});

The this keyword references the original tetronimo from within the callback function.

Example here.

Animating Paths

Being a bit of a code geek, I rarely ever got past drawing simple shapes in Flash. But one thing I liked playing with was shape tweening. Well,
Raphael goes some way to emulating shape tweening by specifying a path string in the animate() method.

Another tetronimo, the Z tetronimo in Tetris, has the following path string,

"M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"

and it looks like this:

Now, using our original tetronimo with minimal attribute styling, i'm going to specify the new path string in our animate() method.

tetronimo.attr(
    {
        stroke: 'none',
        fill: 'blue'
    }
);

tetronimo.animate({
    path: "M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"
}, 5000, 'elastic');

You should see our original tetronimo morph into our new one. The effect is made all the more pronounced by specifying 'elastic' as the easing type.

Example here.

7. Dom Accessibility

If we want to get access to our elements as DOM elements, we can do so with some ease. This is thanks to the node property. Using this, we can
add event handlers to our drawings, which i'll proceed to show you.

Let's start by drawing a circle in our our_script.js file.

window.onload = function() {
        var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);

        var circ = paper.circle(250, 250, 40);
        circ.attr({fill: '#000', stroke: 'none'});
}

Now, let's add the text, 'Bye Bye Circle!' so that its center point is at the same point as our circle center.

var text = paper.text(250, 250, 'Bye Bye Circle!')
text.attr({opacity: 0, 'font-size': 12}).toBack();

I have set the opacity to 0 so that it is initially hidden. Notice the chaining of the toBack() method. This places the text behind all other
canvas drawing elements (similarly, toFront() brings elements to the very front of our canvas).

Now, let's add a mouseover event handler to our circle using the node property. We will set the cursor style to 'pointer'.

circ.node.onmouseover = function() {
    this.style.cursor = 'pointer';
}

What this actually does is set the style property of the object in our document. Our document looks like this:

Now, let's finally add an onclick event handler to our circle:

circ.node.onclick = function() {
    text.animate({opacity: 1}, 2000);
    circ.animate({opacity: 0}, 2000, function() {
        this.remove();
    });
}

When the circle is clicked, the text we referenced in the variable text is animated to full opacity over 2 seconds. The circle itself is animated
to 0 opacity over the same time period. We also include a callback function in the circle's animate method. This removes the
the circle element from our document once the animation has finished, since whilst the circle has 0 opacity, it is still clickable until removed.

Example here.

8. Let's Build a Widget

Finally, let's pull together what we've learned and build a pretty little Mood Meter. Basically, you will select a mood value between 1 and 5, 1 being 'rubbish' and
5 being 'positvely manic', and Raphael will create a nice representation of this.

View the widget here

Begin by modifying our_script.js to look like this:

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var circ = paper.circle(250, 250, 20).attr({fill: '#000'});
    var mood_text = paper.text(250, 250, 'My\nMood').attr({fill: '#fff'});
}

This creates a circle of radius 20px at the center of our canvas and some text on top of the circle saying 'My Mood'. 'Mood' is placed on a new line using
'\n'.

Next, let's create some custom information corresponding to our moods and choose which mood we're in.

moods = ['Rubbish', 'Not Good', 'OK', 'Smily', 'Positively Manic'];
colors = ['#cc0000', '#a97e22', '#9f9136', '#7c9a2d', '#3a9a2d'];

//pick a mood between 1 and 5, 1 being rubbish and 5 being positively manic
var my_mood = 1;

The text description of our mood is stored in an array called 'moods' and the color corresponding to this mood is stored in an array called 'colors'.
The chosen mood, a value between 1 and 5, is stored in the variable my_mood.

Now let's create a function called show_mood. When invoked, this function will display our mood circles (the colored circles) and the text corresponding to this mood.

function show_mood() {

    for(var i = 0; i < my_mood; i+=1) {
        (function(i) {
            setTimeout(function() {
                paper.circle(250, 250, 20).attr({
                    stroke: 'none',
                    fill: colors[my_mood - 1]
                }).animate({translation: '0 ' + (-42 * (i+1))}, 2000, 'bounce').toBack();
            }, 50*i);
        })(i);
    }
    paper.text(250, 300, moods[my_mood - 1]).attr({fill: colors[my_mood - 1]});

    mood_text.node.onclick = function() {
        return false;
    }
    circ.node.onclick = function() {
        return false;
    }

}

In show_mood(), we have a loop that iterates as many times as the value of my_mood. Inside this loop is a self-executing anonymous function. This is necessary so that
we have access to the variable i at each stage of the iteration. Inside the self-executing function, we create a timeout - every 50*i seconds, a circle
is created at the point of our original circle. Each circle is then translated over 2 seconds to 0px in x and some multiple of -42px in y. We make sure to place
each successive circle at the back of the canvas. Note that the circles are filled according to the color in the colors array, determined by my_mood.

show_mood() is also responsible for the display of our mood text which uses my_mood to pick the corresponding mood from the moods_array.

show_mood() then finally get rid of any onclick event handlers assigned to the original text and circle we placed at the center of the canvas. This prevents
the re-drawing of moods circles.

Finally, let's assign onclick event handlers to the center circle and 'My Mood' text. I assign event handlers to both elements so that clicking on either
the text or circle has the effect of calling show_mood().

circ.node.onclick = show_mood;
mood_text.node.onclick = show_mood;

Conclusion

Well, that's it! You should now have a sound platform on which to base your explorations into the Raphael JS framework. Most importantly, I hope
you're now eager to delve into Raphael JS and concoct some beautiful browser drawings and widgets. Don't forget to follow me on Twitter, and share your creations.

Create an In-Place Editing System

Siddharth — Tue, 22 Sep 2009 11:38:05 +0000

Making users click through multiple pages just to edit a field is so 1999. In this tutorial, you’ll learn how to create an in-place editing system as found on popular sites, such as Flickr.

A word from the Author

With all the buzz around Web 2.0, ease of use is now much more important than ever. Being able to edit some content without having to go to another page is something a lot of users really crave. A lot of big names are already using this pattern to great effect. If you’ve used Flickr, you’ve probably seen this in action.

I believe a demo is worth a thousand words. Hit the demo and try it out yourselves.

Today, we are going to look at how to implement this with, you guessed it right, our favorite JavaScript library, jQuery. Interested? Let’s get started right away!

Design Goals

Before we start looking at how to implement the functionality, here are a few thoughts about the goals and the resulting decisions.

We need to let the user edit the content without leaving the page. This is a given.
This should either function as a whole or fail as a whole. When JS is disabled, we don’t want to run into weird quirks.
The user should know the content is editable. A subtle blue background change should draw the user’s attention to this.
When dealing with how to trigger the edit there are a few options. We can either let the user edit on a normal click or double click. I’ve chosen double click since random double clicks occur at a smaller rate than random clicks. Switching it is just a matter of changing the parameter in the bind event.
A way for the user to save or discard the edits.
Save or edit events can be triggered by 2 ways. Keyboard events or mouse events. I chose mouse events since keyboard events lack specificity.
With respect to mouse events, you could use either traditional buttons or usual links. I chose links for no particular reason.
The user should be able to resume editing even if he clicks outside of the input box or leaves the page and comes back.
Additionally, the user should be able to edit as many fields as possible simultaneously.

Now that we’ve mapped out our needs we can now move on to how we are going to do this.

Plan of Action

We’ll now need to map out what needs to be done in a specific order.

Step 1: We’ll need to add a class of editable to each elements which need this functionality.

Step 2: We’ll next need to add hovers to each editable item to draw attention to the fact that that item’s content is editable. We’ll add and remove the hovers using JavaScript instead of CSS. This is mainly done for devices or browsers with JavaScript disabled. We don’t want to send them wrong visual cues.

Step 3: When an editable item is double clicked, we need to swap out the contents and replace it with a text box with the old text in it.

Step 4a: When the user wants to save the edits, copy the input’s value to the parent element and remove the input box.

Step 4b: Or when the user wants to discard the changes, replace the old content and remove the input box.

These are the basic steps in creating this functionality. Of course there are few other small things but I’ll explain them as we go along.

Core Markup

The HTML markup of the demo page looks like so.




In-place editing system - by Siddharth for NetTuts








In-place editing
by Siddharth for the lovely folks at Net Tuts
Elements with a class of editable are, well, editable. In case you haven't noticed, all
elements containing the editable class get a blue background on hover to indicate this capability.  

Double click to edit the contents. Use the dynamically created links to save or discard the changes.
You can open up as many fields to edit as you want without any hiccups.


I 

am Siddharth
love working with the web
am a freelancer
write for Net Tuts
can be found at www.ssiddharth.com
will never let you down or give you up  




Things to do this week

Get design approval from Deacon
Send an invoice to Albert 
Start work on Dwight's project
Talk with Sarah about new ideas
Check Seth's site for rendering bugs
Meet with Clintson to discuss project

As you see, disregarding the boiler plate, we have two unordered lists. Each li element has a class of editable to denote that its content can be edited.

We’ve also included the jQuery library and our own script file.

CSS Styling

body{
	font-family: "Lucida Grande", "Verdana", sans-serif;
	font-size: 12px;
}

a{
	color: #000;
}

a:hover{
	text-decoration: none;
}

p{
	margin: 30px 0 10px 0;
}

h1{
	font-size: 30px;
	padding: 0;
	margin: 0;
}

h2{
	font-size: 20px;
}

#container{
	width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;

}

.editHover{
	background-color: #E8F3FF;
}

.editBox{
	width: 326px;
	min-height: 20px;
	padding: 10px 15px;
	background-color: #fff;
	border: 2px solid #E8F3FF;
}

ul{
	list-style: none;
}

li{
	width: 330px;
	min-height: 20px;
	padding: 10px 15px;
	margin: 5px;
}

li.noPad{
	padding: 0;
	width: 360px;
}

form{
	width: 100%;
}

.btnSave, .btnCancel{
	padding: 6px 30px 6px 75px;
}

.block{
	float: left;
	margin: 20px 0;
}

Nothing special here. Just a bunch of code for layout and styling purposes.

Take special note of the editHover and noPad classes. We’ll be using them in a bit.

JavaScript Implementation

Now that we have a solid framework and some basic styling in place, we can start coding up the required functionality. Do note that we make extensive use of jQuery. Specifically we’ll need at least version 1.3 or higher. Anything less and it won’t work.

Adding Hovers

As noted earlier, we’ll need to add a subtle blue background to editable objects to signify they are editable. We’ve already created the editHover class to take care of this.

$(".editable").hover(
		function()
		{
			$(this).addClass("editHover");
		},
		function()
		{
			$(this).removeClass("editHover");
		}
	);

This tiny snippet takes care of that for us. We use jQuery’s hover method to add the editHover class when the element is hovered upon and remove it when it is not. We use this to refer to the specific element that is hovered over. If we had used .editable as the selector instead each and every element will get the class added to it. So we use this to target only the element we need.

Switching out the Elements

First up, we need to make sure our code is executed when the target element is double clicked. So we’ll first hook up the handler for this event first.

$(".editable").bind("dblclick", replaceHTML);

We attach the replaceHTML function to the double click event relative to the editable element with that one liner. Now we can move on the switching out the elements.

function replaceHTML()
	{
		oldText = $(this).html()
						 .replace(/"/g, """);
		$(this).html("")
			   .html(" 
Save changes
		        Discard changes");
	}

Let’s go over our code bit by tiny bit.

I define the functionality inside a separate named function instead of an anonymous function for a specific reason: I’ll be using this function more than once. Next, we save the content of the element for future use using jQuery’s html method and replacing all quotes since it messes up our output down the line.

Now that our content is safely stored for later use, we can switch out the elements. First we empty out the li element by sending in an empty string to the html method. Next, we insert some standard HTML for an input box. We add some classes to it for styling purposes. More importantly, we set its value attribute to the original text contained by the element stored in oldText. We also add a couple of links to take care of saving and discarding the edits. We’ve also added classes to them so they can be targeted easily and for styling.

As always, we use this to target the element which triggered the event.

Keeping the Edits

$(".btnSave").live("click",
	function()
	{
		newText = $(this).siblings("form")
						 .children(".editBox")
						 .val().replace(/"/g, """);

		$(this).parent()
			   .html(newText);
	}
);

First up, let me introduce jQuery’s live method. You probably haven’t seen this much before so I’ll give a quick introduction.

You can’t hook up handlers to events triggered by elements which are not even present in the DOM when the page and the JavaScript was loaded. If you use normal event binding functions, it’ll fail due to the above mentioned reason. The live method takes care of that.

It binds handlers to events irrespective of when the element was created. For more about this, you can go through the official docs.

Lets look into our code now. We first bind the code contained within our anonymous function to the click event. Inside the function we first save the text contained in the input box. This can be a little tricky since the input box doesn’t have an ID. So we first look for the form element which happens to be its sibling and then traverse through to find the input element. We then copy its value after replacing all the quotes it may contain.

Next, we obtain the links parent element, the li element and replace its HTML content with the text we copied in the previous step.

This block could have easily been created as a one liner but I chose to split it to 2 lines in the interest of readability.

Discarding the Edits

$(".btnDiscard").live("click",
	function()
	{
		$(this).parent()
			   .html(oldText);
	}
);

This is just as simple as it looks. Since the user doesn’t want to keep any of the edits. We just replace the HTML content of parent element with the original text we had copied earlier to the oldText variable.

With this the core of our work is done. We just need to do a couple of edits to make sure things don’t break when the user does unexpected things.

Binding and Unbinding

If you’ve tested out our code at this point you’ll probably end up with this functionality breaking bug: When a user double clicks in the resulting input box it is now filled with the HTML content of the editing system. Try it yourself. With each double click, the value of the input box reflects by adding another bunch of text to it. This issue will probably be a lot worse if you’ve chosen click as the trigger event.

To rectify this, we need to unbind the event handler for that specific element alone and rebind them as soon as the user clicks either save or discard. Let’s implement that now.

Our previous blocks of code now need to be edited out to so:

function replaceHTML()
	{
		//Code
		$(this).html("")
		// Earlier form insertion code
                .unbind('dblclick', replaceHTML);
	}

We unhook the handler for the element which triggered the event. The rest of the elements with the editable class still have their handlers intact and will respond to events.

$(".btnSave").live("click",
	function()
	{
		// Earlier code

		$(this).parent()
			   .html(newText)
                           .bind("dblclick", replaceHTML);
	}
);

$(".btnDiscard").live("click",
	function()
	{
		$(this).parent()
			   .html(oldText)
                           .bind("dblclick", replaceHTML);
	}
);

Next we attach those handlers back in spite of whether the user chooses to edit them or not. If we don’t re-attach these, the fields can be edited only once. The second time they are double clicked, the handlers are no longer attached to the events. We rectify this by hooking the handlers back to the events.

A Few Tweaks

This last bit of code is purely to spruce up the appearance of our effect. If you’ve noticed, the li has a bit of padding in place to make the text within look better. But when the text is stripped out and replaced by a text box we result looks ugly and breaks the effect. We want the text box to take up exactly the same space the original text took. With this in mind, we add a noPad class to the element when it has been double clicked and removed again when the user saves or discards the edit.

function replaceHTML()
	{
		//Code
		$(this).addClass("noPad")
                    		.html("")
		// Earlier code
	}

We unhook the handler for the element which triggered the event. The rest of the elements with the editable class still have their handlers intact and will respond to events.

$(".btnSave").live("click",
	function()
	{
		// Earlier code

		$(this).parent()
			   .removeClass("noPad")
                // Earlier code
	}
);

$(".btnDiscard").live("click",
	function()
	{
		$(this).parent()
			   .removeClass("noPad")
                           // Earlier code
	}
);

The Complete Code

Here is how the complete code looks like:

$(document).ready(function()
{
	var oldText, newText;

  	$(".editable").hover(
					function()
					{
						$(this).addClass("editHover");
					},
					function()
					{
						$(this).removeClass("editHover");
					}
					);

  	$(".editable").bind("dblclick", replaceHTML);

	$(".btnSave").live("click",
					function()
					{
						newText = $(this).siblings("form")
										 .children(".editBox")
										 .val().replace(/"/g, """);

						$(this).parent()
							   .html(newText)
							   .removeClass("noPad")
							   .bind("dblclick", replaceHTML);
					}
					); 

	$(".btnDiscard").live("click",
					function()
					{
						$(this).parent()
							   .html(oldText)
							   .removeClass("noPad")
							   .bind("dblclick", replaceHTML);
					}
					); 

	function replaceHTML()
					{
						oldText = $(this).html()
										 .replace(/"/g, """);

						$(this).addClass("noPad")
							   .html("")
							   .html(" 
Save changes
							   .unbind('dblclick', replaceHTML);

					}
}
);

Not bad. Fifty odd lines to add some spiffy new functionality.

Taking it One Step Further: The Backend

In the interest of not making it too long, I’ve stuck to creating the client side functionality alone. If you want to implement this functionality within your own projects, its implicitly assumed that you’d need a back-end system in place to save these changes and more importantly, you’d need an AJAX request for making this call asynchronously.

Adding this functionality should be a cinch but do make a note of this. The code above was created just to illustrate this pattern and not for production use. So I’ve abstained from adding additional IDs attributes to elements and name attributes to text boxes. In your production code, do add all of them so the text box’s name attribute can be set meaningfully and in such a way the back end can recognize which piece of data needs to be updated.

To add an AJAX request, our save handler would have to be updated to so:

$(".btnSave").live("click",
	function()
	{
		newText = $(this).siblings("form")
			 .children(".editBox")
			 .val().replace(/"/g, """);

                 $.ajax({
			type: "POST",
	 	url: "handler.php",
			data: newText,
			success: function(msg){
			 // Some code here to reflect a successful edit;
			}
			});

		$(this).parent()
			   .html(newText)
			   .removeClass("noPad")
			   .bind("dblclick", replaceHTML);
	}
);

Remember, for the back-end to make any sense of what you are sending to it, you need some additional data along with the updated text so the app knows which data to edit. You could easily send in more than one piece of data to the script if you need to.

Conclusion

And there you have it; how to add a user friendly functionality to your projects. Hopefully you’ve found this tutorial interesting and this has been useful to you. Feel free to reuse this code elsewhere in your projects and chime in here if you are running into difficulties.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Checking Username Availability with Mootools and Request.JSON

Matt Vickers — Fri, 18 Sep 2009 17:30:24 +0000

This tutorial will teach you how to check username availability with Mootools’ Request.JSON and PHP/MySQL

In this tutorial you will learn how to use Mootools’ Request.JSON function to check a username against an array or database. In this example we will be using a simple MySQL database. I will try to do as much hand holding as I can, but having a little experience with PHP and MySQL will be a plus.

Tutorial Details

PHP Server and MySQL Database required
Difficulty: Beginner/Intermediate
Estimated Completion Time: 30 – 45 Minutes

Step 1 – The Setup

We are going to create a simple database and add a table. After that we will add a username into the database.

CREATE TABLE IF NOT EXISTS ajax_users (
	id INT(2) NOT NULL PRIMARY KEY AUTO_INCREMENT,
	user_name VARCHAR(128) NOT NULL
);

INSERT INTO ajax_users VALUES('NULL','matt');

Woohoo, we have a database, a table and a single username. Let’s get started with this tutorial!

Step 2 – The Skeleton

For the first step we will create a simple page with one input field for the username and a submit button. Go ahead and open your favorite coding app – mine happens to be Coda – and create a new blank document named index.php. First I’ll show you the end result code for this step and then I’ll explain it in detail. I find that re-writting the code myself helps it stick, but you can copy and paste if you want.

Now we’ve got a pretty basic site layout. It will start to come together in step 2 so don’t worry if it doesn’t really look like much right now.

Step 3 – A little Style

Feel free to style this up however you like, or use the CSS file from the source code.

Step 4 – The Javascript Setup

We are going to need to include the Mootools framework into our php file. Without this, we can’t use any of Mootools’ classes or functions for our script. There are two ways of doing this. The first way is to use Google’s AJAX Libraries API to link to the file. You can view the path Here. The Google libraries give you access to many frameworks so take a look around after you’re done the tutorial. To speed things up, we can just use the piece of code below. Place this in your section of your php file.

The second way is to head over to the Mootools site

Now that we have the Mootools framework included in our file, we can go ahead and create a new file called main.js, or whatever you want to name it. Once this file has been created lets include it in our php file.

Go ahead and place that at the bottom of our php file. If you haven’t already, let’s open up our main.js file.

Step 5 – The Mootools

This part can get a little tricky. Make sure the two files you have open are index.php and main.js as we will be moving back and forth between the files to give you a better idea of how Mootools interacts with the elements in index.php.

The first piece of code we are going to add to main.js tells our Mootools script to execute some code when the DOM has loaded.

	window.addEvent('domready', function() {
		//We are going to fill this with Mootools goodness
	});

Now that the main business is taken care of, we can get our hands dirty.

Step 6 – Adding Events

We need to figure out a way to find out when a user has interacted with our user name input field. We do this using events. Events are Mootools’ way of performing some action(s) when a user does something. This can include clicking on a link, pressing down a key, releasing a key, mousing over etc. For this example we are going to fire an event when the user releases a key in the username field.

Before we add the event, we need to give out user name input an ID. Without an ID, Mootools doesn’t know which input we are talking about when we tell it to add an event.

Go ahead and add an ID to your user name input in index.php

Ok, I swear we will start coding some Mootools right now. Switch back to main.js. Inside your window event, add this code.

$('user_name').addEvent('keyup',function(){
//This is what is fired when the user releases a key inside the username input
}

$(’user_name’) is what tells Mootools which element we are looking at. It relates to the elements ID.

After that we use .addEvent() to tell Mootools that we want to do something at some point. The first option is the event that we are watching for. We are using keyup. There are tons of other events we can look for. You can read about them at W3C Schools. The last little bit holds a function that we will use to execute some JavaScript code whenever the event is fired.

Step 7 – The Request

Now that we have the event linked up, we can build the request to send when the event is fired. We are going to put this piece of code inside out event.

	...
	The start of our event
	...

    	new Request.JSON({
    		url: "inc/php/json.php",
    		onSuccess: function(response){

    		}
    	}).get($('signup'));

	...
	The end of our event
	...

Pretty simple looking, eh?! We start off by declaring our request. The first variable is url. This is the path to our PHP that houses our JSON magic. For now, just put in a path to a future file. The second variable is onSuccess. This is a function that is fired if our request is successful. This is where we will put most of our remaining code. Our last little bit, which is easy to look over is the .get($(’signup’)) variable trailing our request. This takes all our info from our form in index.php and sends it with the JSON request. Without this, the request isn’t sending any data, and is pretty much useless. We’ve now made it useful!

We should probably make our JSON file right now so we don’t run into any errors.

Step 8 – The JSON

The concept behind our JSON file is pretty simple in theory. It takes our variables, does whatever we want with it, and then sends it back to our main.js file, all behind the scenes. This is awesome. Take a second to collect yourself.

Ok, now we are all calm, lets create a new file called json.php. If you added the path to your main.js file, name it the same and place it into proper folder. Open this sucker up!

//setup a blank variable
//we will use this as an array to send back
$result = null;

Simple right? The first step is creating a null variable that we will be using as an array later on. Next, we need to connect to our database.

//connect to the mysql database
mysql_connect('localhost', 'root', 'root') or die('Error connecting to mysql');
mysql_select_db('tutorials') or die('Error connecting to table');

We should be all connected. Fill in your database information above. To make sure everything is running smoothly, point to your json.php file. If the page is blank, we are golden. If you see database connection errors, we have a problem. This is usually just a misspelled host/username/password. Double check!

//format the variables
$user_name = mysql_real_escape_string($_GET['user_name']);

//check the database for any users named $user_name
$grab_user = mysql_query("SELECT `user_name` FROM `ajax_users` WHERE `user_name` = '$user_name'");

//check if the query returned anything
if(mysql_num_rows($grab_user) == 0){

	//no user by that name
	$result['action'] = 'success';

}else{

	//oops, already taken
	$result['action'] = 'error';

}

All the variables sent to our json our sent as $_GET. If you’ve worked with forms before, this shouldn’t be anything different. If you haven’t worked with PHP forms before, please take a quick look at this page.

We are putting the $_GET variable into a new variable to clean everything up. By wrapping the $_GET variable in the mysql_real_escape_string() function, we are making sure to combat mysql injection. Injection is bad!

Next is the query. We are grabbing any rows from our MySQL database where the user_name row is equal to whatever the user has typed into the user_name input. If the query returns 0, there is no user name match.

If there is no match, we add an action variable to our result array and give it a value of success. If there is a match, we simply give it a value of error.

$result['user_name'] = $_GET['user_name'];

//send the response back
echo json_encode($result);

Finally, we add a user_name variable to the result array and give it a value of our $_GET variable and send it back to main.js using the json_encode() function.

When the JSON is encoded and sent back to the main.js file it looks like the code below

{"action":"success","user_name":"matt"}

That ends the json file, you can save it and close it. You will not need it for this example anymore! Switch back to main.js

Step 9 – Dealing with the Request

We’ve sent the request, we’ve checked if the user name exists and we sent the response. So what now? Now we are going to use Mootools to sort through the response and alert the user. How does main.js see what the response is? If we take a quick look back at our onSuccess function, you’ll notice that the only variable passed in the function is response. This is the variable that now houses your JSON response. Please add this code inside our onSuccess function.

if(response.action == 'success'){

	//We are good!

}else{

    //Username is taken, ouch?!
    alert('Username Taken');

}

We haven’t been able to test if our little application is even working right now, so lets take a second to do a quick test. Point your browser to index.php and type matt into your user_name input. Once you are done typing, matt an alert should popup saying Username Taken. You can now delete that alert; it is not needed anymore.

Alerts are boring. They’re ugly, they’re not very user friendly. Alerts are bad! We need a way to alert the user in a nice, design and user friendly way to alert the user. Open up your style.css and add some styles to your input.

input.success{
	border: 3px solid #9ad81f;
}

input.error{
	border: 3px solid #b92929;
}

We have our styles, and we are receiving a response, lets change the inputs style depending on the response.

$('user_name').removeClass('error');
$('user_name').addClass('success');

We are taking our input and making sure Mootools can find it using $(). After that we add/remove our classes. We make sure to remove the error class incase the script has already added it to our input, then we add the success class. This stops the scripts from adding multiple classes to the input and making it look like input.error.success.error.success. For the response that throws an error, simply reverse the add/remove order.

Give that a test. The input box should have a green outline until you enter in matt as a user name. The input box should then turn red.

That’s it. That’s the bare bones version of this script. If you want, you can stop reading now and show-off your new tricks to your friends, or you can continue reading. I’m going to expand on the script to make it just a little bit more user friendly.

Step 10 – 1000 Requests

Right now, the script is firing every time a user releases a key. What if you force users to have user names longer than 3 characters. We are basically wasting 3 requests when really, we can just tell the script not to fire unless the input value is more then 3 characters long. This will cut back on the number of requests we are sending to the JSON script!

...
The start of our user name event
...

	var input_value = this.value;

	if(input_value.length > 3){

		...
		Request Event
		...

	}

...
The end of our user name event
...

If we wrap our request with the above code, it will only fire the request when the input value is greater than 3. First we put the value into our variable using this.value. this represents our user_name input. Next we check if the length of our value is greater than 3. We do this by using input_value.length. Give it a quick test.

Step 11 – Visuals Please

Remember in our JSON file we were sending our user name value back with our response. This is why. Open up index.php and add a p right underneath our input.

Now that we have our p with an id of response, we can make Mootools insert some text into it. Open up main.js and place this code inside the onSuccess function.

$('response').set('html',''+response.user_name+' is Available');

Mootools takes $(’response’) and uses the set() function to insert some text. The first option is what kind of data are we setting. This can either be html or text. Because we are sending an tag are a result, we are using html. We are using response.user_name to grab the user_name variable from our JSON response to keep the user up to date. For the error section, copy over the piece of code and change around the text a little bit to let the user know that the user name is taken.

Step 12 – Submission

Right now, even though we are saying that the user name is taken, the user can still submit the form. This means you would have to use PHP to do another level of error checking. You always want to make sure you are using PHP to make another level of error checking as it is possible for people to get around the disabling of the button. The more layers of security, the better! Open up index.php and find our submit button. Lets disable it!

We gave out submit button an id of submit_button so that Mootools can talk to it. Near the close tag we also added disabled. If you point your browser to index.php and try and click on the button, you will notice that nothing will happen. The form has been disabled. Open up main.js

$('submit_button').disabled = false;

If we add that piece of code in our response.success area, it will enable the button. Simply add it to the reponse.error section, change false to true and give it a test. When the user name is available, you should be able to click the button. When taken, the button should be disabled.

Step 13 – The Cleanup

The user has inserted some text, and then deleted all the text from the input. If you notice all the alerts stay on the screen. This is a bit messy. We should probably fix that. Open main.js.

...
The end of our user name event
...

$('user_name').addEvent('blur',function(e){

   	if(this.value == ''){

   		$('user_name').removeClass('success');
   		$('user_name').removeClass('error');
   		$('response').set('html','');

   		$('submit_button').disabled = true;

   	}

   });

When the user clicks away from the input, it will fire the event blur. If the input box value is empty, we remove all classes, set the response p to empty and disable the button. Nice and tidy!

The End

I hope this tutorial has helped to teach you some of the fundamentals when using simple JSON requests and interacting with elements on the page with Mootools. Feel free to download the source code! If you have any questions, follow me on Twitter!

One last note, the button styles used in this tutorial are the property of Zurb. Check them out, they do great work!