Tuesday, October 9, 2007

The Big Picture(s)

The main web site I manage focuses on gardening - which of course includes flowers. So it only makes sense that our template-mandated 125x125 photos be available in a larger size. After all, there's only so much to admire about a beautiful bloom or luscious greenery if you have to squint to see it.




So I went about the task of figuring out the best way to do this. I decided to go with a specifically-sized pop-up window. We'll put a small link under the regular photo:



And that will bring up a larger image in another window. It will be sized to the photo and won't have a tool bar or address window, just to emphasize its purpose. (Link to larger image.)

This is all accomplished with a small bit of Javascript. I'd like to explain how the script works, but since I don't actually know Javascript, that would be difficult. Like many webmasters before me, I merely copy-and-pasted code that was shared on the always-helpful Webmastersworld. It sounds like cheating, I know, but frankly, I have no interest in learning Javascript. It's kinda like driving a car: you're glad someone put the engine together for you, but you don't have to know how internal combustion works to drive.

Anyone with web experience is probably rolling their eyes right now. The post I found the code on was from two or three years ago - this is old news. But it's new to me, and I can't tell you how proud I was to show off my new "trick" to my coworkers.

Thursday, October 4, 2007

"Find and Replace" Stupidity

Sometimes my dumb mistakes are so dumb as to make me laugh.

I've always used target="_blank" in my HTML to make a link open in a new window. I like my links to external sites to open in a new window keeping my site open for the user. I think with our assumed audience that's a good idea.

But the Gardening Solutions site uses XHTML Strict, and target=_blank is apparently a no-no in XMTML Strict. Your code will not validate if you're using it. Say what you will about the purity of validation versus "the page works, why fix it?", I'm trying to play by the rules of the huge institution for which I work. I noticed the web guy who built many of these pages that I inherited used rel="external" and that seemed to work, so I did a handy-dandy search and replace and did the good-doobie thing - I replace any mention of target="_blank" with rel="external" -- not really knowing how it worked.

Guess what - now it wasn't working at all! Opening my site in IE7, I found that none of my links were opening in new windows, not even ones that had previously worked before my little s'n'r - ack!

So after a little research, I realized that rel=external only works with a little Javascript workaround (I know nothing of Javascript). I open up the file called external.js and compare the code to one I found on webmasterworld.com. (Which rocks, by the way.)

It was looking correct until one line. The correct code had:

anchor.rel="external";

My code had:

anchor.target="_blank";

My search and replace had replaced it everywhere - including the one place I needed the "wrong" code.

What makes this even more stupid is I had done the exact same thing with another piece of code a few day ago!

Ah, the adventures of an inexperienced webmaster.