I've got a VEMap control with the following relevant bits of code:
map = new VEMap('map');
map.AttachEvent("onclick", DoContinents);
function DoContinents(event)
{
if (event.elementID != null)
{
//var shape = map.GetShapeByID(event.elementID);
//var id = shape.GetID();
//var id = event.elementID;
//alert (event.elementID);
if (event.elementID == 'msftve_1001_200000_10000')
{
map.SetCenterAndZoom(new VELatLong(15, -90), 2);
}
else if (event.elementID == 'msftve_1001_200001_10001')
{
map.SetCenterAndZoom(new VELatLong(48, 23), 2);
}
else if (event.elementID == 'msftve_1001_200002_10002')
{
map.SetCenterAndZoom(new VELatLong(4, 18), 2);
}
else if (event.elementID == 'msftve_1001_200003_10003')
{
map.SetCenterAndZoom(new VELatLong(43, 87), 2);
}
else if (event.elementID == 'msftve_1001_200004_10004')
{
map.SetCenterAndZoom(new VELatLong(-25, 134), 2);
}
cont.Hide();
vid.Show();
$('#sidebar_list').show();
$('#legend').show();
}
}
It works just fine in Chrome, and even in IE! However when I load the page in Firefox nothing happens when I click on my map icons. Upon further investigation I discovered that the event fires in all browsers and DoContinents
runs. In Chrome and IE, event.elementID
contains the ID of the VEShape I clicked but in Firefox event.elementID
is null (even though there is an event object)! Obviously this causes the code in my DoContinents
event handler not to run. Why would this happen in Firefox but not my other browsers?
This was a hard one to track down but it turns out if the following conditions are met, VEMap events break. They still fire but critical event data such as elementID is missing.
When these conditions are met the aforementioned problem occurs.
Be aware that Joomla automatically loads mootools. This is what happened to me.