Tuesday, 3 November 2009

Error using Raphael javascript library in Firefox for hidden elements

I'm currently using the Raphael javascript library to display vector graphics across multiple browsers. When attempting to create a text node on a hidden canvas...

style="display:none"

...I came across the following error in Firefox:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost:54561/Scripts/raphael.js :: anonymous :: line 1146" data: no]

The problem, which for some reason doesn't appear under IE, is that display:none means that the canvas is not available and so the call to getBBox()fails. If instead you hide the element using...

style="visibility:hidden; position:absolute;"

...then the canvas is rendered but not displayed allowing the call to getBBox() to succeed.

However, I was actually hiding the element so that it could be displayed using the slideDown() jquery function. This, along with most other jquery display functions, only works with display:none and not visibility:hidden. This is an easy fix as the following code demonstrates.

//Change display property
$("#targetElement").attr("style", "visibility:visible;display:none");
//Slide down functionality now operational
$("#targetElement").slideDown("slow");

3 comments: