CODEWITHSUNDEEP
javascriptjquerycss
Brodie
Brodie

Reputation: 8727

Trigger event using Jquery on CSS change?

I'm curious is there an event listener or perhaps a way to construct a method that will trigger when a CSS change happens?

My stylesheet uses media queries and I want to know if there's a way to attach a listener to see when those media queries kick in and out. For example I have a media query that hides a button at certain screen widths

@media screen and (max-width: 480px) {
  #search-button {
    display: none;
  }
}

What event listener would I use to detect when that display changes? I'm currently doing this:

$(window).resize(function() {
  if($('#search-button').css("display") == "none") {
    //do something
  } else {
    //do something else
  }
});

Which works fine, but it calls the listener every time the user changes the screen and I'd rather just have it fire only when the css of the button changes. I hope that makes sense.

for example this is what I'd like

$('#search-button').cssEventListenerOfSomeKind(function() {
  alert('the display changed');
});

Upvotes: 9

Views: 21616

Answers (3)

lemonSkip
lemonSkip

Reputation: 54

I know this is old but I managed to solve it with this logic

    // set width and height of element that is controlled by the media query
    var page_width = $page.width();
    var page_height = $page.height();


    $window = $(window).resize(function(){
        if( $page.width() != page_width ) {
            // update page_width and height so it only executes your 
            // function when a change occurs
            page_width = $page.width();
            page_height = $page.height();
            // do something
            // ...
        }
    });

Upvotes: 0

Jasper
Jasper

Reputation: 76003

Binding to the window.resize is your best option (I believe). There isn't any event fired when you change an element's CSS. You can however optimize a bit by caching the selector used:

var $searcButton = $('#search-button');
$(window).resize(function() {
    if($searcButton.css("display") == "none") {
        //do something
    } else {
        //do something else
    }
});

Or you can use $(window).width() to check the width of the viewport:

var $window = $(window);
$window.resize(function() {
    if($window.width() <= 480) {
        //do something
    } else {
        //do something else
    }
});

UPDATE

You can always throttle your own event handler:

var $window   = $(window),
    resize_ok = true,
    timer;

timer = setInterval(function () {
    resize_ok = true;
}, 250);

$window.resize(function() {
    if (resize_ok === true) {
        resize_ok = false;
        if($window.width() <= 480) {
            //do something
        } else {
            //do something else
        }
    }
});

This will prevent the code in your resize event handler from running more than once every quarter second.

Upvotes: 4

khollenbeck
khollenbeck

Reputation: 16157

If it is only a one time event you could try to unbind the event.

http://api.jquery.com/unbind/

Upvotes: 0

Related Questions