The CD-ROM is just $39 and I’m still paying the shipping costs. And you get instant access to the videos online.

• CD ROM AND instant online videos
• No shipping cost - I pay that for you
• 2 and a half hours of video instruction
• 14 demos
• Code and data for demos included
• Links to resources

How to Pay

You can order with PayPal or a major credit card.

After your purchase, you’ll get an email from me with login details for instant access to the videos. If you’re in the United States, you’ll get your CD in the mail in about 5-7 business days. International orders take a bit longer.

My plans include a lot of video demonstrations to help folks see exactly how to take advantage of everything that jQuery has to offer. I’m even toying with the idea of doing some live events so I can get feedback and participation… we’ll see.

In the past year, the number of plugins for jQuery has exploded. I’ll cover several of these in great detail and even release at least one of my own plugins.

Just the Facts

John goes into much more detail on the main jQuery blog, but here is what you need to know, in a nutshell:

• Huge speed improvements
• Much better documentation for jQuery
• There is a jQuery compatibility plugin if your fav plugin doesn’t jive with version 1.1
• jQuery source code
• jQuery compressed

Other Interesting News About jQuery

On a lighter note:

• jQuery is one year old (as of yesterday)
• A book on jQuery is in the works, and has been for some time. Look for release in late spring or early summer.

Bugs in jQuery 1.1a Squashed

I mentioned in a recent post that I had a few fantastic plugins on the way. I was just about to pull the trigger when 1.1a was announced. Turns out that there were a few bugs that prevented my plugin from working like it should, so I held off.

With the release of 1.1b those bugs were gone and my plugins were working again.

So, off I run to do some tests with jQuery 1.1 to see if all is well.

Make sure you’re on my subscription list, whether RSS, or email it doesn’t matter.

" We’ll be releasing some final numbers soon, but we’re looking at 4x-10x speed improvements - with some selectors seeing a 30x speed bump."

I’m going to test my plugin with the latest version of jQuery, so be sure you’re subscribed to my RSS feed for the upcoming announcement.

Cheat sheet

Here is some vital info on key changes found in this release:

Download

It’s in alpha, so this is for testing only, but here’s the link.

jQuery version 1.1a

Pretty basic stuff… but a good intro to jQuery if you’re new to this.

With the recent release of version 1.0.4 of jQuery I have gotten some great ideas for some upcoming tutorials that you’ll be seeing in the next few days and weeks. And if you haven’t signed up for my RSS feed, now’s a great time, since these tutorials are just over the horizon. At the bottom of this post you’ll see a link for subscribing to the RSS feed, or RSS-to-email.

Some of what I have on the way includes:

• Why select boxes in your form need to die - Part 1
• Why select boxes in your form need to die - Part 2
• AJAX with jQuery revisited - Parts 1 and 2
• Marketing lessons learned from John Resig

I’m also going to be fishing back through my notes and finding a handful of excellent interviewees for podcasts.

So, if you haven’t added 15 days of jQuery to your RSS reader, or if you want to receive updates by email, now’s the time to subscribe.

John Resig and company squashed a whole bunch of bugs.

They also added some innovative features I’ll have to investigate further, and then I’ll whip up some new tutorials. (Yes, it’s been a while since I posted. I do these in spurts, and I feel one comin’ on.)

As far as specifics on features, some of the cooler ones look like extensions to the $.ajax()

A few examples straight off of John Resig’s blog:

Example: Add extra headers to an Ajax request using beforeSend

$.ajax({
  type: "POST",
  url: "/files/add/",
  beforeSend: function(xhr) {
    xhr.setRequestHeader( "Content-type", "text/plain" );
  },
  data: "This is the contents of my text file."
});

Example: Perform a synchronous Ajax request.

// Get the HTML of a web page and save it
// to a variable (the browser will freeze until the
// entire request is completed).
var html = $.ajax({
  type: "GET",
  url: "test.html",
  async: false
}).responseText;

// Add the HTML into the page
$("#list").html( html );

Example: Sending a JavaScript object using processData.

// The data to send to the server
var params = {
  name: "John",
  city: "Boston"
};

$.ajax({
  type: "POST",
  url: "/user/add/",
  processData: params
});

Example: Aborting an Ajax request after a specific delay in time.

// Perform a simple Ajax request
var req = $.ajax({
  type: "GET",
  url: "/user/list/",
  success: function(data) {
    // Do something with the data...
    // Then remove the request.
    req = null;
  }
});

// Wait for 5 seconds
setTimeout(function(){
  // If the request is still running, abort it.
  if ( req ) req.abort();
}, 5000);

Another nice addition is a way to make pageX and pageY variables available in all browsers.

Example: Have a tooltip follow a user’s mouse around the page.

$(document).mousemove(function(e){
  $("#mousetip").css({
    top: e.pageY + "px",
    left: e.pageX + "px"
  });
});

I’ll have to take a closer look at these new features, play around a bit, and post my findings in some new tutorials. I got a comment today about the old AJAX tutorial I did a while back being a bit outdated with the video cast I did, and some of the new $.ajax() calls in jQuery, so I think it’s time to revisit jQuery’s implementation of AJAX and crank out a few new tutorials.

Stay tuned.

I’ve been burdened with a ton of projects I’ve been putting finishing touches on and so I haven’t had time until now to post about all the new plugins and great contributions to jQuery.

First, you shoud make yourself familiar with jQuery’s development page. This is where John is linking to the Best of the Best jQuery plugins.

http://proj.jquery.com/plugins/

Some of My Favorites

Farbtastic color picker - awesome. It’s tough to choose between this one and one I’ve seen on Yahoo’s site for use with their YUI.

Table sorting plugin

Date picker - another addition by Kelvin Luck. Great job.

Suckerfish Menus - and also a very slick “tree” that can be collapsed and expanded

And Great News for jQuery Fans

John Resig has kept us up to date on some great hat tips from third party sites and software developers.

Technorati’s new design uses jQuery…

Soon to be released versions of Drupal will include jQuery in the code…

jQuery’s starting to get popular, it seems.

Amazing Demos

Dustin Diaz did a great Tetris rendition using YUI library. Recently someone came out with one for jQuery.

