Support Forums

(applies to iFrame surveys only)

does your survey have multiple pages? or, does the length of your survey change frequently? do you add or remove questions frequently.

do you find that the height of your iFrame is sometimes too short, cutting off the bottom of the survey? is your iFrame sometimes too tall, pushing down your content beneath the survey?

this technique is for you.

look here for an example. fill out the survey to see the autofit in action:
http://laptopacademy.net/wordpress/signup

i’ll share the code in my next post.

(thanks chad!)

this method is not for the faint of heart.

it will require a bit of script, and you’ll need to upload a couple of files to your web-host.

your visitors must have javascript enabled, which, according to several , sources i checked, is about 95% of all users. this method includes a fall-back, for users without javascript.

there are several steps. i’ll present each step in a separate post, for clarity.

next step.

WordPress users will want to disable the visual editor for this step: go to Users/Your Profile, and UNcheck “Use the visual editor when writing”

Script On Your Page

Paste this script anywhere into your webpage, where the iFrame is embedded:

<script type="text/javascript"> function resizeIframe( height ) { var iframe = document.getElementById( "surveyFrame"); iframe.setAttribute( "height", height ); } </script>

next step.

Script Your Survey Template

go to the SurveyGizmo.com/Edit Survey/”Look and Feel” page.

scroll down to “This Theme’s HTML Template”.

scroll inside the html template to the bottom, and paste the code below.

after pasting, you MUST change the urls to point to the files you just uploaded to your server.

<iframe id="HiddenIframe" width="1" height="1" style=" position : absolute; top : 0px; left : 0px; visibility: hidden; "></iframe>

<script type="text/javascript" src="http://PATH/TO/YOUR/WEBSERVER/fx.js">
</script>

<script>loadHiddenIframe(
“http://PATH/TO/YOUR/WEBSERVER/hiddeniframe.html”
)</script>

don’t forget to click the ’save’ button.

johny said:

next step.

Script Your Survey Template

go to the SurveyGizmo.com/Edit Survey/”Look and Feel” page.

scroll down to “This Theme’s HTML Template”.

scroll inside the html template to the bottom, and paste the code below.

after pasting, you MUST change the urls to point to the files you just uploaded to your server.

<iframe id=”HiddenIframe” width=”1″ height=”1″ style=” position : absolute; top : 0px; left : 0px; visibility: hidden; “></iframe>

<script type=”text/javascript” src=”http://PATH/TO/YOUR/WEBSERVER/fx.js”>
</script>

<script>loadHiddenIframe(
“http://PATH/TO/YOUR/WEBSERVER/hiddeniframe.html”
)</script>

don’t forget to click the ’save’ button.

***New to this****

The above part of your script is generating an invalid character error. I don’t know any Java could you please tell me how to fix it. :)

How It Works
Essentially, the parent page resizes the iFrame after it knows how tall the survey is. But there are a few obstacles.

Because of the way browsers work, the parent page cannot know the size of the survey– only the survey itself knows. Browsers will not allow the iFrame to talk to the parent, because they are in different domains. It’s a security protection.

So the survey has to talk to the parent in a roundabout way. The roundabout way is another iFrame, embedded inside the survey. The web-page loaded into that inner iFrame happens to be in the same domain as your website. Therefor, that inner iFrame can talk to your parent page.

So the survey has to tell the inner iFrame how tall it is. How does it do this? Look at the url of this page in your address bar. See where it says
?forum=3

That’s a bit of extra information tacked onto the end of the address. This is how the survey communicates with the inner iFrame– it embeds it’s height value into the address of the inner iFrame.

Then the inner iFrame grabs the height from it’s own address, and sends it back up to the parent page. Then the parent resizes the survey iFrame. Pretty clever, eh?

Thank you so much for this posting. It works great.

Though I have one question…

First iframe page is 1000px height
Second iframe page is 1500px height

Within the iframe, I am giving the user the option to go back a page and change their information, if needed.

When a user goes BACK from the second iframe page to the first iframe page, it does not resize again. Therefore the first iframe page is 1500px height - with alot of open space at the bottom.

Is there a way to call the resize function again, when they hit the back button?

Any help/ideas are appreciated.

Thanks!

I have similar issue as JP. and also a question.

first… Where does the getFirstParam function get called ? looks like never. maybe I’m blind.

2nd, just like JP, I have an iframe of a knowledge base (remotely hosted)

How can I get proper height for each page ? JP, did you find a solution ? It appears that once the hidden iframe gets loaded, it never gets reloaded, therefor, causing it to never resize properly (although if you’re using the default fx.js it appends 50 pixels on each load)

thanks in advance.