CashRevelations » AJAX http://cashrevelations.com/magazine Webmaster Tools & Marketing Resources Sun, 15 Apr 2012 13:20:34 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 60 Effective JavaScript Tools http://cashrevelations.com/magazine/2010/04/effective-javascript-tools/ http://cashrevelations.com/magazine/2010/04/effective-javascript-tools/#comments Thu, 22 Apr 2010 11:38:30 +0000 Tommy Olovsson http://cashrevelations.com/magazine/?p=5680 Clean AJAX - Ajax engine

A correct and qualified set of development tools will save you from many tedious and time consuming tasks. And why make your work more difficult, when there are tools to achieve your goals so much easier and less painful? Below you find some JavaScript tools that will make your work faster and more effective – something your customers will appreciate.

Many of the tools in this list require a Firefox browser. If you by some reason don’t have it installed it on your computer, you can download the Firefox Browser right HERE.

In this article Cashrevelations.com presents 60 effective and useful JavaScript Tools to help you with your development process and save you a lot of time.

LIST CONTENT

This article is an update from our earlier article 40 JavaScript Tools, with some additions. We have divided the tools into groups only to make it easier to search through the list – these groups do not represent any absolute classification of the tools.

AJAX And JavaScript Authoring Tools

WaveMaker - Development Platform

1. JQuery UI – ThemeRoller
jQuery UI is jQuery’s user interface library – jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design.

2. Jx – JavaScript Library
JxLib is a JavaScript library for creating graphical user interfaces based on the MooTools library. The site provides access to the library as well as documentation and examples.

3. Script# – AJAX And JavaScript Authoring Tool
Script# is a tool that enables developers to author C# source code and subsequently compile it into regular script that works across all modern browsers.

4. Aptana Jaxer – The JavaScript Server
Aptana Jaxer allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create server-side-powered Web applications. You have the option of either installing Jaxer as a standalone web server on your computer, or using the Jaxer server that is automatically bundled with Aptana Studio.

5. Qooxdoo – Framework
Qooxdoo is a framework for creating rich internet applications (RIAs). It includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer.

6. WaveMaker – Development Platform
WaveMaker (formerly ActiveGrid) is an open source software development platform that automates much of the process for creating Java web and cloud applications.

7. Komodo Edit – Free Open Source Dynamic Languages Editor
Komodo Edit supports PHP, Python, Ruby, Perl and Tcl, plus JavaScript, CSS, HTML and template languages like RHTML, Template-Toolkit, HTML-Smarty and Django.

8. Spket IDE – JavaScript Editor
Spket IDE is a toolkit for JavaScript and XML development. The JavaScript editor provides features like code completion, syntax highlighting and content outline that helps developers productively create JavaScript code. Free for non-commercial use.

9. Aptana Studio
Aptana Studio is a complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plugins created by the community.

10. Clean AJAX
Clean AJAX is an open source, cross-browser Ajax engine, inspired by Java Message Service, that uses messages to control the requests.

11. SproutCore
SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.

Top

JavaScript Toolkits

12. The Dojo Toolkit – Unbeatable JavaScript Tools
Dojo Toolkit is a modular JavaScript library (JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites.

13. Google Web Toolkit – Google Code
Google Web Toolkit (GWT) allows developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language. Write your AJAX front-end in the Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.

14. JavaScripTools
JavaScripTools is a set of JavaScript components, functions and classes to make the web developer’s life easier. Most modern browsers, like Firefox, Internet Explorer, Opera and Konqueror are supported.

15. JSX Toolkit – Javascript Toolkit
JSX is unlike other JavaScript toolkits by providing core OO functionality rather than web enhancements. JSX makes your code cleaner and empowers true OO JavaScript applets.

Top

JavaScript Debugging And Testing Tools

NitobiBug - Browser Based Debugger

Browser Based Debugging Tools

16. Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

17. Firebug Lite
Firebug Lite – a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named “Firefox”. Firebug Lite creates the variable “firebug” and doesn’t affect or interfere with HTML elements that aren’t created by itself.

18. Venkman JavaScript Debugger
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.

19. NitobiBug – Browser Based Debugger
It’s a browser-based JavaScript object logger and inspection tool (similar to Firebug). NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications.

20. Opera Dragonfly
Opera Dragonfly is a cross device, cross platform debugging environment for the Opera browser-debug JavaScript, inspect and edit CSS and the DOM, and view any errors on your mobile or computer.

21. DebugBar – IE Extension For Web Developers
View DOM Tree and modify tags attributes and CSS attributes on the fly to test your page, view JavaScript functions for easier debugging, CSS inspector and more.

22. CJS – Companion.JS JavaScript Debugger
CJS is a Javascript debugger for Internet Explorer. Detailed JavaScript error reporting (call stack and real file name where the error occurred) and “Firebug”-like Console API feature.

23. JSDT – Javascript Debug Toolkit
JSDT is a software that can debug JavaScript in IE, Firefox, Safari, Chrome, Opera, mobile IE browser and mobile Opera browser. It works in all browsers that support Ajax.

Top

Online Debugging Tools

24. JS Bin – Collaborative JavaScript Debugging
A web-application specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. Allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code – new tabs doesn’t) – once you’re happy you can save.

25. JSON Formatter And Validator
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.

26. Pastebin – Collaborative Debugging Tool
Pastebin is a collaborative debugging tool allowing you to share and modify code snippets while chatting on IRC, IM or a message board.

27. DamnIT – A Free JavaScript Error Reporting Service
DamnIT makes it simple for beta testers to provide useful feedback by prompting them after an error occurs and combining their response with error message, file, line number, and back-trace information. You’ll receive detailed automated error information.

Top

JavaScript Testing

28. QUnit – JavaScript Test Suite
QUnit is an easy-to-use JavaScript test suite. It’s used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code.

29. YUI Test – Testing Framework
YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions.

30. JSLint – The JavaScript Code Quality Tool
An online JavaScript program that looks for problems in JavaScript programs. JSLint takes a JavaScript source and scans it – if it finds a problem, it returns a message describing the problem and an approximate location within the source.

31. FireUnit – JavaScript Unit Testing Extension
FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug. FireUnit is a Firefox/Firebug extension.

32. SugarTest – JavaScript Testing
Makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.

33. JSpec – JavaScript Testing Framework
JSpec is an extremely small, yet powerful testing framework. Helpful shorthand literals, a very intuitive/readable syntax, as well as not polluting core object prototypes.

34. Blue Ridge – JavaScript Testing Framework
The Plugin adds support for command-line and in-browser JS unit tests to your Rails app. It bundles several great tools together in a convention-over-configuration, Rails-like way.

Top

Documentation And Code Optimization

JavaScript Compressor - Online Javascript Compressor

JavaScript Compressors

35. Javascript Compressor
This handy online tool, based on an algorithm by Dean Edwards, compresses and obfuscates Javascript code. Files are usually compressed between 50-70 percentage.

36. YUI Compressor
The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Also able to compress CSS files.

37. Packer – JavaScript Compressor
One of the most widely used tools to minify JavaScript code is Dean Edwards’ Packer. The packing algorithm is forgiving of all forms of JavaScript with one exception. You must correctly terminate all JavaScript statements with semi-colons.

38. JS Minifier
JS Minifier is a web based tool for shrinking by removing comments and unnecessary whitespace from your JavaScript code to make it as lightweight as possible.

39. The JavaScript CompressorRater
With this online tool by Arthur Blake you can get compression statistics for a variety of popular compressors – helps you to determinate which JavaScript compressor is the best.

Top

HTTP Monitoring

40. Live HTTP Headers
With this Open Source tool (Firefox plugin) from Mozilla you can view HTTP headers of a page while you are browsing. Compatible with Firefox 3.6 and Seamonkey 2.0.

41. Tamperdata – Firefox Extension
View and modify HTTP/HTTPS headers and post parameters, trace and time http response/requests and security test web applications by modifying POST parameters.

42. Fiddler
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data.

Top

JavaScript Documentation Tools

43. jGrouseDoc
jGrouseDoc allows developers manage and document code comments using a format similar to Javadoc’s. Allows documenting of JavaScript classes, regardless which approach or framework is being used for it – be it Prototype, Dojo, jGrouse or any other.

44. JsDoc Toolkit
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.

45. ExtDoc- JavaScript Comments Processor
ExtJS library has a specific JavaScript documentation style – ExtDoc parses JavaScript source files and creates template-based output. Support for custom tags and fully templated output.

46. Snippely – Text And Code Organizational Tool
Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location.

Top


JavaScript Cheat Sheets

QuicklyCode - Cheat Sheets And Programming Stuff

