JotForm breaks my SmoothScroll jquery

  • Profile Image
    thetimmlers
    Asked on May 01, 2013 at 12:05 AM

    Hello,

    I am trying to use JotForm along side a Smooth Scroll jquery script. Whenever the JotForm stuff is added to my page, the smooth scroll breaks.

     

    Here is the Smooth Scroll script:

    <script>

    $(document).ready(function() {

      function filterPath(string) {

      return string

        .replace(/^\//,'')

        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')

        .replace(/\/$/,'');

      }

      var locationPath = filterPath(location.pathname);

      var scrollElem = scrollableElement('html', 'body');

     

      $('a[href*=#]').each(function() {

        var thisPath = filterPath(this.pathname) || locationPath;

        if (  locationPath == thisPath

        && (location.hostname == this.hostname || !this.hostname)

        && this.hash.replace(/#/,'') ) {

          var $target = $(this.hash), target = this.hash;

          if (target) {

            var targetOffset = $target.offset().top;

            $(this).click(function(event) {

              event.preventDefault();

              $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

                location.hash = target;

              });

            });

          }

        }

      });

     

      function scrollableElement(els) {

        for (var i = 0, argLength = arguments.length; i <argLength; i++) {

          var el = arguments[i],

              $scrollElement = $(el);

          if ($scrollElement.scrollTop()> 0) {

            return el;

          } else {

            $scrollElement.scrollTop(1);

            var isScrollable = $scrollElement.scrollTop()> 0;

            $scrollElement.scrollTop(0);

            if (isScrollable) {

              return el;

            }

          }

        }

        return [];

      } 

    });
    </script>

     

    Here is my JotForm Script:

    <script src="//cdn.jotfor.ms/static/jotform.js?3.1.174" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init(function(){

          JotForm.alterTexts({"alphabetic":"This field can only contain letters","alphanumeric":"This field can only contain letters and numbers.","confirmClearForm":"Are you sure you want to clear the form","confirmEmail":"E-mail does not match","email":"Enter a valid e-mail address","gradingScoreError":"Score total should only be less than or equal to","incompleteFields":"There are incomplete required fields. Please complete them.","inputCarretErrorA":"Input should not less than the minimum value:","inputCarretErrorB":"Input should not greater than the maximum value:","lessThan":"Your score should be less than or equal to","maxDigitsError":"The maximum digits allowed is","numeric":"This field can only contain numeric values","pleaseWait":"Please wait...","required":"This field is required.","requireEveryRow":"Every row is required.","requireOne":"At least one field required.","submissionLimit":"Sorry! Only one entry is allowed.<br>Multiple submissions are disabled for this form.","uploadExtensions":"You can only upload following files:","uploadFilesize":"File size cannot be bigger than:"});

       });

    </script>

     

    I'm not a pro in the slightest at creating javascript and jquery; could anybody help me out with this? Thanks!

  • Profile Image
    Welvin
    Answered on May 01, 2013 at 01:25 AM

    Hi,

    Can you share with us the webpage URL to where the form is embedded so we can check the whole codes and the whole error?

    I guess you are using the Source Code. I would suggest embedding your form using our iframe method: How to Get Form iFrame Codes - Embed the codes for the iframe tags only, from <iframe> to </iframe>. Do not include the script tags.

    Let us know for the results.

    Thanks