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

In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do even more. Pretty soon the main use of tables was no longer tabular data, it was used as a handy and quick way to control the layout of a complicated web page. Yes, we loved it even more.

But that is were the love story ends and its bad rep begins.Using the table element for web layouts proved to be hard to modify, obtrusive and, more importantly, it caused major accessibility and usabilty problems. Thankfully, CSS came to the rescue, and HTML tables were duly dumped on the web design scrap heap. Tables were finally relegated to the position it was originally introduced for: Presenting tabular data.

Out of the box the tables are very, very bland, reasonably hard to style, its very difficult to display complex data effectively and you are limited to its basic functionality. This is were jQuery comes in, the every day web design super-hero.

In this article we present a collection of jQuery plugins and tutorials to help you get more out of your HTML tables. With the seemingly endless power of jQuery you can sort columns horizontally or vertically, have a fixed header, search the contents, paginate a large table, drag and drop multiple columns or even a plugin to make your table scrollable. You will find them all below accompanied by a quality selection of tutorials that will help you take things further.

It’s time to follow in love with HTML tables all over again!

jQuery Table Plugins

Flexigrid – Web 2.0 Javscript Grid for jQuery
Flexigrid is a lightweight but feature rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.
Similar in concept with the Ext Grid but built using jQuery, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Chromatable JQuery Plugin
Chromatable is plugin that allows a large and detailed HTML table to have a fixed header, meaning that when the user scrolls down, the header follows them and stays in a fixed position.

Ingrid, the jQuery Datagrid
Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your HTML tables.
Ingrid Demo.

JQTreeTable
With the JQTreeTable plugin you can easily set which column from a HTML table to take the treeview effect, as well as setting which parents are initially collapasabile.
You have a highlight option can be set so that the rows change colour on hover, there is also dynamic striping of the rows, and there is also a state variable, which sets whether to keep the collapsed or expanded state.

Scrollable HTML table
The Scrollable HTML table jQuery code can be used to convert ordinary HTML tables in into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, then you include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table. Nice and easy.
Scrollable HTML table Demo

KeyTable
KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. It allows you to adopt Excel like cell navigation and it gives you features such as editing of a table without requiring a mouse.
You simply navigate to the cell you wish to edit and hit return.

graphTable
The graphTable plugin lets you take a simple HTML table and turn the data in it into a graph using flot.

graphTable Demo

DataTables
The DataTables plugin is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Features include: Variable length pagination, on-the-fly filtering, ulti-column sorting with data type detection, smart handling of column widths, display data from almost any data source and much more.

jqGrid Plugin
jqGrid is an Ajax-enabled jQuery plugin that offers solutions for representing and manipulating tabular data. Since the grid is a client-side solution, loading data dynamically through Ajax callbacks can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.
jqGrid Demos

Visualize: Accessible Charts & Graphs from Table Elements
Visualize is a plugin that can scrape data from an HTML table and generate charts using the HTML 5 Canvas element. This plugin is particularly useful because the data for the visualization already exists in the page in a structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

Grider
Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features: It can make simple operations defined in the headers, add a row count to the table, summaries for average (avg), sum (sum), maximum (max) and minimum (min) and also works nicely with Ruby on rails nested forms.

Adding Functionality to Tables

Table Drag and Drop
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Table Pagination
TablePagination is a plugin so that you can auto add a pagination element to the bottom of a HTML table with a variety of settings to customize the elements.

tableRowCheckboxToggle
tableRowCheckboxToggle generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or CSS classes in the script.

BS Table Crosshair Plugin
The BS Table Crosshair Plugin automatically highlights the cell that you hover over giving a 'crosshair' effect by simply assigning an ID to the table.

jqtable2csv
This small plugin provides conversion from a HTML table to a CSV string. There are two parameter only: callback and delimiter.
The delimiter parameter provides which column delimiter should be used in the csv string and the callback parameter(a callback function) contains one argument which is the csv string so you can do anything you want with the generated string.

