Disable jQuery function on window size

Question

I have some jQuery that needs to activate depending on the window size.

The current code I have does trigger correctly when the page is loaded, but if I resize the window the jQuery does not enable or disable according to the size of the screen

$(document).ready(function() {
var width = $(window).width();
if ((width < 980)) {
    $( '.navigation > ul > li > a' ).click(function() {
        if($(this).next('ul').is(':visible')){
            $(this).next("ul").slideUp(400);
        } else {
            $( '.navigation > ul > li > ul' ).slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $( '.navigation > ul > li > ul > li > a' ).click(function() {
        if($(this).next("ul").is(":visible")){
            $(this).next("ul").slideUp(400);
        } else {
            $( '.navigation > ul > li > ul > li > ul' ).slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $( '.menu-link' ).click(function() {
        if($(this).next("div").is(':visible')){
            $(this).next("div").slideUp(400);
        } else {
            $( '.navigation' ).slideUp(400);
            $(this).next('div').slideToggle(400);
        } 
    });

} 
});

Effectively what I need is for the jQuery to trigger under a screen size of 980px and disable over that figure.

As an extra googly I need to make sure that any expanded elements are able to close or are closed when the page size exceeds 980px as over this size the usual CSS media queries take effect on hover.

An earlier version of my code was able to take into account of a dynamic window size, but left the expanded items open and unable to close since the jQuery no longer functioned.

In case it helps here's a fiddle

You don't need to use two parenthesis in if.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2014-03-23 15:21:01 +00:00
Commented Mar 23, 2014 at 15:21 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Mar 23, 2014 at 15:21
True, force of habit on my part. I've made an update.

UntitledGraphic
– UntitledGraphic

2014-03-23 15:27:46 +00:00
Commented Mar 23, 2014 at 15:27 — UntitledGraphic
– UntitledGraphic, Commented Mar 23, 2014 at 15:27

Mohit Pandey · Accepted Answer · 2014-03-25 06:15:26Z

1

You need to use window.onresize method.

EDITED CODE

// flag to check that events doesn't bind twice
var isNavigationEventsEnable = false;

// enable events
var enableNavigationEvents = function () {
    $(".navigation > ul > li > a").on('click.screen-lt-980', function () {
        if ($(this).next("ul").is(":visible")) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function () {
        if ($(this).next("ul").is(":visible")) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".menu-link").on('click.screen-lt-980', function () {
        if ($(this).next("div").is(":visible")) {
            $(this).next("div").slideUp(400);
        } else {
            $(".navigation").slideUp(400);
            $(this).next("div").slideToggle(400);
        }
    });
}

// disable events
var disableNavigatioEvents = function () {
    $(".navigation > ul > li > a").off('click.screen-lt-980');
    $(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
    $(".menu-link").off('click.screen-lt-980');
}

// call this method on window resize
var redesignScreen = function () {
    //function (e) { // comment this line
        var width = $(window).width();
        if ((width < 980)) {
            if (!isNavigationEventsEnable) {
                isNavigationEventsEnable = true;
                enableNavigationEvents();
            }
        } else {
            isNavigationEventsEnable = false;
            disableNavigatioEvents();
        }
    //} // comment this line
}

$(document).ready(function () {
    // attach onresize function
    window.onresize = redesignScreen;

    // calling redesignScreen initially
    redesignScreen();
});

JSFiddle: http://jsfiddle.net/hEtTg/2/

WITH FORCE CLOSE

// flag to check on that events doesn't bind twice
var isNavigationEventsEnable = false;

// enable events
var enableNavigationEvents = function () {
    $(".navigation > ul > li > a").on('click.screen-lt-980', function (e, data) {
        data = (typeof data == 'undefined') ? {} : data;
        if ($(this).next("ul").is(":visible") || data.forceClose) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function (e, data) {
        data = (typeof data == 'undefined') ? {} : data;
        if ($(this).next("ul").is(":visible") || data.forceClose) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".menu-link").on('click.screen-lt-980', function (e, data) {
        data = (typeof data == 'undefined') ? {} : data;
        if ($(this).next("div").is(":visible") || data.forceClose) {
            $(this).next("div").slideUp(400);
        } else {
            $(".navigation").slideUp(400);
            $(this).next("div").slideToggle(400);
        }
    });
}

// disable events
var disableNavigatioEvents = function () {
    $(".navigation > ul > li > a").trigger('click', [{
        forceClose: true
    }]);
    $(".navigation > ul > li > ul > li > a").trigger('click', [{
        forceClose: true
    }]);
    $(".menu-link").trigger('click', [{
        forceClose: true
    }]);

    $(".navigation > ul > li > a").off('click.screen-lt-980');
    $(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
    $(".menu-link").off('click.screen-lt-980');
}

// call this method on window resize
var redesignScreen = function () {
    // function (e) { // comment this line
    var width = $(window).width();
    if ((width < 980)) {
        if (!isNavigationEventsEnable) {
            isNavigationEventsEnable = true;
            enableNavigationEvents();
        }
    } else {
        isNavigationEventsEnable = false;
        disableNavigatioEvents();
    }
    //  } // comment this line
}

$(document).ready(function () {
    // attach onresize function
    window.onresize = redesignScreen;

    // calling redesignScreen initially
    redesignScreen();
});

JSFiddle:http://jsfiddle.net/hEtTg/3/

Hopes it helps.

edited Mar 25, 2014 at 6:15

answered Mar 23, 2014 at 15:29

Mohit Pandey

3,8597 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

UntitledGraphic Over a year ago

Unfortunately that doesn't quite work. The jQuery is not disabled above 980px and if the window is resized to below that amount, the navigation slides down then back up. Also if you then refresh below 980px nothing functions

Mohit Pandey Over a year ago

what do you mean by disabling jquery? If your screen size is more than 980px, you need to rwmove jquery. And if you do so, then all events which you bind through jquery will not work.

UntitledGraphic Over a year ago

Ah, sorry I din't mean disabling jQuery, that would be very wrong. I meant just this code so that above a certain width it stops functioning and below it starts. This is important for tablet devices where the screen size alternates dependent on their orientation, and that on a desktop where the hover state becomes important the slide effect becomes a hinderance to the user.

UntitledGraphic Over a year ago

Hi Mohit That is great in that it gets disabled above 980px, but its also not functioning below 980px. This Fiddle shows what I mean - jsfiddle.net/untitledgraphic/hEtTg/1

Mohit Pandey Over a year ago

@CraigCooper: I mistakenly forgot to comment a line which causing an error. Have a look at the edited code with jsfiddle.

|

Collectives™ on Stack Overflow

Disable jQuery function on window size

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related