JavaScript Tutorials ::
Articles pertaining to JavaScriptUsing jQuery Autocomplete to Populate Another Autocomplete
Posted on :: Jun 8
This example will use a jquery autocomplete to choose a state then, based on the state, another jquery autocomplete will be populated with zip codes for that state. Basically, the state chosen gets used as a filter in the query for the second autocomplete. I've included example for this tutorial in .NET, ColdFusion and PHP to show just how easy it is and compare the differences between the languages, asnd uses SQL Server for it's Database...
Geo-Enable Websites With JavaScript
Posted on :: Mar 12
JQuery Username Check Tutorial
Posted on :: Jan 8
In this tutorial, I'm going to show you how easy it is to create a username check utility directly inside your web-based form, using JQuery & ColdFusion.
A CSS / JQuery Framework you can use...
Posted on :: Nov 3
Better quality and coherence coding inside a front-end team
Preset CSS classes, know where your going with highly reusable classes
A collection of some of the best jquery scripts
A solid cross browser compatible stylesheetA new project means getting JS plug-ins together, clean a CSS and restart. This framework is intended to be your project starter, and in most case, you can jump in the project right away with a solid css foundation. This is not really a CSS “framework” but more a website starter kit.
The framework is based on a 960px grid, but is very easy to manipulate to get the grid you want. It is however not intended to be used as a liquid grid.
This is a CSS/Jquery Framework you can use and build upon.
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.Setting Form EncType Dynamically in Internet Explorer
Posted on :: Oct 9
In FireFox, you can dynamically set the EncType of a form element to be "multipart/form-data" for file uploads; however, this does not work in Internet Explorer (IE). Apparently in IE, you have to set the "encoding" of the form rather than the "enctype". The good news is, you can set both values without concern and this will take care of the problem:
Collecting User Statistics with JavaScript, and ColdFusion
Posted on :: Aug 28
This tutorial shows you how to gather and store user statistics, including Browser, Browser Version, Screen Width, Color Depth, Screen Height, Bit Rate and User Environment. Includes Browser Detection for IPhone, Blackberry, and Android-based mobile devices...
Passing JavaScript Values to Coldfusion
Posted on :: Jul 21
Is it possible to pass JavaScript Values to ColdFusion? Not directly no, as JavaScript is a Client side Language and ColdFusion is a Server-side Language. It can be done, however not without refreshhing your Page and.or Form.
This tutorial will show you one possible method of sending a JavaScript variable to coldfusion via using the url.
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
Changing a Document's Text size with JavaScript
Posted on :: Apr 30
Sometimes the text size you've specified for your webpage isn't suitable to the viewer, depending on his browser configuration or OS. This useful script uses Dynamic CSS to let the viewer himself modify the text size of the page on demand, by clicking on an Increase or Decrease Font Size link. Now that's a kind of personalization your viewers may just appreciate!
Creating Expanding Images with JavaScript
Posted on :: Apr 30
We're going to make a simple script for folks who want to have an image expand onMouseover (to its actual size). This lets you display large images at a reduced size initially (aka thumbnail size), and have them dynamically expand when the mouse rolls over them. Installation is simple- install the script in the HEAD section of the page, then give your "thumbnail" images a CSS class of "
expand". These thumbnail images should have an explicit width/height attribute that's less than the actual image's dimensions, so the script has something to expand to.This Script is AJAX friendly, meaning imported content with images with the "
expand" class will be immediately recognized by the script.Using JavaScript to access an HTML element with multiple class names
Posted on :: Apr 23
Occasionally I discover a nifty solution to a coding obstacle. Although seemingly small, these can be major productivity barriers, especially if you are only a recreational coder. The following is in response to an HTML element that has multiple class names declared.
Our HTML looks something like this:
Create Dynamic Form Fields
Posted on :: Apr 23
Cascading Style Sheets (CSS) specifications combined with JavaScript events give you a great opportunity to create forms that look good and are easy to understand. Instead of boring, black and white forms, you can create forms that respond instantly to user inputs.
Creating Dynamic Effects
Some visitors may have problems navigating through a long or complex form. Help them out by creating form fields that change color as the visitor navigates through the form.Google RESTful Ajax » JSON Search in ColdFusion
Posted on :: Apr 15
A Friend of mine was hacking and cursing his way through a routine to convert RSS feeds in to HTML, I had an idea. I thought, "Wow, maybe there's another way to do this ..." Converting RSS can be messy so I opted for a much easier and cleaner solution ... JSON. For those Ajax pros out there ... have a heart ... I'm definitely a nOOb at JSON ... I just wanted to share my experience because the introduction and experience was enlightening ... at least to me it was.
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.Nice Form Fields (v2)
Posted on :: Apr 1
Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase, or signing up for a website. They are the basic, and pretty much the only way of gathering information on the web.
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!
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).
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.