The jQuery UI Effects Core brings a few more advanced animation techniques to the design table and this quick post will give you a complete example of how to use each effect (with an inline demo). They’re very straight-forward to use and could give you just that little extra eye-candy your project needs to make it memorable.I hope the post is useful!.

The Blinds Effect

 
$('#but-blind').toggle(
    function() {
        $('#blind').hide('blind', { direction: 'vertical' }, 1000);
    },
    function() {
        $('#blind').show('blind', { direction: 'horizontal' }, 500);
    }
);

The Clipping Effect

 
$('#but-clip').toggle(
    function() {
        $('#clip').hide('clip', { direction: 'vertical' }, 1000);
    },
    function() {
        $('#clip').show('clip', { direction: 'horizontal' }, 500);
    }
);

The Drop Animation Effect

 
$('#but-drop').toggle(
    function() {
        $('#drop').hide('drop', { direction: 'right' }, 1000);
    },
    function() {
        $('#drop').show('drop', { direction: 'down' }, 500);
    }
);

The Explode Effect

 
$('#but-explode').toggle(
    function() {
        $('#explode').hide('explode', {}, 1000);
    },
    function() {
        $('#explode').show('explode', { pieces: 30 }, 500);
    }
);

The Folding Effect

 
$('#but-fold').toggle(
    function() {
        $('#fold').hide('fold', {}, 1000);
    },
    function() {
        $('#fold').show('fold', {}, 500);
    }
);

The Puffing Effect

 
$('#but-puff').toggle(
    function() {
        $('#puff').hide('puff', {}, 1000);
    },
    function() {
        $('#puff').show('puff', {}, 500);
    }
);

The Sliding Effect

 
$('#but-slide').toggle(
    function() {
        $('#slide').hide('slide', { direction: 'right' }, 1000);
    },
    function() {
        $('#slide').show('slide',  direction: 'down' {}, 500);
    }
);

The Scaling Effect (Type 1)

 
$('#but-scale').toggle(
    function() {
        $('#scale').effect('scale', { percent: 50 }, 1000);
    },
    function() {
        $('#scale').effect('scale', { percent: 200 }, 500);
    }
);

The Scaling Effect (Type 2)

 
$('#but-scale2').toggle(
    function() {
        $('#scale2').hide('scale', {}, 1000);
    },
    function() {
        $('#scale2').show('scale', { percent: 100 }, 500);
    }
);

The Scaling Effect (Type 3)

 
$('#but-scale3').toggle(
    function() {
        $('#scale3').effect('scale', { percent: 200, direction: 'horizontal' }, 1000);
    },
    function() {
        $('#scale3').effect('scale', { percent: 50, direction: 'horizontal'  }, 500);
    }
);

The Pulsating Effect

 
$('#but-pulsate').toggle(
    function() {
        $('#pulsate').effect('pulsate', { times: 1 }, 1000);
    },
    function() {
        $('#pulsate').effect('pulsate', { times: 4 }, 100);
    }
);

The Bouncing Effect

 
$('#but-bounce').toggle(
    function() {
        $('#bounce').effect('bounce', { times: 2 }, 1000);
    },
    function() {
        $('#bounce').effect('bounce', { times: 4 }, 100);
    }
);

The Highlight Effect

 
$('#but-highlight').toggle(
    function() {
        $('#highlight').effect('highlight', {}, 1000);
    },
    function() {
        $('#highlight').effect('highlight', {}, 100);
    }
);

The Shake Effect

 
$('#but-shake').toggle(
    function() {
        $('#shake').effect('shake', { times: 2 }, 200);
    },
    function() {
        $('#shake').effect('shake', { times: 4 }, 100);
    }
);

The Transfer Effect

 
$('#but-transfer').toggle(
    function() {
        $('#transfer').effect('transfer', { to: '#transfer-to' }, 1000);
    },
    function() {
        $('#transfer-to').effect('transfer', { to: '#transfer' }, 500);
    }
);

Related posts:

1. 12 new examples of Advanced Animation techniques with jQuery When you think about animation on the internet, chances are...
2. The Best Advanced Animation techniques you can perform using jQuery When you think about animation on the internet, chances are...
3. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...

Related posts brought to you by Yet Another Related Posts Plugin.