jQuery Tetris

And how about a 3D universe… prepare to be amazed.

Spinning 3D Universe with jQuery

Okay… back to work for me.

If you need super fancy effects for animation, drag and drop, and super smooth animation then you’ll probably want to use Prototype and one of the many great library created to enhance the effects.

I left my erroneous remark up to show you how quickly jQuery has been adopted by talented javascript coders willing and able to cook up plugins that give the “older” AJAX libraries a run for their money.

You see, a few days after posting the “limitations” of jQuery it came to my attention that a very talented coder was busy publishing some exciting animation plugins for jQuery that could be very useful for web apps.

For example, I had been toying with a sortable list for the admin control panel in my new content management system. I was getting very frustrated with a PHP coded version of “sortable lists” found at Scriptaculous. The code wasn’t able to handle the latest version of Prototype… but looked so promising.

Note: the PHP version on gregphoto.net now appears to be updated - but I haven’t tested it myself. So if you like Prototype better than jQuery, I’d check out his code. Also, I find it interesting that the sortable list demo on Scriptaculous doesn’t work at all in FireFox - and hasn’t for some time now. I don’t know if that’s a coding error on their site, or a bug in the code itself.

When I found the jQuery plugin for sortable lists I couldn’t believe how damn easy the code was to make it easy to sort several lists, mix and match the lists, and send the information to a database.

I was in hog heaven!

Since then, the number of interface plugins has grown steadily. I think you’d have to really try hard to come up with an interface effect that can’t be accomplished with jQuery and these wonderful plugins.

“XYZ Ajax Library Is Better”

If you have an AJAX library you like better, then please continue using it. Not that I don’t want to hear a well thought out comment about the differences between various libraries - their strengths and weaknesses - but the point of this post is to show that jQuery is more than just a lightweight javascript library for DOM manipulation with a little AJAX thrown in…

On the contrary… you can use jQuery to accomplish some very sophisticated effects.

I know there are some very smart coders that prefer YUI, or Prototype, Dojo, or fill-in-the-blank. I also know that some very influential and smart coders are giving jQuery a second look.

jQuery is maturing rapidly. Talented coders are contributing to the library and there’s an active community discussing ways to make the library even better.

[tags]jQuery, animation, javascript, AJAX, Prototype, Scriptaculous, Dojo, web app, jQuery effects, sortable lists[/tags]

Cody Lindley, author of Thickbox, recently released jTip - The jQuery Tooltip.

I really like some of the extra bells and whistles that these tooltips provide. I’m sure that there are those among you that think there’s no need for yet another tooltip - but I can see some exciting applications for Cody’s idea in my own work.

The one big issue I had when I looked at the html source has to do with accessibility - links not working if javascript is turned off. I’m not inclined to look at all javascript through the accessibility prism, but it just seemed to me that there could be another way to create the same effect in a slightly better way.

Specifically, I didn’t like the idea of sacrificing the usability of a true link to another page for the benefit of the tooltip on hover. I love the tooltip - and no disrespect to Cody - but for the application I’m considering I need that link to work no matter what.

So what I’ve got for you today is a minor modification of Cody’s script. If you’re not a fan of his tooltips, then my rendition probably won’t wow you either. But if you like what he’s done and want links that will still work with javascript turned off, well this might just be right up your alley.

My Changes

The link that really got me thinking about tinkering with his code a bit was the one for yahoo. It leads to an external site (Yahoo), has a great little tooltip on mouseover, but I just didn’t like this code he used to create it:

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com" 

name="Before You Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

So I rewired some of his script and now the same effect can be achieved like so:

<a href="http://www.yahoo.com"
rel="yahoo.htm?width=175&link=yahoo&name=Before%20
%20You%20Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

Demonstration of my code

Improvement: HTML Validates

My new code validates, according to w3.org

Improvement: Naming

As I was going through the code, making some small changes, I noticed that Cody used a variable called ‘title’ that was assigned the value found in the name of the link. This could be a bit confusing.

I addressed the naming issue, even though I think it’s of little importance.

Improvement: Usability

With my code, you can choose to have each tooltip a genuine link to another document, internal or external. Or, if you just want the tooltip and don’t care about usability, you can choose to leave the link out of the equation.

The choice is yours.

Hat Tip

Cody came up with a great concept and saved me tons of time by doing the heavy lifting. My modification is in no way a criticism - just a slight “tweak” that I thought my readers might appreciate.

Enjoy.

[tags]javascript, tooltip, Cody Lindley, jQuery, accesibility[/tags]

I really like some of the extra bells and whistles that these tooltips provide. I’m sure that there are those among you that think there’s no need for yet another tooltip - but I can see some exciting applications for Cody’s idea in my own work.

The one big issue I had when I looked at the html source has to do with accessibility - links not working if javascript is turned off. I’m not inclined to look at all javascript through the accessibility prism, but it just seemed to me that there could be another way to create the same effect in a slightly better way.

Specifically, I didn’t like the idea of sacrificing the usability of a true link to another page for the benefit of the tooltip on hover. I love the tooltip - and no disrespect to Cody - but for the application I’m considering I need that link to work no matter what.

So what I’ve got for you today is a minor modification of Cody’s script. If you’re not a fan of his tooltips, then my rendition probably won’t wow you either. But if you like what he’s done and want links that will still work with javascript turned off, well this might just be right up your alley.

My Changes

*** Update: Within 15 minutes of posting, I came up with a way to make the code accessible and have the html validate. I will leave this post here so that you can see the evolution of my changes (and thinking).

Both of the objections below should be resolved with the new code.

The link that really got me thinking about tinkering with his code a bit was the one for yahoo. It leads to an external site (Yahoo), has a great little tooltip on mouseover, but I just didn’t like this code he used to create it:

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com" 

name="Before You Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

So I rewired some of his script and now the same effect can be achieved like so:

<a href="http://www.yahoo.com"
name="yahoo.htm?width=175&link=yahoo&name=Before
You Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

Demonstration of my code

Objection: Doesn’t validate

I’ll bring this up so someone else doesn’t need to. Checking validator.w3.org indicates that even my newer version of the code doesn’t validate.

