In this 3rd day of the “WRD E-Commerce Week“, we will be adding a chic fly-to-basket effect to our previously created Ajaxed shopping cart using jQuery.

Rather than the complete HTML structure & PHP code that adds/removes the products, we'll be focusing on the details related with  the effect.

To findout the details of the complete HTML structure & PHP code, please check our post: Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP. And, a full working example can be found in the download package.

Read the rest of this entry »

It is a clear fact that Ajaxed interfaces, if not overused, eases using websites so much.

For an e-commerce website, this can mean a better shopping experience for customers where they can concentrate more on the products which may result in better sales.

This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.

The main functions of the cart will be adding/removing items to the basket without the need of refreshing the page & displaying the actions with effects.

Other Add-To-Basket Tutorials Built on This Example:

• Fly-To-Basket Effect With jQuery
• Ajaxed Sliding Shopping Cart With jQuery

Read the rest of this entry »

Uploadify is a jQuery plugin for implementing single + multiple file uploads easier & better.

It requires Flash (which completes the upload) & a server-side file in any language (. PHP one is included) which processes the uploaded file.

The plugin offers various options to control & customize the upload interface like:

• files types
• max. number of simultaneous files
• auto or manual start of uploads
• size limit
• callback on every step (onSelect, onCancel..)
• & more..

And, implementation is as simple as any other jQuery plugin; just by calling a function.

Gritter is a jQuery plugin for creating Growl-like notifications with ease.

The notification bubbles created looks very similar to the ones in Mac OS X & they can be styled easily if wanted.

It is possible to create multiple notifications where each of them can be controlled with their unique IDs.

They can be set to disappear automatically after x seconds or stay until removed manually with the "sticky" option.

You can also mention the speed of the fade effect used while the notifications appear/disappear.

John Resig is sharing very functional script named Easy Retweet Button that will simplify "the sharing of your content on Twitter".

It is an unobtrusive JavaScript file for displaying a retweet link with a shortened URL via Bit.ly (similar to Tweetmeme) & number of clicks came to that content from Twitter.

Easy Retweet Button has 2 ready-to-go styles: vertical & horizontal. And it can be easily themed as only HTML, CSS & JavaScript is used.

It is possible to customize the "Retweet" text, prefix of the tweets (like RT @..) & Bit.ly username / API key to be used.

It offers various advantages like:

• speed: it works completely asynchronously
• tracking: all the tracking is done via Bit.ly & clicks from retweets can be tracked from a single interface

Steps For Using It With WordPress:

This is nothing complicated but can save your time:

Read the rest of this entry »

Visualize is a jQuery plugin which converts tables to charts & graphs using the HTML 5 canvas tag.

The usage of tables is very important the data is already formatted in a way that is accessible to users browsing the web with a screen reader or other assistive technology.

The plugin offers a very easy usage as calling a function like: $('table').visualize(); is enough for creating a line, pie, bar or an area chart from a table.

Visualize offers various methods for customizing:

• the type (line, pie, bar or area)
• width & height
• title
• color
• margins
• & more

Here is a customizable demo to test the plugin completely.

Similar to the IE6 situation, when using HTML5/CSS3 in our websites, it is a good idea to offer non-problematic outputs to web users with older/non-standard browsers.

Modernizr is a JavaScript library that uses feature detection techniques to determine whether or not the current browser is capable of CSS3 and HTML5 features like rgba(), border-radius, CSS Transitions & more.

It enables you to write pseudo-IF/ELSE statements in your CSS &, if wanted, it is possible to wirite conditional statements in JavaScript with the help of a "Modernizr JavaScript object" created.

Also, Modernizr adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

MyTableGrid is a JavaScript-powered datagrid control, built with Prototype, for displaying data in an easy-to-browse & flexible way.

It offers an Ajaxed interface with pretty fast paging & data-sorting.

Columns can be resized & any columns can be easily removed for a better view of data.

MyTableGrid allows browsing via keyboard (with the help of KeyTable library).

It supports instant editing of cells & complete skinning via CSS.

MooFlow is a highly customizable coverflow-like image gallery that is built with MooTools.

It is easily & automatically setup by mentioning the HTML element that grabs the images.

MooFlow has various features like:

• fullscreen support
• browsing with mouse wheel
• browsing with keyboard
• autoplay & loop
• automated JavaScript image reflections

The script is also flexible when loading the images. The data source can be JSON or HTML with selector-filter.

And, its interface can be totally skinned via CSS.

jQuery Impromptu, a jQuery pugin, is offering a chic replacement for alert, prompt, and confirm dialogs.

Although it is not an alternative for modal windows, it can display any HTML content, supports sequential messages & more.

The plugin comes with a bunch of options for maximum customization like:

• loaded, callback & submit functions to step in every point
• changing prompt & overlay speeds
• using different animations on prompt windows 6 more

The look/feel of the message boxes can be updated easily via CSS & various examples are provided on theming.