Lately, I’ve been experimenting with a lot of new jQuery plugins that have been allowed us here at Blarnee to rapidly develop interactive, slick user interfaces without having to code everything from scratch. This is by far one of my favourite things about the recent surge in JavaScript Framework extension and I think it’s great to see so many people actively putting time into creating useful pieces of code. (that said.. remember that sometimes it’s better to code your plugin from scratch, depending on your application!). Below are our selection of recommended plugins for this week.
 

Coda Bubble

Based on the tutorial at http://jqueryfordesigners.com/coda-popup-bubbles/ this plugin can be used to create multiple pop-ups Coda Bubble style.

Allow to set options to replace PNG images to .GIF files, or to simply remove bubbles in Internet Explorer, to deal with PNG opacity rendering issue.

 

DivCorners

This plugin aims to created an easy way to add border layouts to screen content.

 

Facebook Style Wall Post

Are you looking for Facebook style wall post application. It contains update, comment and delete with jQuery animation effect.

 

 

Create an Interactive, Filterable Portfolio

How to create an interactive portfolio in jQuery that looks like it was made in Flash.

 

How to Make a Slideshow with a Transparent PNG Frame

Create a basic slideshow that uses a combination of PNG transparency and layered positioning to create the effect of each slides being held in by the bottom corners.

 

Simple Toggle with CSS & jQuery

Learn the basics of jQuery and the toggle effect.

 

Captify

Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.

 

Flickr Horizontal Menu

Implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu.

 

FancyPlayer – jQuery Fancybox and Flowplayer Integration

This tutorial shows you how to integrate jQuery Fancybox and Flowplayer.

Related posts:

1. A jQuery and Twitter plugin. Nowadays everybody has a blog, social networking page or...
2. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...
3. The A-Z List Of Recommended jQuery Plugins Hey guys. Today I thought I’d share a recommended list...

Related posts brought to you by Yet Another Related Posts Plugin.

Hi guys. Today I’m going to show you how to add some intelligence to your password forms. A strong password can mean the difference between your  user’s account being safe and them being easily compromised. Thankfully, with the help of modern JavaScript frameworks like jQuery it’s possible to check the strength of your user’s passwords before they’re able to register with your site. In addition to this helping them, you’re also demonstrating that you and your site take security very seriously. But how do you add something like a password strength meter to a password field? In this post, I’ll explore how you can do it easily in just 5 minutes.

If you’re going to check a user’s password, chances are you’ll want to use some form of intelligent regular expressions to check that they’ve done sensible things like..make their password long, included some additional characters in there, possibly a few numbers as well as a combination of upper and lowercase lettering.

Thankfully, there’s a great new jQuery plugin that will do all of this for you. All you need to do is initialize it by passing in the ID of the password field in your form. You are also able to specify additional style options so that show it above your field, to the side or beneath it.

To add the Password Strength Meter to your fields

1. Download the Password Strength Meter javascript plugin file from here.

2. Include either a CDN or local version of the jQuery plugin and the plugin downloaded from step 1 in your page

3. Initialize your password field using the plugin as follows (where "password_test" is the class attached to my password field)

        <script>
            $(document).ready( function() {

                $(".password_test").passStrength({
                   
                    });
            });
        </script>

4. You can also use a nice preconfigured css file with your page which will add some graphics to the strength message.

Optional

5. The plugin is quite robust and if you would like to re-position the strength message above the field you can specify a css class for each possible message so it can have any colored background, formatting or imagery in there that suits your page styles.

        <script>
            $(document).ready( function() {
                $(".password_adv").passStrength({
                    shortPass:         "top_shortPass",
                    badPass:        "top_badPass",
                    goodPass:        "top_goodPass",
                    strongPass:        "top_strongPass",
                    baseStyle:        "top_testresult",
                    userid:            "#user_id_adv",
                    messageloc:        0
                });
            });
        </script>

and that’s it! I hope this article was useful.

Related posts:

1. How To Add Form Validation using jQuery in 2 Easy Steps     Hi everybody. Sometimes you may find yourself...
2. How to highlight terms on your page using jQuery Today I came across a really useful plugin for jQuery...
3. How to easily add a Google Map using jQuery and an address in less than 5 minutes   Hi guys. Today I thought we’d take a look...

Related posts brought to you by Yet Another Related Posts Plugin.

The first day of Fronteers 2009 is just about over now but as with the jQuery Conference from a few months ago, I thought it would be a great idea to put all of the day’s slides up for anyone that missed the conference. The TwitterVerse has been buzzing about how amazing Stephen Souders talk was and I have to agree these are definitely worth reading.. 