47. JQuery 1.3 Visual Cheat Sheet
jQuery Visual Cheat Sheet is a practical reference to jQuery 1.3 for web designers and developers. This cheat sheet contains the full jQuery API reference with detailed descriptions and some sample code.

48. jQuery Selectors
Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips.

49. jQuery 1.3 Cheatsheet
This cheat sheet is a quick reference by Oscar Otero to functions and properties in the jQuery 1.3 library.

50. MooTools 1.2 Cheat Sheet
It includes documentation for Core, Native, Class, Element, Utilities and Request.

51. Prototype 1.6.0.2 Cheat Sheet
Prototype cheat sheet released by kangax – a full reference.

52. Dojo 1.3 Base API Cheat Sheet
A cheat sheet designed by Kyle Hayes but with full API generation by phiggins over at #dojo – fully compatible with Dojo 1.3.

53. JavaScript Cheat Sheet
A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.

54. gotAPI – Instant Search In Developer Documentation
Handy quick reference search for JavaScript and HTML (including HTML, CSS, JavaScript, AJAX, Web2.0) and other software/technologies.

55. QuicklyCode – Cheat Sheets And Programming Stuff
This website links you to various cheat sheets and other developer resources to aid you in your programming, including JavaScript and other applications.

Top


Miscellaneous

Processing.js - Open Programming Language

56. JavaScript Regex Generator
User-friendly regex (regular expression) generator that is still in Beta. Currently limited to 7 groups and no support for negating character classes.

57. Processing.js
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.

58. Online JavaScript Beautifier
This beautifier can process your messy or compacted JavaScript, making it all neatly and consistently formatted and readable.

59. Closure Templates
Closure Templates are an easy-to-use template system for Java and JavaScript. Closure Templates are used extensively in Google apps, including Gmail and Google Docs.

60. HTML To JavaScript Convertor
The online HTML to JavaScript convertor takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.

61. Glimmer – JQuery Interactive Design Tool
Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios.

62. Jsfuzzer -Browser Based JavaScript Fuzzer
This fuzzing tool allows fuzzing of events, tags, styles and HTML attributes. You can use incomplete tags with various depth and randomize case of all parameters. It also contains a database of all new attack vectors gathered.

63. JavaScript Tools Guide – PDF By Adobe Systems
This document provides information about the JavaScript features, tools, and objects that are common to all Adobe applications that support JavaScript.

Top

The JS resources are not in any particular order and as usual you decide what resource fits best for your purposes. Cashrevelations.com is not affiliated with any of the authors.

]]> http://cashrevelations.com/magazine/2010/04/effective-javascript-tools/feed/ 2 150 JavaScript Techniques http://cashrevelations.com/magazine/2010/01/150-javascript-techniques/ http://cashrevelations.com/magazine/2010/01/150-javascript-techniques/#comments Mon, 25 Jan 2010 11:49:36 +0000 Tommy Olovsson http://cashrevelations.com/magazine/?p=4254 Elastic Thumbnail Menu - jQuery and CSS3

On October 26 we published the article 100 Ajax And JavaScript Techniques. This list is basically an update of that collection of JavaScript and Ajax techniques. We noticed that some of the links on the old list were broken, and we began to update the list when the catastrophe suddenly occurred – the list disappeared!!! We managed to recover the list, but on a different URL. One important thing was learned from that: do not touch things that work, and in the future we will make all updates separately. Like we do right now.

Wikipedia: JavaScript is an object-oriented scripting language used to enable programmatic access to objects within the client application and other applications.

Modern web designs require JavaScript and added with moderation JavaScript is an asset for any productive website. Stylish navigation, tool tips, amazing slideshows, interactivity and much more, all that can be achieved with just a little bit of JavaScript code.

Cashrevelations.com presents 150+ JavaScript and Ajax techniques together with demos (where available). All the JS techniques are more or less easy to configure – but, as we wrote before, maybe not the first you should do if you just learned website building.

