Disable Collapse Jump

  • Profile Image
    JeffreyMurrayPhotography
    Asked on March 27, 2012 at 11:07 PM

    Is there any way to disable the feature that causes the page to jump to the expanded field?

  • Profile Image
    liyam
    Answered on March 27, 2012 at 11:43 PM

    Hello,

    You can try adding a ?nojump parameter at the end of the source URL of your embedded form.

    Example:  <script type="text/javascript" src="//www.jotform.me/jsform/1234567890?nojump"></script>

    If this doesn't work, please let us know.

    Thanks.

  • Profile Image
    JeffreyMurrayPhotography
    Answered on March 28, 2012 at 12:24 PM

    will this work with iframe?

  • Profile Image
    idarktech
    Answered on March 28, 2012 at 12:58 PM

    Yes, you just need to add ?nojump at the end of the form URL. Please check this sample iframe code:

    <iframe allowtransparency="true" src="//form.jotform.com/form/20351909591?nojump" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>

    Hope this helps. Thanks.

  • Profile Image
    JeffreyMurrayPhotography
    Answered on March 28, 2012 at 01:15 PM

    awesome. worked like a charm. THX!

  • Profile Image
    JeffreyMurrayPhotography
    Answered on March 28, 2012 at 03:33 PM

    Once I expanded my form to the fullwidth of the page and inserted the ?nojump at the end of the iframe url rather than disable the jump feature it shrunk it back to the original size and still jumped.

  • Profile Image
    NeilVicente
    Answered on March 28, 2012 at 05:05 PM

    Jeffrey,

    We would appreciate it if you can share to us the URL of the page where you have embedded the form. This way, we'll be able to inspect the form, find out what's causing your issue, and hopefully come up with a permanent solution.

    We'll be waiting for your feedback.

  • Profile Image
    JeffreyMurrayPhotography
    Answered on March 28, 2012 at 05:46 PM

    I havent saved it so its not live yet...

    here is the code.

     

     

    [[gallery_image_social]] </div><a target="_blank" href="[[gallery_url]]">[[gallery_name]]</a></h2>

    <table class="f_right">

    <td class="pages">[[image_index]]/[[num_images]]</td>

    <td class="pag">[[page_previous text='<img src="/img/custom/1.0/themes/Induro/prev.png" width="50" height="20" border="0" alt="prev">']]</td>

    <td class="pag">[[page_next text='<img src="/img/custom/1.0/themes/Induro/next.png" width="50" height="20" border="0" alt="next">']]</td>

    </tr>

    </table>

     

    <div>

    [[add_to_cart_link text='<div class="carrot">BUY IMAGE</div>']] </div>

     

    <div class="clear"></div>

    <table width="100%" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000" class="content">

    <tr bgcolor="#EEEEEE">

    <td width="50" height="30" padding:25px 50px; bgcolor="#333333"><div align="left"><strong><font color="#EEEEEE">DETAILS:</font></strong></div></td>

    <td width="880" bgcolor="#222222"><div align="left"><font color="#FFFFFF">[[gallery_image_caption]]</font></div></td>

                            </tr>

     

    <div id="screenimg">

    <center>

    [[image width=885 height=680]]

    </center>

    </div>

     

     

                          <div align="left"> 

          <table width="100%" height="1"  border="0" cellpadding="0" cellspacing="0" background="../../images/divider.gif">

    </body>

     

    </html>

        <tr>

          <td><img src="../../images/transparent.gif" width="1" height="1" /></td>

        </tr>

      </table>

                    <td width="1" bgcolor="#333333"><img src="/images/transparent.gif" alt="Photograph" width="1" height="0" /></td>

                    <td><table width="100%" border="0" cellpadding="0" cellspacing="0" background="../../images/inside-background.gif" class="content">

                      <tr>

                        <td valign="top"><div align="left">

                          <table width="100%" border="0" cellspacing="0" cellpadding="0">

                            <tr>

                              </div></td>

                          <table width="100%" height="1"  border="0" cellpadding="0" cellspacing="0" background="../../images/divider.gif">

                            <tr><font style="font-family:; font-size: 13px; font-color: darkred;">

     

    <br><iframe allowtransparency="true" src="//form.jotform.us/form/20805559931155" frameborder="0" style="width:100%; height:600px; border:none;" scrolling="no">

    </iframe>

    </div></tr></table>

          <td width="100" valign="top"><div class="addtoany_share_save_container"><ul class="addtoany_list">

                           </ul>

                        </div>

                          <script language="javascript">

    function ChangeImg(Testing) {

      document.getElementById('').style.backgroundImage = Testing; 

    }

     

    </script>

    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" background="#151515">

                              <td><div align="left">

    <html>

    <head>

    <style type="text/css">

    p

    {

    background-color:#1C1C1C;

    }

    p.padding

    {

    padding-top:20px;

    padding-bottom:20px;

    padding-right:24px;

    padding-left:24px;

    width:200px;

     

    }

    </style>

    </head>

     

    <p class="padding"><span style="font-family: arial, helvetica, sans-serif; font-size: medium; color: #414141;">&nbsp;CATEGORIES</span>

    <br>

    <br><span style="font-size: small;"><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery-show/G00005nImqEVD4OU" rel="nofollow noopener" >NEW RELEASES</a><br /><span style="font-size: small;"><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Mountains/G0000gXZhQpMkp04" rel="nofollow noopener" >MOUNTAIN</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Valley/G0000fmVfAXvdpZk" rel="nofollow noopener" >VALLEY</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Coastal/G0000mVSpfgdCenQ" rel="nofollow noopener" >COAST</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Water/G0000pkFod1tiy8g" rel="nofollow noopener" >WATER</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Forest/G0000oCOLnLl6P2c" rel="nofollow noopener" >FOREST<br /></a><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Desert-Final/G00000Ux4t6FXbBA" rel="nofollow noopener" >DESERT</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/City/G0000S4dv9vDKp7Y" rel="nofollow noopener" >CITY</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Vertical/G0000J8Ldwi2kWj4" rel="nofollow noopener" >VERTICAL PANO<br /></a><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Super-Pan/G0000esHaTkQco.k" rel="nofollow noopener" >EXTENDED PANO</a></span></p>

    </body>

     

    </html>

     

  • Profile Image
    NeilVicente
    Answered on March 28, 2012 at 06:20 PM

    The code you have just pasted does not contain the ?nojump string at the end of your form's URL.

  • Profile Image
    JeffreyMurrayPhotography
    Answered on March 28, 2012 at 06:36 PM

    oops.

    here it is, same results

     

     

     

     

    [[gallery_image_social]] </div><a target="_blank" href="[[gallery_url]]">[[gallery_name]]</a></h2>

    <table class="f_right">

    <td class="pages">[[image_index]]/[[num_images]]</td>

    <td class="pag">[[page_previous text='<img src="/img/custom/1.0/themes/Induro/prev.png" width="50" height="20" border="0" alt="prev">']]</td>

    <td class="pag">[[page_next text='<img src="/img/custom/1.0/themes/Induro/next.png" width="50" height="20" border="0" alt="next">']]</td>

    </tr>

    </table>

     

    <div>

    [[add_to_cart_link text='<div class="carrot">BUY IMAGE</div>']] </div>

     

    <div class="clear"></div>

    <table width="100%" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000" class="content">

    <tr bgcolor="#EEEEEE">

    <td width="50" height="30" padding:25px 50px; bgcolor="#333333"><div align="left"><strong><font color="#EEEEEE">DETAILS:</font></strong></div></td>

    <td width="880" bgcolor="#222222"><div align="left"><font color="#FFFFFF">[[gallery_image_caption]]</font></div></td>

                            </tr>

     

    <div id="screenimg">

    <center>

    [[image width=885 height=680]]

    </center>

    </div>

     

     

                          <div align="left"> 

          <table width="100%" height="1"  border="0" cellpadding="0" cellspacing="0" background="../../images/divider.gif">

    </body>

     

    </html>

        <tr>

          <td><img src="../../images/transparent.gif" width="1" height="1" /></td>

        </tr>

      </table>

                    <td width="1" bgcolor="#333333"><img src="/images/transparent.gif" alt="Photograph" width="1" height="0" /></td>

                    <td><table width="100%" border="0" cellpadding="0" cellspacing="0" background="../../images/inside-background.gif" class="content">

                      <tr>

                        <td valign="top"><div align="left">

                          <table width="100%" border="0" cellspacing="0" cellpadding="0">

                            <tr>

                              </div></td>

                          <table width="100%" height="1"  border="0" cellpadding="0" cellspacing="0" background="../../images/divider.gif">

                            <tr><font style="font-family:; font-size: 13px; font-color: darkred;">

     

    <br><iframe allowtransparency="true" src="//form.jotform.us/form/20805559931155?nojump" frameborder="0" style="width:100%; height:600px; border:none;" scrolling="no">

    </iframe>

    </div></tr></table>

          <td width="100" valign="top"><div class="addtoany_share_save_container"><ul class="addtoany_list">

                           </ul>

                        </div>

                          <script language="javascript">

    function ChangeImg(Testing) {

      document.getElementById('').style.backgroundImage = Testing; 

    }

     

    </script>

    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" background="#151515">

                              <td><div align="left">

    <html>

    <head>

    <style type="text/css">

    p

    {

    background-color:#1C1C1C;

    }

    p.padding

    {

    padding-top:20px;

    padding-bottom:20px;

    padding-right:24px;

    padding-left:24px;

    width:200px;

     

    }

    </style>

    </head>

     

    <p class="padding"><span style="font-family: arial, helvetica, sans-serif; font-size: medium; color: #414141;">&nbsp;CATEGORIES</span>

    <br>

    <br><span style="font-size: small;"><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery-show/G00005nImqEVD4OU" rel="nofollow noopener" >NEW RELEASES</a><br /><span style="font-size: small;"><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Mountains/G0000gXZhQpMkp04" rel="nofollow noopener" >MOUNTAIN</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Valley/G0000fmVfAXvdpZk" rel="nofollow noopener" >VALLEY</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Coastal/G0000mVSpfgdCenQ" rel="nofollow noopener" >COAST</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Water/G0000pkFod1tiy8g" rel="nofollow noopener" >WATER</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Forest/G0000oCOLnLl6P2c" rel="nofollow noopener" >FOREST<br /></a><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Desert-Final/G00000Ux4t6FXbBA" rel="nofollow noopener" >DESERT</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/City/G0000S4dv9vDKp7Y" rel="nofollow noopener" >CITY</a><br /><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Vertical/G0000J8Ldwi2kWj4" rel="nofollow noopener" >VERTICAL PANO<br /></a><span style="color: #800000;">+&nbsp;</span><a target="_blank" href="http://jeffreymurray.photoshelter.com/gallery/Super-Pan/G0000esHaTkQco.k" rel="nofollow noopener" >EXTENDED PANO</a></span></p>

    </body>

     

    </html>

     

  • Profile Image
    NeilVicente
    Answered on March 28, 2012 at 06:52 PM

    The page doesn't jump on my end. Perhaps you're referring to the collapses "jumping" and being cut off?

    Try this code instead:

    <iframe allowtransparency="true" src="//form.jotform.us/form/20805559931155?nojump" frameborder="0" style="width:100%; height:600px; border:none;" scrolling="auto"></iframe>

  • Profile Image
    JeffreyMurrayPhotography
    Answered on March 28, 2012 at 07:36 PM

    when i use that code it doesnt jump but it resizes it to a much shorter span.

  • Profile Image
    NeilVicente
    Answered on March 28, 2012 at 07:41 PM

    Adjust the height property of the iFrame code to make it longer.

    height:600px

    Or, use the script embed codes instead so that the form resizes itself automatically.

    <script type="text/javascript" src="//form.jotform.us/form/20805559931155?nojump"></script>

  • Profile Image
    JeffreyMurrayPhotography
    Answered on March 28, 2012 at 08:10 PM

    the height is already 600 and the width 100%

  • Profile Image
    jeanettebmz
    Answered on March 28, 2012 at 09:16 PM

    I have checked your code and I think the only thing you are missing is to change scrolling="no"  to

    scrolling="auto", as indicated by my colleague

    See the code on this snapshot I took from my test, . It worked ok in Chrome and FF

    Hope it finally resolves the issue

     

    Jeanette

  • Profile Image
    Jerome_ua
    Answered on September 14, 2012 at 06:37 PM

    And what about if I deal with embedded code?

    I don't have <iframe..> tag. I have:

    <script src="http://max.jotfor.ms/min/g=jotform?3.0.3964" type="text/javascript"></script> <script type="text/javascript"> JotForm.init(); </script> ....

    And this jumping on Collapsing fields irritating me so much. My form is embedded into Wordpress page.
  • Profile Image
    jonathan
    Answered on September 14, 2012 at 07:52 PM

    @Jerome_ua

    Can you please provide us the URL of your WP website where you had the form embedded? We need to see how it work to be able to provide the appropriate resolution.

    Also, are you using the form's source code in your Wordpress site? Because the code you included in your latest response looks like a part of the form's source code.

    The embed script code was suppose to look like this...

    <script type="text/javascript" src="//form.jotform.us/form/12345678?nojump"></script>

    Will await for your response.

    Thanks.

  • Profile Image
    Jerome_ua
    Answered on September 15, 2012 at 02:47 AM

    Since the site is in development I can show you a part of it in a separate php-page.

    Here it is: http://onboard.net.ua/Form/select.php

    In Wordpress it will be narrower and will have more ites got from Database.

  • Profile Image
    idarktech
    Answered on September 15, 2012 at 04:19 AM

    @Jerome_ua

    Appending ?nojump on the URL may help. Example:

    http://onboard.net.ua/Form/select.php?nojump

    Hope this works for you. Thanks!

  • Profile Image
    Jerome_ua
    Answered on September 15, 2012 at 04:26 AM

    Great!

    Thanks a lot!