Colorize
Colorize is a jQuery plugin that can add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column upon hover. You can colorize as many table rows or columns as you want. A repeat mouse click will revert the row/column to the original background color.

jExpand
jExpand is an ultra lightweight plugin that will make your tables expandable. Very useful for business apps, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

columnHover
columnHover is a plugin that highlights the entire column in a table while hovering over them and it even supports colspans and rowspans.

HeatColor
HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a "heat" color based on its derived value's position within the range.
You can bind a collection of elements such as table rows, divs or list members to Heatcolor and let it do the work.

Fixed Header Table
This is yet another jQuery plugin to provide fixed headers for tables. It differs from the othere in that it does not require any odd html table semantics. It just needs a TABLE tag with THEAD and TBODY to work its magic.

Table Search & Filtering Plugins

tableFilter
This is not the most powerful plugin you could find nor does it offer much configurability, what it does it give is an easy to install simple and basic table filtering feature.

uiTableFilter
uiTableFilter is a small plugin for filtering (hiding) table rows based on their text contents.

Tablesorter 2.0
tablesorter is a plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without having to refresh the page. It can successfully parse and sort many types of data including linked data in a cell and even has support for multi-column sorting.

PicNet Table Filter
This jQuery plugin adds real time Google-like column filtering capabilities to a regular HTML table.
Currently the picnet.table.filter.js only supports two kinds of filters. The first and default is 'text' which just produces a text box for context sensitive text matches. The second is 'ddl', this produces a drop down list that allows the selection of a single item within that list.

jQuery tinysort
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

LiveFilter 1.1
LiveFilter is a very lightweight plugin that will filter either an ordered or unordered list and display only the results that match the supplied string. It is well documented and designed in a way in which it is very easy to understand for designers to use and install.

jQtablesearch
jQtablesearch is a plugin for filtering large data sets with user input by searching through tables, lists, etc, very very quickly.

Quicksearch
This is a jQuery plugin that adds a simple search widget in a HTML table element.

jQuery Live Editing

TableEditor – Flexible in place editing of TableSorter
The TableEditor plugin provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

jGridEditor
This jQuery plugin allow you to add on-the-fly cell editing functionality in your HTML table.
You may configure it to perform AJAX queries and to return dynamic content or error messages.

jQuery Table Tutorials

jQuery Table Manipulation
This tutorial covers one of the most common tasks performed with tabular data and that is sorting. In a large table, being able to rearrange the information that you're looking for is invaluable. Unfortunately, this helpful operation is one of the trickiest to put into action, this tut will show you how.

Drag, drop and sort table rows with jQuery
This tutorial shows you how to add controls to a table that when clicked can move a table row (TR element), up and down within a table.

Displaying and sorting/paging tabular data using the JQuery tablesorter plugin, and query objects
One of the more repetitive tasks a server side developer encounters is displaying the results from a query. This is traditionally in the format of a table that displays the rows of data, along with any other functionality, such as paging controls and sortable headers. This detailed tutorial into using the excellent TableSorter Plugin.

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table
On Crazy Egg's pricing table when you click on "Sign Up" for an option, that plan's column highlights, the other plans vanish, and a signup form takes their place – There is a number of impressive things happening within this small area. Using CSS, jQuery, and images in clever ways, this thorough tutorial will show you how to recreate these tabular effects.

Click Table Row to Trigger a Checkbox Click
This tutorial explains how to toggle a checkbox within a table row when the user clicks anywhere within the row.
This technique can be implemented with other elements as well, such as clicking on a containing element to trigger the click of an element inside it.

Table Striping Made Easy
The concept of this tutorial is to create stripes on a table and then have the background of each row change color when your cursor rolls over.

Using jQuery To Manipulate and Filter Data
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, you will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Resourceful Reading

• Web Usability – Accessible Data Tables
• Ultimate guide to table UI patterns
• Bring on the tables from 456 Berea Street
• Techniques for Accessible HTML Tables

  

