What is Google AJAX API?

Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript.

In human terms, it loads common JavaScript frameworks such as MooTools, jQuery, Prototype, jQuery UI and of course even Google Maps without having to have the (.js) files on your server.

That’s great, but what does that mean for me?

Bandwidth, bandwidth, bandwidth, cache headers, and bandwidth.

Because jQuery, like images, must be downloaded onto the users computer before it can be used. If you have a slow server this can be a painful process especially if you use multiple JavaScript libraries.

Google is lightning fast, always. To have one, maybe two less items to download from your server not only saves bandwidth, but it saves you time. You don’t have to go to jQuery and download the latest version, upload it to your server, and type in the path to the (.js) file. You also don’t have to worry about having relative or absolute URLs due because of pretty URLs (seo friendly URLs).

You just add a two lines of code to the head of your template, sometimes even one, and you’re done. Google automatically sends a request to their server to download all of the JavaScript you’re requesting, cache the headers, and return it back to you.

Even better yet, the code is cleaner. You only need one line of code to load in multiple JavaScript libraries instead of your usual 3-5 lines of code.

Enough already, just show me how

Glad you asked. Below is the example XHTML page used to load in jQuery and execute a test function to ensure that it works.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">$(document).ready(function(){$(".expanded").hide();$("a").click(function(){$(".expanded").fadeIn(600);});})</script>
 
<p class="expanded">Who uses paragraphs anymore?</p>
 
<a href="#">Expand!?</a>

Now, we’ve loaded in jQuery and are able to get cracking away. However, what if we want to add more than one library? Simple. All we do is add another instance of google.load();. Below is an example with both jQuery and jQuery UI.

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

Want to use the latest version of jQuery so you never have to update the code to match the latest version? No problem use this instead.

<script type="text/javascript">google.load("jquery", "1.3");</script>

What this says is: “Find the latest stable release that starts with 1.3.x”. In our case it automatically found v1.3.2.

Pretty nifty eh? What’s even better is that jQuery THEMSELVES are using Google’s server to call their own JavaScript library. If you view the source code of http://www.jquery.com/ you’ll see on Line 9 the following code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

This is also another way of calling jQuery from Google’s servers.

That’s it! Enjoy one less heavy server request.

The template is tailored towards a company providing a service such as hosting. The logo is raw text inside of an H1 tag and can be changed. The layout uses a fixed width of 950px, but the design can be adapted to any fixed width size. It was created to be fluid, however, the coda slider doesn’t support a CSS width percentage.

The theme comes with 2 HTML files

• index.html
• examples.html

The index.html is the screenshot you see above, while examples.html has numerous predefined styles showcased. The predefined styles range from alerts, dialogs, lists, and emphasis blocks.

Other features:

• To navigation list items have example background (aka, perfect rounded corners no matter how big)
• Rounded outer container (adjusts to users width preference)
• Text-based logo and slogan
• jQuery Coda Slider (click Solution by industry for example)
• Valid XHTML 1.0 Strict
• Valid CSS 2.1
• Works in every major browser (Firefox 2+3, IE 7, 8, Safari, Opera, Chrome)

Download BlueEarth 001 Free XHTML / CSS Template
Downloaded 161 times.

What’s a favicon you ask? Click the “Faviwhat?” tab below.

1

<link rel="shortcut icon" href="/favicon.ico" />

• Default text that is displayed
• When the user clicks in the text box, the text is cleared out only leave the precursor
• If the user does not type anything and clicks away, it resets back to the default value

This technique uses two simple html attributes. ‘onblur’ and ‘onfocus’. This is most commonly associated with a search box and adds that final spice to a website. Here is the code, free of charge.

1
2
3
4
5
6
7
8

<form method="post" id="searchform" action="/">
<fieldset>
<label>Search:</label>
<input type="text" onblur="if (this.value == '') {this.value = 'Search...';}" 
onfocus="if (this.value == 'Search...') {this.value = '';}" 
value="Search..." name="s" />
</fieldset>
</form>

So what exactly IS onblur and onfocus? Javascript, default browser actions, and some super cool tricks. Let me explain…

The definition of “onblur” is “The onblur event occurs when an object loses focus”. An object is focused when you have it selected. For example, on the right hand of the screen near the top is our search box. If you click INSIDE of that box, your cursor is now placed inside and will have SELECTED that box. Upon SELECTING that box, it will activate the opposite of “onblur” which is “onfocus”. The event that is fired off when clicking or “focusing” in an object on the page is called “onfocus” and when clicking on any other object, which will deselect the currently selected object in favor for another is called “onblur”. Just think of a microscope zooming in and out of a 3-D page.

“I get how and why, but why is there a <fieldset> and <label> in there” you say? It’s for XHTML validation purposes. Always remember to have a Label for a form, and to wrap it in a fieldset if there are multiple forms on a page for maximum compatibility for different browsers and mobile devices.