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.

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.

Hi guys. I’m making some more of my custom components available for download today. The Apple iTunes CoverFlow effect is one the nicest forms of visualizing albums and images that I’ve seen over the past few years and I’ve always wondered..could the effect be done using JavaScript and no Flash whatsoever?. The answer is yes and I’d like to share with you my new Pure JavaScript CoverFlow component (which doesn’t rely on jQuery, YUI or any other frameworks to work! :). 

The effect is made possible using the HTML5 Canvas element which takes care of all the image processing work (eg. reflections and tilts etc). I’ve seen previous implementations that use PHP to achieve this but I think a true implementation should be able to do all of this at the client side – hopefully my version lives up to that.

For readers who haven’t checked it out before, the CoverFlow includes keyboard navigation, one-click flip and tilt access to any item in the stack, a built-in lightbox for viewing higher resolution images, HTML album previews and much more.

With release 2.0.1 one of the important things that have been addressed is increased cross-browser compatibility with Google Chrome 2.0 +, FireFox 3.5 + and Safari 4.0 also now supported. The newest version of the component can be downloaded from SourceForge via the link below. Please feel free to share it and let me know what your thoughts are on it.

Screencast:  Watch this component in action right here

Demo:  Launch the FireFox/Chrome/Safari compatible demo here

Download: Get the sources via SourceForge

New: You can also download an alternative version of the CoverFlow done using YUI right here.

Related posts:

1. cFlow – Coverflow for jQuery (Experimental Release)     Update: This component has been replaced by the more...
2. An improved Javascript CoverFlow demo using Canvas and HTML5 (Firefox only)   Over the past 2 weeks I’ve done a lot...
3. New open-source product releases rolling out Some of you may have noticed that the site...

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

Like me, if you’ve ever wanted to use a Web Service from a site that doesn’t have that many code examples or a solid API, chances are you may have considered using cURL – a great extension to PHP that allows you to authenticate with websites just like a normal user would. The benefits of doing this are that you’re able to gain access to rich data sources like contact lists, email, statuses and a whole lot more. In this post I’m going to provide you with 20 code examples that’ll help you do some pretty cool things using everything from Bit.ly to Las.fm. Sites covered are Yahoo.com, Last.fm, Amazon, WordPress, Facebook, TwitPic, PayPal, Bit.ly, Twitter, GMail, MySpace, is.gd and IMDB.

1. How to shorten a URL through bit.ly
2. Get the trending topics on Twitter
3. How to get the album covers of your most recent tracks on Last.fm
4. Get the list of your Yahoo Contacts via cURL
5. How to get your very latest tweets
6. How to update your Twitter Status
7. How to upload files to Facebook
8. How to import your GMail Contacts
9. Upload files using Amazon S3 and PHP
10. How to login to mySpace through cURL
11. How to upload videos to YouTube (API reference)
12. How to make a post to WordPress
13. How to parse out a movie’s details using IMDB
14. How to Scape Bing.com for Search Results
15. How to update your Facebook status
16. How to upload a picture to TwitPic through cURL
17. How to process Payments using PayPal, cURL and CakePHP
18. Scrobble tracks to your Last.fm account using cURL
19. How to download videos in any format from YouTube
20. How to shorten a URL using the is.gd Shortening service
21. How to grab the number of subscribers from your Google Reader Account

Related posts:

1. 15 amazing things you can do using cURL If you’ve ever wanted to consume services from a popular...
2. To tweet or not to tweet. That is the question. Lately, I’ve noticed that more and more people are...
3. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...

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