What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    My form (lightbox conflict with smotth scroll script)

    Asked by chekwan on January 10, 2014 at 02:59 AM

    Dear Jotform,

    My website (joomla 2.5 based) using smooth scroll script below:

    <script type="text/javascript">
    /*<![CDATA[*/
    //when the dom is ready
    window.addEvent('domready',function() {
        //smooooooth scrolling enabled
        if(typeof SmoothScroll != 'undefined'){
            new SmoothScroll({ duration:500 }, window); //700 milliseconds to get there
        } else {
            new Fx.SmoothScroll({ duration:500 }, window); //700 milliseconds to get there
        }

        var japagenav = $('ja-pagenav');
        var janavhelper = $('ja-navhelper');
        var pages = $$('.ja-page-content');
        var pagetitles = $$('li.ja-page');
        var pageactive = -1;

            //fix position fixed for Ipad
            var isiPad = navigator.userAgent.match(/iPad/i) != null;
            if(isiPad){
                // switch #mainave position from :fixed to asobute
                $('mainnav').setStyles({
                    position:'absolute',
                    left:0,
                    top:window.getScrollTop()
                    });
                //check position every 0.5 sec
               setInterval(function(){
                     $('mainnav').setStyle('top',window.getScrollTop());
               },500)
            }
       
        var pageactivetimeout = 0;
        detectpageactive();
        window.addEvent ('scroll', function () {
            if (pageactivetimeout) clearTimeout(pageactivetimeout);
            pageactivetimeout = detectpageactive.delay(200);
        });
       
        pagetitles.each (function(title, i) {
            title.getElement('a').addEvent('click', function (){activetopage(i)});
        });
        function detectpageactive () {
            //detect the active
            var scrolltop = window.getScrollTop();
            var active = -1;
            pages.each(function(page, i){
                var pagecor = page.getCoordinates();
                if ((i==0 || pagecor.top <= scrolltop+100) && (pagecor.bottom > scrolltop+100)) {
                    active = i;
                    return;
                }
            });
           
            if (active >=0 && pageactive != active) {
                activetopage (active);
            }
           
            if (active == -1) {
                //no active
                pagetitles.removeClass ('active');
                pages.removeClass ('active');
                if (pageactive >= 0) {
                    var theme = pages[pageactive].getProperty('rel');
                    if (theme) japagenav.removeClass (theme);
                }
                pageactive = -1;
            }
        }
       
        function activetopage (active) {
            if (active == pageactive) return;
            pagetitles.removeClass ('active');
            pages.removeClass ('active');
            pagetitles[active].addClass ('active');
            pages[active].addClass ('active');
           
            //get current theme
            if (pageactive >= 0) {
                var theme = pages[pageactive].getProperty('rel');
                if (theme) japagenav.removeClass (theme);
            }
            theme = pages[active].getProperty('rel');
            if (theme) japagenav.addClass (theme);

            pageactive = active;
        }
    });
    /*]]>*/
    </script>

     

    Conflicted with this Jotform Script

     

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.2.71" type="text/javascript">
      new JotformFeedback({
         formId        : "40091498851864",
         buttonText    : "REGISTER NOW",
         base        : "http://jotform.co/",
         background    : "#FFCC00",
         fontColor    : "#49481c",
         buttonSide    : "left",
         buttonAlign    : "center",
         type        : 1,
         width        : 750,
         height        : 500
      });
    </script>

     

     

     

    Anybody can help how to solve.?

    scroll lightbox conflict JotForm style size height
  • Profile Image
    JotForm Founder

    Answered by aytekin on January 10, 2014 at 08:47 AM

    Can you provide the URL of the page where you have this problem? It shouldn't conflict with it. Function names are pretty different. 

    You should make sure to not put script tag inside another script tag. Could that be the problem? 

  • Profile Image

    Answered by chekwan on January 10, 2014 at 11:37 AM

    Hi aytekin,

     

    here the link: http://www.mysmartreg.com/project/foresthill-2

    u can see the smooth scroll effect not working when u clicked the menu..

    this problem occured when i paste this code into my file:

     <script src="//cdn.jotfor.ms/static/feedback.js?3.2.102" type="text/javascript">
      new JotformFeedback({
         formId        : "40091498851864",
         buttonText    : "REGISTER NOW",
         base        : "http://jotform.co/",
         background    : "#FFCC00",
         fontColor    : "#49481c",
         buttonSide    : "left",
         buttonAlign    : "center",
         type        : 1,
         width        : 750,
         height        : 500
      });
    </script>

     

    but when i take it out.. the smooth scroll effect works back to normal..

  • Profile Image
    JotForm Support

    Answered by KadeJM on January 10, 2014 at 02:36 PM

    Can you please clarify with us where exactly on your website this is happening? Are you referring to your site menu or? If possible could you please provide us with a screenshot of the area on your website that this is actually affecting and what browser/browser version are you seeing this happen in?

    When I tested this some I did not see or come across any problems on my end which was in the lastest version of Chrome and Windows 8. I also got a second opinion from one of my colleagues who could not find an issue with it either.

  • Profile Image

    Answered by chekwan on January 12, 2014 at 08:27 PM

    Hi KadeJM,

    Actually my website have SMOOTH SCROLL MENU animation. But when i embeded my form in Feedback Button, my smooth scroll menu animation not working anymore.

    you can see the website before embed the form:

    http://www.mysmartreg.com/project/foresthill-21/

     

    and after put the embed form, my website become like this:

    http://www.mysmartreg.com/project/foresthill-2/

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 13, 2014 at 02:37 AM

    Hi,

    I tried the jQuery feedback version, and it does not conflict with your smooth scroll. Have you tried it yet? It should be feedback2.js as seen on the first line of your feedback embed code. Example:

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

    Fixed demo: https://shots.jotform.com/elton/workaround/smooth_slide_conflict.html#ja-location

    When you click on the top menus, the smooth scroll functions properly.

    The problem is mostly due to script conflict, reading this article would give you ideas on how to solve prototype and jQuery conflicts. http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

    Hope this helps. Regards!

  • Profile Image

    Answered by chekwan on January 14, 2014 at 08:53 PM

    Hi EltonCris,

    Hi cannot find the solution to solve the error even i have read the article about the JQuery Conflicted.

    Finally, i have try with another solution by create custom feeback button and linked it with Joomla Extension lightbox plugin.

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 15, 2014 at 02:07 AM

    @chekwan

    Glad to hear you were able to solved the problem.

    Feel free to contact us again anytime you have Jotfom related questions.

    Regards!