How to show a non-hidden div in a floatbox?

Page: 1

Author Post
Member
Registered: Oct 2015
Posts: 9
When a div, which is not hidden, is used in href of floatbox, it disappears from its original position on the page. I need to keep it.
Is it possible to show a div (in no modal way) and keep it visible in its original position?

I heard in a similar situation that a solution is to clone the div and then to put the clone to the floatbox. However, the div has a unique id, and I am not sure, if it can be cloned.
Administrator
Registered: Aug 2008
Posts: 3382
If content is showing at two places on the page, it cannot be the identical document elements. The HTML markup must be duplicated.

Could you not have one visible div to show on the page and a second hidden div with the same HTML text in it? The hidden div would need a unique id so it can be reliably referenced for Floatbox action with "#theDivID". You can probably get away with duplicate ids as long as the hidden div appears before the visible one in the markup, but it would be illegal HTML and hence risky.
Member
Registered: Oct 2015
Posts: 9
I would prefer to clone the div on demand only
(more specifically, only for opening of a floatbox),
and remove the clone div at the closing of the floatbox.

Otherwise, the html file would become long and messy.
Moreover, it may happen that the same div will be used twice,
and then the second floatbox would be empty.
Furthermore, there would be too many of div's to duplicate, and most of them would not be used in a single opening of the page.

A plausible solution:
(1) a div is cloned on a demand of opening a floatbox,
(2) the clone is hidden,
(3) its id is changed ,
(4) the result (the hidden div with changed id) is used to create a floatbox.
(5) At closing of the floatbox, the new div (which was created by cloning) is deleted.

Is the whole scenario workable?

Cloning, with a subsequent id change, is possible, see
http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id

A more cumbersome approach is to make a separate folder and fill it with files, one per div, with copies of all the divs, and create the floatboxes by href to the files.
Would this slow down opening of the floatboxes substantially?

An advantage of this approach is that each div can be used simultaneously for
creating several floatboxes.

Is there any intermediate way?

Is it possible to use, for creating an html-floatbox, some marker, instead of id, that would specify the div (which has no id), but would not be an obstruction for showing the content for the second time?
Administrator
Registered: Aug 2008
Posts: 3382
A simpler approach would be to use Floatbox's ability to show an HTML snippet directly when using the fb.start API function.

You could remove the floatbox class from your link, and add something like:
onclick="fb.start( fb.$( 'someID' ).innerHTML, 'option1:setting1 option2:setting2 ...' ); return false;"

If you have styling associated with style, class or id attributes set on the source div, use outerHTML instead of innerHTML. Don't worry about duplicate ids in this case; they are not being used to locate elements but only to style them, so no problem.

Alternatively, if are comfortable with coding for ajax on the server side, you could use an ajax content type in the floatbox and code the page to return just the desired snippet in response to an ajax request.
Member
Registered: Oct 2015
Posts: 9
This is great, absolutely fantastic!
Thank you very much!

Is something similar possible for tooltips?
Administrator
Registered: Aug 2008
Posts: 3382
Tooltips are by nature - almost by definition - tied to user interaction with the page and cannot be invoked at random by script. fb.start starts a floatbox.

But, a tooltip is just a floatbox with behaviour changes and a different default appearance. You can use fb.start to scriptomatically open any floatbox and use the options to make it look like a tooltip, or any other preferred appearance.
Member
Registered: Oct 2015
Posts: 9
I mean the same problem: to attach this floatbox to the element which is clicked in order to open the floatbox. So, it is a context box rather then tooltip.

Is it possible to use fb.start to open a floatbox attached to the place of the click?
Administrator
Registered: Aug 2008
Posts: 3382
It would probably be helpful and a time-saver for you to read through the Options Reference. Everything that you can customize or set for a Floatbox is listed there.

For example, in the "Position" section, we can see that the boxLeft and boxTop options can be set to a value of "click".
Member
Registered: Oct 2015
Posts: 9
Thank you. The Options Reference does not list all the useful tricks.
In this thread you taught me one, I am really grateful for this.

I really overlooked the options boxLeft:click boxTop:click . However, in my environment they are not useful. A context box, with its placement options, would be an ideal solution, but its opening delete the original div . You taught me how to avoid this for floatbox, and this is very helpful, thank you. Still, sometimes I would prefer content box.

Page: 1