CODEWITHSUNDEEP
javascriptphphtmlcss
Jonathan Anspaugh
Jonathan Anspaugh

Reputation: 125

Javascript Conflict with PHP

I am not sure what is causing the issue with my mobile menu system here.

I have two pages with an identical function to condense the nav systems into a mobile menu (below)

<script type="text/javascript">
$(document).ready(function() {
    $('.main_nav nav ul').clone().appendTo('.top_menu');
    $('.sec_nav nav ul').clone().appendTo('.top_menu');
    $('.bottom-links ul').clone().appendTo('.top_menu');
    $('.footer-links ul').clone().appendTo('.top_menu');
    $('.rfi_nav').clone().appendTo('.m_form');

    // For Menu-----------------
    $('.menu, .m_close, .rfi_nav label.title').click(function(e) {
        $('body').toggleClass('m_open');
    });

    // For Menu On window resize------------------
    function checkwindowSize() {
        var windowSize = $(window).width();
        if(windowSize > 320 && windowSize < 1023) {           
            //$('body').toggleClass('open');
        }
        else{ 
            $('body').removeClass('m_open');      
        }
    }
    checkwindowSize();
    $(window).resize(function(){ checkwindowSize() });

    // For BT Select DropDown-----------------
    $('select').selectpicker();

    // For content Scroll bar-----------------
     (function($){
        $(window).load(function(){
            $(".scroll").mCustomScrollbar({
                scrollButtons:{enable:true,scrollType:"continuous",scrollSpeed:40,scrollAmount:40},
                advanced:{updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:true, autoScrollOnFocus:true }
            });
        });
    })(jQuery);

    // BT Accordian------------
    function toggleChevron(e) {
        $(e.target)
            .prev('.panel-heading')
            .find("i.indicator")
            .toggleClass('glyphicon-plus glyphicon-minus');
    }
    $('#accordion').on('hidden.bs.collapse', toggleChevron);
    $('#accordion').on('shown.bs.collapse', toggleChevron);


});
</script>

My script works perfectly on my homepage (http://dev.oru.edu) but my internal pages (http://dev.oru.edu/generic-hf.php and http://dev.oru.edu/generic-hfs.php) seem to be conflicting somewhere and I cannot detect where or why.

Can someone please help me identify what is causing the conflict resulting in my mobile menus not loading? I am not familiar with JavaScript so I am fumbling around and don't want to mess the code up from the original developer since it is still working on the homepage.

The furthest I have been able to detect is that the problem is not restricted to only mobile devices but desktop browsers as well when scaled to mobile sizes. At first I thought it may be relevant to the device type but the issue is persistent with the desktop browsers as well.

Upvotes: 1

Views: 237

Answers (2)

amphetamachine
amphetamachine

Reputation: 30595

Looking at the error console is very telling:

error console on generic-hfs.php

Many of your scripts depend on JQuery being loaded before they run. You're loading JQuery, but doing it asynchronously:

<script async type="text/javascript" src="js/1.11.3.jquery.min.js"></script>

Your scripts are then immediately calling window.$ and window.jQuery which haven't been loaded yet.

Remove the async attribute and it should work.

Upvotes: 2

Jonathan Anspaugh
Jonathan Anspaugh

Reputation: 125

I had an "async" on my primary jquery library which was causing the function to not load the library properly.

Upvotes: 1

Related Questions