AJAX Snippets

After our code snippets for web designers series, I am presenting you with 25 Ajax tutorials and code snippets...

This is not a static list, ‘ll continue adding more snippets later…

 

---

Drag & Drop Sortable Lists with JavaScript and CSS – In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list.

---

Better File Uploads with AJAX – Browser-based file uploads, in particular those involving the HTML <input type=”file”> tag, have always been rather lacking. As I am sure most of you are aware, uploading files exceeding 10MB often causes a very poor user experience.

---

Expression Engine and Ajax – How you can replace certain content through a user click without the need for a page refresh.

---

Shopping Cart using Script.aculo.us – This workshop we will be building a shopping cart that’s Ajax powered. This will be a drag and drop shopping cart using the Script.aculo.us JavaScript library. We will also be using PHP on the back end to store the user’s shopping cart in sessions.

---

AJAX Newsletter Sign-Up Tutorial – This tutorial will demonstrate how to create a newsletter sign-up section which uses ajax.

---

Developing a Web-based POP 3 Client – In this article, the first of three parts, you will start creating a simple web-based POP 3 client using AJAX, which will use “XMLHttpRequest” objects to retrieve messages from a mail server.

---

AJAX username availability checking – The goal of this AJAX example is to allow a user who is registering for your site to see if the username they want to use is taken already or not

---

AJAX RSS Reader – This AJAX reader is written in Javascript only, it just request a backend url on the same server then display the feed resulted

---

Make an AJAX Website in Less than 10 Minutes – I’ve been toying around with AJAX apps and XMLHttpRequest but have wanted to put up a site that loads all of its content asynchronously. If you’re like me and you learn best from working with examples you’re only 10 minutes away from your first AJAX website.

---

Animated Live Search – I’ve been meaning for some time to give a little tutorial on the live search I created for this latest design. There are a few steps involved, and I’ll do my best to explain each as we go.

---

AJAX: Creating Huge Bookmarklets – A bookmarklet is a special piece of JavaScript code that can be dragged into a user’s link toolbar, and which later can be clicked on to implement cross-site behavior.

---

Dynamically Loaded Articles

---

Slide out Shelf - Maybe you’ve noticed it on my site, and maybe not because my design is purposefully inconspicuous. There is a small tab just under the masthead on the right side that says “More Stuff”. When you click on it, a large area slides open with a bunch of information on it. This is the “shelf”.

---

Integrate Google Calendar in your website using AJAX - One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it’s a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website.

---

Getting Started with Ajax – The start of 2005 saw the rise of a relatively new technology, dubbed “Ajax” by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML.

---

Ajax Slideshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results.

---

Ajax Poll Script

---

An AJAX enhancement for WordPress blogs – AjaxWp is a lightweight JavaScript enhancement that adds AJAX functionality to WordPress blogs speeding up load times, increasing the responsiveness of the user interface and giving the blog an overall cooler look.

---

Unobtrusive Degradable Ajax Style Sheet Switcher

---

Digg style voting

---

Sortable Tables

---

Ajax Toolbox – Play with Ajax! The toybox is designed to be a showcase for simple Ajax examples and techniques.

---

Scriptaculous – script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

---

Prototype – Prototype is a JavaScript Framework that aims to ease development of dynamic web applications

---

Moo.fx - moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework

---

 

 

 

AJAX Tutorials

Here I am presenting you with 100 Ajax tutorials with JavaScript and related tutorials. Now its easy to get all the AJAX resource at one place.

Ajax Tutorials

