Javascript conflicts- navigation menu not poping out anymore.

  • knoed
    Asked on May 14, 2014 at 3:25 PM

    Hi.

     

    I'm trying to get this form working on my site.

    http://www.knoed.com/contact-form.php

    This is an iFrame version, but when the error messages pop up, it pushes the iframe below the viewable area, and the submit button disappears. I don't want to turn scrolling on because it looks bad.

     

    I've also tried pasting the source code into my page, but the javascript is conflicting with the page. You can see that here:

    http://www.knoed.com/contact-formv1.php

     

    Neither options is working well for me. Is there another option?

    Thanks,

    Kyle

  • knoed
    Replied on May 15, 2014 at 1:34 PM

    I tried your suggestions given in the forum, but they did not work. Do you have any other suggestions?

    The form is here.

    http://www.knoed.com/contact-form.php

  • Elton Support Team Lead
    Replied on May 15, 2014 at 4:23 PM

    Hi,

    I can see that you have embedded the form source code, however when I tested the form validation on your page, it is working. Though I can see that the navigation menu is not poping out anymore.

    To fix that, find these codes on your page and change every $ dollar sign with jQuery

    Example:

    <script type="text/javascript">

    <!-- fancyBox -->

    jQuery(document).ready(function() {

    jQuery(".fancybox").fancybox({

    openEffect  : 'none',

    closeEffect : 'none',

    closeBtn : false,

    arrows : false,

    helpers : {

    title : null,

    overlay : {

    css : {

    'background' : 'rgba(46, 46, 46, 0.97)'

    }

    }

    }

    });

    jQuery(".fancyboxnav").fancybox({

    openEffect  : 'none',

    closeEffect : 'none',

    closeBtn : false,

    helpers : {

    title : null,

    overlay : {

    css : {

    'background' : 'rgba(46, 46, 46, 0.97)'

    }

    }

    }

    });

     

    });

    jQuery(function(){

    var fadeBegin = 10, //The fade out begins 10px down the page

    fadeFinish = 130, //The fade out is completed by 130px down the page. It automatically calculates the rate at fading out between this and value above

    fadingElement = jQuery('.name');

    jQuery(window).bind('scroll', function(){

       var offset = jQuery(document).scrollTop(), opacity = 0;

       if( offset <= fadeBegin ){

           opacity = 1;

       } else if( offset <= fadeFinish ){

           opacity = 1 - offset / fadeFinish;

       }

       fadingElement.css('opacity',opacity);

    });

    });

    </script>

    Here's a working version: https://shots.jotform.com/elton/testing_conglict_377385.html

    Thanks!

  • knoed
    Replied on May 16, 2014 at 12:17 PM

    Thank you! We're getting close.

    The last element we need to get working is the background image is not appearing.

    Here's the current page: http://www.knoed.com/contact-form.php

    The background should look like this: http://www.knoed.com/contact-formv4.php (I deactivated JotForm's error tooltips)

    Is it possible to display my background image?

  • knoed
    Replied on May 16, 2014 at 12:19 PM

    I commented out

    <!--<script src="//max.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>-->

    to get the background working, but the error tooltips are not working.
  • knoed
    Replied on May 16, 2014 at 2:07 PM

    also, can i style this error page?

    https://www.evernote.com/shard/s162/sh/13d58264-0180-4f9b-9c06-edd67ec97e33/e0b6a889f0829b70442b8333f28da79e

  • Elton Support Team Lead
    Replied on May 16, 2014 at 4:26 PM

    @ knoed 

    Sorry forgot to mention, you also need to change the dollar sign $ on the background code with jQuery. That should fix it.

    It's found on the bottom part of your page source. Example:

  • knoed
    Replied on May 16, 2014 at 5:26 PM

    Thank you! It's working great!