1

I cant solve a conflict between Lavalamp and Accordion, here is the code. When one of them works, the other does not, and viceversa. I have deleted one of the jquery library (jquery-1.4.min.js or jquery.min.js) but it does not work. Also I have change the place of the scripts: The second script works and the first does not. In this particular case, the lavalamp doesnt work: 

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/cufon.yui.js"></script>
<script type="text/javascript" src="js/myriad.js"></script>

<script type="text/javascript">
$(function() {
     $("#one,#two,#three,#four,#five").lavaLamp({
        fx: "backout", 
        speed: 700
     });
});
</script>

<script type="text/javascript">

Cufon.replace('li a', {hover: true});

</script>




<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="navAccordion.min.js"></script>
<script>
jQuery(document).ready(function(){

    //Accordion Nav
    jQuery('.mainNav').navAccordion({
        expandButtonText: '<i class="fa fa-plus"></i>',  //Text inside of buttons can be HTML
        collapseButtonText: '<i class="fa fa-minus"></i>'
    }, 
    function(){
        console.log('Callback')
    });
});
</script>
Gerald Versluis
  • 30,492
  • 6
  • 73
  • 100
Laura
  • 1,192
  • 2
  • 18
  • 36

1 Answers1

0

First of all, put all your external libraries in the beginning. I assume your code is part of the <head> in your html-file.-

In addition: Don't load jQuery twice. Use the higher of both versions and put it into the top. My educated guess would be that something like that would work:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/cufon.yui.js"></script>
<script type="text/javascript" src="js/myriad.js"></script>
<script type="text/javascript" src="navAccordion.min.js"></script>

<script>
$(document).ready(function(){
     $("#one,#two,#three,#four,#five").lavaLamp({
        fx: "backout", 
        speed: 700
     });

    //Accordion Nav
    $('.mainNav').navAccordion({
        expandButtonText: '<i class="fa fa-plus"></i>',  //Text inside of buttons can be HTML
        collapseButtonText: '<i class="fa fa-minus"></i>'
    }, 
    function(){
        console.log('Callback')
    });
});
</script>
<body>
Your magic stuff containing something with class mainNav and id "one, two three, four"

</body>
</html>
Ole Albers
  • 8,715
  • 10
  • 73
  • 166
  • Thank you for your answer. When I do what you say, something changes (for better), but the accordion does not works well. I get this error message: jquery.min.js:3 Uncaught TypeError: n.easing[this.easing] is not a function – Laura Sep 08 '16 at 15:31
  • my best guess would be that this jquery-version does not work with your code. Use the most current version from jquery.com and maybe use jquery UI, too: http://stackoverflow.com/questions/12592279/typeerror-p-easingthis-easing-is-not-a-function – Ole Albers Sep 08 '16 at 15:34