We are regularly collecting useful JavaScript and jQuery snippets, libraries, articles, tools and resources and present them in compact round-ups here, on Noupe. This time we are again covering some useful JavaScript and jQuery techniques, plugins and tools that may help you improve the user experience for your site.

Useful JavaScript and jQuery Techniques

Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Nivo Slider
The Most Awesome jQuery Image Slider

jQuery.Syntax
jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

jquery.timepickr.js
This is my humble attempt to enhence web time picking.

Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

Making a Mosaic Slideshow With jQuery & CSS
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements
Having full control of elements on a page and the order they are presented in can be quite useful. jQuery as always is a safe choice to go for. There are several good quality plugins to pick from. This post provides an overview of plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

Create an Impressive Content Editing System with jQuery and PHP
I’m going to show you how to use jQuery and PHP to build a content editing system that will allow you or your client to easily edit .html pages visually.

jQuery MegaMenu Plugin

Excellent JQuery Plugins To Enhance Form Validation
Simple jquery plugins can enhance and beautify HTML form elements, these simple jquery scripts turn a simple HTML website to a fantastic look and feel. These plugins can be enabled very easily. In this roundup I have gathered most beautiful Jquery plugins that are related to all kinds of form validation. This list also includes roundups of some blogs. Go ahead and enjoy

gameQuery – a javascript game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

A demo of AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

Create a Content Rich Tooltip with JSON and jQuery
Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

jQuery image zoom effect
So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text.

jQuery Roundabout Shapes
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

Extending jQuery’s selector capabilities

How to show/hide a hidden input form field using jQuery
This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an ‘other’ option. I wanted to allow users to select the ‘other’ option which then would show an input field so they can enter a specific description of what that ‘other’ item is. I didn’t want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

Useful JavaScript / jQuery Tools

JavaScriptMVC
JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

PEG.js – Parser Generator for JavaScript
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily bulid fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

PhoneGap
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

JavaScript Shell
A command-line interface for JavaScript and DOM.

WireIt – a Javascript Wiring Library
WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

JavaScript Programming Patterns
In this article I am trying to present some of the techniques out there that I have discovered. The patterns I would like to mention are the following:
- The Old-School Way
- Singleton
- Module Pattern
- Revealing Module Pattern
- Custom Objects
- Lazy Function Definition

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

How to Test your JavaScript Code with QUnit
QUnit, developed by the jQuery team, is a great framework for unit testing your JavaScript. In this tutorial, I’ll introduce what QUnit specifically is, and why you should care about rigorously testing your code.

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

Online javascript beautifier
This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

