I’m one developer on a visualization project using d3.js, which is pretty fantastic. I’m working on the control panel at present, which displays a series of buttons to the end user to allow them to filter out certain metrics in the data set. The buttons do a bit more than that, they’ve also got a nifty horizontal bar in them that indicates what percentage of that data is presently included. So if we were visualizing fast food data, and you filtered out Hamburgers the progress bar for McDonalds might drop down to 40%.

We have a bit of hierarchical data that lends itself well to nested drop downs. When the user hovers over a button for a while, I’ll display the drop down to let them explore the data in greater detail. Things were working well in Chrome, but my :hover pseudo-event never fired to display the drop down in Firefox. I spent a great deal of time trying to figure out why. My buttons seemed quite simple. <button> <div class=“drophead”>Food</div> <ul> <li>Hamburger</li> <li>Fries</li> </ul> <div class=“barchart”></div> </button>

My usual fallback when I can’t figure something out on the web, especially if there’s inconsistencies involved, is to validate. Validation revealed that my divs and uls were not valid children of the button element. Chrome managed to make this work, but Firefox had issues handling pseudo-events for these invalid children, so my drop downs didn’t work. Even though it worked in Chrome now, there was no guarantee that my invalid syntax would continue to function long term. I swapped the buttons out for divs, and asked a co-worker to help with some refactoring as divs don't allow value attributes as buttons do.

W3C Validator saves the day again.


Comments »

No Trackbacks
No comments

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
 

Hi, I’m Paul Reinheimer, a developer working on the web.

I wrote a book titled Professional Web APIs with PHP back in 2006, and am currently working in Biomedical Informatics for a major public health company.

I’m working on a project to help developers called WonderProxy which has proxies all over the world. Working on GeoIP development? Now you can finally test properly! We've also released Global Ping Statistics for expected ping times between cities, as well as a Load Testing Tool to measure your site's ability to handle load. Our most recent site checking tool is Where's it Up? which checks your sites availability globally, returning HTTP, DNS, and Traceroute details

My hobbies are cycling, photography, travel, and engaging Allison Moore in intelligent discourse. I frequently write about PHP and other related technologies.

I co-founded:

WonderNetwork Logo

Search