Time for another jQuery Quicktip. This time, the fade function. I’ve been having to use the fade function on a site recently, so i thought i’d share a quick tip.

Like most of jQuery, it’s pretty simple to apple the fade function to an element.

First of all we wait for the DOM to be ready, this should be familiar:

$(document).ready(function(){


});

Now we’ve done that we use the built in fade function to fade the element up;

$("#picture_holder").fadeTo("slow", 1.0);

});

We’ve used the example with an id of “#picture_holder” in this example. The first property in the brackets after the the fadeTo function is the speed of the fade, here you can use the term slow or fast or alternatively use a number (remember to remove the ” ” around the slow text) the second property is the opacity of what it is going to fade to, in this case 1.0 is an opacity of 100%, with 0.5 being 50% percent and so forth.

If you want to fade an element in from load then you need to set its opacity before hand. This is easy to do in jQuery too:

$('#picture_holder').css('opacity', 0);

This sets the “#picture_holder” to have an opacity of 0%. We put this before the the fade statement and the the opacity will fade from 0% to 100% .

The full function is:


$(document).ready(function(){
$('#picture_holder').css('opacity', 0);
$("#picture_holder").fadeTo("slow", 1.0);
});

Have fun!

Time for jQuery Quick tip number 2!  This time, it concerns the datepicker that is built into jQuery UI.

So you’ve implemented the jQuery UI datepicker using the code below:

$(function() {
$("#datepicker").datepicker();
});

However this returns by default the date back in US format i.e. The 22nd July would be 07/22/09 . Thats ok if your US based but what if your UK based for example, how do i return the date in UK format i.e. 22/07/09 ?

Well, it’s fairly simple actually! All you need to do is insert the date format within the last set of parentheses eg.

$(function() {
$("#datepicker").datepicker({dateFormat: 'dd/mm/yy'});
});

This now returns UK format date, you can also put other date format in here, see this link for more details on how to write the date format!

I’ve recently completed another new website.  Dillon and Lee Hairdressing, a hair and beauty salon in Nottingham.  The site uses a combination of wordpress for the backend/blog/cms and hand written HTML and CSS on the front with a few enhancements using jQuery.

I’m realy enjoying using wordpress at the moment, whilst it wasn’t originally designed as a CMS, i think it’s almost got to the point where they could turn it into a full CMS, it can already basically be done using a few plugins with Wordpress.

I’ve been learning and messing around more with jQuery recently, so i thought it would be a good chance to share some of the stuff i’m learning.

The Problem

I needed to add a focus class to my form input when i clicked the mouse in the input box.  I then needed to remove that class and add it to the next input in the form.  Well here’s how i did it!

The Solution

$(function() {
$(”input[type=text]“).focus(function() {
$(this).addClass(’focus_class’);
return false;
});
});

$(function() {
$(”input[type=text]“).blur(function() {
$(this).removeClass(’focus_class’);
return false;
});
});

With twitter now all the buzz amongst semingly everyone, i thought i’d take a bit of time to highlight some of the designers i follow on twitter.  So here goes:

http://twitter.com/justcreative – Just Creative Design (Jacob Cass)

http://twitter.com/nickvegas - Nick Vegas of Grey Scale Gorilla and Motion Designer at Digital Kitchen

http://twitter.com/DesignerDepot – Walter Apai of Web Designer Depot

http://twitter.com/bittbox – Jay Hilgert of Bittbox

http://twitter.com/chrisspooner Chris Spooner of Blog Spoon Graphics

These are just a highlight of some of the designers i follow on Twitter, look out for some more!