Iframe method: Please explain this code

  • Profile Image
    mgcaledonian13
    Asked on May 23, 2015 at 03: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 

  • Profile Image
    Chriistian
    Answered on May 23, 2015 at 05: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" onload="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.

  • Profile Image
    mgcaledonian13
    Answered on May 23, 2015 at 05: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 

     

     

  • Profile Image
    Chriistian
    Answered on May 24, 2015 at 02: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.

     

     

    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.

  • Profile Image
    mgcaledonian13
    Answered on May 24, 2015 at 02: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.