- 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;
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
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 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
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.
- Show user the data field normally (for instance: the title of a picture)
- When mouse rolls over that title, make the background of the word yellow
- 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
- A user can rename the picture and then push “save.”
- Run a little script that updates the name into the database
- Remove the input box and the buttons and return to the original title display (updated with new title).
A nice tooltip script where the content of the tooltip is retrieved by Ajax from external files.
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!
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.
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.
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>.
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
Create very flexible and useful draggable content boxes.
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.
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.
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.
Nice script to check if a set of links are valied.
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.
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.
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.
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 is a flexible script that adds contact/expand functionality to arbitrary block content on a page using a simple “icon” to toggle its state.
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
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.
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.
script handle both vertical and horizontal accordions, really nice!
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.
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.Autocompleter allows for server-powered autocompleting text fields. [demo]
Very flexible and professionally looking auto complete Ajax script
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.
Here’s a form validation script that is very powerful and easy to use.
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.
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.
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
chatbox, tagboard or mini chat
Use AJAX and jQuery to add dynamic file upload to your site.
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.
Really nice table sort script with good documentation
a nice DHTML week planner. It used Ajax to get events/appointments from the
script makes it easy for you to move, resize and edit events without having to reload the page.
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.
A list of very good looking and flexible dialog boxes.
GoogieSpell is a spell checker that you can use in your own web-application.
Create an AJAX powered poll. Requires PHP and mySQL.
The Ajax activity indicators are often used by web developers to let the users know when the Ajax application is loading.
This is not a script but it’s a quiuseful Create easily your own ajax loader icon easily with 3 simple steps.
A collection of reallly good looking statusindicators , free download.
Large collection of activity indicators to dhow your users that something is happening.
again loads of really good looking indicators that you can use for free.
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.
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 Includes scriptto let you input a list of external pages for the script to choose and selectively include one onto the current page.
- Daily 1 (“dailyw”): The script will include a different file for each day of the week (Monday, Tuesday, etc).
- Daily 2 (“dailym”): The script will include a different file for each day of the month (1st to 31st).
- Random (“random”): The script will randomly pick one from the list of files to include.