Conflict Lavalamp Accordion jquery

Question

Conflict Lavalamp Accordion jquery

126 Views Asked by Laura At 08 September 2016 at 14:06

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>

Original Q&A

There are 1 best solutions below

**Ole Albers** · Answer 1 · 2016-09-08T15:10:53.603000

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>

Conflict Lavalamp Accordion jquery

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in ACCORDION

Related Questions in LAVALAMP

Trending Questions

Popular # Hahtags

Popular Questions