JQuery Conflict: megamenu.js and mostslider.js ... no luck with $.noConflict(); ... [non-WordPress]

Question

Through process of elimination, I determined that once I added the Mostslider [http://www.jqueryscript.net/slider/Responsive-jQuery-Any-Html-Content-Slider-Mostslider.html] to my html ...

    <!-- ====== SLIDER ======= -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/modernizr-2.6.2.min.js"></script>
    <script src="js/mostslider.js" type="text/javascript"></script>
    <script>
        // Code from SLIDER
            $(document).ready(function(){
                var slider = $("#slider").mostSlider({
                    aniMethod: 'auto',
                });
            });
    </script>
    <!-- ====== // SLIDER ======= -->

it caused my MegaMenu to stop working ...

    <!-- ====== MEGA MENU ======= -->
    <script type="text/javascript" src="js/megamenu.js"></script>
    <script src="js/menu_jquery.js"></script>
    <script type="text/javascript">
                // Code from MEGA MENU
            $(document).ready(function(){
            $(".megamenu").megamenu();
        });
    </script>
    <!-- ===== // MEGA MENU ==== -->

I tried to implement the various $.noConflict(); techniques [http://api.jquery.com/jquery.noconflict/], to no avail. I have tried every possible combination and because I am not very knowledgeable in JQuery and I am stuck. Ideally, I would like to use just one .js file, is there anyway I can just combine them? or would the file be too large to load quickly?

Any suggestions on how I can get these 2 scripts to cooperate, would be appreciated. I can post up the code if needed. The website is not live yet, I am hand coding locally from my PC. Thanks in advance.

Thanks bAppA. I have inserted this code into my header, however, no luck :/ Any other suggestions? — Doug Taylor, Dec 26 '14 at 19:02

score 1 · Answer 1 · answered Dec 26 '14 at 17:34

1

You can use jQuery.noConflict() like below mention way:

    <script type="text/javascript">
            // Code from MEGA MENU
            var $j = jQuery.noConflict();
            $j(document).ready(function(){
            $j(".megamenu").megamenu();
        });
    </script>

answered Dec 26 '14 at 17:34

bAppA

38
5

Thanks bAppA. I have inserted this code into my header, however, no luck :/ Any other suggestions? – Doug Taylor Dec 26 '14 at 18:56

score 0 · Answer 2 · answered Apr 20 '15 at 12:53

Oh hey. Here's julian (creator of mostslider). Maybe I should subscript to the tag for my slider... Never thought it's used somewhere as there were no feedback messages or anything else.

I'm really sorry for not answering to your question.

Silly question, but why not write both init scripts for the plugin into the same $(document).ready() function?

All the best, Julian

JQuery Conflict: megamenu.js and mostslider.js ... no luck with $.noConflict(); ... [non-WordPress]

2 Answers2