CSS & Javascript Character Entity Calculator
Enter your HTML Entity Character number (such as &#2335 or just 2335 – ?) to get the CSS and JS values for that entity.

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

Showdown – Markdown in JavaScript
Showdown – a JavaScript port of Markdown

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

fLABjs
fLABjs is a special API wrapper around LABjs which adapts the code to work properly in a file:// local filesystem environment. There are a number of things with core LABjs does which are not appropriate for local filesystems, such as XHR, special path handling rules, etc.

jQuery LazyLoad Ad : Delays loading of advertising
jQuery LazyLoad Ad is a jQuery plugin that takes advantage of LazyLoad delaying ads loading.

qTip – The jQuery tooltip plugin
qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

jQuery Collapsing and Expanding Table Rows

Improving Search Boxes with jQuery
This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

jQuery Grid Plugin

Pines Notify jQuery Plugin
Pines Notify’s features include:
- Timed hiding with visual effects.
- Sticky (no automatic hiding) notices.
- Optional hide button.
- Supports dynamically updating text, title, icon, type…
- Stacks allow notice sets to stack independently.
- Control stack direction and push to top or bottom.

jQuery Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.

  

By Paul Andrew

Using AJAX on websites and applications is pretty much taken for granted nowadays. Users expect it. They want to be able to edit a page in-place, they want search queries to be auto-suggested, and they want to be able to submit a form without refreshing the page. Why? Because those things make browsing quicker, easier and, more importantly, enjoyable.

As great as AJAX is, though, it is not for every website or application. Part of the developer’s job is to know exactly where AJAX (or any technology for that matter) is needed. Too little can lead to user frustration. Too much causes misunderstanding. A balance and some restraints are always needed.

In this round-up, we have collected 30 fresh AJAX tutorials and techniques, covering almost every aspect of AJAX development: forms, applications, polls, editing, parsing, visual effects and much more.

AJAX Tutorials And Techniques

An AJAX-Based Shopping Cart with PHP, CSS and jQuery
In this tutorial, you will create an AJAX-driven shopping cart and store all of the products in a MySQL database, using PHP to process the data. jQuery will deliver the AJAX on the page, and with help of the simpletip plug-in, you will be able to deliver a high-end interactive check-out process.
View the demo.

Creating an AJAX Web App Using the Bit.ly API
Using Twitter’s URL shortener, bit.ly, and the jQuery library, you will be taken through the process of building an AJAX Web app. This is a great beginner tutorial, giving a detailed introduction to APIs and the basics of PHP and jQuery.
View the demo.

A Twitter List AJAX-Powered Fan Page
Twitter recently launched its new “lists” feature, which allows you to compile a list of your followers and organize them into categories. Using the newly expanded API (with list-management functionality added), you will learn how to create a widget that flips lists the other way round: this fan widget that goes in the sidebar allows visitors to fill in their Twitter name and join a special fan list from your Twitter account.
View the demo.

Learn How to AJAXify Comment Forms
Learn how to take a simple boring contact form and add some simple animation with an AJAX post request to submit the form to your MySQL database asynchronously.

A Simple AJAX Website with jQuery
Using jQuery, PHP and CSS, you will go through the process of creating a basic AJAX website. The finished product will load pages through AJAX from the PHP back-end and even completely support the browser history (something that is normally difficult to achieve with any AJAX or Flash website).
View the demo.

Create a Twitter-Like “Load More” Widget
In this tut, you will learn the technique—used by both Twitter and the Apple App Store—for loading more information. Simply by clicking the link or button, more content will appear, as if by magic. You will use AJAX, CSS, Javascript, JSON, PHP and HTML to build this widget. This tutorial features both the jQuery and the MooTools versions of the script.
View the demo.

A Simple Twitter App with Ruby on Rails
In this three-part tutorial series, you will set up a simple messaging model that holds posted messages. You will also learn how to post a message asynchronously.
View the demo.

AJAX Multiple-File-Upload Form Using jQuery
With this article, you will learn to develop an AJAXified multiple-file-upload form that uses much less server-side code and has a nice user interface. Thanks to the power of jQuery, the time spent on actual development is substantially reduced.
View the demo.

How to Send Facebook-Style Mail with PHP, AJAX and jQuery
The Facebook website is choc full of unique features, especially the system for sending mail and messages. Using PHP, AJAX and jQuery, you can recreate this technique using this step-by-step tutorial.
View the demo.

How to Create Your Own Stats Program (JavaScript, AJAX, PHP)
Chances are, you use an analytics programs such as Google Analytics, Get Clicky or Urchin to track every move and twitch on your website. They all track page views, visits, unique visitors, browsers, IP addresses and much more. But how exactly is this accomplished? Follow this tutorial and learn how to create your own basic Web statistics program using PHP, JavaScript, AJAX and SQLite.
View the demo.

AJAX Post Pagination in MooTools
Patiently browsing through the archive of posts on your WordPress website can be frustrating. A fix for this problem would be to use MooTools and AJAX to do the loading.

jQuery AJAX delete
Being able to remove content with Ajax is useful for any Web designer. Using a few lines of jQuery, you can remove both a DIV and a record from the database with AJAX. In this demo, you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment’s DIV, and the slide-up animation allows you to remove the DIV.
View the demo.

Voting System with jQuery, AJAX and PHP
Dzone offers users the chance to vote up or down on any particular link, giving an indication of how well an article has been received. In this tutorial, you learn how to recreate this unique voting system using jQuery, AJAX and PHP.
View the demo.

Creating a Dynamic Poll with jQuery and PHP
When you combine the neat functionality of PHP and the cleverness of jQuery, you can produce some pretty cool results. In this tutorial, you will create a poll using PHP and XHTML, then use some jQuery AJAX effects to eliminate the need for page refreshing and to give it a nice touch of animation.
View the demo.

AJAXify WordPress Comment Posting
Many WordPress plug-ins will AJAXify comments, but how do they do it? In this step-by-step tutorial, you will learn how to enable AJAXed comments with client-side JavaScript comment-form validation for any WordPress blog.
View the demo.

Create a Dynamic Scrolling Content Box Using AJAX
If you use Google Reader, then you may have noticed how it shows feed items. After you click on a feed, it loads a few items first, and as you scroll down to view more items, it adds more items dynamically to the list. This tutorial shows you how to create a similar content box that loads content dynamically as the user scrolls to the bottom of the box.
View the demo.

Create an In-Place Editing System
Making users click through multiple pages just to edit a single field is annoying. This tutorial shows you how to create an in-place editing system, as found on popular websites such as Flickr and then take things further with AJAX.
View the demo.

Submit A Form Without Page Refresh using jQuery
This article outlines a great way to use jQuery and AJAX to enhance the user experience, not just by validating the form but by submitting the contact form without having to refresh the page.
View the demo.

How To Parse XML Using jQuery and Ajax
In this tutorial you will learn how to parse or process an XML document and display the data on a page in HTML. This process can be used to filter raw RSS feeds, set up a cool site map on your blog or even lay the groundwork for your own auto-complete search.
View the demo.

Caching AJAX Results in Javascript
AJAX requests are usually faster than regular page loads and allow for a wealth of dynamism within the page. Unfortunately, many people do not properly cache request information when they can. The author shows you his improved method for caching AJAX requests.

How to Create an AJAX File Uploader
The application you will build in this tut uses jQuery’s versatility to allow multiple file uploads without a page refresh or redirection, complete with front- and back-end validation to prevent unwanted files from being uploaded to your server.
View the demo.

How to Create a Simple Web-Based Chat Application
The multiple-user Web-based chat application that you will build in this tutorial includes a log-in and log-out system, with AJAX-style features. The finished product would be perfect for a live support system for your website, as seen on the Vodafone and T-Mobile websites.

Facebook-like Auto-Suggestion with jQuery, AJAX and PHP
This article shows you how to recreate the unique auto-suggestion search feature of Facebook using jQuery, PHP and, of course, AJAX.
View the demo.

20 More Excellent AJAX Effects You Should Know
This article rounds up 20 relatively easy AJAX effects and techniques that can be used to spice up any page.

Record Text Selections Using MooTools or jQuery AJAX
This post demonstrates a useful technique for keeping track of what text users are highlighting and copying on a given Web page. It is helpful because it gives you an indication of what visitors really want from your website.

Automatically Update a Web Page with Dynamic Elements
You may know how to hide and display optional JavaServer Faces (JSF) components using JavaScript and CSS. To do this, you would first identify all JSF components and write them into JSF pages. But that is impossible when you are developing a Web page that contains dynamic elements that are unknown until runtime. With this article, learn how you can clear old UI components while automatically updating the dynamic elements of a Web page, as well as use Java code to add new elements and put them in their proper spot on a Web page. You’ll also learn how to bind different event handlers to different dynamic elements of a Web page, how to register a listener listening to changes of server-side data to invoke a page refresh, and how to use AJAX techniques to refresh only the dynamic parts of the Web page.

Build a Web Presentation Application using AJAX
How does Google Docs have such amazing functionality? It leverages Web 2.0 technologies, which provide robust functionality with relatively simple code. In this article, learn how to build a Web application to create slideshow presentations using AJAX.

Calendar Eightysix
Calendar Eightysix is an unobtrusive, developer-friendly JavaScript calendar and date-picker that offers a better user experience for date-related functionality. It is highly customizable and offers unique and quick navigation by jumping back and forth between months, years and decades without drop-down boxes.
View the demo.

jCart: AJAX/PHP Shopping Cart
jCart is a customizable jQuery plug-in that offers a simple e-commerce solution by handling visitor input without reloading the page.

AJAX Fancy Captcha
The Fancy Captcha jQuery plug-in is an intuitive and fresh way to complete those “verify humanity” tasks, offering reasonable protection against unwanted guests, namely bots and spammers. It works by asking you to verify yourself simply by dragging and dropping an item into a circle.

About the Author

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(al)

  

AJAX has gotten more and more popular over the years, and has allowed web applications to act more and more like desktop applications. AJAX can provide a lot of additional functionality that could not be accomplished any other way.

What Is AJAX? How Does It Work?

AJAX stands for Asynchronous JavaScript and XML. It is used for allowing the client side of an application to communitcate with the server side of the application. Before AJAX, there was no way for the client side of a web application to communicate directly with the server. Instead, you would have to use page loads. With AJAX, the client and server can communicate freely with one another.

Here is how the usual AJAX script goes:

• Some action triggers the event, like the user clicking a button.
• The AJAX call fires, and sends a request to a server-side script, using XML
• The server-side script (PHP, ASP, or whatever) takes the input from JavaScript, can access the database if it needs to, and processes the data.
• Using XML again, the script sends the data back to the original client-side page that made the request
• A second JavaScript function, called a callback function,catches the data, and updates the web page

Throughout this tutorial, we will discuss how various scripts use this routine to accomplish a wide variety of effects.

1. Login Forms

Instead of going to a login page, and then navigating back to the page you originally wanted, with AJAX, a user can type in their user name and password directly into the original page. From there AJAX will send a request to the server to log them in. The server let’s the page know they’ve been logged in, and the page you are on can update as needed. Digg has a login-system that works like this.

Example: Digg.com (top of page)

Plugin: jQuery Form Plugin

2. Auto-Complete

Google was one of the first major companies to start using AJAX, and Google’s search suggestion tool was one of the first ways they used it, and one of the first auto-complete tools made. When typing into the Google search bar, it starts to use AJAX to get common results from the database on each keystroke. Auto-Complete is great for forms where you have a lot of possible inputs, and making a select drop down would be too long and cumbersome.

Example: Google Search

Plugin:  jq autocomplete

3. Voting and Rating

Social bookmarking sites like Digg and Reddit let the users decide the main content of the site by voting on content that the users like. They use AJAX to handle all of the voting, so that the users are able to voice their opinions on a number of stories quickly and easily.

Example: Reddit

4. Updating With User Content

One of the things that made Twitter so popular was their simple and easy-to-use interface. When someone makes a ‘tweet’, it is instantly added to their feed, and everything is updated. Recently, Twitter has started using AJAX with their ‘trending topics’ pages. Every few seconds, the page lets the user know that more tweets have been made about the subject, giving them up-to-the-second updates.

Example: Twitter

5. Form Submission & Validation

Forms have always tricky to work with, but AJAX can make them a lot better for the users. AJAX can be used in a variety of ways, from the auto complete mentioned above, to validation and submission as well. Some sites use AJAX to check if a form meets certain requirements, such as password strength, or if something is a valid email or URL.

Example: 10 Cool jQuery Form Plugins

6. Chat Rooms And Instant Messaging

Chatting online has come a long way from the days of IRC. Chat rooms and instant messaging can now be handled in the browser completely. There are two main AJAX processes in a chat room or IM application. Think of one of them as your ears, and one of them as your mouth. Your ‘mouth’ updates the server and lets it know that you have sent a message. The ‘ears’ check with the server constantly, and updates your page with messages that have been sent by whoever you are chatting with.

Example: Meebo Chat (Uses Ajax)

Plugin: GMail/Facebook Style Chat Script

7. Slicker UIs

Creating a clean, slick user interface is a very popular use of AJAX. It allows users to accomplish more on a single page. The benefits of this are twofold: First, it makes using the web application quicker and easier for the user; Secondly, it cuts down on the number of requests you have to make to the server, which cuts down on bandwidth and load times. A free file upload service called Drop.io uses this well. Google has also really pushed the envelope of what is possible with AJAX by making desktop-like applications like Google Docs and Google Maps.

jQuery UI Library

8. External Widgets

When using AJAX, the page that is using the JavaScript isn’t just limited to the server it is located on. The AJAX can make a call to any server online. This is how a number of plug-ins for Content Management Systems like WordPress work, and other various scripts like Google Adsense.

Example: Google Adsense

Plugin: Script for loading external content into div

9. Lightboxes instead of pop-ups

Pop-up blockers are very common place these days, and for a good reason: pop-ups are annoying. Using light boxes, which are pop-ups inside the browser window, the pop-up blocker can’t stop it, and they aren’t quite as irritating to the user. Some people use them for advertising, like on Darren Rowe’s ProBlogger.com. They can also be used for something like a login or register box, like Reddit does when you try to vote and you are not logged in.

Example: Logo Sauce

Plugin: Lightbox Plugin

10. Using AJAX With Flash

Using AJAX along with Flash is a rarely used technique, but it can be used to generate some impressive results. The flash game website Kongregate uses this to great effect. Using their API, they have their own achievement system that involves winning ‘badges’ for completing various accomplishments in games. When a badge is earned, the API in Flash sends a response back to JavaScript, which then uses AJAX to update the user’s profile with the newly earned award.

Example: Kongregate

Plugin: jQuery Flash Plugin

I hope this article has given you a lot of ideas of how you can use AJAX to improve and expand your web applications. What are some other uses you can think of for AJAX?

  

Sometimes it’s just amazing to see, which level of usability, legibility and visual appeal can be achieved using some basic design techniques. In fact, some talented web-developers manage to deliver powerful, functional and gorgeous web-design in “look-and-feel”-style, which is easy to use and nice to see.

The User experience has dramatically improved over the past few years, resulting in rich and responsive user interface. AJAX, javascript and CSS are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.

There have been plenty of posts on the number of awesome javascript, Ajax and CSS techniques and where to find them. Today, we will have a look at 10 creative & rich UI in modern day websites and how you can create similar interfaces using the techniques mentioned in this post.

1. Alex Buga (Slider, Draggable Footer and Animated Menu)

Beside the absolutely incredible design you will find:

• 1.1 A menu with a nice animated effect on hover state

How To » Super elastic effect to design high impact web menu

This tutorial explains how to design an high impact elastic effect to make original web menu using some lines of Javascript code and MooTools framework.



Check out the demo

• 1.2 A sliding post panel.

How To » Elegant animated weekly timeline for websites

This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects.



Check out the demo

• 1.3 A draggable footer

How To » Drag & Drop and Resize in an event delegation fashion

Only the parent element is handling events. In this case it’s the editor container element. If you add dynamicaly elements into the container you don’t have to bind any events on it.



Check out the demo

2. Ricoverdeo (Slideshow)

A very clean and simple slider, complemented by great illustrations.

• 2.1 Simple slider with effect on hover state

How To » Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content

Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click or auto slide. Features include: continuous sliding, “go to first” and “go to last” button, hiding controls, optional wrapping markup for control buttons, vertical sliding and multiple sliders on one page.



Check out the demo

3. jasonreedwebdesign (Sliding Tabs, Accordion)

Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages. He also used a nice sliding tabs inside the accordion for a better structure in his interface.

• 3.1 Sliding Tabs

How To » Auto Sliding Tabs

Sliding Tabs is a mootools plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site. With an extra feature where the Sliding Tabs widget can change to the next or previous pane every few seconds



Check out the demo

• 3.2 Accordion

How To » Horizontal Accordion

This plugin provides some simple options to alter the accordion look and behavior.



How To » Creating Accordions with Mootools

4. Dragon Interactive (Animated Menu)

I just love their amazing menu, it seemed to be a flash menu from the first look but after checking the code found it is just plain XHTML, CSS and Javascript.

• 3.1 Animated Menu

How To » Animated Menus Using jQuery



Check out the demo

5. Best Web Gallery (switch page layouts)

Most CSS Gallery gives their users the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.

• 5.1 Switch Page Layouts

How To » Easy Display Switch with CSS and jQuery

A simple way to allow your users to switch page layouts by using CSS and jQuery.



Check out the demo

6. Profoto (Breadcrumbs)

Profoto has a unique breadcrumb menu. Clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.

• 6.1 Breadcrumb

How To » jBreadCrumb

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way. As the length of a breadcrumb menu may be very long & the common method used for this problem is limiting th eamount of menus used, jBreadCrumb follows another route.



Check out the demo

7. Shelfari (Hybrid Buttons)

Shelfari has an interesting hybrid button/drop down menu to display actions on books. If you check the code you will notice there were no input fields created for those check boxes, only a background images are used.

• 7.1 Custom Form Elements

How To » Custom Form Elements

Ever wondered how you could style form elements like checkboxes, radiobuttons and select-fields in a way you like. Custom Form Elements enhances web-based XHTML forms in terms of style, usability and accessibility by using Javascript and/or CSS.



Check out the demo

8. CSS Ninjas (Cost Estimate Slider)

CSS Ninjas provide an interesting cost estimate slider that allows clients to know how much their service will cost by specifying the number of pages that need to be converted.

• 8.1 Slider

How To » jQuery UI 1.7 Slider from a Select Element

The purpose of this plugin is to allow for the jQuery UI Slider plugin to be generated using progressive enhancement. You can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there.



Check out the demo

9. Facebook (Form Auto-completion)

Facebook’s address auto-completion form when you compose a message is one of the best examples of auto-completion feature in a form.

• 9.1 Form Auto-completion

How To » FCBKcomplete v 1.09

Fancy facebook-like dynamic inputs with auto complete & pre added values.



Check out the demo

10. Design Flavr (Smooth Slideshow)

DesignFlavr, known for their great sources of design inspiration, put together a simple fadeIn / fadeOut slide show to showcase their featured artwork and corresponding descriptions.

• 10.1 Form Auto-completion

How To » s3Slider

s3Slider is a free plugin built in jQuery for cross-fading slideshow.



Check out the demo

  

Employees need to access their email from wherever they happen to be – on the road, at customer sites, remote offices, and at home. WebMail clients allows receiving and sending email messages using POP3 and SMTP protocols through both local and remote mail servers. Providing secure filtering of unsafe content while viewing HTML-formatted email messages. WebMail clients can operate under different popular web platforms (PHP, ASP.NET, ruby on rails, java).

Today i wanted to share with you 10 AJAX-based & PHP webmail client that delivers the look and feel, usability and performance of a desktop application. Some of the webmail clients listed below are open source code that can be easily modified to better suit user’s needs, while others are not. So You must check their license to know the rules.

1. RoundCube

RoundCube Webmail is a browser-based multilingual IMAP client with an application-like user interface. It provides full functionality you expect from an e-mail client, including MIME support, address book, folder manipulation, message searching and spell checking. RoundCube Webmail is written in PHP and requires a MySQL or Postgres database. The user interface is fully skinnable using XHTML and CSS 2.

2. Zimbra

Zimbra provides open source email and calendar groupware software, with a browser-based AJAX client to deliver a rich experience with a message conversation view and visual search builder that makes multi-gigabyte inboxes easier to use. They also integrate 3rd party applications as “mash-ups” via web services so you can view CRM data, maps, or anything else without leaving the context of a message.

3. Xuheki

Xuheki is a fast IMAP client which has a browser-based AJAX client so you can access it from anywhere to read your email. It has most features that you would expect from a fine “Mail User Agent”. Xuheki is distributed under the terms of the GNU General Public License.

4. SquirrelMail

SquirrelMail is a standards-based webmail package written in PHP. It includes built-in pure PHP support for the IMAP and SMTP protocols, and all pages render in pure HTML 4.0 (with no JavaScript required) for maximum compatibility across browsers.

5. Atmail

AtMail, a free lightweight Ajax Webmail client software that is written in PHP that allow end user receive email via web browser and WAP devices. This webmail client software can be installed on variety platform like Windows and Linux. Plus more, it support various email technology like IMAP/POP3 mailboxes, and an optional email-server mode that uses Exim as the MTA.

6. Afterlogic

AfterLogic WebMail Lite PHP is easy-to-use webmail script with modern interface, supports AJAX and skins. Users can receive, view, delete, compose, and send mail through web interface (POP3 and SMTP supported). Multiple attachments, multiple mail accounts and domains, preview panel, web-based administration. Easy installation, supports PHP 4.1 and above. Open source and completely free. Can be upgraded to Pro version with extended features….

Live Demo

7. Hastymail

Hastymail is a full featured IMAP/SMTP client written in PHP. Compatible with PDAs, phones, text browsers, and with all mainstream browsers. Hastymail has a powerful plugin system that PHP developers can use to alter the way it works. Plugins can add pages within the Hastymail application (including css files), alter existing pages by inserting XHTML, modify internal data structures within Hastymail, make AJAX callbacks using their AJAX system, and even communicate with a configured SQL server.

8. Mailr

Mailr is an open source webmail application written in Ruby which uses Ruby On Rails web application framework. The application is tested with Courier-IMAP but it should be possible to use it with any other IMAP server.

9. Claros inTouch

Claros inTouch is an Ajax communication suite with key features such as webmail, address book, post-it notes, calendar (in progress), webdisk (in progress), built-in instant messenger and rss reader. It is the first open source web application which features built in spam protection and instant messaging capabilities together with web 2.0 technologies. Built with Java, utilizes JSP/Servlets with the well known J2EE technologies & uses MySQL database.

10. Postaci

Postaci is a PHP based POP3/IMAP e-mail client that is very simple and easy to use. It supports SMTP authentication. It can handle both protocols and the defaul protocol can be changed from a single configuration file. Postaci is platform independent, it can work on any operating system which supports PHP. Postaci is also database independent, it can be used with MySQL, mSQL, Microsoft SQL, Sybase,
PostgreSQL.

  

Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.

Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.

Today we wanted to share with you some great steps to get the perfect form: we will go through designing and usability you need to keep in mind, styling your form, spicing it up with some nice javascript effects, validating user’s input and finally getting it to work using PHP and Ajax.

1. Designing & Planning out your Form

Fancy Form Design Using CSS

A very useful CSS tutorial for making fancy forms with good usability.

Web Application Form Design

Read these guidelines to help you better position a form for your specific purpose, the combination of layout, visual elements, and content that’s right for you should still be verified through user testing or data analysis (completion rates, errors, etc.).

Web Form Design Patterns: Sign-Up Forms

A very interesting analysis of 100 popular web-sites where web-forms (should) matter. The second part of this analysis can be found here.

Sensible Forms: A Form Usability Checklist

Follow these guidelines, and you’ll be off to a good start for creating sensible forms by using a form usability checklist.

2. Styling Beautiful Forms

How to create perfect form markup and style it with CSS

This post will explain different choices when marking up the forms, and the CSS styling involved in making them cross-browser compatible.

Check out the vertical layout
the horizontal layout

Justify elements using jQuery and CSS

Justify elements using jQuery and CSS by calculating the width of a largest label and apply it to all labels. The jQuery function below does exactly this:

$(document).ready(function() {
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();
    });
    $("label").width(max);
});