I’ll add more talks/slides as they come in, but understandably some of the speakers may be tired (or hung over by now!), so it may take a few hours to accumulate the one or two we’re missing.  Enjoy this post!

EDIT1:  Here are some Bonuses

From day 1:  (Audio recording)  Fronteers 2009: Of Hamsters, Feature Creatures and Missed Opportunities

Douglas Crawford’s talk "The State and Future of ECMAScript"  (video from YUI Theatre – same talk from fronteers)

Day 2: The Type We Want – Jonathan Snook

http://www.slideshare.net/jonathansnook/the-type-we-want-2438381

Day 1

The Future State of Layouts by Stephen Hay
http://www.the-haystack.com/presentations/fronteers09/

Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities by Christian Helmer

http://www.wait-till-i.com/2009/11/05/of-hamsters-feature-creatures-and-missed-opportunities-my-talk-at-fronteers-2009/

Understanding JavaScript Testing by John Resig

http://www.slideshare.net/jeresig/understanding-javascript-testing

Even Faster Websites by Steve Souders

http://www.slideshare.net/guestbf04d7/fronteers-20091105-1

Related posts:

1. Downloadable Presentations from the 2009 jQuery Conference in Boston   This month saw over 300 people attend the latest...
2. 10 Of The Best JavaScript Snippets on Snipplr Snipplr is one of my favourite sites for finding...

Related posts brought to you by Yet Another Related Posts Plugin.

This week I’m going to show you to make the best use of jQuery’s amazing animation features using just a few lines of code for each our examples. Did you know that you can use jQuery’s animation functions to create your very own progress-bar in less than 3 lines? or that you could use it to make your very own accordian in under 9 lines? Well, today I’m going to go through some examples of how to do these and a whole lot more.

First let’s start with some basics. What is the jQuery animate() feature?. The animate() feature allows you to create custom animations using a few lines of code – it’s key aspect is the object containing all of the style properties to be animated and to what end. Essentially this means that it allows you to specify what you want to animate and where you eventually want that item to appear. For example, if I have a div called "red" on what side of the screen, I can specify the end of the screen as an end-point and have it animate towards that point. I’m able to also say what property of the item I would like animated -eg. in the above case if I wanted to move the item towards the end of the screen..I would alter the marginLeft property from where it is right now to something larger. This is done as follows:

Related posts:

1. 12 new examples of Advanced Animation techniques with jQuery When you think about animation on the internet, chances are...
2. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...
3. How to enlarge images with jQuery Guest writer,  Jeffrey Jordan Way. I’ve created many tutorials...

Related posts brought to you by Yet Another Related Posts Plugin.

Hi guys. Today I’m going to show you how to do persistent Client-side storage that’ll work in any Web Browser without needing to use Cookies, Browser-Specific hacks or HTML5 – in other words, we’re going to store as much custom information as a site needs on a user’s system without needing to worry about compatibility issues.

The reason we’re interested in doing this is because it has a huge potential to free up database resources if we don’t need to be saving information there – instead it can be readily loaded from our users computer through client-side storage. Even if you need to save data, you can always store it on your user’s system and log it to the server it at a later date in the week.

The inspiration behind this article was research I was putting into discovering the best way to achieve offline client-side storage using FireFox’s LocalStorage, HTML5’s local databases and Chrome’s Google Gears. Projects such as PersistJS have tried to provide a pack that allows you to switch between any of these for your storage options (depending on what browser you have) but even then.. he problem has always been that there wasn’t one solution that works well across all platforms and browsers…lets dive in and see if we can address that.

Our solution today is going to make use of a little-used YUI component created called SWFStore. SWFStore allows you to store and access data in the Flash data store through a brilliant object-oriented JavaScript wrapper that makes it very straight-forward to add, update or remove data through your JavaScript code. It’s clean and works very very well. This isn’t the first time this method of storage has been tried, but the reason I chose to use SWFStore as the basis of this solution is because it offers a clean-way to extend how much data a site can store. For anyone that’s aware of how Flash manages data, there’s a basic limit of 100KB per-domain imposed when you first start using it. SWFStore can however help you to easily prompt users to extend their Flash storage space and after that you’re able to store as much data as you would like locally [see advanced demo here]

I extended SWFStore using just a few functions so that I could easily save and retrieve data anywhere in the DOM tree. What I was able to do (and what you’ll learn to do by the end of this article) is store any number of variables, text, html, data or objects for a site and load them up every time without needing to touch SQL. Using SWFStore was so straight-forward that I was even able to store all the reference data for a Google Calendar-like app locally, but let’s get through some of the basics :)

