Is there a solution to preload a form before display it?

  • enesco
    Asked on August 27, 2017 at 2:09 PM

    Hello !

    My form is very long and contains some images and HTML5 animation (added using iframes).

    On the first page launching some elements are displayed slowly and iframes are launched at last. The result is not so good in term of design.

    Is there a solution to preaload a form before display it?

    If not...im thinking of displaying a white div on the whole page during 3 seconds, but its not so clean.

     

    Thanks!

  • Nik_C
    Replied on August 27, 2017 at 2:43 PM

    I'm afraid that we don't have a way to insert such delay in our forms since it is very limited what you could do with the custom code in our builder.

    Probably the best way to go is to download the Source Code of the form and then delay loading of divs that have the frames you need to be delayed by using some JavaScript, for example (jQuery):

    https://stackoverflow.com/questions/9672580/delay-div-onload

    https://forums.asp.net/t/2061422.aspx?Any+way+to+load+the+DIV+in+html+page+after+5+seconds+

    If you have any additional questions please let us know.

    Thank you!

  • enesco
    Replied on August 28, 2017 at 5:11 AM

    OK, so i will had a "Fake loader" to prevent slow display.

    Thanks for the links.

    Regards,

     

    Seb

  • enesco
    Replied on August 31, 2017 at 11:15 AM

    Hi Nick, Thanks for the link.

    Unfortunately, i cant make it work...

    Ive tried this code in a simple page and it works :

    <html>
     <head>
    <style>

    #loader{

        color:red;

        background-color: black;

    }

    </style>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

    </head>
    <body>

    <div id="loader" >Hey</div>

    <script type="text/javascript">

    setTimeout(function() {

      $('#loader').fadeOut('hide');

    }, 1000); // <-- time in milliseconds

    </script>

    </body>
    </html>

     

    But when i add it on my Jotform code page, its not working ("loading" top bar dont dispear)

    http://optimeo-prevention.com/ecoachingbeta/index4.html

     

    Is it possible some of Jotform source code/ scripts  interfer with jquery ?

    Thx,

     

    Sebastien

  • Nik_C
    Replied on August 31, 2017 at 11:45 AM

    I checked your script and I would say that it is not good, rather try with this for your setTimeout function:

    <script>

    setTimeout(function() {

        $('#loader').fadeOut(1000);

    });

    </script>

    I saw the error in console and 'hide' is not recognizable by fadeOut function.

    Please try that and let us know if it worked.

    Thank you!

  • enesco
    Replied on August 31, 2017 at 12:57 PM

    Unfortunately it work on a simple page :

    http://optimeo-prevention.com/ecoachingbeta/test.html

    But not in my Jotform...

    http://optimeo-prevention.com/ecoachingbeta/index4.html

    strange because its a really simple fonction...

    Thx

     

    Seb.

  • enesco
    Replied on August 31, 2017 at 1:35 PM

    Ive checked the console, for the index4.html, i had this error 

    Uncaught TypeError: Cannot read property 'fadeOut' of null

    Closest ressource about this problem ive found is https://stackoverflow.com/questions/34640225/joomla-custom-jquery-slider-error-uncaught-typeerror-cannot-read-property-fa

    But i dont understand...

    Seb

  • Kevin Support Team Lead
    Replied on August 31, 2017 at 2:45 PM

    I have tested this and found the same issue, seems like there is a conflict with the code that hides the element.

    First off, you will not need to call the jQuery file again as JotForm resources will already load a jQuery version. 

    Now, the code that hides the element will need a change, so this is the only code you need: 

    <script>

    setTimeout(function() {

        jQuery('#loader').fadeOut(1000);

    });

    </script>

    I hope this helps. 

  • enesco
    Replied on September 1, 2017 at 3:50 AM

    Hi,

    The code i use :

    (Not working without, even if Jotform seems to already work with)

     

    LOADING DIV


    (I needed to reassign the $ to jQuery.)

     

    Its working now.

     

  • Nik_C
    Replied on September 1, 2017 at 3:55 AM

    Thank you for getting back to us. 

    I'm glad you were able to make it work. But I must say this is odd since $ is a representation of jQuery. So when you write $ it is like you wrote jQuery.

    Anyhow, if you have any additional questions please let us know.

    Thank you!

  • enesco
    Replied on September 1, 2017 at 4:51 AM

    Hi Nik,

    Ive followed this solution https://stackoverflow.com/questions/34640225/joomla-custom-jquery-slider-error-uncaught-typeerror-cannot-read-property-fa

    Thanks

     

    Sebastien

  • Chriistian Jotform Support
    Replied on September 1, 2017 at 4:55 AM

    Thank you for letting us know.

    If you have other concerns or need further assistance, please don't hesitate to get back to us.