Help! iframe with form, in placeholder, prevents Xara menu from functioning correctly

[jonazen]

EDIT: Please note - this was resolved on 7/31/13, and was not a problem with any Xara products. My coding error entirely. Explanation later in thread. I'm leaving the rest of this for posterity, in hopes that it may help somebody else who makes similar mistakes! - Jon

Hi all -- hoping someone can help.

I have a requirement to include a form in a page, with fields that are conditionally displayed depending on the values chosen for other fields. I've looked at all the form builders (JotForm, Wufoo, etc), and had to bypass 99% of them as they generally have javascript libraries resident on their own server, whether or not you host everything else on your own servers -- this, so at a minimum they can track your usage and distinguish between a limited (e.g., 100 submissions a month) and paid account (at various usage tiers). JotForm looked great - but my client will not sign up for a subscription, and we expect at least 1,000 hits a month.

I settled on CoffeeCup Web Form Builder as this can be a one time purchase, with the option to host ALL the code of a generated form on your own server. Only limitation is that any changes you make, as in changing form action on PHP scripts, is not officially supported -- but the code is pretty accessible and many people have apparently done this.

So - here's the problem: I have a 4 page proof-of-concept site I've started building. If all goes well, I'll expand this, fine tune the layout, fonts, etc and finalize the design -- but I'm stuck on use of the form in this page.

URL to a test version is: http://stronggroup.com/testhlv (please note - the "analyze" button on the form is not functional yet!)

The first three pages seem fine. Page four has the placeholder object on it with the following code specified for the body portion that will be generated:

<iframe width="685" height="1302" style="border:none; background:transparent; allowTransparency="true" overflow:hidden;" id="fb_iframe" scrolling="no" src="hlv_calc_form/hlv_calc_form.html">

When you land on this page (called "Analysis" -- accessed by the vertical nav bar by clicking "analysis"), the nav bar is not displayed correctly as it is on other pages. Additionally, the form embedded in the iframe seems to have taken modal control over the whole web page. The embedded form has javascript validations running against each field, and does some cute things such as only revealing the fields for various children's ages (e.g., child 1, child 2, child 3) after you've told it how many children you have.

Cute...but it seems that I can no longer click on the nav menu to navigate away from the Analysis page of the site once the form is displayed. I can hover over the buttons and see the javascript that would be executed on click, but the nav bar doesn't receive my clicks -- it seems that they all go to the embedded form (for example - as soon as the page loads, if I try to navigate to another page, the form validation executes and display error messages on the embedded form. Clear that clicks -- even outside the iframe -- are being sent TO the embedded form.

The navbar and placeholder are both on the MouseOff layer.

I've tried moving the placeholder to different layers and shifted it above/below the navbar. Only difference is that either portions of, or the entire navbar disappear from view when I do this.

I am attaching the "xar" file for this in case anyone can take a peek at help me figure this out. BTW: I'm using the latest version of PDX9, and have checked for updates, etc. The web host for the link I provided is GoDaddy, and I also get the exact same results testing on a local WAMP installation (I'm using AMPPS). I don't think it's anything weird with hosting -- it seems I'm doing something wrong. Any help most appreciated!

Attached xar source file here:


experiment5.xar

[gwpriester]

Select the navigation bar on the page with the iframe and bring it to the front (Ctrl + f).

Nope, I tried this and it did not help. Never mind.

Not sure why you have separate layers for images and text and if these layers shouldn't be over the MouseOff and MouseOver layers.

[jonazen]

When I started, I was trying to keep a consistent structure (except for my popup FAQ descriptions) across all pages. It's gotten a bit out of whack as I try various attempts at fixes. I can move the items to different layers -- just frustrating that I seem to be shooting the dark to find an answer. For example: I tried what you suggested (and later retracted ), and as you noted, this didn't help. I had, in fact, tried that earlier. For anyone else reading: when I move the navbar "in front" of the iframe (I'm assuming this is some kind of div z-order thing?), it no longer even shows up when I display the page! I can't imagine why this is happening, and it's certainly not obvious that any of this ordering should, in fact, change the visibility or function of the navbar...

I'm hoping there's a coherent answer to this, so I can actually know, in advance, how the pages will function while I'm laying them out in DPX9. One tiny thought is nagging at me as I stare at this: the navbar is not just a set of images with links -- it's got javascript tied to each item in the group. Is it possible, for example, that the javascript validations on the embedded form in the placeholder are interfering / taking precedence over the javascript tied to the navbar? I sure hope that's not the case, as it would mean that iframe contents could conceivably take over your browser...

I really do appreciate any time / advice / expertise that might be shared on this.

thanks,

[Acorn]

I think it might help if you terminated your IFRAME with </iframe>.
You page thinks everything after this is part of the IFRAME and as it is on top that means 'everything'.

Acorn

[jonazen]

I think it might help if you terminated your IFRAME with </iframe>.
You page thinks everything after this is part of the IFRAME and as it is on top that means 'everything'.

Acorn

OMG! {jon slaps forehead in embarrassment} Totally my fault...dopey coding error that I never should have made. Thank you SO much for noticing that! Totally fixed the issue!

[gwpriester]

Well spotted, Acorn.

[jonazen]

Thank you all - the support, help, guidance -- and some of the fantastic examples and tweaks -- are truly appreciated.

[Acorn]

More luck than judgement, Gary. I moved things around, no difference. So, I changed the source to one of the site pages and got a nested view than worked until I selected the same page whereupon it broke. So, in the end I looked at the placeholder code.

Simples (a current British idiom), Acorn

[Acorn]

Jon, don't worry about it being an own goal. This is what the forum is for as no one is perfect all the time (I thought I wasn't perfect but I was wrong, which proves I can't be). I enjoy learning what other people find hard and what also what I don't know. Your Postings were clear and the problem interesting.
Every success in your design.

Acorn

[jonazen]

Thanks again, Acorn. I've done some tweaking in the meantime - started experimenting with the FixedTab tweak (I know a few contributed to the conversation back then, but I think this version was shared publicly by athman / Steve Ledger. Put together a basic homemade vertical navbar with it. I do lose mouse-over effects on the navbar doing this (the drawn elements), but the floating menu effect is nice. I'd be curious to know if there have been any further tweaks / developments in that area. For the moment, the site is improving a little bit at a time:

http://stronggroup.com/testhlv