Demo and Tutorial

Before we look at any code, I think it’s always useful to show a demo of what we’re going to be building. Here I’ve created a simple YUI app that allows you to save some sample data about a user to their local Flash data cache using JavaScript. This data includes a nickname, custom background-image, reminder note, avatar, last page viewed on the site, hypothetical theme and more.

To help visualize the variables we’re using a YUI DataTable in our page too and this is what the data looks like when populated inside:

In the default view you’re presented with a welcome Guest screen that uses the page’s default settings. After you’ve saved the sample data however, reload the page and you will see that every time you go back to it..your custom settings are now being used to render the modal window’s data the way you ‘chose’. This could be taken further to render the page with different css, widgets or other elements depending on what the user wants, but for now this is enough to illustrate the concept.

To use the SWFStore, include the following source files in your web page:

Dependencies 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo.js">

</script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dom/dom.js">

</script>

http://yui.yahooapis.com/2.8.0r4/build/swfstore/swfstore.js">

</script>

By default, the file swfstore.swf is expected in the same directory as the HTML page in which a SWFStore Utility instance will appear. You must place a copy of the SWF on your server.

To get started with the SWFStore, begin by placing it on the page. Create a <div> (or other element) placeholder into which you’re able to render your SWFStore instance. In a usual use cases, you can set the width and height of the container to 0, since the SWFStore is a purely functional component and doesn’t have it’s own UI (except when your users want to request more storage space from Flash):

    <div id="toBeReplaced" style="width:0px;height:0px"><br />
      Sorry guys! We’re unable to load Flash content. The YUI SWFStore Utility requires Flash Player 9.0.115 or higher. <br /> 
    </div>

Then, instantiate the SWFStore by passing the id of this container <div> to it:

    var swfstore = new YAHOO.util.SWFStore( "toBeReplaced" );

The demo I created consists of two text fields, a few Buttons and a DataTable as well as a modal window. The Buttons let you save data, set some sample information to store, set properties on SWFStore, or clear all items from the data store.

