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


  1. jonb
    Member

    I did try it and got a blank page(yes I changed the url specific info). On further investigation, i found that the link
    <script src="http://www.biyc.bc.ca/machform/js/jquery.js"></script> is not found.

    I looked in the folder under js and there is no jquery.js. There is base.js, calendar.js,email_entry.js,machform.js,rico.js,view.js, and a jquery sub directory.

    Posted 13 years ago #
  2. yuniar

    Oops... sorry about that.
    It should be the path to jquery-core.js

    So the path for you should be:

    http://www.biyc.bc.ca/machform/js/jquery/jquery-core.js


    MachForm Founder

    Posted 13 years ago #
  3. jonb
    Member

    I made the change, but still get a blank screen.

    This is the test html I am using: http://biyc.bc.ca/j3.html

    the actual one that is working(except on safari) is:http://biyc.bc.ca/rbrreg.php

    Posted 13 years ago #
  4. yuniar

    Ok, there are two problems there.

    1) The iframe code is referring to www.biyc.bc.ca while the URL above doesn't use www
    Both are considered as separate subdomains, thus the Javascript won't work due to browser security limitation.

    You will need to access it using this URL instead:
    http://www.biyc.bc.ca/j3.html

    2) Try to change your current code:

    $("#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>');

    adjust the above code and make it into one line instead of 4 lines.


    MachForm Founder

    Posted 13 years ago #
  5. jonb
    Member

    putting it on one line did it, the form is displaying. However,(there is always a however!!) a couple of issues.

    When it goes to the confirmation page, the page starts the display at the bottom, so there is still the need to scroll up. Also, the html pagethat the form is embedded into is longer than the form(confirmation page) length, so the rest of the page is getting cutoff.

    I also tested in safari, another little quirk, is when it goes to the confirmation page, (which is shorter than the actual form) the remaining part of the form still shows on the confirmation page.(you kinda gotta try it to see what i mean).

    go ahead a test it all you want.

    thanks
    j

    Posted 13 years ago #
  6. yuniar

    I've tested using Firefox and Safari. The javascript works fine and automatically adjust the height of the iframe, based on the iframe content.

    However, it can't really scroll into the top of your HTML page indeed. It only scroll up to the form container.

    Regarding the page which is getting cutoff, I think you can try to add this CSS code into your HTML page CSS file:

    #content_footer{
      clear: both;
    }

    MachForm Founder

    Posted 13 years ago #
  7. yuniar

    Alternatively, you can try renaming your file into PHP file, such as "j3.php" and then use the PHP embed code instead of the iframe code.

    This way you won't need to use any Javascript and the page will scroll right into the top when being submitted.


    MachForm Founder

    Posted 13 years ago #
  8. bashfoo
    Member

    Thanks for the fix. I added the www. to the URI and allowTransparency="true" and it works great. Thanks for screwing me up Microsoft!

    Posted 12 years ago #
  9. beeeno
    Member

    Thanks Yuniar, but I have tried both scripts and cannot get to either to work. Reading on to other contributors it just gets more confusing. I can't use the advanced php code because the forms are on pages created by a page builder feature which uses the same php file as a basis for many pages.

    It seems to me a problem that could do with revising in next version. It is logical that any info on a page filled form fields, text boxes etc is going to be significantly smaller when the data is condensed down to mainly single lines, and so never needs the original iframe size used for the form.

    One workaround that would help problem in my case might be if the 'continue' button on the bottom of the form had a hidden 'go to top of page' code added, so that when review page comes up we are back at top instead of looking at bottom of iframe and blank white screen. Would this work? If so what/where needs inserting?

    Thanks
    Beeeno

    Posted 12 years ago #
  10. jakedonahue
    Member

    Awesome, this worked perfectly... I just have one small problem. I'm using this on Wordpress, and any page where I have used this code prevents my Menu from letting the Submenu appear. For example, I have a Menu button with three options underneath that appear when you hover over the button. Yet once I get to a page with my Form, those options do not appear... Any ideas?

    Posted 12 years ago #
  11. cr
    Member

    Hi very good job, I have a problem with forms, when the page is resized (responsive) the form disappears in the bottom, I tried to embed with (iframe) and (js) with wordpress plugin, thank you for your time

    *I tried to create a class and add height to the iframe but when there is an error message or form, the form expands and the bottom disappears

    Link: http://colombiarents.com/en/rent/palmetto-eliptic-cartagena-001/

    Posted 10 years ago #
  12. shopkins
    Member

    Hi,
    I am having the same problem with iFrame not adjusting. I have added the code to my website, but it appears that

    /machform/js/jquery/jquery-core.js

    does not exist. Please advise.
    Sam

    Posted 9 years ago #
  13. lancenickel
    Member

    Try this. It might work as an alternative to the javascript embed method. I have used it. I'm using the regular iframe embed. No jquery core needed.

    Put in the head

    <script>
    function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }
    </script>

    and on the iframe add the onload function

    <iframe allowtransparency="true" frameborder="0" height="1039" onload="javascript:resizeIframe(this);" scrolling="no" src="http://yoursite.com/form/embed.php?XXXXX" style="width:100%;border:none" title=""></iframe>

    I have not tested in IE so use at own risk. :)

    Posted 9 years ago #

RSS feed for this topic

Reply