To do this, you’ll need the following code:

The HTML:

<input id="inputTextboxId" type="text" />

The Javascript:

$(document).ready(function() {
  var watermark = '<span>textbox watermark text</span>';
  $('#inputTextboxId').blur(function(){
    if ($(this).val().length == 0)
      $(this).val(watermark).addClass('watermark');
  }).focus(function(){
    if ($(this).val() == watermark)
      $(this).val('').removeClass('watermark');
  }).val(watermark).addClass('watermark');
});

This javascript binds an event to both the blur and focus events of the input field. When the field gains focus (someone clicks in), the JS checks to see if the value of the input field is equivalent to the watermark, in which case it will clear it. When the field loses focus (someone clicks out), the JS checks to see if the field is empty, and if it is, places the watermark back in. The javascript also sets the default value of the textbox to the watermark so that you don’t have to edit the HTML at all.

Lastly, the CSS if you are feeling fancy:

input.watermark { color: #999; }

That’s it! A simple text watermark using JQuery that doesn’t require touching HTML at all.

Step 1: Install JQuery: Not sure what jquery is? It is basically a bunch a prebuilt javascript to make your life a whole lot easier. Go to http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js to download the most stable version of JQuery as of this post publishing date (1.3.2) or http://jquery.com/ for the most recent version (1.4.2).

Step 2: Install JQuery UI For Better Animations (optional): I highly advise using some animations to spice up the interaction of your AJAX. When a user clicks something that fires your AJAX, they want to know something is happening. If it happens too quickly, they won’t know, so we’ll actually have to slow it down a bit for them. Visit http://jqueryui.com/download to download the UI components if you’d like these better animations. I advise the “core”, the “effects core”, and the “effects blind”. You can try other effects as well such as “fold” if you want a different visual.

Step 3: Make Two Different Pages: The concept of AJAX relies on the existence of two files. The first file is a normal webpage that will contain whatever you want to reload. The second file should use HTML, but not be contained within any html or body tags. The reason for this is your the javascript you are about to create will be loading the entire second document literally within the first document. You can’t have two html or body tags, so don’t use them! Having trouble understanding, well how about an example.  Say you are creating a search feature on your site. The first document is the actual search page that contains the search bar and submit button (say http://samplesite.com/search.html). The second document will hold the results of the search that was submitted on the first page and usually takes some sort of arguments, variables, query strings, or whatever else you’d like to call them (in the case of this example, probably the search terms entered in the search bar).

The HTML for the first document (front-facing):

<img id="loadImg" src="animatedGifLocation" alt="Loading..." />
<div id="opacityWrap"><div id="fillBox"></div></div>
<input id="queryField" type="text" value="" />
<input id="submitQueryButton" type="button" value="Submit Query" />

The PHP for the second document (hidden from users):

<?php
  $textBoxContent = $_GET['data'];
  echo ("<p>".$textBoxContent."</p>");
?>

Step 4: Write Some Javascript: Using some preexisting jquery functions, all we have to do is throw together a simple function that is called on the button click (or whatever else works for your particular situation). This particular javascript below uses an animated gif to indicate loading and a div two grey out the loading content box.

$("#submitQueryButton").click(function() {
  $("#opacityWrap").animate({ opacity: .15 }, 100);
  $("#loadImg").show();
  $("#fillBox").load("secondPageURLhere?query=" + $("#queryField").val(),function() {
    $("#loadImg").hide();
    $("#opacityWrap").animate({ opacity: 1.0 }, 100);
  });
});

Step 5: See It In Action:

Dependent on whether you enter a number or a word into the text box, different content will load here. The button calls an AJAX function that loads another page. This page, dependent on the request sent by the AJAX, outputs the page’s determination of what you entered.

The most useful time for this implementation of AJAX is when you want to communicate with your database to load content that your already rendered page doesn’t have. This particular example does not actually use any information from a database, but it should get the point across. So now that you know how to implement this, go and do it! Ask questions if you got ‘em.

Oooh, that’s pretty. But maybe something more simple?

I like the simplicity, but it is too circly. Fix it designer!

And here’s a bar that could be used to indicate more of a “progress” concept instead of a “loading” concept:

I can guarantee that you’ve seen these types of images all over the web, and now you know why. It is possible people will implement these animated gifs for other purposes, but mostly, you’ll just experience them because of AJAX. Now go have fun making your own!

So what type of things would AJAX come in handy for? Well a very common implementation is for search tools. Say you are on a site looking for houses and there are tons of criteria you can enter in to narrow down your search. It is really helpful to see how each change in your criteria affects your results. To offer constant feedback, web developers need to use AJAX to bring back search results each time you change criteria. If they didn’t use AJAX, you’d be staring at a page reload every time, and that’d be mindbogglingly annoying…

A great example is a search tool I worked on at my company, College Prowler. The tool is meant for high school students trying to find colleges that fit their criteria of where they want to attend a college. Test it out and see for yourself here. The telltale sign of AJAX by the way is one of those circling gifs to indicate something is loading, so keep an eye out for that as you browse the web.

So now maybe you understand the benefits of AJAX. It makes for a much more fun and usable experience for users as they traverse your website. The serious downside is a decrease in your pageviews. Every time you make an AJAX call, you lose what would have been a new page load and thus a new pageview. With each pageview (if you know what’s good for you AND have a highly trafficked website), you gain ad income. Now you could argue that with the improved user experience, you’ll make up for the lost pageviews in your AJAX tool with more devoted users (an argument I agree with), but that doesn’t cut it for everyone.

So make the choice to go with AJAX. In an upcoming post, I’ll write about the basics of AJAX and how to implement it.
Cheerio!

So what can you do with JS? You can automatically rotate through images, or let users rollover thumbnails to enlarge a main photo. You can change text or even the styles that apply to text or other layouts. You can apply a simple watermark to a text box to indicate what users should do with it. You can sort tables or have fantastic animation effects to coincide with user actions. Have you ever encountered a popup window that greys out the background? Yep, that’s javascript (often combined with a few other fancy things such as AJAX, but no need to worry about that). There are really an endless number of options, many of which are pre-written to make your life easier! Here are some great resources for pre-written JS:

1. JQuery and JQuery UI are fantastic libraries of pre-written javascript. JQuery is an open-source (free for the masses) series of core JS files.The public then uses this open source base to build plugins that can do everything you could possibly imagine for client-side scripting. I’ve used jquery plugins on collegeprowler.com for a content slider and table sorting just to name a few items. JQuery UI is a subset of JQuery that focuses on very cool animation effects. I’ve used this (again at College Prowler) to implement an accordion (multiple items where only one is visible at a time), sliding content boxes open and closed, and selection sliders, again to name a few. Great tools, and incredibly easy to implement! Be aware though, because it is open source, a lot of the plugins you end up using can be very finicky on your site…

2. Carousels and Content Sliders are a great way of exposing users to a lot of content without overpowering them with options. A lot of people choose Flash for the same purpose, but flash is awful for SEO purposes, is limited because not all of your users will have it installed on their computer, and is more difficult to update. I’ve found two great carousels that can be applied to either photos or content, and have a lot of customization abilities. Check out jcarousel by Jan Sorgalla, or for a slightly lighter version (the one I ended up using) take a look at jcarousellite. Another one I’ve found out there is at cssglobe.com, which seems pretty sweet as well.

3. Popup Boxes are one of the best javascript tools you’ll ever find. They also are one of the only ones you’ll ever find yourself contemplating paying for. Even though most web users hate the idea of popup windows, popup boxes are entirely different. When used in response to a user action, the popup box offers great opportunities for what you can provide your users with, without navigating them away from a page. They can login to a site that requires registration, they can fill out forms without being forced to have the form take up space on the regular page, or they can view slideshows of images, all without feeling like they’ve left the page that they felt comfortable enough on to click a link. The two best implementations of popup boxes (or shadow boxes or lite boxes as I’ve also heard them called) are Highslide and Lightview. I have more experience using Highslide, but I think Lightview is very well made and looks gorgeous. I had found Lightview by accident some time ago, and when trying to relocate it for this post, I found a listing of all the JS popups out there here. Careful, I haven’t tested any of them.

Those are just a handful of examples of pre-written JS that you can use. In upcoming posts I’ll write a little bit about simple JS that you can implement easy peasy on your own without any coding background.