It’s time for more JavaScript and jQuery goodies here on Noupe. Today we are featuring fresh JavaScript Development Frameworks, code optimization and minimization tools, reference tables, compatibility issues, common coding errors, image manipulation techniques and graph solutions. Please feel free to submit further resources in the comments to this post!

JavaScript Development Frameworks

php.js
php.js is an open source project that brings high-level PHP functions to low-level JavaScript platforms such as webbrowsers, AIR, V8 and rhino.

jai – javascript audio interface
J.A.I. or “Javascript Audio Interface” is the world’s first javascript interface for web <audio>. JAI uses no images for it’s player interface, all the graphics are rendered to a <canvas> element at run-time. The click-able play-list area is a list of links that are style using CSS. JAI is designed to provide juke-box functionality to <audio> enabled browsers that use the Ogg Vorbis audio codec. JAI is open-source. Feel free to download, modify and use the code in your own projects.

jQuery.sheet – Visual Interop Development
jQuery.sheet gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with MS Excel style calculations.

JavaScript Frameworks Playground: jsFiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

BaseJS: A Mobile (Safari) Javascript Framework
BaseJS is lightweight (less than 8KB when minified), fully-compatible with Mobile Safari, falls back on Sizzle selector library for iPhone 1.x (when query selector support is unavailable), is object-oriented and easy to extend.

SproutCore
JavaScript HTML 5 Application Framework. Create fast, native-style applications in any modern web browser without plugins.

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.

JavaScript Code Optimization and Minimization Tools

Writing Efficient JavaScript
The title speaks for itself: here is an interesting slideshow analyzing what makes JavaScript slow and offering solutions.

Closure Compiler
The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

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.

jQuery Code Does not have to be Ugly
Resolve problems with nesting curly braces and parenthesis.

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

Javascript, CSS, and (X)HTML entities in numeric order
Below are the entities listed in numeric order with definition and ISO numeric code. CSS ‘content’ does not accept named entities or regular numeric entities such as @, but does render ASCII text and unicode.

Common Errors To Know And Compability Issues

Top 10 Things that JavaScript Got Wrong
JavaScript, if only by default, is one of the most popular programming languages available. Over the years, it’s been labeled as a nightmare to work with, and, to some extent, this is true! However, more often than not, what people mean to say is that the DOM API is a nightmare. Nevertheless, there are a handful of flat-out errors in the language.

Javascript – Event compatibility tables
Quick overview of events browser compatibility, assuming that you know the three event registration models (traditional, W3C and Microsoft) as well as event bubbling and capturing. Most of the time is spent on the cross-browser events; the links in the first compatibility table lead to even more compatibility tables with detailed information about these events. Basic browser support for the Microsoft and W3C events is merely tested, without delving too deeply into the details.

How to Plan for the Absence of JavaScript
Though the methods used to gather website traffic statistics call into question the validity of the stats themselves, the fact is that some of your website’s visitors will have JavaScript disabled. You could divide your traffic sources into four broad categories: Search engines, mobile visitors, visitors using screen readers and visitors who have JavaScript turned off. When planning your information architecture and design, you must figure out how to deal with these special groups. Here is assembled a few recent real-world scenarios to find clarity on the issue.

Image Manipulation

Lazy Load Plugin for jQuery
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) won’t be loaded before user scrolls to them. This is opposite of image preloading.

Spacegallery – jQuery plugin
Create Beautiful jQuery Gallery in a sec! Visually. No coding. Free

GalleryView: A jQuery Content Gallery Plugin
GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Graphs

17 Javascript Animation Frameworks Worth Checking Out
Here are some examples of Javascript animation frameworks that are really worth checking out.

Chrome Experiments
These experiments were created by designers and programmers from around the world using the latest open standards, including HTML5, Canvas, SVG, and more. Their work is making the web faster, more fun, and more open – the same spirit in which we built Google Chrome.

boingPic – a javascript experiment
This is a simple experiment using javascript and jQuery which allows you to make an image of your choice all boingy!

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post is showcased to you an array of experiments that will surely blows your mind off. Most of the following runs best in Chrome or Safari

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.

