This forum is no longer open and is for reading/searching only.
Please use our new MachForm Community Forum instead.
MachForm Community Forums » MachForm 2
Auto expand/adjustable iframe
Started 16 years ago by yuniar | 53 posts |
-
yuniar
Below is some javascript code that will automatically expand the iframes that we currently use to embed forms.
(1) Paste The blow to the head
<script language="JavaScript"> <!-- function calcHeight() { //find the height of the internal page var the_height= document.getElementById('the_iframe').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height= the_height; } //--> </script>(2)Paste the code below to the body and replace "your page here" with your url
<iframe width="100%" id="the_iframe" onLoad="calcHeight();" src="your page here" scrolling="NO" frameborder="0" height="1"> An iframe capable browser is required to view this web site. </iframe>MachForm Founder
Posted 16 years ago # -
yuniar
UPDATE [April 16, 2011]
Below is an improved Javascript embed code. I suggest to use this one:<script src="http://www.example.com/machform/js/jquery/jquery-core.js"></script> <div id="frame_marker" style="display: none"></div> <script> function display_machform(url, callback) { $("#frame_marker").after('<iframe height="1" id="my_iframe" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="" title="form">machform</iframe>'); $('#my_iframe').attr('src', url); $('#my_iframe').load(function() { callback(this); }); } $(function(){ display_machform('http://www.example.com/machform/embed.php?id=3',function(){ var height = $("#my_iframe").contents().find("body").height(); $("#my_iframe").attr("height",height); }); }); </script>Make sure to change the example path on the above code with your own path. They are:
1) http://www.example.com/machform/js/jquery/jquery-core.js
2) http://www.example.com/machform/embed.php?id=3Make sure to change them with the correct path based on your machform path.
MachForm Founder
Posted 16 years ago # -
When I use this technique, I get a one-line iframe. My source is an external website, but even when I use in internal website, I get the same one-line iframe. I saved the page as .php and even .html. But it does not work for me. Help?
Posted 16 years ago # -
When I use the standard form code, the page does not refresh to the top of the page. So when a form is submitted, the review page appears blank to the viewer unless you scroll up. When you submit the review page, the window again appears blank unless you scroll to the top to see the success page.
That's why I was trying to use the auto-expanding iframe.
Posted 16 years ago # -
yuniar
That's odd.
If you already use the same internal website, the auto-expanding iframe should be working just fine.Can you let me know the URL of your page? I'll check.
MachForm Founder
Posted 16 years ago # -
http://heritagetexas-members.com/formsTest/west-vertical.php
Feel free to fill in the form to test it... I am still testing and developing the form.
Posted 16 years ago # -
yuniar
Ah.. I see that your form is coming from another domain:
http://htp-photos.com/machform/view.php?id=1I don't think the auto-expanding script would work for different domain.
It only work if the iframe source is coming from the same domain.MachForm Founder
Posted 16 years ago # -
Maybe... maybe not:
Posted 16 years ago # -
yuniar
I checked that page, but I don't see the javascript. Perhaps you forgot to put it there?
Also, where do you plan to use the form?
htp-photos.com or heritagetexas-members.com?If you plan to use the form into htp-photos.com, then I suggest to use the advanced form code instead. That would work best, no iframe being used and no additional auto-expanding script needed.
Otherwise, if you need to use it for the other site, I'm afraid the auto-expanding won't work.
MachForm Founder
Posted 16 years ago # -
Thanks... I need it on members site.
Posted 16 years ago # -
yuniar
I suggest to install separate machform for each site and then use the advanced form code. That would eliminate the whole problem.
You need to purchase separate license though ;-)
MachForm Founder
Posted 16 years ago # -
Okay, I have it working. Problem is I have four forms on the page. Now the other three don't show up.
onLoad="calcHeight();" - It might have to do with this.
Posted 15 years ago # -
This solution have one problem in XHTML validation:
Line 103, Column 64: there is no attribute "onLoad".
… <iframe width="100%" id="the_iframe" onLoad="calcHeight();"Any idea?
Posted 15 years ago # -
yuniar
Try using "onload" instead of "onLoad". XHTML needs all lowercase.
MachForm Founder
Posted 15 years ago # -
This works great, but when i try and put it inside a <div> that i want hidden unless a user clicks a link it doesn't appear.
Any ideas why it isn't working with the following?
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>Posted 15 years ago # -
so.. this doesn't work???
Posted 15 years ago # -
yuniar
It works. druting above is using additional javascript which interefere the original javascript.
Simply use the code I've posted on the first post.
MachForm Founder
Posted 15 years ago # -
how come the "continue" / submit button is cut off slightly
Posted 15 years ago # -
yuniar
Hmm.. can you paste me the URL to your form? so I can see it.
MachForm Founder
Posted 15 years ago # -
External website auto-resize iframe can be found at this url.
http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx
Cheers!Posted 15 years ago #
Reply »
You must log in to post.