disable jquery above a certain viewport size

Question

I'm basically looking to disable a jquery function above a certain viewport size. I've got it set up that when a link in the nav is clicked the nav, then scrolls out of view. I don't think it's necessary that anyone understands exactly what the function is doing, just that i only want it to work below a certain viewport size. The problem I have is that it's doing this on larger viewports which I don't want. Any help would be much appreciated

<script> 
    $(document).ready(function(){
        $(".trigger , .close").click(function(){
             $(".showing").slideToggle("slow");   
        });
    });
</script>

Answer 1

After determining the viewport size you can turn the event off.

if(viewportSize > 1200){
    $(".trigger, .close").off("click");
}

Or

<script> 
$(document).ready(function(){
    $(".trigger , .close").click(function(){

         if(viewportSize > 1200){
             return;
         }

         $(".showing").slideToggle("slow");   
    });
});
</script>

UPDATED: I tested the possible solution of using off() to disable the event triggering in certain conditions.

UPDATED: using window viewport size-check to disable or re-enable slideToggle. You can lower or increase the timeout (now set to 50) if you want the window size to be detected at different intervals based on how reactive you want the code to run. Run the code sample in full size or the window resize will not be triggered.

//change this value to trigger
        var maxWidth = 900;

        var assignBehaviourToMenuItems = function($in_target){

            $in_target.find('.trigger').each(function(){
                var $menuItem = $(this);
                $menuItem.on('click', function(evt){
                    evt.stopPropagation();
                    var $showingParent = $(this).parent('.showing');
                    $showingParent.slideToggle("slow");
                });
            });

        };

        var assignBehaviourToMenuContainer = function($in_target){

            $in_target.find('.menuContainer').on('click', function(evt){
                evt.stopPropagation();
                $(this).find(".showing").slideToggle("slow");
            });

        };

        $(document).ready(function(){

            var $myTarget = $('#myTargetContainer');
            var $slideToggleStatus = $('#slideToggleStatus');

            assignBehaviourToMenuItems($myTarget);
            assignBehaviourToMenuContainer($myTarget);


            window.onresize = function(){

                clearTimeout($.data(this, 'windowResiting'));

                $.data(this, 'windowResiting', setTimeout(function(){

                    if(window.outerWidth < 900){

                        if($myTarget.hasClass('disabled') == false){
                            //disable the click event
                            $myTarget.find('.trigger').off();
                            $myTarget.find('.menuContainer').off();

                            $myTarget.addClass('disabled');

                            $slideToggleStatus.text('diabled');

                        }

                    }
                    else{

                        if($myTarget.hasClass('disabled')){
                            //reassign the click events

                            assignBehaviourToMenuItems($myTarget);
                            assignBehaviourToMenuContainer($myTarget);

                            $myTarget.removeClass('disabled');

                            $slideToggleStatus.text('enabled');

                        }

                    }


                }, 50));

            };

            //trigger resize as soon as it loads.
            $(this).trigger('resize');



        });

 body{
            font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
        }

        #myTargetContainer{
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
            width: 240px;
            border: 2px solid lightblue;
            border-radius: 4px;
            margin: 10px;
            padding: 10px;
        }

        #myTargetContainer.disabled{
        }

        #slideToggleStatus{
            color: green;
            font-weight: bold;
        }
        #myTargetContainer.disabled #slideToggleStatus{
            color: red;
        }


        #myTargetContainer.larger{
            background-color: lightblue;
        }

        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul li{
            padding: 4px;
            border-bottom: 1px dashed white;
        }
        ul li:hover{
            background-color: gray;
        }

        .trigger{
            cursor: pointer;
        }

        .menuContainer{
            min-height: 10px;
            border: 1px solid;
            background-color: #d3d3d3;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="myTargetContainer">
    <div class="menuContainer">
        <ul class="showing">
            <li class="trigger">menu 1</li>
            <li class="trigger">menu 2</li>
            <li class="trigger">menu 3</li>
        </ul>
    </div>
    <p>
        slideToggle is <span id="slideToggleStatus">enabled</span>
    </p>
</div>