Some of you will choose the benefits of this tooltip over strict validation. Other of you won’t. Your choice is your choice and I’m not one to tell you you’re wrong or right.

Objection: Strange naming

As I was going through the code, making some small changes, I noticed that Cody used a variable called ‘title’ that was assigned the value found in the name of the link. This could be a bit confusing.

I compounded the issue by adding a variable called name to the information found in the name of the link.

Lame excuse: I chose speed over perfection. I wanted to get this tutorial wrapped up because it was way over due (in my mind) and with other things on my plate, I decided not to aim for supreme perfection.

Perhaps I’ll rewrite the code in the coming days.

Hat Tip

Cody came up with a great concept and saved me tons of time by doing the heavy lifting. My modification is in no way a criticism - just a slight “tweak” that I thought my readers might appreciate.

Enjoy.

[tags]javascript, tooltip, Cody Lindley, jQuery, accesibility[/tags]

With the correct (x)HTML and CSS you can create tabs as easily as

$.tabs("container"); // first tab on by default

If you want to have the second tab “on” by default:

$.tabs("container", 2); // second tab on

Klaus has an example that you can view to see the end result.

My Contribution

I had to do something to add to Klaus’ contribution so I came up with a simple form that you can use to generate the markup for the tabs.

Instructions:

It’s very simple. Just type a name for each tab (up to 5) and click the button at the bottom of the form. The next page will generate the html you can copy and paste into your file.

You will also need to download the CSS from Klaus’ site, modify it as you see fit, and of course upload the jQuery javascript library to your server.

Here is the link for the tab markup generator.

Enjoy.

A few things to notice

$(document).ready kicks off the TB_init() function, which in turn attaches an onClick event to all links with the class name of “thickbox”.

