Here’s a followup to my first jQuery tutorial posted back in September 2007. To date, that article has been viewed 3,000 times, so I’m thrilled some people have gotten some good out of it.

Since then, I’ve honed the script even more, and wanted to share some of the improvements.

As with the first tutorial, this method makes a couple assumptions. First, it assumes your navigation buttons are within a container div identified by a unique id (ie, “nav”). It also assumes that your images follow a consistent naming scheme, such as nav_homeON.gif and nav_homeOFF.gif.

This tutorial is written as a standalone tutorial, so some code may be the same, or similar, to the original post. So here we go.

First, make sure your navigation is contained within an identifiable container:

1
2
3
4

<div id="nav">
	<a><img></a>
	<a><img></a>
</div>

Then, in your javascript, make sure your jQuery code is surrounded by the usual:

1
2
3

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

Now set up the mouseover event:

1
2

$("#nav a").mouseover(function(){
});

Next, set the source (src) of the image file. This is done by finding the child of the link that was moused over, in this case, an image.

imgsrc = $(this).children("img").attr("src");

My original script then checked to see if the moused-over button was already “on”:

matches = imgsrc.match(/_over/);

This isn’t necessary with the revised method. Now all you need to check for was whether a valid image src was actually found. If so, then replace the word ‘OFF’ in the filename with ‘ON’.

1
2
3
4
5
6
7

// Fail if no image found
if (typeof(imgsrc) != 'undefined') {
	// Replace OFF with ON
	imgsrcON = imgsrc.replace('OFF', 'ON');
	// Now change the src to the 'ON' value
	$(this).children("img").attr("src", imgsrcON);
}

This method is better than the previous one as it doesn’t use regex or have to check for previously selected links. Plus, it includes better error checking to eliminate those pesky “undefined” javascript errors.

Handling the mouseout is the same as before. All you need to do is reset the image source to the value that was initially set on the mouseover, checking for the existence of a valid image src as before:

1
2
3
4
5
6

$("#nav a").mouseout(function(){
	// trap for 'undefined' errors again
	if (typeof(imgsrc) != 'undefined') {
		$(this).children("img").attr("src", imgsrc);
	}
});

I’ve also implemented a better preloading mechanism. This goes above the rollover code:

1
2
3
4
5
6
7
8
9

// Loop over each image within the navigation container
$("#nav img").each(function() {
	// Set the original src
	rollsrc = $(this).attr("src");
	// Replace OFF with ON
	rollON = rollsrc.replace('OFF', 'ON');
	newImg = new Image(); // create new image object
	$(newImg).attr("src", rollON); // set new obj's src
});

Line 2 creates a loop to run the following function for every image within the #nav div. Line 4 sets the image’s file source, and line 3 replaces ‘OFF’ with ‘ON’. Note that this version of the rollover script doesn’t care whether your buttons are gif’s or jpg’s. And the last line creates a new image element with the ON state of the image.

You can see the script in action here.
Download the .js file here.

Thanks for checking out this tutorial. I’ve got some other things up my sleeve that I’ll be posting soon

Here is a fully-edited video of my presentation entitled “The Future Today: CSS3 and JavaScript”, which I gave June 3rd at the Spring Break conference at Ohio University. My hope was to put this on a hosted service to absorb some bandwidth. But the Google video uploader is kind of janky and Vimeo won’t allow files over 500mb.

So for now, here is an encoded Flash video, hosted on my Dreamhost account. Let’s hope it holds up. As soon as I can, I’ll swap this out for something hosted elsewhere (ie, not on my dime). Enjoy, and feel free to let me know if this has been helpful.

Code samples and PDF slides of this talk are available here.

Well, sorta back; I’m waiting for my flight back to Atlanta at the Akron/Canton airport. Overall, I think this year’s Spring Break conference went well, at least what bits of it I had time to see. The first night, there was a speaker’s dinner at a swanky restaurant within Baker Center at Ohio University called Latitude 39. It was nice to get to chat with some of the other speakers in advance of the conference.

Code samples and slides online here. Video (with slides) can be found here.

For accommodations, the university paid for a night’s stay at the Ohio University Inn. It’s pretty much Athens’ only “hotel”, but it was quite nice. Some last-minute slide rehearsal and tweaks, and it was up again at 6am to get ready for the big day.

