tripwire magazine

In this article tripwire magazine present a list of more than 70 useful AJAX-based techniques and tools you should always be aware of when developing Ajax-based web-applications. The article gives you instant access to Ajax menus, calendars, interactive elements, animation, basic javascripts, visual effects, auto-completion, instant field editing that you browse quickly without looking through endless search results or bookmarks.

Asynchronous JavaScript and XML or Ajax is not a technology or a programming language as some may think. Ajax is a combination of well known and proven web technologies that used togehter in the right way can improve the responsiveness and user experience of web applications significantly. With Ajax every user action that normally would generate an HTTP request for a new page on the server takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. Further when information is needed the Ajax engine requests only the information needed saving the load time of a full web page.

Ajax incorporates:

• Presentation using XHTML and CSS;
• Dynamic display and interaction using the Document Object Model;
• Data interchange and manipulation using XML and XSLT;
• Asynchronous data retrieval using XMLHttpRequest;
• JavaScript binding everything together.

Since Ajax came out we have seen that web-developers can create amazing web-applications with it. Web-applications like Netvibes, GMail and many others a level of interactivity and responsiveness that we never thought possible. Modern web-applications can be designed with enhanced user interfaces and functionalities, which used to be the privelege of professional desktop-applications.

Section 1: What is a Joomla Template and how to use it

Section 1: Ajax Pop-up Windows

Section 2: On Screen Editng

Section 3: Dynamic Content

Section 4: Ajax Menus

Section 5: Ajax Auto Completers

Section 6: Chat and Shouting

Section 7: Grids

Section 8: Ajax Calendars

Section 9: Dialog Boxes

Section 10: Ajax Spell Checkers

Section 11: Ajax Polls

Section 12: Activity Indicators

---

More articles from tripwire magazine that you may find interesting!

		120+ Javascript, Ajax, jQuery Mega Toolbox In this article tripwire magazine provides a huge Javascript, Ajax and jQuery Toolbox that I hope really really gonna make a difference in your work efficiency. Javascript, Ajax and jQuery is in combination with other Web Technologies like fx. CSS key enablers for Dynamic Elements on Websites. Make sure you look carefully through this article to find the goodies you need.
		80+ Photoshop Tutorials: Practical Web Interface Design In this article tripwire magazine present you more than 80 high quality Photoshop Tutorial that guides you step by step in building up a web interface all the way from scratch.
		35+ very Useful And Powerful CSS techniques In this article tripwire magazine provides a list of very useful CSS Techniques that you can use freely to make your website or blog more dynamic and inprove its Look & Feel. The article will also give you an introduction to CSS and why it should be used instead of table-based layouts. hand-picked because they deserve to.

---

Ajax Pop-up Windows

Lightwindow

LightWindow is similiar to the other “lightbox style” scripts. It allows you to put more or less ANYTHING in the pop-up window. Quite powerful.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

• It does not conflict with pop-up blockers
• It’s only 22 KB!
• It’s super easy to setup
• It’s super easy to use
• You can easily alter the style as it is controlled through CSS

Interstitial Content Box

An interstitial is a container that appears over an entire webpage intermittently to display content in an eye catching way. A common example is an interstitial ad, though advertising is certainly just one of many handy uses of an interstitial.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website

On Screen Editng

AJAX inline text edit 2.0

A small piece of javascript reads al SPAN tags, checks if it has class=“editText” and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

Create flickr-like Editing Fields

1. Show user the data field normally (for instance: the title of a picture)
2. When mouse rolls over that title, make the background of the word yellow
3. If the user clicks on the word, change that word to a input box with the word in it. Also show a “save” and “cancel” button
4. A user can rename the picture and then push “save.”
5. Run a little script that updates the name into the database
6. Remove the input box and the buttons and return to the original title display (updated with new title).

Dynamic Content

Ajax tooltip

A nice tooltip script where the content of the tooltip is retrieved by Ajax from external files.

s3Slider jQuery plugin

Very good looking image slider. It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.

Advanced RSS Ticker

RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from popular news sites. With this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion!

Pausing RSS scroller