Building an interactive map with jQuery instead of Flash
To make the map as engaging as possible, there needed to be smooth animations and crisp graphics. Traditionally such a project would require the use of Flash. We try to avoid Flash whenever possible, so we began to consider how the project could be accomplished in jQuery.

AnythingZoomer jQuery Plugin
You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.

Scripts for Adobe Illustrator CS (JavaScript)
This archive includes many sample scripts (not well commented yet confused) tested with Adobe Illustrator CS3 13.0.3, Windows XP SP2 (Japanese version).

Google Chart Tools
The Google Chart Tools enable adding live charts to any web page.

  

Networking has certainly become important to our daily life. Whether light-hearted interaction with friends or communicating with business clients the world over, socializing is integral to our personal and professional relationships. Facebook has gotten most of the buzz in the past few years, allowing members to easily stay connected with friends, family members and business associates.

Adding friends, sending messages, chatting, joining causes and networks for your institution or workplace, you can do it all here. Here, we’ll introduce you to 20 scripts that are typical for the Facebook user experience. Web designers and developers who want to integrate Facebook-like features into their websites and applications are in for a treat.

1. Post-To-Wall Application Using jQuery and PHP

A lot of information is made available on Facebook’s wall message board, including message content, users, senders, comments, dates, times and other relevant details. Though this may seem like complicated work, this tutorial by Antonio of woork.blogspot.com makes it easy for you to implement a similar post-to-wall feature on your own website. Use the few lines of Javascript and PHP code from the tutorial and watch your website flourish like never before. To make it easy for beginners, the tutorial deals with only one piece of information on the wall: the message content.

2. Lightbox

A lot of lightboxes are out there, but why not make the perfect one, like the one on Facebook? This great lightbox script was created by famspam. Writing code for even routine tasks can be cumbersome. But with the simplicity of JQuery, you can have a lightweight Facebook-style lightbox for your website. Capable of displaying DIVs, images and even entire remote pages, the lightbox creates pop-ups that are visually appealing and easy to use. You can get started here.

3. Auto-Suggest Search With jQuery

Automatically suggesting potential search results based on just a few letters entered by the user, this Facebook-style auto-suggest search engine is a true time- and effort-saver for users and enhances their experience of the website. For example, typing the letters “Fra” could bring up “France” or the user’s friend “Frank” as suggestions. This stylish search engine makes use of BSN Autosuggest libs and employs jQuery for the AJAX framework. Some of the features of this Facebook-style search are:

• AJAX and auto-suggest support;
• Renders support for search plug-ins;
• Provides support across different browsers (Firefox, IE 5.5 and above, Opera, Safari);
• Supports cache.

Download this Facebook-inspired auto-suggest search feature here.

4. Modal Box Using MooTools

Stylish, lightweight and subtle, Facebook’s modal box is the best and most coveted of all current modal boxes. This JavaScript creates modal dialogues and wizards — i.e. dialogue sequences — without resorting to conventional page reloads and pop-ups. These are also sometimes used to display large versions of small images. The tutorial here takes the CSS and imagery from Facebook and combines it with the amazing functionality of MooTools in order to create the Facebook effect.

5. Elastic Plug-In

A major hit on Facebook, this jQuery plug-in is now counted among the most functional UI effects on the Internet. This elastic plug-in automatically shrinks or expands text areas according to the amount of text inputted by the user. The weight of this plug-in is what gives it its edge over competitors. Now, you can recreate this impressive Facebook-style effect of an elastic text area by simply following this tutorial.

6.Tipsy Plug-In

Wondering how to make a relevant tooltip pop up as users move their cursor over the title attribute of an anchored tag? Facebook provides inspiration for this jQuery plug-in, and you can implement this cool tipsy plug-in on your own website now. Aside from being a neat trick, the plug-in is easy to configure and lightweight. Read the tutorial to learn how to incorporate the Tipsy plug-in on your website.

7. Activity Stream

