Nested Floatboxes + Forms

Page: 1

Author Post
First of al, very nice work on this piece of programming. I very much like the effect where the floatbox "grows" from the link/image clicked.

However, I'm struggling with some issues.

I would like to launch the floatbox from a form (1), loading a new form (2) and then from the second form launch another floatbox with another form (3).
One page, two floatboxes, three forms.
Then, from inside the inner form (3) i would like to be able to change the value of an inputfield from the middle form (2) while not being able to close the second form (2) without first closing the third form (3).

The problem I'm encountering is that when I use document.parent, it always points to the topmost page (1), no matter where the command is given (2 or 3).

I know it is possible when using the floatframe, but that way clicking the outer "black shadow overlay" closes all boxes at once and it limits the number of nested boxes because every box then must be smaller than its parent.

Hopefully this description is understandable, English isn't my first language.
Is there a way to do this?

Thanks in advance,
Registered: Aug 2008
Posts: 3382
I love a good puzzle.

This will be easy to do. First, I think it's worth understanding something about the floatboxed iframes that are loaded. No matter how many stacked floatboxes you put up, they are all descendents of the top document. They are displayed one above the other, but they belong to the top document just as if they were defined in the html of that document. It is this that allows them to overlay the whole screen instead of just the previous iFrame. Multiple floatboxes are siblings, not descendants.

There are floatbox variables that give you access to the different floatboxes. First, the global var fb always points to the first primary floatbox. fb.lastChild always points to the topmost floatbox. When there's only one box, fb = fb.lastChild. If there's more than two floatboxes displayed, you can get to them through the fb.children array. fb.children[0] is the second floatbox, fb.children[1] is the 3rd, etc.

In your case, the middle form (2) is in the first floatbox so we can get to it directly with the fb global var. When an iframe is loaded, fbContent will be that iframe element.

Here's the basic code you need in your arrangement of two floatboxes:
var iframe = parent.fb.fbContent;
var doc = iframe.contentDocument || iframe.contentWindow;
doc = doc.document || doc;

Now you've got the document object for your middle iframe and can easily get to the rest of the contents from there. (doc.getElementById('xyz') for example).

By the way, I would not have guessed that English isn't your first language. Your description was very clear and well stated.
Wow, impressive response. Fast and to the point. Thanks!
I'm going to try your pointers tomorrow and promise to RTFM ;)
Okay, I tested it, and it works!

Just for the record, here is the piece of code I use to get the correct target document, no matter how "deep" the boxes are nested:

var doc;
if(parent.fb == parent.fb.lastChild){
doc = parent.document;
if(parent.fb.children.length >= 2){
var iframe = parent.fb.children[parent.fb.children.length - 2];
var iframe = parent.fb;
doc = iframe.fbContent.contentDocument;
doc = doc.document || doc;

It isn't pretty, but it works.
Hopefully this will help some other people out there!

About the English thing: I felt it took me to long to write that description, but watching al those subtitled '90s sitcom-reruns finally starts paying off :)

Page: 1