Pausing RSS scroller is an innovative scroller that combines PHP and external JavaScript to let you show any RSS feed on your site- and beyond! By bypassing Ajax in favour of dynamically loaded JavaScript, the scroller can be included on any site, enabling you to syndicate your feed for other sites to display, just by allowing webmasters to cut and paste the frontend portion of this script.

Ajax XML Ticker

This is an Ajax enhanced ticker script that lets you use a text file as the contents of the ticker to show! Easily define your messages, which support rich HTML, all inside this external text file. Now there’s no more excuse to not update the contents of your ticker more often! Note that due to Ajax limitations, the ticker script and text file to draw from need to be on the same domain/server.

“Slide in” RSS items

This scripts reads RSS feeds from an

external source and displays them on your page. Each items appears after a predefined number of seconds by sliding in from the right side.

Dynamically loaded articles

This is a basic example showing you how to use AJAX. In this

script, you have a list of article titles at the right side. When you click on one of them, AJAX will be used to request the content of the article from an

external file and show it in the main <DIV>.

Static list based folder tree

This is a list based folder tree. What you have to do is to create a <UL><LI> list. The

script will then create the tree based on this list. The

script uses cookies to remember state of nodes. It also includes functions for expanding/collapsing all nodes.

Dragable Boxes

Create very flexible and useful draggable content boxes.

Iframe SSI script

Want to dynamically include the contents of another page onto the current without resorting to server side means (ie: server side includes)? This script uses the IFRAME tag, and by automatically resizing it based on the actual height of the containing page, allows you to seamlessly display external content on your page. In other words, the iframe is automatically resized to be only as tall as the external page’s height.

Combo-Box Viewer

Looking for a “contractible” way to display content on your page that’s easy to implement as well? The Combo-box Viewer script allows users to selectively view HTML content on your page via the SELECT menu.

Ajax directory Manager

Are you fed up with that lame old directory manager your hosting company provided you with for you website or blog? If you are already familiar with windows or mac file browsers, why should you have to change the way you work for the web? Try Relay for a change.

Ajaxed Link checker

Nice script to check if a set of links are valied.

Ajax Navigation, Menus, Tabs

MooTabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.

Ajax Tabs Content Script

This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs.

Ext JS Ajax Tabs

Virtual Pagination script

Does your page contain lengthy chunks of text, a series of images, or long forms that dissuade people from reading them top to bottom? This script lets you transform long content on your page into a series of virtual pages, browseable via pagination links.

Switch Content Script

One of the most versatile scripts of its kind, we created this one to compact arbitrary content on your page so they’re expandable on demand. This allows you to save space within your webpage and even add to the aesthetics of the webpage’s design in many cases.

Switch Content Script II

Switch Content Script II is a flexible script that adds contact/expand functionality to arbitrary block content on a page using a simple “icon” to toggle its state.

19. Ajax Pagination script

This script lets you include content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested

Mootools Accordion

RSS Display Boxes

Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers. Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the “title”, or “title” plus “description” etc) to display. All this is done on the client side via the script’s exposed methods.

Ajax scrolling pages

This script loads content from the server and inserts it into an empty HTML element(example a DIV tag) on your page. New pages can be appended dynamically and the script will scroll down to the content of the new pages.

Accordion

script handle both vertical and horizontal accordions, really nice!

Accordion Content script

Group contents together and reveal them on demand when the user clicks on their associated headers, with Accordion content script! Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and even enable persistence so the state of the contents is preserved within a browser session.

Ajax Auto Completers

Dynamic client lookup

This script uses AJAX to autofill a form. Open the demo and type in 1001 in the “client ID” text field. AJAX will when you have done this call a script on the server and auto fill the rest of the form with client data.

AJAX autocompletion

Ajax.Autocompleter allows for server-powered autocompleting text fields. [demo]

Ajax Auto Suggest

Very flexible and professionally looking auto complete Ajax script

Ajax dynamic list

AutoCompleter (v1.1)

his AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

From Tools

Really Easy Field validation

Here’s a form validation script that is very powerful and easy to use.

