Ajaxdaddy.com Recent Ajax Demos

Flickr Like edit

Sun, 05 Jul 2009 00:46:36 GMT

If you are not familiar with how flickr handles editing data, here�s a short summary. - 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). It shows how to write a little code to emulate flickr edit style effect almost perfectly. The script is not using any third party libraries. There is a lot of html code involved, i don't recommend it if you intend to use a 'plugin' like edit in place script. On top of that, php and html is mixed together meaning more difficult to customize the script.

Ajax instant edit

Sun, 05 Jul 2009 00:46:36 GMT

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. This is a very simple script which only works with span tags. Text from the span html tag is sent to update.php which process the request. Plain html is returned from the server and this result populates the span.

MooTools Autocomplete

Sun, 05 Jul 2009 00:46:36 GMT

A MooTools Autocompleter widget that creates a unobtrusive and customisable suggestion box for input fields from variable data sources. Try it out, it can load the suggestions from a local object or via XHR from a JSON or an XHTML source. Example in the Playground which includes an Local, Json and Ajax Autocompleter. Compatibility Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+) Features All classes extend the base class Autocompleter.Base, which provides all basic features to create an Autocompleter from any provided source. Both, Ajax.Json and Ajax.Json extend Autocompleter.Ajax.Base, which handles the query request and response.

Scriptaculous Autocomplete

Sun, 05 Jul 2009 00:46:36 GMT

An Ajax autosuggest script is supposed to help the visitor and present in real time (as they type) some possible results based on their entered words/characters. In my opinion, this is a great feature to enhance the user experience. It's very easy to build an autocomplete form using scriptaculous and prototype. You just need one line of javascript
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);

Dojo Fisheye

Sun, 05 Jul 2009 00:46:36 GMT

A fisheye effect based on Dojo library. It's easy to setup once you learn a few things about djConfig parameters. Downside of this script is the size of the dojo widgets javascripts, if you plan on having this dojo effect only analyze the code and try to get rid of some .js files. To setup this demo on your website, you need the 'src' directory from dojotoolkit.org Also this effect seems to load pretty slow on some computers.

Dhtml Autocomplete

Sun, 05 Jul 2009 00:46:36 GMT

Files included in package * ajax-dynamic-list.html = Main HTML file * js/ajax-dynamic-list.js = Main JS file * js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack) * create-countries.php = PHP file which creates a database table for the demo * ajax-list-countries = Ajax contacts this file from the script. This file outputs a list of countries

BrandSNew Autocomplete

Sun, 05 Jul 2009 00:46:36 GMT

The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar). The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar). The results of the first request are cached on the client machine and are filtered as the user continues to type, to reduce the number of requests hitting the server. In the JSON example above a callback function is passed to the autoSuggest instance. It is called when the user selects an entry, and inserts the entry id into a hidden field (visible for this example).

SlideShow Viewer

Sun, 05 Jul 2009 00:46:36 GMT

Stylish gallery script with a 'lightbox' effect. Intuitive interface, it provides basic slideshow functionalities. The current image in the viewer has a nice flow effect applied. The viewer is free to use in personal or commercial web pages, provided that the script is not sold or exchanged for profit. An unbranded version of the slideshow, suitable also for resale, may be purchased for a one-time per-site license fee. Too bad is not free.

Prototype window

Sun, 05 Jul 2009 00:46:36 GMT

With this demo you can add an window in a HTML code. The code uses Prototype and is inspired by script.aculo.us library. It has been tested successfully on all browsers.

Ajax Tabs

Sun, 05 Jul 2009 00:46:36 GMT

This workshop we will be building a tabbed content browser that�s Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab. We will start this workshop off with the XHTML and CSS for the tabbed content browser. We will need 3 main IDs (one for the container, one for the content area and one for the loading status) and 1 class (for the tabs). The first ID #container will hold the tabs as well as the content area, we only give this a width which everything inside can inherit. The following class .tabs is going to style our tabs, most of the styling we have is mostly for looks an important property is the float:left. The float:left makes the tabs so they are on the same horizontally aligned, this can also be done with using display:inline but with a little more tweaking. We also gave it a property of cursor:pointer so when the user mousses over the tab that it has the look and feel of a button. Finally we have the ID #content.