AJAX Tutorials ::
How to Mimic the iGoogle Interface
Posted on :: Oct 12
In this tutorial I'll be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!
This is a very long Tutorial. Includes source code download.Flexigrid :: ColdFusion and JQuery
Posted on :: Sep 21
For a great while now I've been attempting to use and or create a JQuery-based Grid System for several projects I'm working on. I've tried many including jqgrid (and could never get jqgrid working for some reason), but I stumbled upon Flexigrid.
Flexigrid is a Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
Building an Editable Grid with AJAX and ColdFusion Components
Posted on :: Jun 23
In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
A common data editing interface consists in: an HTML table showing a list of database records. A form where you can edit each record. And some action pages to update, insert and delete records. In other words, when a user wants to change some data, there are a lot of navigation and page reloads involved.
In this tutorial, we will change an HTML table into an editable grid. That is, we will automatically create a form from grid cells using JavaScript and call some ColdFusion component methods - using AJAX - to update information.
Nice & Clean Sliding Login Panel built with jQuery
Posted on :: Jun 10
A while ago, I created a Slidedown Panel similiar to that on Dynaic Drive (though the script there isn't mine). Well I've re-tooled it to work with JQuery, and have included it in this here tutorial.
What's the scope of this tutorial?
- Panel has been redesigned to be “slicker”.
- Panel overlaps content instead of “pushing” it.
- Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
- Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images
AJAX APIs help for Dreamweaver
Posted on :: Jun 2
I didn't write these extensions, however I am making them available here.
These are Dreamweaver CS3 & CS4 extensions for both the JQuery and Prototype API's for Ajax.// Code jQuery FASTER in Dreamweaver!Reduce tons of typing. If you are into jQuery and use Dreamweaver then you really need this extension. Let us save you tons of time by reducing keystrokes with our jQuery API extension for Dreamweaver which provides code coloring, Snippets, and code hints that list every jQuery and jQuery UI function for you.
// Code Prototype FASTER in Dreamweaver!Reduce tons of typing. If you are into Prototype and use Dreamweaver then you really need this extension. Let us save you tons of time by reducing keystrokes with our Prototype API extension for Dreamweaver which provides code coloring, Snippets, and code hints that list every Prototype function for you.
AjaxContent :: JQuery Plugin
Posted on :: May 11
AjaxContent is a jQuery plugin build to make easier and fast to perform simple ajax calls. Some new feature like binding to form fields change and the extend functionality that parse the result of the first call applying a second ajaxContent event.
CSS and Jquery - Creating an Image Slider
Posted on :: May 1
In this tutorial I am actually going to be explaining how to do something which I created for one of my other projects. Basically you are going to create a jquery effect. When a holder is hovered over the top image slides down to reveal the image underneath. I will also explain how to use position absolute to float an image in the top right to show the image is new.
Dynamic Drag’n Drop With jQuery And PHP
Posted on :: Apr 21
Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:
AJAX Form Validation (AJAX Tutorial)
Posted on :: Apr 1
I got tired of Traditional Javascript based Form Validation, only because despite the fact they work well, they don't validate the content of the Feild Immediately. So I got tired of this, and built this off of the Prototype Framework.
The basic method is to attach to the form'sonsubmitevent, read out all the form elements' classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.Uploading Files Like GMail Attachments
Posted on :: Mar 15
Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code, it is indeed similiar to my Previous Post Uploading Files Like Gmail Attachements in PHP except this version uses HTML & JavaScript and is not dependant upon a Server Side Language (however i imagine you could easily apply it to any language).
Uploading Files Like GMail Attachments
Posted on :: Mar 13
Asynchronous file uploads is quote popular feature in modern AJAX web-applications. However standard AJAX classes (XmlHttpRequest) does not have capabilities to process or send files selected with "file dialog" (input type="file"). This article contains example application (trivial file-sharing service, like rapidshare, megaupload or yousendit) which uses embedded frames (IFRAME) to upload file. While file is uploaded to hidden frame, user can still access web-page and fill "file description" field.
AJAX Form Validation
Posted on :: Jan 13
In this tutorial I decided to beef up my form validation routine. Don't get me wrong, I love JavaScript Form Validations, but have found in he past that they can be at times over come or bypassed all together.
With this minor inconvience in mind, I started Experimenting with an AJAX version (using prototype and scriptaculous), that will validate your Form's input directly on the page.
Below is what I've put together.