Pagebreak issue: When I click next or back the whole webpage jumps down

  • Profile Image
    rateyournandos
    Asked on January 18, 2012 at 02:07 PM

    Please see my test webpage: http://rateyournandos.com/test2.aspx

    Click the 'Rate YOUR Nando's Now' button.

    If you click a page break button on the form the whole page jumps down.

    Please can this be fixed? I have had a look at the CSS and cannot see anything which would resolve the issue.

    Many thanks

  • Profile Image
    fxr
    Answered on January 18, 2012 at 04:13 PM

    Its quite difficult to see whats going on here with the way whatever web autoring software you are using has split up the JotForm embed code. 

    Is it possible you could try adding the form to your webpage with the Iframe embed method? it is detailed here option 4 .

  • Profile Image
    rateyournandos
    Answered on January 18, 2012 at 04:31 PM

    HI there,

    Problem is I only want the form to appear in the iframe when the button is clicked. This is the code at the moment:

    <script type="text/javascript">
    function show() {
    document.getElementById('map').src="//form.jotform.com/form/20172456259"
    }
    </script>

    <input type="button" id="RYNbutton" value="Click Here To Review" onclick="show()" value="Skip straight to Rating YOUR Nando's!">

    <br/>
    <p></p>

    <iframe id="map" src="/Documents/nearest2.htm" width="900px" height="600px"
    frameborder="0" marginwidth="0px" marginheight="0px" scrolling="no" ></iframe>

     

    I also have another question: is it possible to control the height of each page on the form? I would like the back/next buttons to remain at the bottom of the iframe while the form is being navigated.

    Many thanks

  • Profile Image
    fxr
    Answered on January 18, 2012 at 04:48 PM

    As a test can you put the form src in the iframe first? 

    Its may be this script you are using that is generating this phenomena somehow. 

     

    There may be better ways to achieve this functionality without updating the iframe src like that. e.g with a hidden div. 

  • Profile Image
    rateyournandos
    Answered on January 18, 2012 at 04:54 PM

    I've just put it in an iframe under the other iframe. It appears to still be happening. I believe the form is attempting to be at the top of the page after one of the back/next buttons is clicked. Is there a way to override this functionality?

  • Profile Image
    fxr
    Answered on January 18, 2012 at 04:58 PM

    Can you try adding ?nojump at the end of your iframe src?

    e.g somthing like:

     

    <iframe id="map" src="http://form.jotform.com/form/20172456259?nojump" width="900px" height="600px"

    frameborder="0" marginwidth="0px" marginheight="0px" scrolling="no" ></iframe>

  • Profile Image
    rateyournandos
    Answered on January 18, 2012 at 05:26 PM

    Works a charm! Thanks for your help.

    Any luck on my other question?

  • Profile Image
    fxr
    Answered on January 18, 2012 at 06:17 PM

    You can try this Custom CSS:

    .form-pagebreak{ position:absolute; bottom:5px; }

    .form-section { height:585px !important; }

     

  • Profile Image
    fxr
    Answered on January 18, 2012 at 07:13 PM

    You may need to make that height of the .form-section class just a little higher to get it absolutely right.  (maybe 590px )

    I have cloned your form and added the CSS above, you can see the result here. 

    http://form.jotform.com/form/20170921112

  • Profile Image
    rateyournandos
    Answered on January 19, 2012 at 03:53 AM

    It appears to be working perfectly on the form link, but not in the iframe on the site. Do you have any ideas?

  • Profile Image
    fxr
    Answered on January 19, 2012 at 04:18 AM

    Thats a clone i made of your form to test things out, you need add the CSS to your own form.

    .form-pagebreak{ position:absolute; bottom:5px !important; }

    .form-section { height:590px !important; }

    I see you have already custom CSS set up for the form-pagebreak class, so just add the two rules above to existing defination. 

  • Profile Image
    rateyournandos
    Answered on January 19, 2012 at 04:45 AM

    I have been updating my form but I cannot see the changes at the ?nojump link. Is this something you control?

    Please compare http://form.jotform.com/form/20172456259?nojump with http://form.jotform.com/form/20172456259

  • Profile Image
    fxr
    Answered on January 19, 2012 at 05:13 AM

    That is very odd. 

    This may be related to an issue with one of our servers we have been having this morning. 

    Can you use this link to your form as temporary measure? 

    http://www.jotform.com/form/20172456259?nojump

    Just remember to check then update the link to http://form.jotform.com/form/20172456259?nojump  at some point later today or early tomorrow. form.jotform.com is faster and we prefer our users to use that domain. We have been having a synching issue on that domain which our developers are in the process of fixing.