CSSG Forms Collection

5 uniquely designed and coded web form styles.

Check out the demo here

FORM elements design using CSS and list (ul and dl)

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. This post will explain another way to design FORM using list elements <ul> and <li>.

XHTML/CSS web forms: 5 simple techniques

This post explains 5 simple techniques for creating web forms.

Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

Check out the demo here

2. Spicing up your Form

Changing Form Input Styles on Focus with jQuery

This tutorial will show you how to spice your form up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

Check out the demo here

Form field hints with CSS and JavaScript

This tutorial will show you how to get a nice effect, as you tab through each input field, some helper text appears in box out to the right.

Check out the demo here

Context highlighting using jQuery

Learn how you can easily improve the user experience by highlighting the current context to enable users to focus only on a current action.

Check out the demo here

Improve form usability with auto messages

This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.

STYLING FILE INPUTS WITH CSS AND THE DOM

File inputs (<input type="file" />) are the bane of beautiful form design. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Check out the demo here

Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a sliding login/signup panel for your website using Mootools 1.2.

Check out the demo here

FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

Check out the demo here

Validating Forms

Validation Hints for your form

As someone is typing an in an input field, it would be nice give feedback to the user as they are typing if they have satisfied that field’s validation criteria. This article will explain one way of achieving this effect using JavaScript and CSS.

