Iframe method: Please explain this code

  • mgcaledonian13
    Asked on May 23, 2015 at 3:39 AM

    Please can you explain this bit of <iframe> code

    <iframe id="JotFormIFrame" style="width: 850px; height: 450px; border: none;" src="//form.jotformpro.com/form/51402615787962" width="300" height="150" frameborder="0" scrolling="no"></iframe>

    What does the Text in blue do, clearly the Text in red changes the size of the iframe.

    Regards Willy Scott 

  • Chriistian Jotform Support
    Replied on May 23, 2015 at 5:36 AM

    Hi mgcaledonian13,

     

    Thanks for contacting us.

     

    As per my research, the text in blue sets the height and width of the iFrame. Basically, it does the same thing as the text in red does. However, as per my testing, the text in red overriides the effect of the text in blue.

     

    Anyhow, I wonder where you found the iframe code in question because I checked your form and the iFrame code is a little bit different from the one above.

    -------------------------------------------------------------------

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/51422404779961" frameborder="0" style="width:100%; height:2036px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    -------------------------------------------------------------------

     

    Regards.

  • mgcaledonian13
    Replied on May 23, 2015 at 5:31 PM

     

    Thanks for your reply

    Yes I found out that if you put !important; in you can reduce the height to your own size, note the ! explanation mark, and you can make it too small as well thus cutting off the bottom of the form off, not what you would want to do though.

    <iframe id="JotFormIFrame" style="width: 850px; height: 1600px !important; border: none;" src="//form.jotformpro.com/form/51402615787962" width="300" height="150" frameborder="0" scrolling="no"></iframe>

    This now seem to affect the height (1600px) of the Thank You Page, is there anyway to set the height of the Thank You Page separately at all, I can't see anyway of accessing the code for it.

    I have not checked this out ie removing !important; and setting the page to the default height which I suspect reduces the Thank You Page height.

    Either way I now know how it works. well I think I do !!

    Regards Willy Scott 

     

     

  • Chriistian Jotform Support
    Replied on May 24, 2015 at 2:18 AM

    Hi mgcaledonian13,

     

    Glad to hear that you were able to fix the height of your form by yourself.

     

    Regarding the height of your Thank You page, may I ask for the URL of the page where you embedded your form so we can check?

     

    If you want to know where to access the HTML code of your Thank You page, please see steps below.

    Iframe method: Please explain this code Image 1 Screenshot 20

     

     

    But I doubt that setting the height there will fix the issue so we need to check your web page.

     

    We will wait for your response.

     

    Regards.

  • mgcaledonian13
    Replied on May 24, 2015 at 2:48 AM

    Again thanks for your prompt reply.

    I tried that, and sadly my Source Editor is blank. Would it be because I am using Chrome and I see that you were using Firefox, I would have thought it should not make any difference - comments !! 

    I Have checked the Thank You Page again and it seems to be OK now - strange!

    I have another issue, but will start a new thread for it.