This innovative plug-in for Movable Type 4.1 allows you to share, control and aggregate all of your activities around the Internet, along with several of your profiles from different services. The plug-in emulates the Facebook streams that adorn your wall. So, if you have a Movable Type blog and wish to exercise complete control of your activities on the ‘net, including showing or hiding certain activities, this tutorial on Facebook-like activity streams is sure to be a great help. To keep you from being locks in to any particular service, this plug-in can also publish your stream with the hAtom microformat and Atom.

8. Icons

Chatting with friends online is fun, but words are sometimes not enough to convey our feelings. Icons come in handy because they’re a cute, simple way to express emotion. Of course, saying “I love you” has a powerful effect, but an icon of a little heart pumping is so much more stylish. Facebook icons are a hit among users, and you can download 28 of them here, for free. They are available in SVG and high-resolution PNG format.

9. Sliders Using CSS And MooTools

Website developers are constantly looking out for great ideas with which to enhance their websites. The slider controls on Facebook have caught the eye of many professionals. To implement similar-looking sliders for your project, read the tutorial here. It explains how to create them and how to control the height, width and opacity of images. The credit for this easy three-slider tutorial goes to David Walsh, a successful Web developer in his own right. Hats off!

10. JBolo

Having to switch between two websites every few seconds — or even few minutes — can be annoying: for example, to chat with a friend on Gmail and browse photos on Facebook. With that in mind, Facebook took social networking to the next level when it integrated chat functionality. And now you can integrate a similar feature on your Joomla website using this tutorial. The distinctive name of this application is taken from the Hindi word “bolo,” which means to talk. So, get to work and let your visitors start talking!

11. Boxy

Styled like the dialogue box on Facebook, this flexible box supports size tweening and dragging. What distinguishes Boxy from several other overlays is the availability of an object interface to control dialogues after creating them. To make usage even simpler, it also provides you with a jQuery plugin that allows you to include forms and links automatically, along with the “Ask helper” to present the user with an array of choices. Read the tutorial to implement the Boxy dialogue box on your website.

12. Gmail- And Facebook-Style jQuery Chat

Everyone loves Facebook’s chat module. And this jQuery module lets you seamlessly integrate Gmail- and Facebook-style chat into your website. This chat script has many features, such as keeping chat boxes open and preserving a box’s state (and data) even when the page has been refreshed, just like on Facebook. Also, this chat is extremely simple to integrate. Learn more about this Facebook-style jQuery chat.

13. Alert Confirmation Box Using CSS And jQuery

It happens often enough that while performing a particular action, we lose focus and mess up the task. Alert confirmation boxes can be a great help here. In asking for your confirmation of an action, the box makes you think through your request before finalizing it. For instance, to remove a friend from your friend’s list on Facebook, you need to click on the “X” button, which brings up an alert confirmation box asking you, “Are you sure you want to delete so-and-so from your list?” You are given the option of “Yes” or “No,” which finalizes the action. Alert boxes can help visitors to your website complete important actions, such as deleting items from a shopping cart. This tutorial shows you how to make an alert confirmation box like the one seen on Facebook.

14. AJAX Pagination Using jQuery

Designing Facebook-style pagination to break up a long list of search results into several pages is no longer a difficult task. Though page numbers are not displayed at the top of Facebook, you are given the option at the end of the page to see more results. To create a similarly subtle yet helpful feature on your website, go through the tutorial here.

15. Cometchat

This is the best script for inline chat similar to the kind seen on Facebook. Get the script to give your visitors a chat environment to interact in while they browse your website. They can also update their status, like “Available,” “Busy,” etc. Facebook-style AJAXification ensures the feature does not reload every time a visitor clicks to another page. Hash URLs and notifications in the footer are some of the other features integrated in Cometchat.

16. Image Cropping

The crop tool hides unseemly parts of a photograph and brings focus to the subject. Facebook introduced such a tool that members can easily use before uploading and sharing their pictures. To achieve this nifty combination of Javascript and PHP, check out this amazing tutorial.

17. Input Box

Integrated with the auto-complete function, the input box on Facebook allows you to search for and send messages to your friends. To include a flexible Facebook-inspired input box for your website, just grab this MooTools 1.2-compatible script and get started.

