post-next -Ted Drake's sketchbook » AJAX

Z-index conflict with Flash and DHTML widgets

Ted Drake — Tue, 21 Feb 2006 05:30:41 +0000

I’m working on a project that has a Flash movie and a DHTML dropdown menu on the same page. Flash movies like to sit on top of the page and the dropdown would slide behind the movie. Since this isn’t what I wanted, I needed to find a way to make the it have a lower z-index than the dropdown.

I did a Standardista Search for a cure and didn’t see it. But a quick message to the Web Standards Group returned the solution. It’s actually pretty easy.

UFO Flash detection and insertion script

I’m using the UFO JavaScript to detect the browser’s compatibility with the Flash movie and insert it on the fly. This method provides good default content to those without Flash and valid, shiny, happy Flash to those with it.

UFO gives you the ability to insert parameters into the movie and this is what you need to cure the z-index issue. You need to set the wmode parameter to “transparent.”

var FO = { movie:"swf/myMovie.swf", width:"300", height:"120", majorversion:"6", build:"40", wmode:"transparent" }

That’s all there is to it.

Creating a Common JavaScript File

Ted Drake — Sat, 03 Dec 2005 01:02:53 +0000

Dustin Diaz released his personal recipe for a common JavaScript file. You know the file that includes the basic functions that any web site can use. We’ve all grabbed some of these scripts from here and there and its nice to see it one-stop shopping packaging.

Yahoo! maps

Ted Drake — Thu, 03 Nov 2005 16:01:04 +0000

When I began working for Yahoo! last month, I became privy to some exciting projects in the works. Unfortunately, I couldn’t tell anyone. I’d just say to my family and friends, this place has some amazing things in the works.

Well, today I can announce my favorite new Yahoo! tool. Yahoo! has taken the online maps and revolutionized them. Seriously, check out the new Yahoo! Maps beta.

The page was built around what a user needs in a map. It gives you the traffic, lets you send directions to your phone, you can email the map, get directions, find the closest taco shop or free wireless coffee shop, read reviews about the coffee shop to see if it is actually free and has good latte’s (I’ve already done this). It has a scale on it to let you know what a mile is. It’s the simple details that make this such a useful toy…I mean tool. You can even use the Yahoo! API to create your own custom maps.

I have a feeling I will be writing more of these glowing Yahoo! reviews in the near future.

Standards-based web development resources made even easier

Ted Drake — Thu, 06 Oct 2005 17:20:58 +0000

Chris Pederick of the all mighty Web Developer Toolbar mentioned a great service today on his blog. Rollyo allows you to create your own personal search page that is super easy to build.

I’ve jumped at the chance to build a firefox toolbar to search the best standards-based resources available (and my site to boot.) I simply created a Rollyo page and then created the Firefox search plugin to use it.

I don’t have time to create the super-easy javascript link right now, but here’s how you can install it in two minutes.

Download these two files: standardistas.src, standardistas.gif
Place them in your program files/mozilla firefox/searchplugins directory
Restart Firefox.

Or…

Visit the new Rollyo – Standardista page and click on the Add to Firefox link on the right sidebar. This approach will give you a generic Rollyo icon in the search box.

Summary

In one simple search you can get the relevant information from all of these sites without having to swim through thousands of extraneous results.

I’ve added more standardistas to the list:

The Future

I begin working with Yahoo! in a week. I had planned on building a page using their search API in the near future. Go ahead and download this Firefox toolbar plugin. I will be adding this to the mozdev archive and when I make the new Yahoo! version, your toolbar will actually update itself. As Christopher Lowell would say: “How cool is that?!”