Thanks for the link.
You have "
attachTo:itemForm" in the options and the floatbox elements are indeed attaching to the document as children of this form. When you say it's not working, I think you must expect that option to do something other than what it does.
The
attachTo option does not position a floatbox on the screen. It inserts the floatbox component into the requested element in the document node heirarchy. There are only two reasons why you would want to do this.
The first is to enhance accessibility for people who can't see your site and use a screen reader to access it. Placing the floatbox at a certain location in the document hierarchy means it will be read or recited by the screen reader in the correct sequence relative to the rest of the document. Correct sequencing of content is a requirement of the US Government's Section 508 accessibility requirements. Floatbox is the only such effects library that can be used to build Section 508 compliant web sites thanks to
attachTo and a few other correct accessibility-enhancing behaviours.
The second purpose is that you may have form elements within the floatbox that you want to have submitted along with a form defined on the main page. This can easily be the case in ASP.NET pages which can have only one form: i.e., the built-in one that wraps the entire page.
Again: the
attachTo option has nothing to do with positioning the floatbox on the screen. Maybe you're looking for the
boxLeft and
boxTop options? Check the Options Reference.
Here's a partial view of your page's DOM as seen by Firebug when the floatbox is open. All the floatbox elements are within the "fbx" div and, as you can see, that div is attached as a child of the "itemForm" form element as requested.
<body>
<form id="itemForm" class="itemForm" accept-charset="utf-8" method="post" name="itemForm" action="">
<div style="display:none;">
<div id="header">
<input id="isAjaxSubmit" type="hidden" value="" name="isAjaxSubmit">
<div id="the_body">
<div id="footer">
<div id="current_trip">
<div style="display:none;">
<div id="fbx" class="fbx">
<div id="fbCaliper_1" class="fbx fbCaliper fbCaliper_white" style="transition-duration: 0s; -moz-box-sizing: content-box; position: absolute; top: -99999px; padding: 0px; margin: 0px; border-width: 0px; overflow: hidden; visibility: hidden; display: none;"></div>
</form>