Conflict in JS Libraries

Question

I have a page acting as a landing page with a scroller which gives an easing and smooth scrolling, this also helps with dropdown for links. I then got a custom modal dialog login/sigup form integrated.

The problem is that when <script src="assets/js/jquery.scrolly.min.js"></script> is commented, the modal dialog dialog works but when it is available, modal dialog doesnt work. Can anyone please put me in the right direction. It looks more like JS conflict.

  <!-- - Scripts for login modal dialog --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- - Scripts for landing page(jquery.scrolly.min.js makes the menu dropdown once mouseover is on it and also animates scrolling with easing) --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.scrolly.min.js"></script> <script src="assets/js/jquery.dropotron.min.js"></script> <script src="assets/js/jquery.scrollex.min.js"></script> <script src="assets/js/skel.min.js"></script> <script src="assets/js/util.js"></script> <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]--> <script src="assets/js/main.js"></script> <script type="text/javascript"> var $s = jQuery.noConflict(); $s(document).ready(function() { $s(document).on('click','.signup-tab',function(){ .preventDefault(); $('#signup-taba').tab('show'); }); $s(document).on('click','.signin-tab',function(){ .preventDefault(); $s('#signin-taba').tab('show'); }); $s(document).on('click','.forgetpass-tab',function(){ .preventDefault(); $s('#forgetpass-taba').tab('show'); }); </script> <script> var $k = jQuery.noConflict(); $k(document).ready(function(){ //Check to see if the window is top if not then display button $(window).scroll(function(){ if ($k(this).scrollTop() > 100) { $k('.scrollToTop').fadeIn(); } else { $k('.scrollToTop').fadeOut(); } }); //Click event to scroll to top $k('.scrollToTop').click(function(){ $k('html, body').animate({scrollTop : 0},800); return false; }); }); </script> 

Answer 1

I think I had a similar problem with jquery.dropotron.js : I couldn't trigger a modal from a link inside a <li> tag. The issue came from jquery.dropotron.js which prevented the link from doing anything if href was blank("") or has hash (#). Solved by commenting on the corresponding line:

`if (href.length == 0 ||    href == '#'){
    //e.preventDefault();
}
else
    e.stopPropagation();`

I wish it could help you... Sorry for my english.