Javascript conflicts- navigation menu not poping out anymore.

  • Profile Image
    knoed
    Asked on May 14, 2014 at 03: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

  • Profile Image
    knoed
    Answered on May 15, 2014 at 01: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

  • Profile Image
    EltonCris
    Answered on May 15, 2014 at 04: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!

  • Profile Image
    knoed
    Answered 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?

  • Profile Image
    knoed
    Answered 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.
  • Profile Image
    knoed
    Answered on May 16, 2014 at 02:07 PM

    also, can i style this error page?

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

  • Profile Image
    EltonCris
    Answered on May 16, 2014 at 04: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:

  • Profile Image
    knoed
    Answered on May 16, 2014 at 05:26 PM

    Thank you! It's working great!