The opening session dealt with how the linguistics department was doing English-language training for students all over the world using Adobe Connect. I’d frankly never really thought much about Connect, but their demo, while sort of clunky at times, really made me want to check it out.

Next, I decided to sit in on another session to kill time before my talk. This one was entitled “Get Into an AIR Application Using ActionScript 3″. I was hoping this would be more of an entry-level Adobe Air presentation, but it was incredibly complex, at least to me. Even though I’ve dabbled a bit in Air and even Actionscript, I only recognized fragments of what he was talking about. I think the guy is totally sharp and knows his stuff. I just feel he was talking at a WAY higher level than the typical Spring Break audience. Thankfully, I had an excuse to duck out early to get ready for my talk.

The room for my talk was somewhat of a mini-theater, in that it had two rows of seats with an aisle down the middle, a podium and screen at the far end. I think it probably seated maybe 75. As usual, I had a bit of trouble initially getting my Macbook set up the way I wanted with the projector, but not too bad.

To be honest, I didn’t feel super nervous. I was nervous, yes, but oddly not as much as I was to give the talk to my co-workers. I think it may be because I don’t really know the audience at a conference. So if I bomb, I never have to see those people again. If I blow it at work, I have to see those people every day

Actually, my nervousness jumped up to eleven when I looked up and sitting in the audience was none other than Eric Meyer himself. Holy crap. Hopefully this realization did not affect my performance much.

Overall I think the talk went well and I’m satisfied with my performance, especially this being my first talk at my first conference. The head count was somewhere around 58, which isn’t too shabby, given the overall attendance of the conference.

Once my session let out, we had lunch and attended Eric Meyer’s keynote “The Emerging Craftsman”. Overall, a pretty good talk. Never heard Eric speak before, but it’s clear he’s been doing it for a while.

Next, we attended the MooTools session. Figured it was always good to see what the non-jQuery world is up to. Unfortunately, the talk was pretty-high level, with little beginner-digestible information. And it was clear the presenter was super nervous, which didn’t help. It was still a good effort, and I’m sure a couple people got something out of it. Didn’t make me want to switch to MooTools, though.

The rest of the day, just kinda hung around waiting for the end-of-day session with Eric. Actually skipped the next-to-last session to go out foraging for coffee on the streets of Athens. Got totally drenched in the rain, but the iced latte was totally worth it.

Eric’s last session was a combination tutorial and Q&A session. He presented a table-based browser timeline that was actually executed in a really interesting, clever way. Hoping he makes it available on the web. I also finally learned what the hell microformats were, and how cool they could be for our clients.

Thankfully, I had a chance to speak with Eric a couple times. I knew I was setting myself up for a smackdown, but I had to know what he thought of my talk. He said he was only in it for maybe the middle third, but what he thought what he saw of it was pretty good. We also talked a bit about things like jQuery, CSS3 and microformats. Was really glad to get the chance to meet him, albeit briefly.

Would’ve liked to have hung around for the post-conference mixer, but had another engagement and it was starting to get nasty outside. My thoughts on the conference? Overall I think it went well. It wasn’t without flaws and room for improvement. Baker Center is a fabulous venue and I’d be happy to see it held there next year. The parking is kind of bad, though, which is partially because of some nearby construction. Hopefully that can be coordinated better next year.

I think if I had what could be considered an actual “complaint”, it would be ensuring the subject matter and level of complexity fit more within the average audience member. I can only speak to the two sessions I sat in on that were really not geared towards beginners at all. True, the conference should not be all-newbie, either. But there needs to be a better mix and some indication to the guest what they’re getting themselves into. I’d even suggest going so far as to “pre-screen” presenters’ outlines and/or slides, if for no other reason than to classify them by how advanced they are.

Didn’t get a chance to see me there? I’ve put the slides and code examples online, which you can find here. The university videotaped each session and they’ll have those available in podcast form, although I’m not sure of the timeline. Luckily I was fortunate enough to have a buddy make the trip to Athens to videotape it as well. This way, I have a copy I can edit myself and mix in my slide screens. I hope to have this online within the next few days.

Once the video is online, I’d appreciate any comments, questions or other feedback anyone might have. Spring Break 2009 is March 25th!

Update: Video is now online.