Form.Check

A mootools script that allows you to validate different form fields before submission, Validation include: On leave a field & On submit the form. The message is displayed over the field, only one tip at once, tips don’t flash on submit if errors remain with the ability to close tips.

fValidator

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. Here’s a brief list of the most important features: Works perfect with iMask as it’s complement, Multiple forms per page supported, Number of verified fields is not limited, Number of filters per field is not limited.

Check out the demo here

Validate

Validate is a mootools form validator script, having the following features: optional onFail function, optional onSuccess function which will overide the form submition, this can be used to validate an ajax form, onBlur validating, shows errors next to item or in a list.

Check out the demo here

PHP & Ajaxifing Forms

ProtoForm

ProtoFormClass is a Prototype class that allows you to very easily validate the forms fields and send data in ajax. Features include: 1) Check required fields (input, textarea, radio, select, checkbox) and validate Email, Date, Telephone number and Url. 2) Send data and show response with Ajax, highlight the form field on focus and on error. 3) Lightweight (only 4KB), unobtrusive and cross-browser (tested on Firefox, Opera, Safari, Internet Explorer 6/7)
4) allows you to validate more form on the same page.

Check out the demo here

Submit A Form Without Page Refresh using jQuery

In this tutorial you will learn how to submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background).

Check out the demo here

LightForm ::: Free Ajax/PHP Contact Form

LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.

Check out the demo here

Autosuggest / Autocomplete with Ajax

The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar).

Check out the demo here