How do I stop resize function from firing after a css value has changed?

Question

I'm trying to stop a resize function from firing after a css value has changed via a CSS media query. This doesn't work ... I want "there IS a toggle" to appear only once. how do I kill it?

$(window).bind('resize', function(event) {
    if ($('#toggle').css('display') == 'none')
        {
            console.log("there's no toggle!");
        }
        else {
            console.log("there IS a toggle!");
            return false; // trying to stop the function
        }
});

score 1 · Answer 1 · answered Nov 14 '12 at 00:48

1

Use unbind()

$(window).unbind('resize');

/

else {
        console.log("there IS a toggle!");
        $(window).unbind('resize');
}

answered Nov 14 '12 at 00:48

Sushanth --

55,259
9
66
105

score 1 · Accepted Answer · answered Nov 14 '12 at 00:59

1

It should be written like this, Using .on() and .off().

$(window).on('resize', function() {

if ($('#toggle').css('display') == 'none')
    {
        console.log("there's no toggle!");
    }
    else {
        console.log("there IS a toggle!");
        $(window).off('resize');
    }
});

answered Nov 14 '12 at 00:59

VIDesignz

4,703
3
25
37

what is the advantage to using on and off over bind and unbind? – Lauren Nov 14 '12 at 01:14
As of jquery 1.7 the .on() handler is preferred...eventually .bind() will be deprecated (kicked to the curb) as they did with .live() The .on() handler is more flexible and replaces both .live() and .bind() .... You can read more here :) http://api.jquery.com/bind/ – VIDesignz Nov 14 '12 at 01:41

How do I stop resize function from firing after a css value has changed?

2 Answers2