function TB_init(){

	$("a.thickbox").click(function(){

	var t = this.title || this.innerHTML || this.href;

	TB_show(t,this.href);

	this.blur();

	return false;

	});

When a “thickbox” link is clicked, the TB_show() function fires.

$("body")
 .append("<div id='TB_overlay'></div><div id='TB_window'></div>");
 $("#TB_overlay").click(TB_remove);
 $(window).resize(TB_position);
 $(window).scroll(TB_position);

 $("#TB_overlay").show();
 $("body").append("<div id='TB_load'><div id='TB_loadContent'><img
  src='images/circle_animation.gif' /></div></div>");

As you can see above, there are two divs that are appended to the document body. In other words, the two divs are added to the end of the html just before the closing body tag.

The overlay div is styled by css to have an opaque appearance. The TB_window is where the script will place an image or pull in another web page using AHAH.

$(window).resize and $(window).scroll tell jQuery to fire off the TB_position function if the window is resized by the visitor or if the visitor scrolls down the page. This is how Thickbox is able to stay in the middle of the page when you scroll or resize the window.

Next, Cody searches the url passed to the Thickbox code to find the suffix.

var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.html|\.htm|\.php|\.cfm|\.asp|\.aspx|\.jsp|\.jst|\.rb|\.txt/g;

		var urlType = url.match(urlString);

		if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images

If it’s an image, then the jQuery append function is used to add the html to the appropriate spot.

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img
id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"'
alt='"+caption+"'/></a>"
 + "<div id='TB_caption'>"+caption+"</div><div
  id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>"); 

 $("#TB_closeWindowButton").click(TB_remove);

Otherwise, the remote file is pulled in using the jQuery load() function.

$("#TB_ajaxContent").load(url, function(){

Many months ago, when trying to catch up to all the AJAX hype, I was surfing the FiftyFourEleven site looking at wonderful examples of innovative javascript code when I stumbled up some code for “Upload Multiple Files With A Single File Element“.

So when I decided to launch 15 Days of jQuery, this was one of the very first scripts that I wanted to give a jQuery makeover.

Enter the Accessibility Zealots

Looking through my server logs a few days ago I see that I’ve got a trackback from a site I don’t recognize. I check it out only to discover that two of my jQuery tutorials are being listed as an example of what the author hates about javascript.

According to this twerp, any tool or technique that doesn’t put accessibility as the numero uno priority is bad.

Although I strongly disagree with this widely held belief, it got me thinking about this particular tutorial. I went back to the drawing board and created a way to create a similar effect unobtrusively… so that if my critic decides to visit with javascript turned off, he’ll be able to use the form too.

Two Tutorials for The Price of One

Goal #1: To permit multiple file uploads using one file input element… and to make the whole interaction sexy.

Goal #2: To make multiple file uploads sexy… without sacrificing usability. The focus here is unobtrusive javascript to shape a form with multiple file input fields.

The Examples

Demonstration one - only one file input element, but with the addition of jQuery and some custom code that you’re about to see it becomes a user-friendly multiple file upload script.

Multiple file upload with one file input

Demonstration two - multiple file input elements in the (x)html source of the form but jQuery modifies what the visitor sees and gives a similar feel to the first demonstration. The advantage to this method is that it is unobtrusive… with javascript turned off the visitor can still upload multiple files.

Multiple file upload with several file inputs

Explanation

Single file input -

The jQuery $(document).ready() function does two things:

Creates a div where the maximum files allowed is shown to the visitor.
Finds the file upload field (assuming there is only one) and attaches an onChange event to it.

$("input[@type=file]“).change(function(){
doIt(this, fileMax);
});

The doIt() function (nice name, huh?) checks to see if the maximum file limit has been reached, and if not, it hides the file input field, adds a new one inside the containing div, puts the name of the file chosen inside the div with id “files_list”, and adds a Delete button on the end.

To navigate the DOM tree I use jQuery’s parent() function and then remove elements using the remove() function. I also make use of append() and prepend() to add in the file names and new input fields respectively.

Two key points:

1- You determine the maximum number of files allowed with this line

var fileMax = 3;

2- The file input fields must be named appropriately

<input type="file" class="upload" name="fileX[]"
  />

I do this so that the fields can be added and removed by the visitor without any concern for keeping track of id’s or names. When the form is submitted to a server side script, the information is sent in an array that can be easily traversed.

Multiple file input -

This was was trickier to pull off.

First, the number of files allowed is determined by the number of file input fields in your (x)html. Second, you should still name them in a way that stacks the field information into an array.

<input type="file" class="upload" name="fileX[]"
  />

The big difference in this second version is that I loop through each file input field and apply the doIt() function when the field value changes. By looping through each one, I can send an additional piece of information that’s critical to my code: the order of the field in the “stack”.

In other words, as the code executes, it’s specifically targeting the first input field, or the second, or the third.

The code for this is found here:

$("input[@type=file]:nth-of-type("+n+")")

jQuery’s flexibility allows me to use CSS and XPath descriptions to target specific elements.

You’ll notice that as each file is chosen, the file input field is replaced by the name of the file. Clicking on the name of the file allows you to choose a different file.

[tags]multiple file upload, javascript, DOM, unobtrusive, jQuery[/tags]

I’m going to show you two ways that you could use jQuery to accomplish the same effect, or better.

The Goal

An AJAX (or AHAH) proof-of-concept page that allows the visitor to edit the very (x)HTML page they are viewing, without leaving the page.

The Concept

Click the text to be edited and magically a textarea appears with buttons beneath to save or cancel the changes. Changes are sent via AHAH to a PHP script which normally would be used to update a database (MYSQL or flatfile).

The Demonstration

Edit In Place Using Ajax 1

In this first demonstration, I’m using a div with an id of editInPlace. When you roll your cursor over the div, the background changes to a pale yellow. Clicking the text will start some DOM (Document Object Model) magic resulting in the div being replaced by a textarea input — with the text to be edited inside.

Clicking the save button will send the new HTML over to a simple PHP script that does nothing more than print out the data it receives (via $_POST).

In a real world application you would add in some additional safety checks, and then update your database with the new information and send back information that tells jQuery if the changes were successful.

But in this example, all changes are successful, the same information sent to the PHP script comes back to the jQuery code and is show in a simple window alert.

Explanation

The way I kick things off should be very familiar by now. Remember, if you don’t want to use the jQuery document.ready function then feel free to throw in your own init() function.

$(document).ready(function(){
setClickable();
});

So the first thing that happens is that the setClickable() function is fired. This function does the following:

Looks for the div with id=”editInPlace” and tells jQuery to do something when the div is clicked.

function setClickable() {
$('#editInPlace').click(function() {

Grabs the html inside the div using jQuery’s html() function. This html is wrapped inside of some more html that will make up the textarea and buttons for save and cancel.

var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE"
class="saveButton" /> OR <input type="button" value="CANCEL"
class="cancelButton" /></div></div>';
var revert = $(this).html();

The same html found within the div with id=”editInPlace” is assigned to a variable called “revert”. This will be used in the event the cancel button is used.

var revert = $(this).html();

jQuery’s DOM function “after” is used to place this new textarea html after the div we’ve targeted. I immediately chain another method to this (to save space) and tell jQuery to remove the div.

$(this).after(textarea+button).remove();

Using jQuery, I target the save and cancel button by using their class names. I instruct jQuery to trigger my final function “saveChanges” when either button is clicked. I close out the function that tells jQuery what to do when the div is clicked, but I do not put an apostrophe at the end because I want to chain more methods onto this div.

$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})

I chain a simple mouseover and mouseout to my code which tells jQuery to add and remove a class when a cursor rolls over the div we’ve targeted (id=”editInPlace”).

.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};//end of function setClickable

Function “saveChanges” will take the button object for the first variable and the cancel variable should either be false or contain the html I stored in the “revert” variable.

function saveChanges(obj, cancel) {

If “cancel” is false then I’m telling this function to save the changes by sending the html over to the php script. I grab the html within the textarea by using some of the DOM functions available through jQuery: parent() and siblings().

if(!cancel) {
var t = $(obj).parent().siblings(0).val();

DOM basics are beyond the scope of this tutorial, but I’m basically telling jQuery “The obj (save button) has a parent (a div)… go find it. This object has one or more objects on the same level of the DOM tree… I want the first one. And grab the value of that object.”

(On second thought… if you aren’t familiar with DOM style of coding, then my explanation probably didn’t make much sense to you. I suggest Googling “DOM javascript” or something similar.”)

This html is assigned to the “t” variable and now it’s time to send it via POST over to test2.php.

$.post("test2.php",{
  content: t
},function(txt){
alert( txt);
});
}

If cancel has a value, then it should be html stored originally in the “revert” variable. So, at this point, I want the “t” variable to be set to the original html.

else {
var t = cancel;
}

The next step is to use the DOM functions within the jQuery javascript library to place a new div, with the “editInPlace” id, after the div containing the textarea… and then remove the div containing the textarea.

$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove() ;

In a nutshell, this tells jQuery “Go backwards on the DOM branches two moves. Place this HTML after the object found at that location, and then remove the object.”

Finally, we call the setClickable function again and close out the saveChanges() function. The purpose of recalling the setClickable() function is to reset the onMouseover, onMouseout, and onClick events.

setClickable();
}

Second Example

The second one is very similar but a little more complex.

Edit In Place With Ajax 2

Instead of one large div, this example turns every P tag into its own editable region.

The difficulty comes when you want to send the data to a server side script and target the correct P tag for updating in the database.

The solution I came up with is to number each P tag and send this information over to the PHP code. What you see in the alert box is that the PHP code “knows” which P tag is to be changed.

Known Issues

If you used something similar in a real application then you’d want to verify that the changes were made before telling jQuery to update the DOM with the new html.

For this demonstration there is no interaction with a database and so I skipped this step.

[tags]javascript, AJAX, AHAH, jQuery, DOM, scripting[/tags]

The video is short because my understanding of YouTube is that I have to limit the file to 10 minutes. Not everything I’ve said in the tutorial is 100% correct. There are minor mistakes such as the part where I call cgi a “server side script” when it would be more accurate to say “server side language”.

Cut me some slack… woodya?

Is It AJAX, or AHAH, or AXAH?

What you’re going to see is really more AHAH than true AJAX.

The difference? The X in AJAX is for XML. More often than not you can grab chunks of text or javascript from a separate file without going through the hassle of messing around with XML. Here’s a better description of AJAX vs. AHAH.

As for AXAH… I’ll leave that to Cody Lindley to explain. His article is a good read, you should check it out if you want some more background on the basic concepts of workable AJAX.

The Tutorial

Here’s the page on the jQuery site where I run through the examples. The link opens in a new browser window.

[tags]AJAX, AHAH, AXAH, Cody Lindley, jQuery, javascript[/tags]

My new “buddy” Dustin Diaz (who included a reference to me and this site in his most recent audioblog) posted an edgy “take-it-or-leave-it” kind of post called “Enough With Rounded Corners”.

So I checked out this new resource for rounded corners and saw that the html would be perfect for an impromptu tutorial on jQuery - combining the wrap(), prepend(), and append() functions.

Here’s the html markup that we’re going to use as our starting point:

<div class="dialog">
 <div class="hd">
  <div class="c"></div>
  </div>
 <div class="bd">
  <div class="c">
<div class="s">
  <-- main content goes here -->
</div>
  </div>
  </div>
 <div class="ft">
  <div class="c"></div>
  </div>
</div>

So, how would we take this html, and use jQuery to clean up the code?

Well, first we need a “hook” - a unique html element, or an id, or a class name - to tell jQuery to target.

The solution I’m gunning for will remove all of the divs you see above. Therefore, I think a great “hook” would be a simple div with either a unique id or class name.

Let’s try this:

<div class="roundbox">
  <-- main content goes here -->
  </div>

Next step… we use jQuery to add in our html code:

$(document).ready(function(){ $("div.roundbox") .wrap('<div
        class="dialog">'+
        '<div class="bd">'+
        '<div class="c">'+
        '<div class="s">'+
        '</div>'+
        '</div>'+
        '</div>'+
        '</div>');
});

Where Are The Other Divs?

Look closely at the code above and you’ll see that all of the divs fit nicely inside of each other and also wrap nicely around the content that will go inside our rounded box we’ll soon create.

You should also notice that I’ve left out quite a bit of the markup from the original. That’s because the wrap() function in jQuery needs perfectly nested divs in order to work.

Specifically, I’ve left out these two parts:

<div class="hd"><div class="c"></div></div>

<div class="ft"><div class="c"></div></div>

Append and Prepend All At Once

If you notice, the parts that I left out go just inside, but at the beginning and at the end of the class=”dialog” div. This is a perfect opportunity to use append and prepend functions of jQuery and chain them together.

$('div.dialog').prepend('<div class="hd">'+
        '<div class="c"></div>'+
        '</div>')
.append('<div class="ft">'+
        '<div class="c"></div>'+
        '</div>');

Example And Code

I’ve put a Rounded Corners with jQuery example online for you to see. Be sure to view the source code because I want you to see how clean the html looks when all the javascript and CSS is packaged off into separate files.

The code comes from an article on Schillmania and that’s where I would recommend grabbing the zip file with the image slices that make the rounded corners so pretty.

Rounded Corners Without Images

There are many other ways to create rounded corners - some involving no images whatsoever.

On the jQuery site there’s a plugin for making rounded corners without images. It’s not for everyone (or every application) but worth checking out. Don’t ask me to break down the code because it’s pretty intense and chok full of trig functions that I am a little rusty on.

But look at how nice the code looks (using the plugin):

	$(document).bind("load", function(){
		$("#box1").corner();
	});

[tags]rounded corners, javascript, jQuery, DOM, CSS, Dustin Diaz, Schillmania[/tags]

Since then, I’ve seen many different methods for allowing a visitor to switch a stylesheet with a click of a mouse. But recently I came across a short example of how to do it with jQuery.

I want to show you this example and walk you through it because it not only gives another fine example of the short code you can write with jQuery but also too illustrate some of the more advanced features of the jQuery javascript library.

First, The Code

$(document).ready(function()
{
        $('.styleswitch').click(function()
        {
                switchStylestyle(this.getAttribute("rel"));
                return false;
        });
        var c = readCookie('style');
        if (c) switchStylestyle(c);
});

function switchStylestyle(styleName)
{
        $('link[@rel*=style]‘).each(function(i)
        {
                this.disabled = true;
                if (this.getAttribute(’title’) == styleName) this.disabled = false;
        });
        createCookie(’style’, styleName, 365);
}

What I’ve left out of the demonstration are the functions you’ll see later for creating and reading the cookies.

Familiar Ground

$(document).ready(function()
{
        $('.styleswitch').click(function()

The beginning of the code tells jQuery “As soon as possible, get all elements with the class name of styleswitch and fire off a function when the element is clicked”.

So far so good.

When these chosen elements are clicked the switchStylestyle function will be called. So that’s where we turn our attention next.

What In The World?

The first time I really looked closely at this I was stumped:

        $('link[@rel*=style]‘).each(function(i)
        {

After searching the web and coming up empty handed I contacted John Resig, the creator of jQuery, and asked him for some hints.

He directed me to some pages on the jQuery site that explain some of the more advanced ways that jQuery can be used to find and manipulate elements on a page.

If you read the short explanations and examples here you’ll soon see that this mysterious line of code tells jQuery “Find all link elements with a rel attribute containing the string ’style’”.

Huh?

Let’s look at how we would create a page with one main stylesheet and two alternate ones:

 <link rel="stylesheet" type="text/css" href="styles1.css"
  title="styles1" media="screen" />
  <link rel="alternate stylesheet" type="text/css" href="styles2.css"
  title="styles2" media="screen" />
  <link rel="alternate stylesheet" type="text/css" href="styles3.css"
  title="styles3" media="screen" />

Notice how all of the links to the stylesheets have a rel attribute with “style” somewhere between the quotation marks.

So, in short, this code is telling jQuery to target all of the stylesheet links in the page.

What Next?

The each() function loops through each of the stylesheet links and performs the operations spelled out in the next few lines of code:

                this.disabled = true;
                if (this.getAttribute('title') == styleName) this.disabled = false;

“Disable every stylesheet link but then un-disable any link where the “title” attribute is the same as the value passed to the switchStylestyle function”

That’s a mouthful too, but it’s really not that tough.

What we’re doing is matching the rel attribute of the links on our page (the clickable links for switching the stylesheets) with the title attribute of the stylesheets (and alternates) available to us.

When one of the clickable links is clicked, a function is called, which finds all the stylesheets, disables all of them, and then turns one back on… the one where the title of the stylesheet link matches the rel attribute of the link clicked.

Whew!

Full Code and Demos

Since Kelvin Luck already created the code, no need for me to replicate it here.

Demo

Code - I won’t link directly to the zip, since that’s sometimes seen as rude. Go to this page and at the bottom is a link to the zip.

Compare to Other Code

I believe ol’ Kelvin got his inspiration from this site where you’ll see that to do this without jQuery is a little bit more complicated and you don’t get all the benefits of Kelvin’s code - namely the long term memory of stylesheet chosen.

[tags]jQuery, javascript, DOM, cookie, stylesheet, css, alternate stylesheets[/tags]

As I mentioned in a previous tutorial, one common use of contact forms is to help visitors communicate with you without exposing your email address to the email harvesting software used by spammers.

But when it comes to spam, hardly anything’s worse than an insecure contact form. Imagine getting a nasty note from your web hosting company that your site has been used to send out massive amounts of email about black market erection medication and, oh by the way, your site is offline until you get it fixed - thank you very much.

So what I’m going to show you today is a simple method for adding an extra layer of security to ANY contact form on your site - even if you don’t use my super secure and wonderfully flexible Ultimate Form Mail.

The Situation

You notice that spammers have been remotely probing your contact forms for vulnerabilities… and you want them to quit.

The Problem

You don’t want to use CAPTCHA’s (Completely Automated Public Turing Test to Tell Computers and Humans Apart) because you just know that requiring your visitors to read squiggly letters and numbers just to send you a message is going to suppress communication - not encourage it.

Bottom line: you want to make life tough for the Bad Guys and super simple for the Good Guys.

The Solution

You’re going to use jQuery to add some hidden tag information to the contact form when the page loads. When the form is sent to the processor, you’ll use some simple PHP code to verify the following:

• The hidden tag is present
• The hidden tag’s value matches a ‘token’ stored as a cookie by your visitor’s browser
• The timestamp for the hidden tag hasn’t expired

In other words, your visitor will have a limited amount of time (specified by you) to fill in the form and send it. And if a spammer tries to post information to your form processor remotely they’re going to hit a big fat roadblock. Do not pass go, do not collect $200.

What I’m going to share with you is a modified concept I read from a very smart fellow named Chris Shiflett. He’s a security expert on all sorts of issues that PHP programmers can come across if they’re not careful.

The Tutorial

I got great responses from the tutorial for Table Striping Made Easy so I’ve decided to do another “walk through” tutorial with screen grabs. It’s a little time consuming, but hey, you’re worth it.

Tutorial on Safer Contact Forms Without CAPTCHA’s

Demo

Code

Silver Bullet?

“So now my forms are 100% secure and I can use Generic Free Contact Form Processor With Sloppy Code and feel safe?”

Uh… no.

This security concept is based on a key assumption:

Spammers would prefer to go after the “low hanging fruit” than spend all day trying to crack a tricky contact form.

Now listen carefully, dear friend:

This technique, although strong, is not a cure for a weak form processor.

My attitude towards securing a contact form is to use multiple methods on both the server side and the client side so that a spammer is going to have to invest an enormous amount of resources to even come close to succeeding with their evil plot.

I view the client side protection as analogous to posting a sticker on the windows of a home to indicate that the house is wired with an alarm. Thieves know to look for stickers, dogs in the yard, lights on the exterior of a home, and other signs of a well guarded house. They’re looking for high payoff with minimal work and risk.

In other words, if you can thwart 99% of attacks before they really get started and you can do it so easily why wouldn’t you? That’s what this technique does.

But it’s not a silver bullet cure for a crappy form processor.

[tags]jQuery, javascript, DOM, spam, spam prevention, contact form, Shiflett, AJAX, form processor[/tags]

I’m dying to do the write up for “Edit In Place the Jquery Way” and “Multiple File Upload Magic” but the code for both is a little more in depth and it just feels like I should tackle a few of the easier tutorials in the beginning.

So here goes -

Ever since making the switch away from table layouts for my websites in favor of all CSS (it must be two and a half years or more now) I’ve been consuming all the information I can find on the subject.

Way back in May of 2004 (ancient history) A List Apart had a great tutorial on creating drop shadows (Onion Skinned Drop Shadows) for any image, regardless of size.

The comments for the article are no longer available, but some of them echoed the sentiment from the editor’s note at the beginning of the tutorial.

Editor’s Note: The techniques demonstrated in this tutorial are not for everyone. The design method works its magic by nesting divs that have no semantic or structural value. If that bothers you (and there are good reasons why it might), this is not the tutorial for you.

(Emphasis added by Jack)

The Problem

Some CSS techniques require “extraneous” markup because currently only one background image can be assigned per element.

For example:

Here is the html code used in the A List Apart tutorial:

<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="object.gif" alt="The object casting a shadow"
/>
</div><
</div>
</div>

All of those divs serve as “hooks” for background images that make up the drop shadow.

Woudn’t it be nice if we could trim down our source code to:

<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

Which leads us to…

The Goal

I’m going to show you how easy it is to remove extraneous markup from your html source code using jQuery. Using this method will keep your code cleaner and (more importantly) will make it future layout changes much easier.

The Solution

Here’s how jQuery attacks the problem.

$(document).ready(function(){
$("img.dropshadow")
.wrap("<div class='wrap1'><div class='wrap2'>" +
"<div class='wrap3'></div></div></div>");
});

And then the images would be styled like so:

<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

A Closer Look

$(document).ready() is jQuery’s version of window.onload()

$(”img.dropshadow”) tells jQuery to find all images with the class name “dropshadow”. If you wanted to use an id instead, you could do something like $(”img#dropshadow”)

wrap() tells jQuery to use the DOM (Document Object Method Model) to wrap the images with the class=”dropshadow” in the html inside the parenthesis.

The End Result

Silly picture… but it’s the same one used in the original Onion Skinned Drop Shadows:

jQuery Drop Shadow Example

Compare jQuery to Other Solutions

From the jQuery site there’s a link to the Ajaxian website where another javascript library was used to create the Onion Skin Drop Shadow with javascript and I think the amount of code and the complexity of the code speaks for itself. Personally, I would prefer jQuery (but you already guessed that, didn’t you?)

To be fair… no one library is perfect for every job or every coder. This tutorial really isn’t meant to prove that jQuery is the “One True” all purpose javascript library.

Try Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx and the dozens of others. If you find one that works better for you… then use it.

jQuery is a tool that spoke to me. I hope this tutorial has shown you one more useful way to use it.

Related jQuery Tools

jQuery makes it incredibly easy to manipulate the html generated by your visitor’s browser.

You should take a moment and see what you can do with jQuery using append(), prepend(), before(), after(), html(), and remove().

Meatier Tutorials On the Way

For degree of difficulty, today I scored a one or a two. But that’s okay because even though the concept is simple, it’s applicable to lots of situations you come across in your design and coding work.

And besides, regardless of when you read this tutorial, I posted it after a Memorial Day of fun in the sun on the beaches of Florida. I just put the family to bed and I still have sand on my feet.

Rest assured, before we get to the end of the 15 Days of jQuery you’re going to see some more advanced tutorials, examples, and code.

[tags]jQuery, javascript, DOM, drop shadow[/tags]

To fight the evil Legion of Spammers, web designers and programmers have come up with some creative solutions. Let’s take a quick look at the more common workarounds and the drawbacks (minor as they may be).

name [at-no-spam] website.com

Problem: a link would be more convenient than typing in the address and some
will mistype.

Contact forms

Problem: you run the risk of having a spammer use your account to send their
mass emails (unless you use a really secure formmail script) and it’s overkill for situations
where you want visitors to just send a simple message.

Javascript encryption

Problem: your email is still sitting out in the open even if you use sophisticated
encryption to mask it. And who wants to run off to a third party website and run a dozen email addresses through an encryption algorithm one at a time? Not me.

Hiding behind a simple form

(For an example, see Simon Willison’s site and the button that reads ‘Reveal my Address’ near the top of the page.)

Problem: None that I can think of… but let’s see if we can improve on the
concept.

A Possible Solution: AJAX

The solution I propose will have a few advantages over some of the workarounds that we webdesigners currently use:

• Easy to implement
• Easy to change
• A little razzle-dazzle in the presentation
• No need to use a third party tool to encrypt an email address
• No email addresses sitting out in the open

By the last point I suggest that email encryption devices rely on obfuscation to hide the email address and assume that spammers aren’t smart enough or determined enough to reverse engineer the code and then go about collecting any emails they find on the web that are encrypted using the same method. In practice, I think that email encryption is relatively safe but the fact remains that the email is sitting in the html source code.

The Concept

1. Use jQuery to grab html content from a file on the server
2. The file containing the email addresses is mostly html (mailto links) with a simple protection mechanism thrown in for good measure

The Demos

I’m going to start with an example that shows the email addresses when the visitor clicks a button or link and move towards an example where the email addresses appear on the page almost instantaneously.

On button click - instant

On link click - fade in

On page load - fade in

On page load - instant

(*Note: by instant, I mean to say “no fancy effects… show the email addresses as fast as possible.)

The Code

This is released under a non-commercial creative commons license. Contact me if you want to use the code in a commercial product. I’m currently using it in a new CMS for web designers that I’m launching soon.

Get the code here (link to be added later)

Why Is This Safer Than A Regular Mailto Link?

The real problem with mailto links is that spammers can use automated software that searches the web to find them in the source code of your html. They most likely find you the same way Google does: by following links.

They’re lazy just like the rest of us. Therefore it’s unlikely that they’re surfing the web with a legal pad next to their keyboard, scribbling down lists of email addresses to spam.

View the source code of any of the demos and you will see that the email addresses are not in the html.

Is this a rock solid way to absolutely guarantee that you will never get spam and only receive pleasant emails from friendly web visitors… no.

But removing the email address from the source code, changing the secret phrase in the jQuery code, and changing the filename of the target file will probably give you a fair compromise between convenience for your visitors and security for your email address.

One Final Note

Take a close look at the code for the first three examples and you’ll see that I use the AJAX callback function to trigger the slideDown() and show() effects.

In other words, I don’t want jQuery starting the slideDown() effect until the information (html) has been received from the AJAX call. Posting the secret phrase to our simple server side script and then receiving the information back takes time.

Right way:

$(document).ready(function(){
$.post('mailtoInfo.php',{
  pass: "secret"
},function(txt){
  $('div.email').html(txt);
  $('div.email').slideDown("slow");
});
});

Wrong way:

$(document).ready(function(){
$.post('mailtoInfo.php',{
  pass: "secret"
},function(txt){
  $('div.email').html(txt);
});
 $('div.email').slideDown("slow");
});

[tags]jQuery, mailto, spam, AJAX[/tags]

The fact that I find myself desperately short on time today with deadlines looming certainly sealed the decision.

The Goal

We’re going to create a quick little snippet of code using jQuery that will convert and camouflage all of our affiliate links on a page.

Why?

Some affiliate marketers believe that there’s a segment of their audience that is savvy enough to spot an affiliate link and will avoid clicking through the link - typing the url directly into the browser to “cheat” the affiliate marketer out of their commission (assuming a purchase is made).

The “Old” Way

There are lots of ways affiliate marketers have devised to camouflage their links or to make it very difficult for someone to avoid clicking through their link. Some of these methods involve .htaccess and server side code.

But for the purpose of this tutorial I’m going to focus on some “old school” javascript:

<a onMouseOver='window.status="http://www.merchant-url-here.com";
return true;' onMouseOut='window.status="Done"; return true;'
 href="http://www.affiliate-url-here.com"
target="_blank">Link Text Here</a>

This code is designed to show the generic url in the status bar of the browser when a website visitor hovers their cursor over the link. So instead of seeing www.website.com?aff=123 they see www.website.com

The Problem

You’re an active affiliate marketer with multiple links on multiple pages and you’re adding content at a frantic pace. Writing all this code gets tiresome. And putting javascript into each affiliate link will make updating your websites a nightmare if at some point down the road you decide to change something about the code and the way the links are displayed.

The jQuery Solution

First step:

We want the javascript to camouflage our links as soon as possible so we start with this:

<script src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
//code goes here
});
  </script>

As soon as the DOM (Document Object Model) is ready, the code inside of the ready(function(){}) will start.

Next

We’re going to give all of our affiliate links a class name and a title. The class name will help jQuery scan the page and find all of the links we want changed, leaving all other links untouched.

The title will serve two purposes: when the cursor hovers over the link, a tiny tootip-like box will appear with the www.website.com url displayed and the same url information will display in the bottom of the browser window (Internet Explorer only).

<p><a href="http://www.affsite.com?id=123" title="http://www.affsite.com"
  class="affLink">Super Duper Product</a></p>

Tell jQuery to Find Links With class=”affLink”

$('a.affLink')

Add A Mouseover Event

$('a.affLink').mouseover(function(){window.status=this.title;return true;})

Simply put, this says “Find all links with class name affLink and onMouseover change the status of the browser (where link information is shown) to whatever you find in the title of the link.”

This does not work in FireFox (made fav browser) but it works for Internet Explorer (what most of the world uses - unfortunately). And in FireFox it just displays ‘Done’, or more accurately, moving the cursor over the link doesn’t have any effect on the status bar of the browser. I have not tested this in other browsers.

Home Stretch - Mouseout

jQuery lets us “chain” methods together like so:

$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});

This last bit of code tells jQuery to change the status bar of the browser back to ‘Done’ when the cursor is no longer hovering over the link.

If chaining mouseover and mouseout is a little more than you want to tackle as you get used to jQuery then there’s nothing wrong with writing your code like so:

$('a.affLink').mouseover(function(){window.status=this.title;return true;});
$('a.affLink').mouseout(function(){window.status='Done';return true;});

It’s up to you.

Put It All Together

<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
});
</script>

Final Thoughts

Some of you may be thinking this “Day” to be a bit simplistic. Others may have a difficult time seeing the point of the tutorial because you’re not an affiliate marketer.

In “Days” to come you’ll see me tackle issues that get more involved and apply to almost anyone with a website - whether you monetize your traffic or not.

[tags]affiliate marketing, affiliate links, DOM, javascript, jQuery[/tags]

Take a look at “Stripe your tables the OO way” by Matthew Pennell. His code is clean and concise. And it’s an improvement over a past article from A List Apart.

But with the help of jQuery, I think we can do better.

The concept is to create stripes on a table and then have the background of each row change color when your cursor rolls over.

The Goal

As I mentioned, Mathew’s code is quite good. It shows a level of skill that most part-time web geeks might find difficult to attain. It’s certainly above the head of someone just starting to roll up their sleeves and learn javascript.

How can jQuery help?

My mission is to show you that jQuery can make this task

• Easier to accomplish
• Faster to load on the page
• More flexible to use

So what are you waiting for? Jump into the tutorial and see how easy jQuery makes table striping.

[tags]jQuery, tutorial, javascript, DOM, table striping, zebra striping, AJAX[/tags]

But sometimes waiting for a page to load just isn’t quick enough.

A few large image files will quickly reveal that window.onload() can be painfully slow. So when I was creating a web app for internet marketers recently, I had to have something faster.

Some quick research into possible workarounds for the window.onload() issue brought me to some code by Brother Cake. If all you need is a fast way to kick start your javascript then their code might be something to try.

But if you’re going to be doing some DOM (Document Object Model) javascript coding then why not use jQuery and have your cake and eat it too (horrible pun - sorry).

jQuery has a handy little function that launches your javascript as soon as the Document Object Model is ready… which happens before the page has finished loading.

$(document).ready(function(){
  // Your code here...
});

You can use it to launch any kind of javascript you like. It doesn’t have to be reserved for jQuery style coding. And there’s nothing wrong with telling jQuery to launch several different functions at once.

Similar to many init() functions you may have seen before… just a lot faster.

You’ll see this code used again and again in the examples I give you on 15 Days of jQuery.

[tags]jQuery, DOM, javascript, window.onload[/tags]

jQuery is an amazing javascript library that makes it easy to create wonderful web effects in just a few lines of code. As the website says, it makes javascript fun.

If you’re thinking… “Boy, I need another javascript library like I need another hole in my head” then join the club. That’s exactly what I thought when I first came across it.

I had already used Moo.fx, Scriptaculous, TW-SACK, and Prototype. I had dabbled with RICO, Yahoo YUI, and other libraries.

Unlinke PHP, javascript does not come naturally to me… but I was doing my best to keep my head above water and keep up with all this AJAX madness.

So when I came across jQuery I thought “Yet another javascript library… no thanks.”

Why

So why did I change my mind about jQuery and why should you consider using it?

Simple. In just one glance at the source code of a page using jQuery you’ll see how easy it is to use, how much it accomplishes in so few lines of code, and how graceful it is.

My mind was opened one day when I stumbled across some code written with jQuery. Over morning coffee, I was flipping through the RSS feeds and reading my daily dose of web design blogs when I came across an example of javascript loveliness that used jQuery. Truth be told, the code on that site had some browser related bugs… but the concept was something I hadn’t seen before.

And the code…

The code looked almost simple. Like nothing I had seen before. It made sense.

I started reading through the documentation and was amazed to see how much could be done with so little extra code.

When

You should use jQuery when you need

• A small library that gives you…
• Powerful control over the Document Object Model
• With very little effort or work on your part

Or…

• Quick access to AJAX
• Without a lot of bloat (overhead - wasted code)
• And some basic animation effects to spice things up

But…

If you need super fancy effects for animation, drag and drop, and super smooth animation then you’ll probably want to use Prototype and one of the many great library created to enhance the effects.

Where

You can download the source code (10k) and some excellent tutorials at the jQuery website.

Who

jQuery was created by John Resig.