jQuery navigation/viewport bug

Question

During UX testing, I've come across a strange bug. When the browser viewport hits 1280px it transitions into a mobile/tablet view. Part of this transition is a jQuery powered navigation bar at the top of the page.

Since implementing the FlexSlider, the jQuery code of the navigation menu activates when the element containing the FlexSlider is clicked on.

I have scoured through my html and CSS code and cannot find any elemental issues that would cause this phenomenon.

This can be demo'd by viewing Nerius UAT and dropping the viewport to 1280px or lower.

I've troubleshot down to the point where I can eliminate the problem, to a point, however causing other negative effects:

    <script type="text/javascript" charset="utf-8"> <!-- Mobile Navigation Control -->
    $(function() {
        var pull = $('#pull');
            menu = $('nav ul');

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(this).width();

            if(w > 1280 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });

        $('li').on('click', function(e) {               
            var w = $(window).width();
            if(w < 1280 ) {
                menu.slideToggle();
            }
        });

        $('.panel').height($(window).height());     
    });
</script>

When I drop the width thresholds in the code and keep the viewport above the threshold, yet still below the CSS breakpoint for the responsive design, the issue disappears; however the menu activation gets bunged up depending on the width threshold that is set.

I'm still learning jQuery and JavaScript in general, so the next step of troubleshooting/resolution is beyond my technical skills at this point in time.

I apologize in advance, I tend to code in one large file, then break it up and clean up the code.

Thank you in advance for taking a look at this and helping me out.

Answer 1

It's a tag conflict, apparently when the slider and menu both use UL/LI's the LI for the slider activates the menu. Mystery solved.