caitlin gannon

I usually try to avoid falling in love with shiny new web effects, but with Lightbox I couldn’t help it. I hope this effect doesn’t get overused too soon, because I really like it.

I’ve spent a lot of time looking for a nice-looking, easy to use, user-friendly slideshow script. I haven’t found much until now–Lightbox has it all. It’s based on the prototype framework and Scriptaculous AJAX effects library, but you don’t even have to know that to implement it.

Here’s an example:

The instructions are short and sweet:

1. Upload a small set of files to your webserver (.js files, a .css file, and some images). Files are here.
2. Anywhere in the page, add 4 lines of code that reference the three Javascript files and one CSS file.
3. Add a thumbnail image to your web page. Link this image to a larger version. Inside the anchor tag, add the following:
   rel=”lightbox”
4. For an image series, add the following to the anchor tag for each image in the series:
   rel=”lightbox[name-of-series]”
   Each image should have the same series name. When the viewer holds the mouse over the image, a navigation button will appear (Previous on left, Next on right).

I’ve put up a longer slideshow example here.

Do you share a computer with someone else (at home, for example) and secretly wish that they’d keep their bookmarks out of your bookmarks? Or do you wish you could more easily keep your work-related and personal browsing separate?

Keep the peace — create separate profiles, and everyone keeps their own stuff: bookmarks, saved passwords, cookies. It’s quite easy. The Mozilla knowledge base explains how.

1. From Start->Run, type firefox -profilemanager (Windows; see above link for other environments).
2. Click “Create” to create a new profile. Choose a new, empty folder to place it in. This folder should be easy for you to find and differentiate. Example: C:/Program Files/Mozilla Firefox/profiles/MyName.
3. In the C:/Program Files/Mozilla Firefox directory, copy the Firefox shortcut.
4. Rename the shortcut to your new profile name, and move it to the desktop.
5. Right-click on the shortcut and choose Properties. Add “-P “MyName” to the end of the target line. For example, the new target for the shortcut should be: C:/Program Files/Mozilla Firefox/firefox.exe -P “Caitlin”
6. Create additional shortcuts for each profile.

Snap.com offers a free tool that creates thumbnail previews of links on your site. The user hovers over a link and a small preview of the site appears (with a small link to snap.com, of course).

I love that it’s free and very easy to install, but for my purposes there are a few drawbacks:

• can’t enable it for one link and disable it for another one
• no previews of PDFs or images within the same site

Still, it has great potential to make a site more usable (and beats learning how to code a preview-on-hover yourself).

Here’s an easy bit of javascript that helped me solve a big usability problem.

The issue: we designed an application that requires users to fill out a form, then displays their errors in a popup window. It’s a lengthy form that can present many errors, so showing the errors on the form itself wasn’t a good solution. We chose the dreaded popup window. Certainly our choice warrants further debate, but the coding is done and here we are.

Our thinking: we’ll explain to people how to allow popups for our site, and their popup blockers won’t be a problem. (Tools - Options - Popups - Allow. Not so hard.)

Not so. In end-user testing, we realized that some people don’t know they have popup blockers in the first place. Hence, they don’t try to unblock our site.

Example: “I didn’t need to remove the popup blocker — the site worked fine. However, I didn’t get a confirmation message when I submitted the form.”

Hmm…. what the? … lots of chin scratching. Aha! She didn’t get a confirmation message because the form had errors she didn’t see. This user never knew she was missing the popup windows.

So here’s the solution, after a bit of Google searching: Will Bontrager’s popup killer test. Thanks Will! His site explains very clearly how to implement this code.

Basically, create three small blocks of javascript code in the Head section of the page; then call the function in the body tag, put one bit of script inside the body section, and you’re done. The javascript tries to launch and close a popup window when the page loads. An alert message displays after the test, informing the user that she either can or can’t see popup windows from that site.

Problem solved.

If you’ve already installed IE7, it ate IE6. That means you can’t use IE7 to test how websites perform in IE6 and what strange IE6 quirks might be lurking in the shadows.

This standalone version of IE6 works pretty well for basic testing of CSS and layout issues.

It took me two entire days to figure out that it’s not my fault! It’s IE-freakin-6. I’m so annoyed.

Here’s the issue: I used my favorite technique for creating CSS tooltips on a form. Next to each form field is a [ ? ] which, when moused over, gives the form-filler-outer some useful guidance.

“It works fine in Firefox” has become my new nickname.

It also works in IE7. However, mysteriously, when you hover over a question mark next to a dropdown list, in IE6 the dropdown list will always stay on top of the tooltip.

It does this:

When it’s supposed to do this:

The solution is to write a bit of javascript that creates a temporary Iframe around the Select element. I found the code here.

Not the easiest fix for me to figure out, but it works.

Now if everyone would just switch to Firefox (please!) my life would be much easier.