fValidate

High quality javascript form validation tool with good documentation and many demos

Ajax form validation

wforms

wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms.

AJAX contact form

server side jQuery with Jaxer

What we have done is created one ‘master’ form, and applied access restrictions to certain elements by ‘tagging’ them with css classes. We then used server side jQuery to manipulate the DOM and disable or completely remove unwanted elements. The DOM that the client receives, contains only the information that’s relevant to them.

Ajax login form (PHP & Javascript)

A nice ajax login form using 3 javascript files, 2 php files and 1 stylesheet.

Form Plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted.

Form field Progress Bar

This script allows you to restrict the number of characters inside a form element (ie: textarea) while displaying a progress bar on the remaining characters beneath it. Very cool

Chat and shouting

A free PHP + Ajax shoutbox

chatbox, tagboard or mini chat

File Uploaders

JqUploader

Use AJAX and jQuery to add dynamic file upload to your site.

Grids

TableKit

TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

Sortable Ajax Tables

MochiKit to do sortable tables from data given by the server in either JSON or XML format.

Unobtrusive Table Sort Script

Really nice table sort script with good documentation

Ext JS Grids

Ajax Calendars

DHTML Week planner

This is

a nice DHTML week planner. It used Ajax to get events/appointments from the

server. This

script makes it easy for you to move, resize and edit events without having to reload the page.

Monket Calendar

An Ajax enabled online calendar. Drag and drop events to change dates, drag the start/end of an event to create multi-day events, create and edit events without refreshing the page, all with an iCal style interface.

JS Calendar

This is a cross browser Javascript calendar

A validating link calendar

Free AJAX Calendar

Free Super AJAX Calendar

MySQL Calendar

Dialog boxes

jQuery Alert Dialogs

A list of very good looking and flexible dialog boxes.

Ajax Spell Checkers

GoogieSpell

GoogieSpell is a spell checker that you can use in your own web-application.

Ajax Polls

6. AJAX Poll

Create an AJAX powered poll. Requires PHP and mySQL.

Activity indicators

The Ajax activity indicators are often used by web developers to let the users know when the Ajax application is loading.

Ajaxload.info

This is not a script but it’s a quiuseful Create easily your own ajax loader icon easily with 3 simple steps.

Ajax loading animated gif

A collection of reallly good looking statusindicators , free download.

Activity indicators

Large collection of activity indicators to dhow your users that something is happening.

More than 120 Free Ajax Activity Indicator Gif Icons

again loads of really good looking indicators that you can use for free.

Ajax Libraries

AJS

AJS is a ultra lightweight JavaScript library that is around 2 years old. It is inspired by MochiKit, but differs by being small and expressive. The current version is only 33 KB (uncompressed!), whereas MochiKit and other libraries such as JQuery, Mootools or Prototype is over/around 100 KB.

Basic Ajax Routine

Regardless of what you do using Ajax, they all rely on the same basic functions. This is a very small Ajax routine (less than 3 Kb) that enables you to easily use Ajax on your site to send “GET” or “POST” requests asynchronously.

Ajax Includes Script

This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document.

Ajax Rotating Includes Script

Ajax Includes scriptto let you input a list of external pages for the script to choose and selectively include one onto the current page.

1. Daily 1 (“dailyw”): The script will include a different file for each day of the week (Monday, Tuesday, etc).
2. Daily 2 (“dailym”): The script will include a different file for each day of the month (1st to 31st).
3. Random (“random”): The script will randomly pick one from the list of files to include.

Related posts

1. 10 Useful jQuery Techniques to Improve Your Code jQuery is known for making things that where hard...
2. 3 Contests with Great Prizes You can’t afford to miss – or can you? To try out something new and to give tripwire magazine...
3. 30+ Essential Javascript Framework Supported Navigation Techniques Navigation is key to any web site or blog....
4. 150 Worth Knowing Web Developer Tools and Techniques Creating state of the Art Web Development in reasonable...
5. How to: jQuery Driven Social Bookmark Counters In this article tripwire magazine provides a tutorial on how...

Please remember to share this post!