One of the things that I like best about working in the web industry is the speed at which it changes. Granted, sometimes it seems new technologies are coming out so fast that it’s hard to keep up, but that challenge is a fun one.
AJAX (Asynchronous JavaScript and XML) is one of the hot buzz words in the web industry now, and it’s been one of our major distractions lately. In a nut-shell AJAX lets a web page do “stuff” without reloading.
There are several libraries that facilitate authoring AJAX and the one we really like is JQuery. In this post we will look at how to change the border colors on an input field when a they gain focus (when they are being typed in). Here’s a visual example.
The code that makes up our form is pretty simple:
To change this form, you’ll first need to do download the current JQuery library and upload it to your server. Personally I like to put all of my external .js files in their own folder (js) in addition to some good practical reasons for doing this (caching, download time, etc.), it helps keep things nice and organized. So save the JQuery library into your js folder as jquery.js.
In order to use the functions contained in the JQuery library, you’ll need to call the file. In the head of your document, place the following code:
The JQuery library is now ready for use. Now we will write a few lines of javascript that will tell the library what we want to do. First we need to tell the browser that we’re using javascript, this is done by including these lines:
Next we have to initialize the JQuery library by adding these lines to our javascript code:
This basically says “when the DOM (Document Object Model) is ready – do stuff. What stuff…this stuff
These three sections basically do the following:
- Set the borders on all input, textareas, and selects to #999 (light gray)
- When we put our cursor into a field (focus) change it to #EE9B00 (the orange from our logo)
- When we leave an input field (blur) set the border back to #999
That’s it – complex DOM scripting is so easy with JQuery.
More detail of what these JQuery lines can be found here.