Finally launched a very basic web app I’ve been piddling around with for a while. It’s called ClipRunner, and it’s only purpose is to help get bits of text from one computer to another.

I built this mainly for my own needs. Seemed like every time I turned around, I needed to get a little bit of text from one place to another. Usually things like a long URL, an IP address, WEP key, or something I otherwise wouldn’t be able to remember going from one office to another.

The concept is pretty simple. Type or paste your text into the big field, enter a “pickup code” in the little field. Then go to the other computer and go to cliprunner.com/yourcode to retrieve it.

Is it secure? Well, it depends on what your criteria is. There is no real authentication, so if someone guesses your code, they’ll see it in all its glory. But as the fine print points out, be smart about it. For example, pasting a Photoshop serial number is one thing. But don’t SAY it’s a photoshop serial. And don’t use a pickup code of: photoshopserial. I think that’s pretty reasonable.

At any rate, I’d love to get feedback on the utility of this thing, even though I know I’ll be using it myself

I’m happy to announce that I’m now on board the web development team for the video podcast called ‘dotBoom‘. I’ll be doing the PHP and Ajax work for the new site to be designed for season two. Or rather, Season 2.0.

dotBoom is a show about frustrated web designers, all done with puppets. Excuse me, people of felt. The show is created by Brian Hogg of Ontario, Canada. He also creates the puppets, sets, and performs many of the characters.

Check out their 28 episodes so far, plus all kinds of outtakes and behind-the-scenes. Be aware, that these characters are web developers, so there’s bound to be some strong language

More updates as they become available.

Okay, so this is my first jQuery tutorial (or any tutorial for that matter). So here goes…

In my own experience, image rollovers for navigation is a pretty repetitive task. Almost every site I build has them. For the longest time, I simply used the javascript spit out by Dreamweaver. Sure it worked, but it required including an extra javascript file, and inline javascript for mouseover and mouseout events.

The more I got into jQuery, the more I realized this was an ugly solution. And as I stopped using Dreamweaver for regular development over a year ago, I thought I’d come up with a solution that could just be easily dropped into each new site and would just work.

Before I start, I should note that usage of this script assumes a couple things. It assumes your navigation images are contained within a div with an id (I use #nav). It also assumes that your over state images are named consistently. For example, if your contact image is nav_contact.gif, your rollover image will need to be something like nav_contact_over.gif.

It also assumes your navigation is structured thusly:

<div><a><img></a><a><img></a></div>

First, make sure your jQuery code is surrounded by the usual:

1
2

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

Now set up the mouseover event:

1
2

$("#nav a").mouseover(function(){
});

Next, set the source (src) of the image file. This is done by finding the child of the link that was moused over, in this case, an image.

imgsrc = $(this).children("img").attr("src");

We’ll only perform the rollover if the image state is not already “ON”.

matches = imgsrc.match(/_over/);

If it’s not, add the ‘_over’ bit to the filename and change the image source with attr(“src”):

1
2
3
4

if (!matches) {
	imgsrcON = imgsrc.replace(/.gif$/ig,"_over.gif");
	$(this).children("img").attr("src", imgsrcON);
}

And that’s it! Handling the mouseout is pretty simple. All you need to do is reset the image source to the value that was initially set on the mouseover:

1
2
3

$("#nav a").mouseout(function(){
	$(this).children("img").attr("src", imgsrc);
});

One more thing. If you have a lot of nav images, or they are not tiny files, you might want to preload them. Here is a function that will automatically preload all the images within the #nav div:

1
2
3
4
5

$("#nav img").each(function() {
	rollsrc = $(this).attr("src");
	rollON = rollsrc.replace(/.gif$/ig,"_over.gif");
	$("<img>").attr("src", rollON);
});

Line 1 creates a loop to run the following function for every image within the #nav div. Line 2 sets the image’s filename, and line 3 replaces ‘.gif’ with ‘_over.gif’. You can replace .gif with .jpg or whatever. And line 4 creates a new image element with the ON state of the image.

You can see the script in action here.
Download the .js file here.

So that’s it. This stuff is probably beyond basic for experienced jQuery users, but if you’re just getting started, hopefully this will help. I’ve got several other jQuery scripts like this, so hopefully this won’t be my last tutorial (even though this was more involved than I thought it was going to be