18. Chat Room And Instant Messenger

Does the instant messenger and chat room on Facebook make you green with envy? Give your website the same with this Joomla module. Visitors can sign in to the messenger with their Facebook ID and password and use their friends list from Facebook. It really is as simple as that.

19. vBStatus (Status Display)

Isn’t it great that you can share what’s on your mind with all your friends in an instant, and vice versa. These status updates are one of the main features of Facebook. And below them is room for your friends’ comments and a option to “Like” your status. This feature is referred to as “vBStatus,” and you can include the same on your website by downloading it here. Users will have the flexibility to quickly change their status whenever they want using AJAX.

20. Facebox

Facebox is lightbox script that gives you the look of Facebook pop-up message windows. It can contain images, Flash movies, HTML and more. Facebox is a MooTools alternative to the original Facebox jQuery script. Read more about Facebox here.

(al)

  

Web designers are a special breed – we’re one of a small group of professionals that actively seeks out to improve ourselves and our craft through any means possible. This generally means on our own, from each other, and through an awful lot of ‘guess, test and revise.’ Web design isn’t for the faint of heart or those with any fear of failure.

The most daunting ‘learning experience’ for developing developers is to make the jump from the HTMLs and the CSSs of the world to web scripting. It looks good from the outside – all that added interactivity and animation and cool effects and features – oh my. But for some designers, it proves to be a difficult lesson to learn, as scripting can require more focus, logic, and organization than the coding that you are used to.

Getting on Your Feet Fast

Let’s take a look at bulletproof ways to ease into Javascript at an accelerated pace. Javascript is the perfect place to start to learn scripting because it is generally less complex than other scripting languages, and is client-side – meaning that you will be able to test your scripts on your computer as you script it, in real time, without setting up servers or putting forth any more effort than you really need to. However you code pages now is great – don’t do anything differently to accommodate Javascript – she’s easy to get along with.

The first place I start when looking to learn anything new is on the web – makes sense to learn the web from the web, right? Yeah, books are nice, and they can make you look intelligent, but the truth of the matter is that you’ll find most (if not all) of that same information out on the web, and, out on the web, you can find the most updated tutorials. If books suit you, there are a plethora of books out there on Javascript – feel free to help yourself to any of them.

Websites That Teach Javascript

Something to remember about Javascript websites as you scour the web for help – there are essentially two types of Javascript websites; those that are focused on scripts, and those that are focused on teaching Javascript. I say this because I’ve worked with a lot of students that have stumbled across script websites, started reading scripts on those pages as if they were tutorials and then got confused and discouraged when they couldn’t follow the code – this would be akin to trying to read Braille by shouting at it.

Javascript learning sites spend more time on simple logic and processes. Stuff you will never really do on a website (as you’ll see below) but it will get you into the scripting mindset and help you ease into the building blocks that will creep into every script you work with.

Let’s take a look at two ‘learning’ Javascript sites.

Tizag.com

I don’t know where this site came from or remember how I found it, but I constantly reference Tizag for many of their tutorials. They are straightforward and direct, but move through the topic in a way that makes it easy to understand. Their lessons aren’t too long, giving you just enough to take out and test before returning for the next lesson.

W3schools.com

This site is a step up from the rest in teaching you Javascript (or anything for that matter) and there’s one really simple reason why – they let you try it for yourself right there in the tutorial. A lot of people don’t like learning from books because you can’t try it for yourself; that is unless, of course, you find some ridiculous way to prop the book up against your monitor, so you can read it without holding it open and type all at once, but that’s not very conducive to being able to focus on the script at hand.

About.Com

About.com offers premium advice and tutorials on just about anything for free. It’s pretty much to a multi-information oriented site. Fortunately, here you’ll be able to find a variety of tutorials and workshops focused on begginer to advanced JavaScript users.

Academic Tutorials

The Academic Tutorials site is very similar to the W3 schools learning center. It provides extensive and well organized facts on JavaScript. You will also find yourself with more hands-on experience than you thought, since almost every tutorial has various examples.