Wikipedia: Ajax (JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications.

LIST CONTENT

MooTools, jQuery, Prototype and script.aculo.us are among the techniques represented in this list and we have tried to categorize them in a practical and easy searchable way.

Navigation

Mega Drop Down Menus - CSS And jQuery

General Navigation

1. Halftone Navigation Menu – jQuery And CSS3
In this tutorial you will learn how to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
View Demo

2. Elastic Thumbnail Menu – jQuery And CSS
In this tutorial Sam Dunn will learn you how to make an elastic thumbnail menu. The menu magnifies menu items when they are hovered over and the menu items expand upwards.
View Demo

3. Filterable Portfolio with jQuery
In this tutorial, Trevor Davis, a 25 year old front-end developer, will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
View Demo

4. jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter.
View Demo

5. Ext Accordion
The Accordion widget and its InfoPanel are components that use the Ext JS Library. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
View Demo

6. Fresh Content Accordion
A simple, yet very eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.
View Demo

7. Yetii – Yet (E)Another JavaScript Tab Interface
Yetii is a functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.
View Demo

8. Apple Style Menu Improved With jQuery
How to create a similar main navigation like the one of kriesi.at – a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
View Demo

9. Jquery Fade In And Fade Out
A fade in fade out effect – the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
View Demo

10. Mootools Navigation Plugin
The goal of this plugin is to create a complex navigation menu as seamless as possible. All you need to do is create a standard unordered list and the plugin will do the rest.
View Demo

11. Morph Effect On Mouseenter And Mouseleave With Mootools 1.2
In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools – and turn it into something fun to click.
View Demo

12. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

13. Clickable Table Row
If an HTML table row contains only one <a> link, it can be useful to make the entire row clickable and make it activate that link. This tutorial shows how to make the entire row clickable so that clicking anywhere in the row is the same as clicking that link.
View Demo

14. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

15. Accordion And Hover Effects With JQuery
This tutorial video (QuickTime version is 60Mb – flash version is streaming) explains how the accordion and hover effects on Tim Van Damme’s site can be achieved using jQuery.
View Demo

16. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.
View Demo

17. Outside The Box – Navigation
Just about every website uses the regular navigation concepts we’re all used to. After a while this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
View Demo

18. MooTools ScrollSidebar
ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.
View Demo

19. Icons To External Links
A trend going on around on websites is putting icons on links that point to web pages externally. If you want that on your site, this simple script will dynamically take care of that for you with the help of Mootools and some CSS.
View Demo

20. Powerful Product Highlighter With MooTools
This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework – a clever rollover mechanism that works well as a product highlighter.
View Demo

21. Scrolling To The Top And Bottom – jQuery
Scrolling to the Top and Bottom of your website with a simple click with the help of jQuery special scroll events from James Padolsey, and some few extra lines of jQuery.
View Demo

22. Mootools 1.2 cvLinkSelect Class
This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded.
View Demo

Top

Traditional Menus

23. Apple-Style Icon Slide Out Navigation – CSS And jQuery
In this tutorial you will learn how to create an Apple-style navigation menu with a twist – it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element.
View Demo

24. Mega Drop Down Menus – CSS And jQuery
In this tutorial Soh Tanaka will learn you how to make an awesome Mega Drop Down Menu with the help of CSS, jQuery and the Hover Intent jQuery plugin from Cherne.net
View Demo

25. Awesomeness-Filled Navigation Menu
In this tutorial you will learn how to create a navigation menu inspired by Dragon Interactive. CSS sprites can dramatically increase a websites performance and with jQuery you will implement awesome transition effects easily.
View Demo

26. jQuery Context Menu Plug-In
A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.
View Demo

27. Smooth Animated Menu With jQuery
In this tutorial Zach Dunn will teach you how to build a nice jQuery menu with a smooth transition animation effect.
View Demo

28. Fading Menu – Replacing Content
When a menu item is selected, its graphic is shown at full opacity and its corresponding content area is shown, while the other menu items are faded and their content areas hidden. With jQuery, you can fade in the menu item being clicked, fade out all other menu items, display the corresponding content area and hide all the other.
View Demo

29. Fixed Fade Out Menu
This tutorial has the aim to teach you to build a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
View Demo

30. e24TabMenu – Drop down AJAX Menu
e24TabMenu is a plugin written for scriptaculous. In this tutorial Alfredo Artiles teaches you how to make a nice tab menu that expands and collapses smoothly.
View Demo

31. A Different Top Navigation
In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
View Demo

32. SpriteMenu
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. The menu is displayed by manipulating the background-position property to display individual sprites in the image.
View Demo

33. Image Menu
A horizontal menu that reveals more of the image as you rollover it. Features 2 optional onClick events (open and close), href passed to onClick events, stays open when clicked, closes when clicked and selects item to pre-open.
View Demo

34. Proto.Menu – Prototype Based Context Menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. Plays nice with JS turned off and menu styling can be easily defined in external stylesheet.
View Demo

Top

Forms And Tables

Ajax Fancy Captcha - JQuery Plugin

Forms And Auto-Complete

35. Changing Form Input Styles On Focus With jQuery
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.
View Demo

36. 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.
View Demo

37. Incredible Login Form With jQuery
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content.
View Demo

38. Editable – JQuery Editable Plugin
This is a real customizable jQuery editable plugin. Currently it can convert any tag to text input, password, textarea, drop-down list. You can easily extend it by adding your own input type using its editableFactory object.
View Demo

39. Google Suggest Style Filter – AutoComplete Control
Create a Google Suggest-style filter with AutoComplete Control. AjaxControlToolkit’s AutoComplete control can be used with a data grid.
View Demo

40. Autocomplete – JQuery Plugin
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from.
View Demo

41. Auto Complete To Your Google Custom Search Engine
This tutorial will show you how to use the “Popular Queries” feed from your Google Custom Search Engine (CSE) as a data source for a jQuery autocomplete.
View Demo

42. Ajax Fancy Captcha – JQuery Plugin
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.
View Demo

43. Proto! – TextboxList Meets Autocompletion
This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original.
View Demo

Top

Form Validation And Hints

44. FormCheck
FormCheck is a MooTools class that allows you to validate a form by performing different tests before submission – installation tutorial and examples.
View Demo

45. fValidator
fValidator is a free, open-source and unobtrusive JavaScript tool for handling form validation easily.
View Demo

46. Custom Form Elements
This CFE script enhances form elements including radio buttons, checkboxes, file upload, textfield, textarea, images and the select, submit and reset buttons.
View Demo

Top

File Upload

47. FancyUpload – Swiff Meets Ajax
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 and styleable via CSS and XHTML and uses MooTools to work in all modern browsers.
View Demo

48. Uploadify – JQuery File Upload Plugin Script
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
View Demo

49. Multiple File Uploader – Mootools Version
A script that allows you to create a form in which your visitors can upload more than one file using MooTools.
View Demo

50. Extension – UploadForm
The Ext UploadForm is Ext.form.BasicForm extension for easy upload of (multiple) files to a server. The files are added to a queue first then they are uploaded to the server. Files can be removed from queue individually before upload or whole queue can be cleared. Result of upload is shown for each file by the success or failure icon.
View Demo

Top

Tables

51. TinyTable JavaScript Table Sorter
Easy to use JavaScript table-sorting script. Features column highlighting, optional pagination, support for links, date/link parsing, alternate row highlighting, header class toggling, auto data type recognition and selective column sorting.
View Demo

52. JavaScript Tabifier
Automatically creates an HTML tab interface using plug-and-play JavaScript. Does not require you to set up a list of links, or anchors for the tabs, and you can use CSS to customize the appearance of the tabs.
View Demo

53. Accessible Charts And Graphs From Table Elements
The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
View Demo

54. Table With Dynamically Highlighted Columns
When you click on “Sign Up” for an option on Crazy Egg’s pricing table, 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. The CSS Guy wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.
View Demo

55. TableGear
TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
View Demo

Top


Tool Tips And Boxes

Better Tooltip With JQuery

56. Duplicate the jQuery Homepage Tooltips Using MooTools
The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools.
View Demo

57. qTip – The jQuery Tooltip Plugin
qTip is an advanced tooltip plugin for the jQuery JavaScript framework. Built from the ground up to be user friendly, feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
View Demo

58. MooTooltips – JavaScript Tooltips With MooTools
MooTooltips can display tooltip messages from HTML elements, Ajax calls or text added manually. Tooltip parameters can be passed either when instantiating the class or on the rel element parameter.
View Demo

59. Coda Popup Bubbles
In this tutorial you will learn how to create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image. This effect can be perfected by changing the initial reset code to read from the trigger element and approximate it’s position.
View Demo

60. Prototip 2
Prototip allows you to easily create both simple and complex tooltips using the Prototype JavaScript framework. You can easily customize it, control the tool tip position and get configurable rounded corners (with no PNG images required).
View Demo

61. Better Tooltip With JQuery
Browsers will automatically display a tooltip when you provide a title attribute. In this tutorial Jon Cazier is going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
View Demo

62. MoreCSS
An easy to use, lightweight and fast JavaScript toolkit/library with CSS syntax for common things. With only 8 KB and it’s CSS like syntax MoreCSS is perfect for all the daily JavaScript things: popups, tabs, tooltips and more.
View Demo

63. Overlay With Slide Out Box
How to with CSS and jQuery create a semi-transparent overlay that covers all the page, and a message box that can be turned off again.
View Demo

64. Facebook-Style Modal Box Using MooTools
Facebook’s Modal box is one the best modal box around. It’s lightweight, subtle, and very stylish. David Walsh has taken Facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect.
View Demo

65. GlassBox
GlassBox is a lightweight JavaScript User Interface (UI) library, which uses Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects.
View Demo

Top


Calendars And Timelines

Unobtrusive Date-Picker Widget V5

66. Advanced Event Timeline
In this tutorial you will learn how to make an Advanced Event Timeline with the help of PHP, MySQL, CSS and jQuery, that will display a pretty time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.
View Demo

67. Elegant Animated Weekly Timeline
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.
View Demo

68. FullCalendar – jQuery Plugin
FullCalendar is a jQuery plugin that provides a full-sized drag and drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format.
View Demo

69. Unobtrusive Date-Picker Widget V5
This unobtrusive datePicker (calendar), which is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/XHTML+XML.
View Demo

70. Date Picker – jQuery Plug-In
Date Picker component with a lot of options. Date Picker allows users to easily select a date or range of dates. Some features are: multiple calendars; single, multiple and range selection; marking of special, weekend and special dates; an easy-to-customize look via CSS and more
View Demo

71. JQuery Interactive Date Range Picker With Shortcuts
Date Range Picker plugin uses jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.
View Demo

72. Calendar – A JavaScript Class For Mootools
Calendar is a JavaScript class that adds accessible and unobtrusive date-pickers to your form elements. Features highly configurable inputs and selects, multi-calendar support, variable navigation options and multi-lingual and fancy date formatting.
View Demo

73. Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.
View Demo

74. MooGenda – JavaScript Calendar Based On MooTools
MooGenda is a calendar based on MooTools, that reads events from JSON requests. Supports double click on event to see the deafult event view and features also drag and drop event in month view, drag and drop and resize event in diary view and every change send a request to back end (to store when and what changed in the event).
View Demo

75. MooTools Events Calendar
The MooTools Events Calendar is a JavaScript calendar class that was built using the MooTools framework – the calendar supports week/day/month view and the addition of events.
View Demo

Top

Image Handling And Sliders

Polaroid Photo Viewer - jQuery And CSS3

Image Previewing And Galleries

76. imgPreview – jQuery Plug-In
The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time. The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link.
View Demo

77. SlideItMoo – Image Slider
SlideItMoo is a banner and image slider developed with MooTools. The image slider supports continuous sliding when navigating, offers the possibility to set how the slider will slide (from left or from right) when used with the auto slide feature on, offers the possibility to give it the item width (width of the slider’s items) and let it display the elements according to that width and the visible items parameter.
View Demo

78. Fancy Thumbnail Hover Effect With JQuery
This is a thumbnail hover effect jquery and CSS tutorial. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
View Demo

79. FancyZoom Meet Prototype
FancyZoom uses Apple’s rounded corners and supports pretty much any HTML you can throw in a div (images, text, Flash, etc.). It was built using script.aculo.us and Prototype – it now works with any HTML already included on the page.
View Demo

80. Pikachoose jQuery Image Gallery
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed and easy to setup.
View Demo

81. PiroBox – jQuery Plugin For Fast Performing Photo Galleries
jQuery piroBox plugin is simple images gallery, realized with jQuery library. There is a choice between three different styles – shadow, white and black.
View Demo

82. Galleriffic – jQuery Plugin For Photo Galleries
Galleriffic is a jQuery plugin that provides a rich, post-back free experience, optimized to handle high volumes of photos while conserving bandwidth. Note: there is more demos inside the article.
View Demo

83. Polaroid Photo Viewer – jQuery And CSS3
In this tutorial you will learn how to create a Polaroid Photo Viewer using jQuery and CSS3. You can drag the images around, rotate them by combining the CSS3 Box Shadow and Rotate properties – the jQuery inject the CSS3, keeping the CSS file clean.
View Demo

Top

Slideshow

84. Sliding Image Gallery – jQuery
Display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. The plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. Note: There is more demos inside the article.
View Demo

85. Moving Boxes
A jQuery slider with buttons to change panels, and the panels zoom in and out.
View Demo

86. Supersized – Full Screen Background/Slideshow jQuery Plugin
Supersized features include: cycles Images/backgrounds via slideshow with transitions and preloading, navigation controls allow for pause/play and forward/back, resizes images to fill browser while maintaining image dimension ratio.
View Demo

87. Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
View Demo

88. Easy Slider 1.7 – JQuery Plugin
JQuery plugin for sliding images and content. Easy Skider features include: auto-slide, continuous sliding, “Go to first” and “Go to last” buttons, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page.
View Demo

89. Image Rotator With Description
Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
View Demo

90. BarackSlideshow
BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images.
View Demo

91. s3Slider – jQuery plugin
s3Slider is a plugin built in jQuery for cross-fading slideshow, with inspiration from the JD`s Smooth Slide Show script. Realatively easy to install and use.
View Demo

92. noobSlide – MooTools
An easy to install and flexible slider plug-in created by using MooTools. The download includes a ready page example.
View Demo

Top

Lightbox

93. PrettyPhoto – jQuery Lightbox
PrettyPhoto is a jQuery based lightbox clone. It supports images and has also support for videos, flash, YouTube, iFrames. The setup is relatively easy and quick, plus the script is compatible in every major browser.
View Demo

94. Lightview – Overlay Anything With Style
Lightview was built to change the way you overlay content on a website. Designed to complement your content, and features include: smart image preloading, customization without CSS, adjustable rounded corners, no PNG required, resizing to always fit the screen and one-click slideshow.
View Demo

95. Shadowbox Media Viewer
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Written entirely in JavaScript and CSS and is highly customizable.
View Demo

96. jQuery Visual LightBox 2.3.0
Visual LightBox script ported to jQuery. Now you can choose which engine to use with your image gallery – jQuery or old Prototype JS. Overlay image floats on scroll staying always visible, fit image inside the thumbnail and set background color for the thumbnails and options to set watermark image, position, font, color, and transparency.
View Demo

97. TopUp – JavaScript Pop Up
TopUp is an easy to use JavaScript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. Beta release.
View Demo

98. ColorBox – Customizable Lightbox Plugin
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4 – supports photos, photo groups, slideshow, ajax, inline and iframed content. Less than 9KB of JavaScript. Note: there is more demos inside the article.
View Demo

99. imgZoom – jQuery Plugin
imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics (SVG or VML) to create a graceful transition between the thumbnail and the full-sized image.
View Demo

100. LightWindow
The ultimate modal window system, LightWindow, allows you to build your own theme, create mixed media galleries including flash, quictkime and images.
View Demo

Top

Image Effects

101. jParallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse.
View Demo

102. Rotating Billboard System With jQuery And CSS
In this tutorial you will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one appear.
View Demo

103. swfIR – swf Image Replacement
Using JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website.
View Demo

104. Interactive Picture With jQuery
In this tutorial you will learn how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. The original inspiration for this tutorial came from the IKEA website.
View Demo

105. Animated Postcard With jQuery
In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Sam Dunn will teach you the art of looping animations using setTimeout(), how to take advantage of the Easing plugin and a new way to spice up your banner.
View Demo

106. BBC Radio 1 Zoom Tabs
How to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
View Demo

107. Floom – Blinds Effect MooTools Slideshow
Floom is a Blinds-effect MooTolls slideshow plugin. There are two ways of setting up Floom. One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing an element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection.
View Demo

108. Animate Image Filling Up Using jQuery
Spruce up your website’s header by letting Sam Dunn teach you how to make an image appear to fill up with just a splash of jQuery and Photoshop.
View Demo

Top

Image Cropping

109. imgAreaSelect – jQuery Plugin
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes. Note: more demos Here.
View Demo

110. CropZoom – jQuery Plugin
CropZoom is a plugin that let you select an area of an image to crop, whit this plugin you can zoom in or zoom out, drag and also rotate. The CropZoom plugin needs ui.droppable, ui.resizable, ui.slider from JQuery UI.
View Demo

111. UvumiTools Crop
This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful tool for any site that provides image hosting, for example.
View Demo

112. Jcrop – The jQuery Image Cropping Plugin
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
View Demo

Top

Content Sliders

113. Ultra Versatile Slider
In this tutorial Antonio Lupetti explains a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools.
View Demo

114. Mootools Slider With Two Knobs
Mootools slider with two knobs (double pinned slider) with range indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by modifying the slider.css.
View Demo

115. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

116. Mootools CSS Styled Scrollbar
A small piece of JavaScript that creates a CSS-styled scroll bar from the MooTools “slider” class.
View Demo

117. AnythingSlider – JQuery Plugin
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders Chris Coyier created and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
View Demo

118. jCapSlide – jQuery Image Caption Plugin
Plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.
View Demo

119. A Bullet-Proof Content Viewer
In this tutorial, we’re going to look at how we can create an attractive and space-saving content viewer which even works with JavaScript disabled. You will build a solid core of semantic HTML – styled with some basic CSS and some use of jQuery to add further enhancements in the form of transition animations.
View Demo

120. Amazon Books Widget With jQuery And XML
It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.
View Demo

Top


Interactivity And Communication

Animated Sharing Bar - jQuery

121. Star Rating – CSS Sprite And jQuery
In this tutorial from Web Developer Juice you will learn how to create star rating with the help of CSS Sprite and jQuery – AJAX Call is used to store the voting value.
View Demo

122. Starbox – Rating Stars For Prototype
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype JavaScript framework. For some extra effects you can add Scriptaculous as well.
View Demo

123. Animated Sharing Bar
Encourage your visitors to share your content on the networks by using pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.
View Demo

124. jQuery Plugin For Zoomable And Interactive Maps
A jQuery plugin for zoomable and interactive maps – the map was made to be as appealing as possible by using crisp graphics and smooth animations.
View Demo

125. OpenSocial jQuery Mixi Platform 1.0.0
OpenSocial jQuery is a jQuery based concise JavaScript Library for rapid OpenSocial Applications development – The jQuery mixi Platform is a plugin to use the extension of mixi specifically.
View Demo

126. Digg-Style Post Sharing Tool With JQuery
Kevin Liew will show you how to create a social bookmarking tool that looks similar to digg’s. He also includes the komodomedia’s social bookmarking icons and a long list of submission URL for one click bookmark.
View Demo

127. Ajax IM
Ajax im is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. Demo usernames are “test”, and “test (1 to 4)”. Password is “test”.
View Demo

128. jFeedback – Minimal jQuery Notification Plugin
A minimal way to notify users of success or error, based on Twitter’s bar and jBar. The notification consists of a simple “OK” or “Error” icon which the user can decide to click if he is interested in the details of the notification.
View Demo

129. Drag To Share
We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. In this tutorial Dan Wellman is going to show you how you can replicate this behavior with jQuery and jQuery UI.
View Demo

130. Better Blogroll – Dynamic Fun With SimplePie And JQuery
A traditional blogroll is a simple list of other sites, often in the sidebar. Let’s improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.
View Demo

131. Twitter Trackbacks Widget – jQuery Plugin
Highly customizable Twitter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply and retweet links to get more readers engaged in your story conversation. Display tweets as a bar with transition effects or as a fixed list. Many transition options like opacity, height and font-size.
View Demo

132. Twitter Friends And Followers Widget – JQuery Plugin
Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.
View Demo

133. jQuery Twitter Ticker
In this tutorial you will learn how to create a jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases.
View Demo

134. Animated TwitterReader
Animated TwitterReader class with MooTools. The MooTools plug-in for downloading and displaying Twitter status via Twitter Search API – created by Jakub Karlec.
View Demo

135. Realtime Related Tweets Bar – JQuery Plugin
A real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates. Features; show realtime related tweets based on your post tags, show your twitter timeline (related to your post or not), return only tweets with links or return all and more.
View Demo

136. Fantastic News Ticker Newsvine Like – Mootools
In this tutorial Antonio Lupetti teachs you how to in a simple way implement a Newsvine like News Ticker (with news vertical scrolling) on your website.
View Demo

137. Search And Share
Search and Share makes highlighting text to a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and presents a variety of options accordingly.
View Demo

138. jsDraw2D – 2D Graphics Library For JavaScript
This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG or VML. JavaScript developers, web developers and webmasters can take advantage of the library to add graphics drawing functionality to their web applications or websites using the library.
View Demo

Top


Font And Text

PrettyNumber – jQuery Plugin For Formatting Numbers

139. Typeface.js – Rendering Text With JavaScript, <canvas>, And VML
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
View Demo

140. jQSlickWrap – Slick Text Wrapping For jQuery
jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily. Use float and padding CSS styles to specify how the wrapping will work. Written with Progressive Enhancement in mind.
View Demo

141. FontEffect – JQuery Plugin
Font effect is a jQuery plugin that adds some effect to html text. The available effects are Outline, Shadow, Gradient and Mirror. No images are used for these effects and no additional CSS is necessary. All effects are contained in the plugin and do not interfere with page rendering in older browser or browser with JavaScript disabled.
View Demo

142. New York Times-Style Text Selection Widget
NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. Also available as jQuery.
View Demo

143. Pull Quotes With MooTools
Chris Coyier authored a post titled Better Pull Quotes: Don’t Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.
View Demo

144. Columnizer – jQuery Plugin
The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. Note: there is more demos inside the article.
View Demo

145. PrettyNumber – Plugin For Formatting Numbers
A jQuery plugin that transforms a number into a human readable format. This simple plugin formats a number like 23454321234 into 23.454.321.234 – you can use different delimiters like the comma, dot, space or anything you specify in the plugin.
No Demo

Top


Miscellaneous

Day And Night - Scenery Animation with jQuery

146. Ajax Page Loads Using MooTools Fx.Explode
When you click on any of the designated Fx.Explode elements, the elements “explode” off of the screen. Click again and they magically reappear.
View Demo

147. Day And Night – Scenery Animation
How to with jQuery and CSS create an amazing animated scenery with just a few lines of jQuery and some absolute positioned elements with images. Note: This will not work in any IE version.
View Demo

148. jQuery Slider Plugin – Safari Style
jQuery Slider is easy to use and multifunctional jQuery plugin. Helps you to build a range slider with Safari Style. Useful and usable on for example real estate websites.
View Demo

149. Step By Step – Show And Explain Visitors What Your Page Has For Them
You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
View Demo

150. Music Player In JQuery
In this tutorial you create an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can click and drag with mouse to interact with interface’s music player or use directional keys and spacebar instead of mouse.
View Demo

151. Skype-Style Buttons Using MooTools
JQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. David Walsh was impressed by Janko’s article so he decided to port the effect to MooTools.
View Demo

152. Folder Collapser For Dynamic Content
How to create a group of collapsible folders using pure JavaScript and some JQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page – wherein the number of folders may be unknown.
View Demo

153. MooTools Drag Opacity
In this tutorial David Walsh will learn you how to make a “drag opacity and fading” effect with the help of some MooTools. The code itself is quite simple — Drag.Move’s onStart and onComplete events to begin and end the fading.
View Demo

154. Twitter-Like Load More Widget
Twitter uses a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, JavaScript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.
View Demo

155. Retro Animated Flip-Down Clock
In this tutorial, you will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, Alexandru Pitea tried to replicate the flip action of the pads and make it as lifelike as possible.
View Demo

156. Colorful Clock With CSS And jQuery
In this tutorial Martin Angelov will learn you how to make a cool and colorful clock with the help of some jQuery and CSS.
View Demo

157. Web 2.0 Document Search Site
In this tutorial we will create a document searching site with jQuery. This site will be used to search documents by specifying an extension (file type). The data is then filtered and sent to Google.
View Demo

158. Fast And Simple Toggle View Content
This script is using the UL list and allows user to toggle to display the content of LI items. This is a useful user interface feature that helps designers to save space and build a less complicated user interface.
View Demo

159. Depender
A new plugin called Depender which uses MooTools dependency mappings to allow you to lazy load additional scripts on the fly based on what you need.
View Demo

Top

The resources are not in any particular order and as usual you decide what resource fits best for your demands. Cashrevelations.com is not affiliated with any of the authors.

]]> http://cashrevelations.com/magazine/2010/01/150-javascript-techniques/feed/ 18 10 New jQuery Techniques http://cashrevelations.com/magazine/2009/11/new-jquery-techniques/ http://cashrevelations.com/magazine/2009/11/new-jquery-techniques/#comments Fri, 27 Nov 2009 19:14:54 +0000 Tommy Olovsson http://cashrevelations.com/magazine/?p=3425 Since we did our research and wrote the article 100 Ajax And JavaScript Techniques some new jQuery techniques were born or updated with new features. Apart from being practical and good solutions to different presentation problems, they are also very funny to play around with – a bit like toys for grown-ups. So, we decided to list those new techniques we think could be most useful in a modern webdesign.

jCapSlide - jQuery Image Caption Plugin

Wikipedia: jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. Licensed under the MIT License and the GNU License.

Cashrevelations.com presents 10 New jQuery Techniques with demos that can enhance and bring some interactivity to your website or blog and with that make them a bit more user friendly. You might also be interested to visit jQuery – The JavaScript Library.

jQuery Techniques

1. Interactive Picture With jQuery
In this tutorial you will learn how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. The original inspiration for this tutorial came from the IKEA website.
View Demo

2. jCapSlide – jQuery Image Caption Plugin
Plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.
View Demo

3. TopUp – JavaScript Pop Up
TopUp is an easy to use JavaScript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. Beta release.
View Demo

4. jQuery Twitter Ticker
In this tutorial you will learn how to create a jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases.
View Demo

5. Twitter Trackbacks Widget – jQuery Plugin
Highly customizable Twitter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply and retweet links to get more readers engaged in your story conversation. Display tweets as a bar with transition effects or as a fixed list. Many transition options like opacity, height and font-size.
View Demo

Interactive Picture With jQuery

6. jQSlickWrap – Slick Text Wrapping For jQuery
jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily. Use float and padding CSS styles to specify how the wrapping will work. Written with Progressive Enhancement in mind.
View Demo

7. jFeedback – Minimal jQuery Notification Plugin
A minimal way to notify users of success or error, based on Twitter’s bar and jBar. The notification consists of a simple “OK” or “Error” icon which the user can decide to click if he is interested in the details of the notification.
View Demo

8. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

9. Flips – jQuery Plugin
Plugin for creating sliding boxes, that allows to show more boxes on one place. There is arrows to control which box is shown, many options like speed, auto-change interval, sides, button labels can be set.
View Demo

10. jQuery Slider Plugin – Safari Style
jQuery Slider is easy to use and multifunctional jQuery plugin. Helps you to build a range slider with Safari Style. Useful and usable on for example real estate websites.
View Demo

The jQuery Techniques are not in any particular order and as usual you decide what fits best for your purposes and demands – and Cashrevelations.com is not affiliated with any of the plugin or tutorial authors.

More about JavaScript and AJAX:

]]> http://cashrevelations.com/magazine/2009/11/new-jquery-techniques/feed/ 13 40 JavaScript Tools http://cashrevelations.com/magazine/2009/11/40-javascript-tools/ http://cashrevelations.com/magazine/2009/11/40-javascript-tools/#comments Tue, 03 Nov 2009 17:46:50 +0000 Tommy Olovsson http://cashrevelations.com/magazine/?p=3126
  • New! Updated list: 60 Effective JavaScript Tools

    • Below you will find some tools to help you achieve your goals with JavaScript code. The list was originally a part of the article 100 Ajax And JavaScript Techniques, but then we decided to remove it and publish it separately since we thought the original article would became to extensive and hard to handle.

    In this article you will find 40 useful JavaScript Tools with examples (where available) to help you with your coding process – including some JavaScript and AJAX frameworks.

    The tools are both browser based and online. IE 8 tools are not so well represented in this list, but every installation of IE 8 comes with the Developer Tools – this introduces you to features of the Developer Tools: Discovering Internet Explorer Developer Tools.

    LIST CONTENT

    We tried to include example links to every post, but although some of the authors make excellent JavaScript tools they make very poor examples. This means that some of the example links are not of the quality we would wish.

    JavaScript Debugging And Testing Tools

    Opera Dragonfly

    Browser Based Debugging Tools

    1. Firebug
    Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
    View Example

    2. Firebug Lite
    Firebug Lite – a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named “Firefox”. Firebug Lite creates the variable “firebug” and doesn’t affect or interfere with HTML elements that aren’t created by itself.
    View Example

    3. Venkman JavaScript Debugger
    Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.
    View Example

    4. NitobiBug – Browser Based Debugger
    It’s a browser-based JavaScript object logger and inspection tool (similar to Firebug). NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications.
    View Example

    5. Opera Dragonfly
    Opera Dragonfly is a cross device, cross platform debugging environment for the Opera browser-debug JavaScript, inspect and edit CSS and the DOM, and view any errors on your mobile or computer.
    View Example

    6. DebugBar – IE Extension For Web Developers
    View DOM Tree and modify tags attributes and CSS attributes on the fly to test your page, view JavaScript functions for easier debugging, CSS inspector and more.
    View Example

    Top

    Online Debugging Tools

    7. JS Bin – Collaborative JavaScript Debugging
    A web-application specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. Allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code – new tabs doesn’t) – once you’re happy you can save.
    Start Application

    8. JSON Formatter And Validator
    The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.
    Start Application

    Top

    JavaScript Testing

    9. YUI Test – Testing Framework
    YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions.
    View Example

    10. JSLint – The JavaScript Code Quality Tool
    An online JavaScript program that looks for problems in JavaScript programs. JSLint takes a JavaScript source and scans it – if it finds a problem, it returns a message describing the problem and an approximate location within the source.
    Start Application

    11. FireUnit – JavaScript Unit Testing Extension
    FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug. FireUnit is a Firefox/Firebug extension.
    View Example

    12. SugarTest – JavaScript Testing
    Makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.
    View Example

    13. JSpec – JavaScript Testing Framework
    JSpec is an extremely small, yet powerful testing framework. Helpful shorthand literals, a very intuitive/readable syntax, as well as not polluting core object prototypes.
    View Example

    Top


    AJAX And JavaScript Authoring Tools

    jQuery UI

    14. Google Web Toolkit – Google Code
    Google Web Toolkit (GWT) allows developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language. Write your AJAX front-end in the Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.
    View Example

    15. JQuery UI – ThemeRoller
    jQuery UI is jQuery’s user interface library – jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design.
    View Example

    16. Jx – JavaScript Library
    JxLib is a JavaScript library for creating graphical user interfaces based on the MooTools library. The site provides access to the library as well as documentation and examples.
    View Example

    17. Script# – AJAX And JavaScript Authoring Tool
    Script# is a tool that enables developers to author C# source code and subsequently compile it into regular script that works across all modern browsers.
    View Example

    18. Aptana Jaxer – The JavaScript Server
    Aptana Jaxer allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create server-side-powered Web applications. You have the option of either installing Jaxer as a standalone web server on your computer, or using the Jaxer server that is automatically bundled with Aptana Studio.
    View Example

    Top

    Editors And IDE

    19. Komodo Edit – Free Open Source Dynamic Languages Editor
    Komodo Edit supports PHP, Python, Ruby, Perl and Tcl, plus JavaScript, CSS, HTML and template languages like RHTML, Template-Toolkit, HTML-Smarty and Django.
    View Example

    20. Spket IDE – JavaScript Editor
    Spket IDE is a toolkit for JavaScript and XML development. The JavaScript editor provides features like code completion, syntax highlighting and content outline that helps developers productively create JavaScript code. Free for non-commercial use.
    View Example

    21. Aptana Studio
    Aptana Studio is a complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plugins created by the community.
    View Example

    Top

    Documentation And Code Optimization

    Ext 2.2 - API Documentation

    JavaScript Compressors

    22. YUI Compressor
    The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Also able to compress CSS files.
    View Example

    23. ShrinkSafe – The Dojo Toolkit
    The Dojo compressor is based on Rhino, a JavaScript engine from the Mozilla project. Being based on a real parse stream, the Dojo compressor can get a better idea for the context of a token than the regular-expression based tools.
    View Example

    24. Packer – JavaScript Compressor
    One of the most widely used tools to minify JavaScript code is Dean Edwards’ Packer. The packing algorithm is forgiving of all forms of JavaScript with one exception. You must correctly terminate all JavaScript statements with semi-colons.
    View Example

    Top

    HTTP Monitoring

    25. Tamperdata – Firefox Extension
    View and modify HTTP/HTTPS headers and post parameters, trace and time http response/requests and security test web applications by modifying POST parameters.
    View Example

    26. Fiddler
    Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data.
    View Example

    Top

    JavaScript Documentation Tools

    27. jGrouseDoc
    jGrouseDoc allows developers manage and document code comments using a format similar to Javadoc’s. Allows documenting of JavaScript classes, regardless which approach or framework is being used for it – be it Prototype, Dojo, jGrouse or any other.
    View Example

    28. JsDoc Toolkit
    JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
    View Example

    29. ExtDoc- JavaScript Comments Processor
    ExtJS library has a specific JavaScript documentation style – ExtDoc parses JavaScript source files and creates template-based output. Support for custom tags and fully templated output.
    View Example

    Top


    JavaScript Cheat Sheets

    MooTools 1.2 Cheat Sheet

    30. JQuery 1.3 Visual Cheat Sheet
    jQuery Visual Cheat Sheet is a practical reference to jQuery 1.3 for web designers and developers. This cheat sheet contains the full jQuery API reference with detailed descriptions and some sample code.
    View Example

    31. jQuery Selectors
    Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips.
    View Example

    32. jQuery 1.3 Cheatsheet
    This cheat sheet is a quick reference by Oscar Otero to functions and properties in the jQuery 1.3 library.
    View Example

    33. MooTools 1.2 Cheat Sheet
    It includes documentation for Core, Native, Class, Element, Utilities and Request.
    View Example

    34. Prototype 1.6.0.2 Cheat Sheet
    Prototype cheat sheet released by kangax – a full reference.
    View Example

    35. Dojo 1.3 Base API Cheat Sheet
    A cheat sheet designed by Kyle Hayes but with full API generation by phiggins over at #dojo – fully compatible with Dojo 1.3.
    View Example

    36. JavaScript Cheat Sheet
    A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.
    View Example

    Top


    Miscellaneous

    DamnIT - JavaScript Error Reporting Service

    37. DamnIT – A Free JavaScript Error Reporting Service
    DamnIT makes it simple for beta testers to provide useful feedback by prompting them after an error occurs and combining their response with error message, file, line number, and back-trace information. You’ll receive detailed automated error information instead of vague bug descriptions.
    View Example

    38. Online JavaScript Beautifier
    This beautifier can process your messy or compacted JavaScript, making it all neatly and consistently formatted and readable.
    Start Application

    39. HTML To JavaScript Convertor
    The online HTML to JavaScript convertor takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.
    Start Application

    40. Glimmer – JQuery Interactive Design Tool
    Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios.
    View Example

    41. Jsfuzzer -Browser Based JavaScript Fuzzer
    This fuzzing tool allows fuzzing of events, tags, styles and HTML attributes. You can use incomplete tags with various depth and randomize case of all parameters. It also contains a database of all new attack vectors gathered.
    View Example

    42. JavaScripTools
    JavaScripTools is a set of JavaScript components, functions and classes to make the web developer’s life easier. Most modern browsers, like Firefox, Internet Explorer, Opera and Konqueror are supported.
    View Example

    43. JavaScript Tools Guide – PDF By Adobe Systems
    This document provides information about the JavaScript features, tools, and objects that are common to all Adobe applications that support JavaScript.
    View Example

    Top

    The resources are not in any particular order and as usual you decide what resource fits best for your purposes. Cashrevelations.com is not affiliated with any of the authors.

    ]]>     http://cashrevelations.com/magazine/2009/11/40-javascript-tools/feed/ 4     100 Ajax And JavaScript Techniques http://cashrevelations.com/magazine/2009/10/ajax-and-javascript/ http://cashrevelations.com/magazine/2009/10/ajax-and-javascript/#comments Mon, 26 Oct 2009 15:10:48 +0000 Tommy Olovsson http://cashrevelations.com/magazine/?p=2938
  • New! Updated list: 150 JavaScript Techniques

    • JavaScript is becoming more common in modern web designs and when it is done with taste and moderation it can enhance the user’s experience and provide interactivity to your website. The secret is balance. To not have too much JavaScript and to use the right techniques for your purposes.

    Wikipedia: JavaScript is an object-oriented scripting language used to enable programmatic access to objects within the client application and other applications.

    There is a lot you can do with JavaScript – form validation, stylish navigation, amazing slideshows, tool tips, interactivity and more can be achieved with some JavaScript code.

    Cashrevelations.com presents 100+ Ajax and JavaScript techniques with demos that can make your websites visually and interactively more interesting or user friendly. They are all more or less easy to configure, but perhaps this is not the first thing you should do if you just have learned to build websites – but on the other hand, It doesn’t harm to try.

    LIST CONTENT

    MooTools, jQuery, Prototype and script.aculo.us are among the techniques represented in this list and we have tried to categorize them in a practical and easy searchable way.

    Navigation

    Sliding Boxes And Captions with jQuery

    General Navigation

    1. Filterable Portfolio with jQuery
    In this tutorial, Trevor Davis, a 25 year old front-end developer, will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
    View Demo

    2. jQuery ListNav Plugin
    This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter.
    View Demo

    3. Ext Accordion
    The Accordion widget and its InfoPanel are components that use the Ext JS Library. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
    View Demo

    4. Yetii – Yet (E)Another JavaScript Tab Interface
    Yetii is a functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.
    View Demo

    5. Apple Style Menu Improved With jQuery
    How to create a similar main navigation like the one of kriesi.at – a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
    View Demo

    6. Jquery Fade In And Fade Out
    A fade in fade out effect – the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
    View Demo

    7. Morph Effect On Mouseenter And Mouseleave With Mootools 1.2
    In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools – and turn it into something fun to click.
    View Demo

    8. Ajaxify – JQuery Plugin
    Ajaxify can convert all links in a web page into an ajax load and submit requests. You can build a complex ajax website with one single line. Some features are Ajax GET and POST requests, history and bookmarking support, animations and more.
    View Demo

    9. Sliding Boxes And Captions With JQuery
    All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
    View Demo

    10. Accordion And Hover Effects With JQuery
    This tutorial video (QuickTime version is 60Mb – flash version is streaming) explains how the accordion and hover effects on Tim Van Damme’s site can be achieved using jQuery.
    View Demo

    11. Outside The Box – Navigation
    Just about every website uses the regular navigation concepts we’re all used to. After a while this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
    View Demo

    12. Powerful Product Highlighter With MooTools
    This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework – a clever rollover mechanism that works well as a product highlighter.
    View Demo

    Top

    Traditional Menus

    13. jQuery Context Menu Plug-In
    A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.
    View Demo

    14. Smooth Animated Menu With jQuery
    In this tutorial Zach Dunn will teach you how to build a nice jQuery menu with a smooth transition animation effect.
    View Demo

    15. Fading Menu – Replacing Content
    When a menu item is selected, its graphic is shown at full opacity and its corresponding content area is shown, while the other menu items are faded and their content areas hidden. With jQuery, you can fade in the menu item being clicked, fade out all other menu items, display the corresponding content area and hide all the other.
    View Demo

    16. e24TabMenu – Drop down AJAX Menu
    e24TabMenu is a plugin written for scriptaculous. In this tutorial Alfredo Artiles teaches you how to make a nice tab menu that expands and collapses smoothly.
    View Demo

    17. A Different Top Navigation
    In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
    View Demo

    18. SpriteMenu
    This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. The menu is displayed by manipulating the background-position property to display individual sprites in the image.
    View Demo

    19. Image Menu
    A horizontal menu that reveals more of the image as you rollover it. Features 2 optional onClick events (open and close), href passed to onClick events, stays open when clicked, closes when clicked and selects item to pre-open.
    View Demo

    20. Proto.Menu – Prototype Based Context Menu
    Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. Plays nice with JS turned off and menu styling can be easily defined in external stylesheet.
    View Demo

    Top

    Forms And Tables

    Sliding Panel - Incredible login form with jQuery

    Forms And Auto-Complete

    21. Changing Form Input Styles On Focus With jQuery
    This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.
    View Demo

    22. 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.
    View Demo

    23. Incredible Login Form With jQuery
    One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content.
    View Demo

    24. Editable – JQuery Editable Plugin
    This is a real customizable jQuery editable plugin. Currently it can convert any tag to text input, password, textarea, drop-down list. You can easily extend it by adding your own input type using its editableFactory object.
    View Demo

    25. Google Suggest Style Filter – AutoComplete Control
    Create a Google Suggest-style filter with AutoComplete Control. AjaxControlToolkit’s AutoComplete control can be used with a data grid.
    View Demo

    26. Autocomplete – JQuery Plugin
    Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from.
    View Demo

    27. Auto Complete To Your Google Custom Search Engine
    This tutorial will show you how to use the “Popular Queries” feed from your Google Custom Search Engine (CSE) as a data source for a jQuery autocomplete.
    View Demo

    28. Ajax Fancy Captcha – JQuery Plugin
    Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.
    View Demo

    29. Proto! – TextboxList Meets Autocompletion
    This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original.
    View Demo

    Top

    Form Validation And Hints

    30. Using Input Values As Hints
    Give your visitors a hints on what to write in textfields. Each of the fields auto-clear when the user clicks it. If nothing at all is entered, the hint reappears once the visitor decides to move away.
    No Demo

    31. FormCheck
    FormCheck is a MooTools class that allows you to validate a form by performing different tests before submission – installation tutorial and examples.
    View Demo

    32. fValidator
    fValidator is a free, open-source and unobtrusive JavaScript tool for handling form validation easily.
    View Demo

    33. Custom Form Elements
    This CFE script enhances form elements including radio buttons, checkboxes, file upload, textfield, textarea, images and the select, submit and reset buttons.
    View Demo

    Top

    File Upload

    34. FancyUpload – Swiff Meets Ajax
    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 and styleable via CSS and XHTML and uses MooTools to work in all modern browsers.
    View Demo

    35. Uploadify – JQuery File Upload Plugin Script
    Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
    View Demo

    36. Multiple File Uploader – Mootools Version
    A script that allows you to create a form in which your visitors can upload more than one file using MooTools.
    View Demo

    37. Extension – UploadForm
    The Ext UploadForm is Ext.form.BasicForm extension for easy upload of (multiple) files to a server. The files are added to a queue first then they are uploaded to the server. Files can be removed from queue individually before upload or whole queue can be cleared. Result of upload is shown for each file by the success or failure icon.
    View Demo

    Top

    Tables

    38. TinyTable JavaScript Table Sorter
    Easy to use JavaScript table-sorting script. Features column highlighting, optional pagination, support for links, date/link parsing, alternate row highlighting, header class toggling, auto data type recognition and selective column sorting.
    View Demo

    39. JavaScript Tabifier
    Automatically creates an HTML tab interface using plug-and-play JavaScript. Does not require you to set up a list of links, or anchors for the tabs, and you can use CSS to customize the appearance of the tabs.
    View Demo

    40. Accessible Charts And Graphs From Table Elements
    The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
    View Demo

    41. Table With Dynamically Highlighted Columns
    When you click on “Sign Up” for an option on Crazy Egg’s pricing table, 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. The CSS Guy wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.
    View Demo

    42. TableGear
    TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
    View Demo

    Top


    Tool Tips And Boxes

    Prototip 2 - Create beautiful tooltips with ease

    43. Duplicate the jQuery Homepage Tooltips Using MooTools
    The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools.
    View Demo

    44. qTip – The jQuery Tooltip Plugin
    qTip is an advanced tooltip plugin for the jQuery JavaScript framework. Built from the ground up to be user friendly, feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
    View Demo

    45. MooTooltips – JavaScript Tooltips With MooTools
    MooTooltips can display tooltip messages from HTML elements, Ajax calls or text added manually. Tooltip parameters can be passed either when instantiating the class or on the rel element parameter.
    View Demo

    46. Coda Popup Bubbles
    In this tutorial you will learn how to create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image. This effect can be perfected by changing the initial reset code to read from the trigger element and approximate it’s position.
    View Demo

    47. Prototip 2
    Prototip allows you to easily create both simple and complex tooltips using the Prototype JavaScript framework. You can easily customize it, control the tool tip position and get configurable rounded corners (with no PNG images required).
    View Demo

    48. Better Tooltip With JQuery
    Browsers will automatically display a tooltip when you provide a title attribute. In this tutorial Jon Cazier is going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
    View Demo

    49. MoreCSS
    An easy to use, lightweight and fast JavaScript toolkit/library with CSS syntax for common things. With only 8 KB and it’s CSS like syntax MoreCSS is perfect for all the daily JavaScript things: popups, tabs, tooltips and more.
    View Demo

    50. - Link is deactivated due to hacker attack on Web2Ajax.com
    FaceBook Like – jQuery and autosuggest Search Engine. Features autosuggest and ajax support, support search plugins, support cache and cross browser support.
    View Demo

    51. Facebook-Style Modal Box Using MooTools
    Facebook’s Modal box is one the best modal box around. It’s lightweight, subtle, and very stylish. David Walsh has taken Facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect.
    View Demo

    52. GlassBox
    GlassBox is a lightweight JavaScript User Interface (UI) library, which uses Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects.
    View Demo

    Top


    Calendars And Timelines

    Mootools Events Calendar

    53. Elegant Animated Weekly Timeline
    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.
    View Demo

    54. Unobtrusive Date-Picker Widget V4
    This unobtrusive datePicker (calendar), which is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/XHTML+XML.
    View Demo

    55. Date Picker – jQuery Plug-In
    Date Picker component with a lot of options. Date Picker allows users to easily select a date or range of dates. Some features are: multiple calendars; single, multiple and range selection; marking of special, weekend and special dates; an easy-to-customize look via CSS and more
    View Demo

    56. JQuery Interactive Date Range Picker With Shortcuts
    Date Range Picker plugin uses jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.
    View Demo

    57. Calendar – A JavaScript Class For Mootools
    Calendar is a JavaScript class that adds accessible and unobtrusive date-pickers to your form elements. Features highly configurable inputs and selects, multi-calendar support, variable navigation options and multi-lingual and fancy date formatting.
    View Demo

    58. Scrollable Timelines
    Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.
    View Demo

    59. MooGenda – JavaScript Calendar Based On MooTools
    MooGenda is a calendar based on MooTools, that reads events from JSON requests. Supports double click on event to see the deafult event view and features also drag and drop event in month view, drag and drop and resize event in diary view and every change send a request to back end (to store when and what changed in the event).
    View Demo

    60. MooTools Events Calendar
    The MooTools Events Calendar is a JavaScript calendar class that was built using the MooTools framework – the calendar supports week/day/month view and the addition of events.
    View Demo

    Top

    Image Handling And Sliders

    Fancy Thumbnail Hover Effect - jQuery
    Image Previewing

    61. imgPreview – jQuery Plug-In
    The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time. The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link.
    View Demo

    62. SlideItMoo – Image Slider
    SlideItMoo is a banner and image slider developed with MooTools. The image slider supports continuous sliding when navigating, offers the possibility to set how the slider will slide (from left or from right) when used with the auto slide feature on, offers the possibility to give it the item width (width of the slider’s items) and let it display the elements according to that width and the visible items parameter.
    View Demo

    63. Fancy Thumbnail Hover Effect With JQuery
    This is a thumbnail hover effect jquery and CSS tutorial. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
    View Demo

    64. FancyZoom Meet Prototype
    FancyZoom uses Apple’s rounded corners and supports pretty much any HTML you can throw in a div (images, text, Flash, etc.). It was built using script.aculo.us and Prototype – it now works with any HTML already included on the page.
    View Demo

    Top

    Slideshow

    65. Moving Boxes
    A jQuery slider with buttons to change panels, and the panels zoom in and out.
    View Demo

    66. Supersized – Full Screen Background/Slideshow jQuery Plugin
    Supersized features include: cycles Images/backgrounds via slideshow with transitions and preloading, navigation controls allow for pause/play and forward/back, resizes images to fill browser while maintaining image dimension ratio.
    View Demo

    67. Animated JavaScript Slideshow
    This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
    View Demo

    68. Easy Slider 1.7 – JQuery Plugin
    JQuery plugin for sliding images and content. Easy Skider features include: auto-slide, continuous sliding, “Go to first” and “Go to last” buttons, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page.
    View Demo

    69. Image Rotator With Description
    Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
    View Demo

    70. BarackSlideshow
    BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images.
    View Demo

    71. noobSlide – MooTools
    An easy to install and flexible slider plug-in created by using MooTools. The download includes a ready page example.
    View Demo

    Top

    Lightbox

    72. Lightview – Overlay Anything With Style
    Lightview was built to change the way you overlay content on a website. Designed to complement your content, and features include: smart image preloading, customization without CSS, adjustable rounded corners, no PNG required, resizing to always fit the screen and one-click slideshow.
    View Demo

    73. LightWindow
    The ultimate modal window system, LightWindow, allows you to build your own theme, create mixed media galleries including flash, quictkime and images.
    View Demo

    Top

    Image Effects

    74. jParallax
    jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse.
    View Demo

    75. swfIR – swf Image Replacement
    Using JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website.
    View Demo

    76. Animated Postcard With jQuery
    In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Sam Dunn will teach you the art of looping animations using setTimeout(), how to take advantage of the Easing plugin and a new way to spice up your banner.
    View Demo

    77. BBC Radio 1 Zoom Tabs
    How to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
    View Demo

    78. Animate Image Filling Up Using jQuery
    Spruce up your website’s header by letting Sam Dunn teach you how to make an image appear to fill up with just a splash of jQuery and Photoshop.
    View Demo

    Top

    Image Cropping

    79. UvumiTools Crop
    This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful tool for any site that provides image hosting, for example.
    View Demo

    80. Jcrop – The jQuery Image Cropping Plugin
    Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
    View Demo

    Top

    Content Sliders

    81. Ultra Versatile Slider
    In this tutorial Antonio Lupetti explains a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools.
    View Demo

    82. Mootools Slider With Two Knobs
    Mootools slider with two knobs (double pinned slider) with range indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by modifying the slider.css.
    View Demo

    83. Mootools CSS Styled Scrollbar
    A small piece of JavaScript that creates a CSS-styled scroll bar from the MooTools “slider” class.
    View Demo

    84. AnythingSlider – JQuery Plugin
    This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders Chris Coyier created and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
    View Demo

    85. Fantastic News Ticker Newsvine-Like Using Mootools
    In this tutorial Antonio Lupetti teachs you how to in a simple way implement a Newsvine-like News Ticker (with news vertical scrolling) on your website.
    View Demo

    86. Amazon Books Widget With jQuery And XML
    It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.
    View Demo

    Top


    Interactivity And Communication

    Zoomable And Interactive Maps - jQuery plugin

    87. Starbox – Rating Stars For Prototype
    Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype JavaScript framework. For some extra effects you can add Scriptaculous as well.
    View Demo

    88. JQuery Plugin For Zoomable And Interactive Maps
    A jQuery plugin for zoomable and interactive maps – the map was made to be as appealing as possible by using crisp graphics and smooth animations.
    View Demo

    89. Digg-Style Post Sharing Tool With JQuery
    Kevin Liew will show you how to create a social bookmarking tool that looks similar to digg’s. He also includes the komodomedia’s social bookmarking icons and a long list of submission URL for one click bookmark.
    View Demo

    90. Ajax IM
    Ajax im is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. Demo usernames are “test”, and “test (1 to 4)”. Password is “test”.
    View Demo

    91. Drag To Share
    We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. In this tutorial Dan Wellman is going to show you how you can replicate this behavior with jQuery and jQuery UI.
    View Demo

    92. Better Blogroll – Dynamic Fun With SimplePie And JQuery
    A traditional blogroll is a simple list of other sites, often in the sidebar. Let’s improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.
    View Demo

    93. Twitter Friends And Followers Widget – JQuery Plugin
    Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.
    View Demo

    94. Search And Share
    Search and Share makes highlighting text to a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and presents a variety of options accordingly.
    View Demo

    95. Realtime Related Tweets Bar – JQuery Plugin
    A real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates. Features; show realtime related tweets based on your post tags, show your twitter timeline (related to your post or not), return only tweets with links or return all and more.
    View Demo

    96. jsDraw2D – 2D Graphics Library For JavaScript
    This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG or VML. JavaScript developers, web developers and webmasters can take advantage of the library to add graphics drawing functionality to their web applications or websites using the library.
    View Demo

    Top


    Miscellaneous

    Music Player in jQuery

    97. Typeface.js – Rendering Text With JavaScript, <canvas>, And VML
    Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
    View Demo

    98. FontEffect – JQuery Plugin
    Font effect is a jQuery plugin that adds some effect to html text. The available effects are Outline, Shadow, Gradient and Mirror. No images are used for these effects and no additional CSS is necessary. All effects are contained in the plugin and do not interfere with page rendering in older browser or browser with JavaScript disabled.
    View Demo

    99. Ajax Page Loads Using MooTools Fx.Explode
    When you click on any of the designated Fx.Explode elements, the elements “explode” off of the screen. Click again and they magically reappear.
    View Demo

    100. Step By Step – Show And Explain Visitors What Your Page Has For Them
    You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
    View Demo

    101. Music Player In JQuery
    In this tutorial you create an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can click and drag with mouse to interact with interface’s music player or use directional keys and spacebar instead of mouse.
    View Demo

    102. Skype-Style Buttons Using MooTools
    JQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. David Walsh was impressed by Janko’s article so he decided to port the effect to MooTools.
    View Demo

    103. Folder Collapser For Dynamic Content
    How to create a group of collapsible folders using pure JavaScript and some JQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page – wherein the number of folders may be unknown.
    View Demo

    104. Twitter-Like Load More Widget
    Twitter uses a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, JavaScript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.
    View Demo

    105. Web 2.0 Document Search Site
    In this tutorial we will create a document searching site with jQuery. This site will be used to search documents by specifying an extension (file type). The data is then filtered and sent to Google.
    View Demo

    Top

    The resources are not in any particular order and as usual you decide what resource fits best for your purposes. Cashrevelations.com is not affiliated with any of the authors.

    ]]>     http://cashrevelations.com/magazine/2009/10/ajax-and-javascript/feed/ 11