Once the page has been loaded up, the initialize() function is called to instantiate a SWFStore instance and set up some listeners. To be safe, we also disable all of the Buttons until the SWFStore is ready – good UI practices always come in handy.

    function initialize()
    {
    var useCompression = compressionCheckbox.get("checked");
    saveButton.set("disabled", true);

    setButton.set("disabled", true);
    purgeButton.set("disabled", true);
    removeButton.set("disabled", true);
    removeAtButton.set("disabled", true);
    sharedataCheckbox.set("disabled", true); 
    compressionCheckbox.set("disabled", true);

    //the swfstore instance

    swfstore = new YAHOO.util.SWFStore("swfstoreContainer", false, useCompression);

    //some basic listeners for user feedback
    swfstore.addListener("save", onSave);
    swfstore.addListener("error", onError);
    swfstore.addListener("quotaExceededError", onError);
    swfstore.addListener("securityError", onError);
    swfstore.addListener("contentReady", onContentReady);

    //extended listeners

     swfstore.addListener("set", onSet); 

When SWFStore is ready, it will dispatch a contentReady event. We can then enable the Buttons and initialize a DataTable with any previously stored values. Because items are stored as objects, we need to loop through them to turn them into name-value pairs suitable for use with the DataTable.

    function onContentReady(event)
    {
        saveButton.set("disabled", false);
        purgeButton.set("disabled", false);
        removeButton.set("disabled", false);
        removeAtButton.set("disabled", false);
        sharedataCheckbox.set("disabled", false);
        compressionCheckbox.set("disabled", false);

        setButton.set("disabled", false);
        load();
    }

//next we define default values for the variables we load when the page is opened

  var layout = "Default";

  var fontname = "Verdana";

  var friendlyname = "Guest";

  var windowSize = "400px"

  var reminder1 = "No reminders set";

  var avatarURL =   "http://www.addyosmani.com/resources/swfstore/examples/

  swfstore/default.png";

  var lastViewed = "";

    function load()
    {
        //could use swfstore.getItems(), but that would not separate the data into fields

var settingName = null;

var settingValue = null;

var len = swfstore.getLength();

        var arr = [];

        for (var i = 0; i < len; i++)
        {
            arr.push({ name:swfstore.getNameAt(i), value: swfstore.getValueAt(i) })

settingName = swfstore.getNameAt(i);

settingValue = swfstore.getValueAt(i);

//here we use a switch statement to check the value loaded from the data-table. We are then able to assign it to a more easy to remember variable name and read it anywhere in the DOM

switch(settingName)

{

case ‘layout’:

        layout = settingValue;

break;

case ‘font’:

        fontname = settingValue;

break;

case ‘friendlyName’:

        friendlyname = settingValue;

break;

case ‘windowSize’:

       windowSize = settingValue;

break;

case ‘backgroundImage’:

          backgroundImage = settingValue;

break;

case ‘reminder1′:

         reminder1 = settingValue;

break;

case ‘avatarURL’:

          avatarURL = settingValue;

break;

case ‘lastViewed’:

         lastViewed = settingValue;

break;

}

        var datasource = new YAHOO.util.LocalDataSource(arr);

        datasource.responseSchema = {fields : ["name", "value"]};

        var configs =
        {
            scrollable: true
        }

        var columns =
        [
            {key:"name", label:"Storage Name (Key)"},
            {key:"value", label:"Text Stored"}
        ];

        datatable = new YAHOO.widget.DataTable("datatableContainer", columns, datasource, configs);

    }

The “Set Test Data” button allows you to set some test data (or any information) from a function or the rest of your UI to save into the data store. In the demo, I’ve chosen to store some data for a fake user profile application that is loaded up and used by a modal window to demonstrate just how easy this is to use through JavaScript. To save an item call swfstore.setItem(variableName, variableValue).

function set()

{

swfstore.setItem(‘layout’, ‘helio’);

swfstore.setItem(‘font’, ‘tahoma’);

swfstore.setItem(‘friendlyName’, ‘John Smith’);

swfstore.setItem(‘windowSize’, ’500px’);

swfstore.setItem(‘backgroundImage’, ‘http://farm3.static.flickr.com/2363/2085145159_85bd6d7be1_o.jpg’);

swfstore.setItem(‘reminder1′, ‘Feed the Cat today!’);

swfstore.setItem(‘avatarURL’, ‘http://www.addyosmani.com/resources/swfstore/examples/

sswfstore/avatar.png’);

swfstore.setItem(‘lastViewed’, lastViewed);

alert("Refresh this page to apply the new saved settings");

}

Similarly, the "Save" Button is set up to take the values from the text fields in our app and store them, using this function.

    function save()
    {
        swfstore.setItem(  YAHOO.util.Dom.get(‘nameField’).value, YAHOO.util.Dom.get(‘valueField’).value);
    }

Some of the other Buttons are set up to remove items from storage and are useful for cases where you would like to make sure all the local data for a site has been deleted.

    function remove()
    {
        var obj = YAHOO.util.Dom.get(‘nameField’).value;
        swfstore.removeItem(obj);

    }

    function removeItemAt()
    {
        var index = parseInt(YAHOO.util.Dom.get(‘indexField’).value);
        swfstore.removeItemAt(index);

    }

    function purge()
    {
         swfstore.clear();
    }

We’ve already set up listeners for the "save" and “set” events, which are displayed for when each of their respective buttons are clicked. The onSet event loops through rows of the DataTable and either adds rows, deletes them or updates values.

function onSet(event)

{

var newobj = {name: event.key, value: event.newValue};

var len = datatable.getRecordSet().getLength();

//loop through current records and see if this has been added before

for (var i = 0; i < len; i++ )

{

var rec = datatable.getRecord(i);

var data = rec.getData();

//if it’s been added already, update it

if(data.name == event.key)

{

datatable.updateRow(i, newobj);

return;

}

}

//if it’s not been added, add it

datatable.addRow(newobj);

}

The onSave function is very similar to onSet except it’s more constricted to the UI controls in this demo whilst onSet and the “set” method are more open to being called from anywhere in your code and storing your data.

    function onSave(event)
    {

        //added
        if(event.info == "add" || event.info == "update")
        {
            var newobj = {name: event.key, value: event.newValue};

            var len = datatable.getRecordSet().getLength();

            //loop through current records and see if this has been added before
            for (var i = 0; i < len; i++ )
            {
                var rec = datatable.getRecord(i);
                var data = rec.getData();

                //if it’s been added already, update it
                if(data.name == event.key)
                {
                    datatable.updateRow(i, newobj);
                    return;
                }
            }

            //if it’s not been added, add it
            datatable.addRow(newobj);
        }

        //removed
        else if(event.info == "delete")
        {
            //var index = parseInt(YAHOO.util.Dom.get(‘indexField’).value);
            datatable.deleteRow(event.index);
        }

        //cleared
        else
        {
            datatable.deleteRows(0, datatable.getRecordSet().getLength());
        }
    }

And that’s it!

Most of you will know me as being a huge jQuery fan (and I’m certain most of this work can be ported to the framework) but as a concept I thought it was very interesting that cross-browser client-side storage could be achieved without needing to use add-ons like Gears or have a browser following the latest trends in computing.

The methods I’ve described above already work in FireFox, Chrome and even IE6!, so it’s feasible for you to start using them today.

To download YUI with the above demo integrated into it, click here.

Thanks and I hope this post was useful.

Related posts:

1. 7 Really Useful Tips For Better jQuery Code   I’ve been using jQuery in my web apps for...
2. Get back more storage space in Windows Vista – Part 2 Windows Vista has a unique feature known as a shadow...
3. Web Workers – Amazing Parallel JavaScript Tasking For Your Application   I’ve been looking at some of the cool new...

Related posts brought to you by Yet Another Related Posts Plugin.

You all tweeted in to vote and today I’m sharing a whole new set of HTML5 Canvas demos that really show you just how far you can push the envelope on the <canvas> element. One of my favourite things to look at at the moment is 3D so you’ll get to play around with excellent interactive examples like the 3D Google Images Gift Box and or my 3D site Perspectives demo but you’ll also see just how useful the canvas can be for modelling real-world objects.

We’ve got a great new post ahead of us.

It’s amazing just how many applications the Canvas has opened up and I really didn’t expect to see powerful Face Detectors or Matlab-level graphing so soon in 2009 (but guess what guys..this post includes working examples for both!). The Canvas element has allowed developers to take on some of the visually inspiring things we’ve previously only been able to do with Flash and finally do it in a way that doesn’t require a third-party plugin – it’s no surprise that us geeks are really interested in seeing what it’s capable of.

Many of these demos have either not been released before (or haven’t been heavily publicised) so I really do hope this fresh set of examples give everyone a little inspiration for their own Canvas experiments. To give you a little perspective, the Canvas is so powerful that it only took me about a week to create an almost perfect clone of the Apple iTunes CoverFlow effect with the canvas element.  With 3D, Vector graphics and more coming to a Browser near you soon, it’s never been a better time to learn more about what you can achieve with it.

So, without further adieu I give you today’s list of incredibly fresh Canvas demos:

Interactive Google Images “Gift” Box

Canvas Cartoon Animation that’s as good as Flash

Canvas + Audio Burst Animation

Canvas Parallax 

Interactive 3D Canvas Perspective of any site you enter

Interactive Polaroids

JavaScript Fast Face Detector

3D Model Viewer using the Canvas Element

The Flickr Canvas SlideShow

Canvas + SoundManager Audio Player with Waveform effects

The Evolving Monster Animation 

   A 3D Landscape generated using the Canvas Element

Matlab-style plotting using the Canvas and GNUPlot

Related posts:

1. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...
2. Why HTML5 is a Game Changer and what it means for you. Web Developers are commonly asked to create applications which stream...
3. An improved Javascript CoverFlow demo using Canvas and HTML5 (Firefox only)   Over the past 2 weeks I’ve done a lot...

Related posts brought to you by Yet Another Related Posts Plugin.

Many Social Networking sites allow users to authenticate through their APIs – this means that rather than needing to have a complete registration system on your site, you can simply allow users to authenticate with a third-party service and then grab their profile picture and name for use in your commenting systems or other scripts.  In today’s tutorial, I’m going to show you how to add the most popular of these services (Facebook Connect) to your website in 3 steps.

Step 1 – Setup a brand new Facebook Application

To get started you’re going to need a Facebook Platform API key for your site. Follow these steps to create an application with the Facebook Developer application.

1. Go to http://www.facebook.com/developers/createapp.php to create a brand new application. You must be logged into Facebook to create apps.
2. Enter a name for your application in the Application Name field.
3. Accept the Developer Terms of Service, then click Save Changes.
4. On the Basic tab (the first tab you’re taken to), keep all of the defaults in place. In the Connect tab enter a Callback URL. This URL should point to the top-level directory of the site which will be implementing Facebook Connect (this is usually your domain, e.g. http://www.site.com, but could also be a subdirectory).
5. Make a note of your API Key and Secret Key, you’ll need them to access Facebook Connect.
6. Optional: Whilst in the Connect tab you can include a logo that appears on the Facebook Connect dialog. Next to Facebook Connect Logo, click Change your Facebook Connect logo and browse to an image file. The logo can be up to 99 pixels wide by 22 pixels tall, and must be in JPG, GIF, or PNG format.
7. If your site is going to implement Facebook Connect across a number of subdomains you need to enter a Base Domain (which would be example.com in this case). You an specify a base domain which allows you to make calls using the PHP and JavaScript client libraries as well as get and store session information for any subdomain of the base domain. For more information about subdomains, see Supporting Subdomains In Facebook Connect.
8. Click on Save Changes.

Step 2 – Create a Cross-Domain Communication Channel File

You’ll need to create a cross-domain communication channel file called “xd_receiver.htm” and save it in a directory relative to the callback URL.
For example, if you’re using http://www.site.com/ as your callback URL, but you want to store your Facebook Connect files in their own subdirectory, say http://www.site.com/connect. You should create the “xd_receiver.htm” file in the directory from where you’ll be serving your Connect Web pages (http://www.site.com/connect in our example).

Below is an example of a cross-domain channel file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/

XdCommReceiver.js" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/

XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>

Important note: If you don’t have a cross-domain channel file present, Facebook won’t be able to communicate with your server correctly so make sure you don’t skip this step. You’ve also got the option of calling the file anything you’d like as long as you remember to change the filename mentioned in the FB.init method :)

Step 3 – The FB Connect JavaScript API Library

One of the easiest ways to begin using Facebook Connect on your site is through Facebook’s terrific JavaScript API. Include references to it. One of the essentials to connecting to the library and these are setting the correct document type as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

and loading the Javascript library at the END of your webpage, near the </body> tag.

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/

FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/

FeatureLoader.js.php"> </script>

Always check the Facebook Developer page for the latest version of the Javascript Library.

Step 4 – A demo application using the JavaScript API Library

Here is a simple but effective example of how you can login a user to your Facebook Connect application and show their name and profile picture from Facebook.

src="http://blarnee.com/wp/wp-content/uploads/fbe_thumb.jpg" width="292" border="0" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="user">
Name: <input name="name" size="27"><br />
<fb:login-button length=’long’ onlogin="update_user_box();"></fb:login-button>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid=’loggedinuser’ facebook-logo=’true’></fb:profile-pic>"
+ "Welcome, <fb:name uid=’loggedinuser’ useyou=’false’></fb:name>"
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/

FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/

FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "API KEY GOES HERE";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path, {"ifUserConnected": update_user_box});
</script>
</body>
</html>

The FB tags you see here are XFBML (Extensible Facebook mark-up language) that you can learn more about here. You can easily extend this example to the comments or profile section of your website. To test this on your server, you’ll need to replace your API key in the code example.

You can download the Sources for this tutorial or view a demo.

and thats it!. I hope this tutorial has been helpful.

Related posts:

1. How To Add Form Validation using jQuery in 2 Easy Steps     Hi everybody. Sometimes you may find yourself...
2. How to develop a Web Application in 5 easy steps – A guide for web developers and businesses Having developed web applications for a few years now,...
3. Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails developers.  If you’re a web developer and you haven’t explored the...

Related posts brought to you by Yet Another Related Posts Plugin.

Hi everybody. Sometimes you may find yourself working on projects that require some intelligent form field validation..but what’s the easiest way to achieve this? I’ve used everything from the popular Validate plugin to Spry components, but I found all of them a little too much to achieve something so simple. In this post I’m going to show you how to add sleek form validation to your input fields in just two easy steps.

First you’ll need to download my tutorial pack for this post. It’s composed of a small jQuery Plugin we’ll be using for this tutorial which you can include with jQuery as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validation.js"></script>

Lets take a look at the HTML.

HTML >> demo.html

To keep things simple our jQuery Plugin uses a template structure for each input field you would like to validate. For this post, I’m going to use the "username" field as an example of how to use it.

1. Here is our input field template you can use for anything like usernames, passwords, addresses and so forth. Notice that we have an image area to display a notification icon and a message area to display any validation messages.

         <li class="validated" id="FIELDNAME_li">
                  <label for="r_FIELDNAME">Fieldname:</label>
                  <div id="FIELDNAME_img"></div>
                  <input class="validated" name="FIELDNAME" id="FIELDNAME" type="text" maxlength="20" value=""  />
                  <div id="FIELDNAME_msg"></div>
          </li>

Lets now replace FIELDNAME with username to setup an input field that validates.

          <li class="validated" id="username_li">
                  <label for="r_username">Username:</label>
                  <div id="username_img"></div>
                  <input class="validated" name="username" id="username" type="text" maxlength="20" value=""  />
                  <div id="username_msg"></div>
          </li>

2.  The next stage of setting up a new text field for validation is adding our "username" field to our JavaScript. This takes the form of a check to see if the name of one of the input fields on the page is "username" and if so, what type of validation we would like to apply on it.

JavaScript >> Validator.js

$.fn.validate = {
        init: function(o) {
          //Here’s where I’m checking for my input field name
          if(o.name == ‘username’) { this.username(o) }; 
          if(o.name == ‘password’) { this.password(o) };
          if(o.name == ‘email’) { this.email(o) };
          if(o.name == ‘dob’) { this.dob(o) };
        },
       

//and here’s where I’m definining a validation method for it
//note the regex used to make sure that our username fits the
//expected pattern

        username: function(o) {
          var user = /[(\*\(\)\[\]\+\.\,\/\?\:\;\’\"\`\~\\#\$\%\^\&\<\>)+]/;
           if (!o.value.match(user)) {
             doValidate(o);
            } else {
             doError(o,’no special characters allowed’);
            };
        } 
       

(each of the password, email, date-of-birth items also have their own custom validation scheme which you can see in the tutorial pack)

And that’s it!. You can define as many input fields as you would like and validate their content using any type of regular expression that your project requires the data to conform to.

If you would like to try the methods described in this post out for your own project, feel free to download my tutorial pack here or view a demo here.

Related posts:

1. How to Add Facebook Connect To Your Website in just 3 Steps     Many Social Networking sites allow users to authenticate...
2. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...
3. How to add a password strength meter using jQuery in under 5 minutes Hi guys. Today I’m going to show you how...

Related posts brought to you by Yet Another Related Posts Plugin.

Hey guys. I’ve got some great new code for you to download today. For a long time, Flash has dominated the online interactive UI landscape with technologies like PaperVision allowing developers to flex their creative muscles far and wide. Recently, JavaScript has come back into the Spotlight thanks to the Canvas element making impressive image effects finally possible. In this post, I’d like to share with you an amazing new jQuery 3D Wall Component for Webkit that’s compatible with Chrome and Safari.

The great thing about the wall (inspired by work by Charles Ying) is that it supports infinite-browsing (this means that as long as you hit the right-arrow, you’ll get brand new images populating the view through Ajax). The Component comes with out-of-the-box support for Flickr and YouTube Videos, which are relatively easy to configure and effects like reflection are automatically applied to the base of your images for you.

Interested in a neat image Search?. The component also comes complete with a really cool “Search and highlight” feature so you can see what images or videos in your view match the terms you’re typing in.

Would you like to hook it up to consume your own data or images? No problem at all. Here’s how YouTube videos are pulled into the plugin:

function youtube(callback)
{
    var url = "http://gdata.youtube.com/feeds/api/videos/-/Comedy?v=2&alt=json-in-script&start-index=" + startIndex + "&callback=?";

    jQuery.getJSON(url, function (data)
    {
        var images = jQuery.map(data.feed.entry, function (item)
        {
            return {
                title: item.title.$t,
                thumb: item.media$group.media$thumbnail[0].url,
                ytvideoid: item.media$group.yt$videoid.$t,
                videoloader: youtubevideo,
                link: item.link[0].href
            };
        });
        startIndex += images.length;
        callback(images);
    });
}

It essentially uses a JSON based callback to grab a set of parameters (such as the image location and the link to the original photo or video) through your data feed. You are then able to define how you would like your information to be handled (if you’ve got some extra features in mind), but thats about it – simply initialize the service you would like to use (in my case Flickr or YouTube) and then you’re done. Pagination of images is kept as basic as possible and you’ll be able to get up and running with the component in no time.

If you would like to check out a demo of the wall in action or would like to download it to play around with it yourself, please see the links below.

Demo | Download

Related posts:

1. 7 Really Useful Tips For Better jQuery Code   I’ve been using jQuery in my web apps for...
2. Quick and dirty Ajax with jQuery So you’ve read up on our earlier Ajax tutorial or...
3. How to highlight terms on your page using jQuery Today I came across a really useful plugin for jQuery...

Related posts brought to you by Yet Another Related Posts Plugin.