Learn-JavaScript-Tutorial.com

This site contains front-line examples and begginer JavaScript experiences for the novice of users. Tutorials showcase several useful scripts and images that aid you in the advancement of your skills as a designer.

Walk Before You Can Run

Let’s try it ourselves! In Javascript, the word ‘document’ refers to the current page. The word ‘write’ allows me to write text on the page. In the majority of cases, your scripts will be included in a script tag – this is how the browser identifies that you’ve switched gears. It’s just like the style tag, but it happens whenever you need javascript (even in the body tag) and uses a type of text/javascript instead of the more familiar text/css. So, if I wanted to build a script to put my name on the screen it would look like this…

document.write(“My name is Matt”);

It’s that simple – as you learn more, you’ll do more impressive things, but, hey, we all have to start somewhere, right? Consider ‘document.write’ like the fast food job you had in high school. It’s probably not something you will impress your friends with, but once you’re an investment banker, you’ll look back on it with nostalgia.

Head out to w3schools.com, get into their Javascript tutorial, and choose the first example – use this and build your first script for yourself! Replace the text with whatever text you want, or add additional ‘document.write’ commands to put more text in your page.

Subtleties of JS

Keep in mind that Javascript is like an oompa loompa in your web factory – its not building the page, its helping you build the code. So, when you put text on the screen, the script you wrote is not putting text directly on the screen… its putting text in the code, and the browser is displaying it as it normally would. Don’t believe me? Try this:

Add a second ‘document.write’ command. You should notice that the two pieces of text follow directly after one another on your webpage.

Now, between the “quotes” where your text is, add HTML tags. Add a paragraph tag on each command. You should have something like this:

document.write("<p>My name is Matt</p>");
document.write("<p>This is my first script</p>");

Because the Javascript will write this directly into the code, you can use things like HTML tags because the browser will be able to interpret and display them!

As you get to more and more complicated topics, the value of being able to code alongside the tutorials on w3schools.com will be invaluable to your ability to learn Javascript fast and feel comfortable doing so.

Put It to Use

The best way to motivate yourself is to see what you could do if you put the time into learning Javascript. While there are a ton of ways to enhance your HTML, I’ve included some tutorials and demos below that will show you how Javascript can play nice with your CSS to create some pretty impressive results, relying a lot on your current skill to help enhance the Javascript you are learning.

Suckerfish Dropdowns

As you learn Javascript, you should know about suckerfish dropdowns. Essentially, these dropdowns use a lightweight combination of both CSS and Javascript to create accessible menus that can be used to add additional links to your navigation.

What’s interesting about this is that the Javascript is literally adding a class to the elements – so, think about it like this – you’ve set up a class that determines a specific look and feel… but Javascript plays the role in ‘invoking’ that class – creative uses of such a trick like this could yield some very interesting results. Here it is being used to apply hover effects to specific elements, but the application of this technique could be limitless.

Switching Stylesheets

You probably already know that you can use alternate style sheets on a page, but didn’t know how to switch them on the fly – Javascript will help you do this. If you had different colored themes that you wanted your users to be able to customize, you could use Javascript to switch between the two. You could even get creative – create a different theme for different times of day (morning, day, night) and display a stylesheet based on the user’s local time.

Improved Current Field Highlighting

This tutorial from CSS-Tricks shows us a way that we can use Javascript to change the way we are highlighting active fields in forms. So, generally, the cursor blinks in that form field, and some browsers have taken it upon themselves to do something a little different, but this tutorial takes a look at how we can use Javascript and jQuery to improve the highlighting with a little style.

JavaScript Folder Collapser for Dynamic Content

This tutorial will show you how to create a group of collapsible folders using JavaScript and some elements of JQuery. The code will be featured in a way that allows for ease of implementation into a dynamic page — in this situation, the number of folders may be unknown.

JavaScript Progress Bar

Within this tutorial you’ll be able to walk through the configuration and structuring of a javascript based progress bar that can be triggered by a variety of things. For example, you could have it triggered by the progress of a sign-up sheet, or even by the amount of checkboxes that are checked.

