Ajax has becoming very popular recently, but most designers seem to rehash the same script over and over (you’ll see it in a lot of Wordpress Themes and Plugins). Perhaps we aren’t using ajax technology to its full potential, myself included. The list below is made up of the best FREE scripts available, they are all of the highest quality and more or less easy to configure. Give them a try.I have tried and tested the top 22, and aim to try the rest, because to be honest they look pretty cool.
1. Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/)
Description:Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.Technology:Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library
2.Timeline (http://simile.mit.edu/timeline/)
Description:Timeline is a widget for visualizing time-based events. It is like Google Maps for time-based information.Technology:Ajax and DHTML
3. Reflection.js (http://cow.neondragon.net/stuff/reflection/)
Description:Reflection.js allows you to add reflections to images on your webpages. It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.Technology:Javascript.
4. Pie & Donut Chart (http://www.amcharts.com/pie/)
Description:Pie & Donut (doughnut) is a very universal and fully configurable Flash chart. Using it, you can easily have good-looking, animated pies or donuts on your website. You can also use it for creating elaborate navigation menus.Technology:Flash.
. Plotr (http://solutoire.com/plotr/)
Description:Plotr is a lightweight chart creating framework. It’s released under the BSD license.Technology:Mochikit.
6. Ajax Instant Messenger (http://www.ajaxim.com/)
Description:Ajax im is a browser-based instant messaging client. It can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this “web application” to work.Technology:Ajax and Javascript
7. Starbox (http://www.nickstakenburg.com/projects/starbox/)
Description:Starbox allows you to easily create all kinds of rating boxes using just one PNG image.Technology:Prototype javascript framework
8. Ajax Tabs Content (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/)
Description: This is a versatile script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script.Technology:Ajax.
9. Drag and Drop Shopping (http://demo.script.aculo.us/shop)
Description: An excellent drag and drop shopping cart.Technology:Ajax.
10. Progress Bar (http://www.webappers.com/progressBar/)
Description: A very stylish progress bar.Technology:Ajax.
11. Thick Box (http://jquery.com/demo/thickbox/)
Description: ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.Technology:Javascript.
12. Create Flickr Like Fields (http://dbachrach.com/blog/2007/01/07/create-flickr-like-editing-fields-using-ajax-css/)
Description: The name says it all. Technology:Ajax.
13. jTip – A jQuery Tool Tip (http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip)
Description: jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy…Technology:Ajax
14.Accordian (http://demos.mootools.net/Accordion)
Description: A smooth and stylish ‘accordian’ effect menu.Technology:Moo Tools Javascript Framework
15. Unobtrusive AJAX Star Rating Bar (http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/)
Description:This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh.Technology:PHP.
And the rest…
16. Plotkit (Javascript Chart Plotting Script).
17. Pie (Create ajax pie charts).
18. Prototip (Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework).
19. Ajax Inline Text Edit (This is a very simple script which only works with span tags).
20. Tabbed Content Browser (An Ajax powered tabbed content browser).
21. Table Sorting Script (An unobtrusive ajax Table Sorting Script).
22. Color Sphere (DHTML Color Picker).
23. Mapper.js (Thisallows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG)).
24. Live Validation (LiveValidation is a small open source javascript library built for giving users real-time validation information).
25. Draggable Content (Javascript drag and drop).
26. Carousel (A Carousel Effect Image gallery).
27. Multibox (A javascript lightbox that supports images, flash, video, mp3s…).
28. Smooth Gallery (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…).
29. Form Style Generator
30. Auto Complete (A MooTools Autocompleter widget that creates a unobtrusive and customisable suggestion box for input fields from variable data sources).
31. Active Collab (An open Source Project Management Script).
32. Greybox (A small unobtusive pop up script).
33. Ajax Poller.
34. Tablekit (TableKit is a collection of HTML table enhancements using the Prototype framework).
35. J-query Shoutbox (This script is based on jQuery library and Form plugin.It’s very easy to setup it, also an archive is available for download so you can play with the files on your localhost).
36. Ajax RSS Ticker.
37. Highslide (It streamlines the use of thumbnail images and HTML popups on web pages).
38. Slideshow Viewer (Stylish gallery script with a ‘lightbox’ effect).
39. Mocha (Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with canvas tag graphics).
40. Loading XML into a page with xmlHttpRequest.
Saturday, September 20, 2008
Sunday, September 14, 2008
Login Ajax PHP
Ok, here’s another AJAX login form example…In this example I am using 3 javascript files, 2 php files and 1 stylesheet
download ajax code login php
Brief description:_ajax.new.js: is the main ajax class. I have already explained this class formdata2querystring.js: used for posting the element of a form_applogin.js: specific ajax class to handle the login formindex.php: simple login formstyle.css: simple stylesheet
download ajax code login php
Brief description:_ajax.new.js: is the main ajax class. I have already explained this class formdata2querystring.js: used for posting the element of a form_applogin.js: specific ajax class to handle the login formindex.php: simple login formstyle.css: simple stylesheet
Free AJAX Scripts
| Free AJAX Scripts by Freeajaxscripts.net |
Dragable RSS boxes - AJAX Script This is is a script that uses Ajax to read data from external RSS sources and display them inside dragable boxes. You can also create new boxes dynamically directly from the page. This is the first version of this script. New functionality will be added to this script during the following weeks and months. Note: PHP or other server side language is required. Demo: demo |
Friday, September 12, 2008
MyBIC AJAX framework 1.0 Released
Jim just announced the availability of MyBIC 1.0.0, thePHP & AJAX Framework. From his blog the framework have been running stable for months now with 0 bugs to date and 0 memory leaks. Major addition in this release is the integration of Firebug with the Framework's debugger, to make debugging messages go straight to your Firefox. From MyBIC 1.0 features :Saturday, August 23, 2008
Simple login Extjs
example code extjs login
Ext.BLANK_IMAGE_URL = '/fluxo/public/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var win;
var trim = Ext.util.Format.trim;
Ext.namespace('Login');
var Login = function() {
var Logar = function() {
formPanel = Ext.getCmp('my-form');
if(Ext.isEmpty(trim(Ext.get('login').getValue()))){
Ext.MessageBox.show({
title: 'Erro',
msg: 'Digite um nome!',
buttons: Ext.MessageBox.OK,
animEl: 'Botao',
icon: Ext.MessageBox.ERROR,
fn: function(){
Ext.getCmp('login').setValue("");
Ext.getCmp('login').focus();
}
});
return false;
}
if(Ext.isEmpty(trim(Ext.get('senha').getValue()))){
Ext.MessageBox.show({
title: 'Erro',
msg: 'Digite uma senha!',
buttons: Ext.MessageBox.OK,
animEl: 'Botao',
icon: Ext.MessageBox.ERROR,
fn: function(){
Ext.getCmp('senha').setValue("");
Ext.getCmp('senha').focus();
}
});
return false;
}
if (formPanel.form.isValid()) {
formPanel.form.submit({
reset: true,
success: function(windowForm, action) {
Ext.MessageBox.show({
msg: " Carregando as configurações",
progressText: 'Acessando sistema...',
width:300,
wait:true,
waitConfig:{interval:200},
icon:'ext-sistema-load',
animEl:'login-win'
});
setTimeout(function(){
Ext.MessageBox.hide();
location.reload();
}, 1200);
win.hide();
},
failure: function(formPanel, action) {
Ext.MessageBox.show({
title: 'Erro',
msg: 'Usuario ou senha invalidos!',
buttons: Ext.MessageBox.OK,
animEl: 'Botao',
icon: Ext.MessageBox.ERROR
});
}
});
}
};
return {
init: function() {
try {
this.createWindow();
}
catch(e) {
var a = {};
alert('Erro: "' + e.message + '" linha: ' + e.lineNumber);
}
},
createWindow: function() {
document.title = "Login";
if(!(win instanceof Ext.Window)){
win = new Ext.Window({
title: 'Login',
baseCls: 'x-window',
iconCls: 'image_login',
width:185,
height:118,
plain: true,
layout: 'fit',
plain: true,
collapsible: false,
resizable: false,
closable: false,
closeAction:'hide',
modal: true,
border: false,
keys: [{
key: Ext.EventObject.ENTER,
fn: function(){
if(!(Ext.isEmpty(trim(Ext.get('login').getValue()))) && !(Ext.isEmpty(trim(Ext.get('senha').getValue())))){
Logar();
}
},
scope: this
}],
items: new Ext.form.FormPanel({
id: 'my-form',
method: 'POST',
baseParams:{modulo:'login'},
baseCls: 'x-fieldset',
labelWidth: 45,
labelAlign:'right',
url:'http://localhost/fluxo/auth/login',
waitMsgTarget: false,
defaultType: 'textfield',
layout: 'form',
onSubmit : function(e){
e.stopEvent();
},
defaults: {
width: 100,
minLength : 3,
maxLength : 10,
allowBlank:false,
selectOnFocus : true,
minLengthText : "O campo deve ter no minimo de {0} caracteres",
maxLengthText : "O campo deve ter no máximo de {0} caracteres"
},
items: [{
fieldLabel: "Nome",
id:'login',
name: 'login',
tabIndex:1,
validationEvent : "blur",
autoCreate: {tag: "input", type: "text", autocomplete: "off", maxLength: 10},
blankText: 'Digite um Nome',
fireKey : function(e) {
if(e.getKey() == e.ENTER) {
Ext.getCmp('senha').focus();
}
}
},{
fieldLabel: "Senha",
id:'senha',
name: 'senha',
tabIndex:2,
validationEvent : "blur",
autoCreate: {tag: "input", type: "password", autocomplete: "off", maxLength: 10},
blankText: 'Digite uma Senha'
}],
buttonAlign:'center',
buttons: [{
id:'Botao',
text:'Entrar',
type: 'submit',
disabled: false,
minButtonWidth: 75,
handler: Logar
}]
}),
focus: function(){
Ext.get('login').focus();
}
});
}
win.show();
}
}
}();
Ext.EventManager.onDocumentReady(Login.init, Login, true);
AJAX Introduction
AJAX = Asynchronous JavaScript and XML
AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.
With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.
AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The AJAX technique makes Internet applications smaller, faster and more user-friendly.
: w3schools.com/Ajax/ajax_intro.asp
AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.
With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.
AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The AJAX technique makes Internet applications smaller, faster and more user-friendly.
: w3schools.com/Ajax/ajax_intro.asp
Subscribe to:
Posts (Atom)