Page seems to jump when next button is clicked in iframe form on Wix website

  • Profile Image
    goquote
    Asked on March 18, 2015 at 05:16 AM

    You can see best here:

    http://www.gotreequotes.com.au

    Click the button on the form to go the the next page of the form and the whole page jumps up. It is very annoying and I feel could be costing me conversions.

    How can I fix this?

    By the way I have tried this on the 4 big browsers Chrome, IE, Safari. Firefox and all have the same issue. I have cleared the chase on all. I have spoken to several users and all have experienced the same so you should have no trouble reproducing it.

    best regards

    Ben

  • Profile Image
    Ben
    Answered on March 18, 2015 at 11:22 AM

    I see that it jumps to the parent iframe start - which is at the start of the entire form

    Once it gets there, you can go back and forth and it will not move.

    Is this the same what you are experiencing?

    This happens so that everything is shown to the person filling the form out, but you should be able to turn it off by adding ?noJump at the end of the link in the iframe code.

    The change would be from this:

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 467px; border: medium none;" src="//form.jotformpro.com/form/50697893931976" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>

    to this:

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 467px; border: medium none;" src="//form.jotformpro.com/form/50697893931976?noJump" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>

    Do let us know if that works for you.

  • Profile Image
    goquote
    Answered on March 18, 2015 at 12:28 PM

    Hi there,

     

    Thanks for your reply.

    I have tried adding ?noJump to the code to no avail. This is what my code looks like...

     

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50697893931976?noJump" frameborder="0" style="width:100%; height:1419px; 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>

     

    Just to confirm I changed the code being entered into the iframe on the wix site.. is that right? Id did nothing to the actual code in jotform..

    Is there something else you can see above with the code that I should change to fix it?

    I don't know CSS but this stands out to be a little sus:

    {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if 

    I appreciate your timely response

    Best regards
    Ben

  • Profile Image
    goquote
    Answered on March 18, 2015 at 12:29 PM

    Just to confirm:

    "I see that it jumps to the parent iframe start - which is at the start of the entire form. Once it gets there, you can go back and forth and it will not move. Is this the same what you are experiencing?"

    This is what I am experiencing.

    Cheers

  • Profile Image
    Ben
    Answered on March 18, 2015 at 02:10 PM

    The code above seems right Ben and your question about that part of code is well based, so lets try using the following code to see if it helps:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50697893931976?noJump" frameborder="0" style="width:100%; height:1419px; 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]) {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>

    I just removed that part: case "scrollIntoView":iframe.scrollIntoView();

    If that does not resolve the issue for you, please consider using js embed option with ?nojump parameter.

  • Profile Image
    goquote
    Answered on March 18, 2015 at 02:44 PM

    Unfortunately that did not work either,... All I got was a nav bar down the side.

     

    My website is a WIX site. As far as I am aware all I can use is the iframe to embed.

     

    Can you suggest something else. I need to get this resolved.

     

    Regarsds

    Ben

  • Profile Image
    Ben
    Answered on March 18, 2015 at 04:49 PM

    I am not quite sure why it would show a scrollbar on the right Ben.

    I see it for a brief moment, but it is removed afterwards.

    Looking at the code, I am still however seeing as if your iframe is calling the entire script:

    <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 &gt; 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>

    Notice the bold part that should have been removed. - Did you restore this back by some chance?

    If it still continues to do that, let us know and we will raise it to our developers for inspection.

  • Profile Image
    goquote
    Answered on March 19, 2015 at 03:07 AM

    That has done the trick!!

    I had not taken out ALL of the code. This time I did and it worked.

    Many thanks for your advise and patience

     

    Best regards

    Ben

  • Profile Image
    EltonCris
    Answered on March 19, 2015 at 09:24 AM

    On behalf of my colleague, you're welcome!

    Feel free to contact us again should you have more questions.

    Thank you!