If you find (as i did with a recent project) that you need to make a div clickable and load FloatBox on clicking of the div.

So click able div for Floatbox, without any content within the div, say you have a 50px by 50px div that you have no content in and want to be click able (say your using the div as a click able overlay). Simply style your div's position appropriately and make the div the link:

<a class="floatbox" rev="width:800 height:800 enableKeyboardNav:true" href="http://www.google.com">

<div id="whiteboard0"></div>

</a>

Then this will keep the position of the div and have the whole thing click able, which onclick will action Floatbox!


This may sound like a simple solution but i thought Floatbox had to have content between the <a></a> tags, and did not realize this could be just the <div></div> itself i was going to use blank png's as the content between the <a></a>'s but thought i would experiment with this.

Works in I.E 8, Firefox (mac and PC) and Safari (this is all i have tested in so far).

Apologies to anyone who thinks this is a no brainer, just thought i would post it in case anyone else was struggling with it.

Thanks for sharing your discovery.

This can be done a little simpler by placing an onclick action on the div to start floatbox.

<div onclick="fb.start('http://google.com', 'width:800 height:800')"></div>