Password Verification and Strength Checker

This tutorial will aid you in creating a registration form that includes a password strength checker to tell the user how strong (security wise) their password is. This form will also include several boxes for password use and other vital information.

The End of Our Road – Javascript Frameworks

jQuery is what is called a ‘Framework’. Frameworks contain sets of pre-written controls which make it easier and more efficient for you to develop your scripts. Instead of rewriting the same basic scripts over and over, or managing your own library, javascript frameworks such as jQuery, prototype, script.aculo.us, mootools, and others exist to save you the time. In most cases, these frameworks are extended in ways that add more functionality.

Unfortunately, a complete discussion on Javascript frameworks comparing the functions included in each is a discussion for another time, but its something to know is out there.

Check it out for Yourself: jQuery for Designers

And the Best Way of All to Learn Javascript…

Go do it. No really, go do it.

  

When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty smart results using the <form> tag. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.

The post below is made up of 10 smart and intelligent ways of using <form> elements to produce some neat effects, components and plugins, they are all of the highest quality and more or less easy to configure. Give them a try.

1. Creating a Dynamic Poll with jQuery and PHP

In this tutorial you will learn how to create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

<div id="poll-container">
    <h3>Poll</h3>
    <form id='poll' action="poll.php" method="post" accept-charset="utf-8">
        <p>Pick your favorite Javascript framework:</p>
        <p><input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'>&nbsp;jQuery</label><br />
        <input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'>&nbsp;Ext JS</label><br />
        <input type="radio" name="poll" value="opt6" id="opt6" /><label for='opt6'>&nbsp;mootools</label><br /><br />
        <input type="submit" value="Vote &rarr;" /></p>
    </form>
</div>

This form will be processed by the PHP for now, and when we get the Javascript running, by jQuery. The PHP and Javascript are designed to pull the option ID from the value tag.

Check out the demo

2. FancyUpload – Swiff meets Ajax (v3.0)

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all.

<form action="../script.php" method="post" enctype="multipart/form-data" id="form-demo">
 	<fieldset id="demo-fallback">
		<legend>File Upload</legend>
		<p>
			This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
			If this part is not changed, something must be wrong with your code.
		</p>
		<label for="demo-photoupload">
			Upload a Photo:
			<input type="file" name="Filedata" />
		</label>
	</fieldset>

Check out the demo

3. Fancy Capatcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from boys and spammers in a new, intuitive way of completing “verify humanity” tasks. In order to do that users are asked to drag and drop specified item into a circle.

The code calls captcha.php file and gets a random number. Php file just generates simple number and put it in session. When AJAX got that number it creates items based on that number. Lets imagine that we have array of “pencil”, “scissors”, “clock”, “heart”, “note”, so if number 3 is returned it will take “heart” and look for item-heart.png file in /imgs directory.

Check out the demo

4. TextboxList

TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.

Check out the demo

5. jQuery UI Slider from a Select Element

The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.

Check out the demo

6. jQuery Password Strength Meter

Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.

Check out the demo

7. jQuery Keypad

A jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entry or adds an inline keypad in a division or span. It can display the letters/numbers randomized which is a very effective security solution against key loggers.

Check out the demo

8. jquery.timepickr

jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible. Using it is so simple, you just need to call the timepickr function with the id of the form.

$(function(){
    $('#test-1').timepickr({
        handle: '#trigger-test'
        convention: 12 });
});

Check out the demo

9. Spellify

Spellify is a script.aculo.us based spell checker, for form fields that utilizes Google as its spell check engine. PHP 4+ with CURL library installed, script.aculo.us and Prototype JavaScript Framework.

Check out the demo

10. Create a shoutbox using PHP and AJAX

Learn how to create a dynamic ajax based shoutbox with jQuery from scratch. It will be very interesting to know how to use the ajax function of jQuery and how it can be used to insert and recover data from a MySQL database via PHP in a way asynchronous.

Check out the demo