• Expression Engine and Ajax
• Ajax Instant Tutorial loading – content without page refresh
• Drag and Drop with Rico
• Drag and Drop Sortable Lists
• Ajax Shopping Cart
• Accessible forms and unobtrusive javascript
• Form Submit With Ajax
• Ajax File Uploading
• Ajax Basics
• Ajax Image Gallery
• Tabbed Content
• Amazon Web Services with Ajax
• Learn Ajax in 20 Minutes
• Shopping cart with script.aculo.us
• Ajax Design Patterns
• Ajax for Designers
• Ajax Progress Bar
• Handling Bookmarks and the Back Button
• Build a photo tagging site
• Introduction to Ajax
• Ajax : What is it good for ?
• Newsletter sign up Tutorial
• Develop a web-based pop3 client
• AJAX Tutorial with Prototype
• How to Auto Include a Javascript File
• Username availability checking
• RSS Reader Step by Step Tutorial
• Ajax website in less than 10 minutes
• Degradable form validation
• Nice Forms
• Animated Live Search
• Make Tables Sortable
• Bookmarklets
• Ajax Chat Sources
• Dynamically Loaded Articles
• Dynamically Loaded Content
• Chained Select Boxes
• Dynamic List
• Slide Out panel
• Speed up Ajax apps
• Integrate Google Calendar in your website
• Create your own Ajax effects
• Ajax Toy Box
• Alistapart – Get started with Ajax
• Image Cropping
• RSS Ticker
• Ajax Tutorial
• Slide in RSS Items
• Mastering Ajax
• Digg Voting
• Ajax Poll
• Ajax-S – Ajax Slideshow
• Ajax and Flash – Aflax
• Ajax Mistakes
• Ajax Enhancement for WordPress Blogs
• Develop Web Applications with Ajax
• How do you code an Ajax Page ?
• Step by step Ajax
• Take command with Ajax
• Ajax Style Switcher
• What is Ajax ?

Javascript Libraries

• Prototype
• Bajax
• Behaviour
• Rico
• Solvent
• Script.aculo.us
• Mochikit
• Moo.fx
• Toxic
• Plex Toolkit
• Engine
• Ajax Toolkit
• Interactive Website Framework
• RSLite
• XHConn
• Taconite
• Qforms
• Jspkg
• Ajax Caller
• Sajax
• Sardalya
• X
• Ajax Requests
• Moo.Ajax
• Spry

Other Tutorial Roundups :

• 30 Ajax Tutorials
• Ajax Matters Blog – 130 Tutorials
• 50 Ajax Reference Websites
• 60 More Ajax Tutorials
• Ajax Impact Tutorials
• Ajax Tutorials

Ajax Resource Sites :

• Ajaxian
• Ajax Matters
• Ajax Patterns
• Ajax Magazine
• Ajax Resources
• Ajax Toolbox
• Top 10 Ajax Applications

 

AJAX Widgets

Here the collection of free AJAX based widgets and mini applications. You can customize and use with your own web applications.

Prototype Window
Demo
This javascript class allows you to add window in a HTML page.

AJAX Star Rating BarDemo
This is a rating bar script that allows users to rate things with no page refresh.

An AJAX contact form – Demo
A drop-in AJAX contact form that can be used in WP. PHP () Mail ready.

Heatmap for your website – Download
ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones.

GreyBox: An easy javascript popup box
GreyBox can be used to display websites, images and other content in a beautiful way.

Digg – like spy script – Demo
Examples and code on how to create a digg spy page.

Bubble Tooltips – Demo
Easy way to add fancy tooltips with a balloon shape to any web page.

Reflection.js 1.6 – Demo
To add a reflection just add a class=”reflect” to the image.

Edit-in-Place with Ajax – Demo
A nice little AJAX function that allows users to edit text on a page without any forms.

Ajax Tabs Content script – Demo
Fetch and display an external page inside a container when a tab is clicked on.

Dragable RSS boxes script – Demo
Tutorial and downloadable files to create draggable boxes like on online desktops.

AJAX poller script – Demo
A poller script that uses Ajax to send vote to the server & receives results from the server.

Dragable content script – Demo
In this script you can drag nodes to a set of boxes.

Lightbox/Modal window effect using CSS
The Lightbox Effect without Lightbox. Lightbox alternative and login method.

AJAX Fisheye List Widget – Demo
Dojo Tool Kit has come up with a new web based non-flash menu which is easy to use.

Google X script – Demo
Cool trick with javascript – google page with crazy rollovers.