How can I activate an event with Jquery when the CSS is modified?

Question

How can I activate an event with Jquery when the CSS is modified?

I'm wondering if there is a way to create a method or use an event listener that will be triggered when a CSS change occurs.

Specifically, my stylesheet includes media queries and I am interested in knowing if it's possible to attach a listener to detect when those media queries become active or inactive. For instance, I have a media query set up to hide a button at certain screen widths:

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

Is there an event listener that could help me determine when the display property changes due to the media query? Currently, I am using the following approach:

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

Although this method works fine, it triggers every time the user adjusts the screen size. I would prefer it to only fire when the CSS of the button actually changes. I hope that clarifies my question.

For instance, I would like something similar to the following:

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

javascript jquery css

Answer 1

Answer №1

Optimizing your code by binding to the window.resize event is highly recommended. Unfortunately, there is no specific event that gets triggered when an element's CSS changes. However, you can enhance performance by caching the selector being used:

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

Alternatively, you can utilize $(window).width() to determine the viewport width:

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

UPDATE

You have the option to throttle your 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
        }
    }
});

By implementing this, your resize event handler will only run once every 250 milliseconds.

Answer 2

Optimizing your code by binding to the window.resize event is highly recommended. Unfortunately, there is no specific event that gets triggered when an element's CSS changes. However, you can enhance performance by caching the selector being used:

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

Alternatively, you can utilize $(window).width() to determine the viewport width:

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

UPDATE

You have the option to throttle your 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
        }
    }
});

By implementing this, your resize event handler will only run once every 250 milliseconds.

Answer 3

Answer №2

In the case of a singular occurrence, you may consider unbinding the event handling.

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

Answer 4

In the case of a singular occurrence, you may consider unbinding the event handling.

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

Answer 5

Answer №3

Although this method may be considered outdated, I successfully tackled the issue using the following approach

    // Define width and height for the element influenced by the media query
    var layout_width = $layout.width();
    var layout_height = $layout.height();


    $window = $(window).resize(function(){
        if( $layout.width() != layout_width ) {
            // Update layout_width and layout_height to trigger your function only when changes occur
            layout_width = $layout.width();
            layout_height = $layout.height();
            // Perform necessary actions
            // ...
        }
    });

Answer 6

Although this method may be considered outdated, I successfully tackled the issue using the following approach

    // Define width and height for the element influenced by the media query
    var layout_width = $layout.width();
    var layout_height = $layout.height();


    $window = $(window).resize(function(){
        if( $layout.width() != layout_width ) {
            // Update layout_width and layout_height to trigger your function only when changes occur
            layout_width = $layout.width();
            layout_height = $layout.height();
            // Perform necessary actions
            // ...
        }
    });

How can I activate an event with Jquery when the CSS is modified?

Answer №1

Answer №2

Answer №3

Similar questions

An error was discovered: [$injector:unpr] The provider aProvider is not recognized <- a

Please enter your submission once it reaches 7 characters

"Trouble with Material-UI DataGrid: Column headers are being cut off

When running a callback function, the "this" of an Angular 2 component becomes undefined

Aligning image both horizontally and vertically in the center

Drop-down menu for every individual cell within the tabular data

Animate.css glitch: The webpage grows exponentially

Unlocking the Secrets of AnimatedInterpolation Values

Positioning a Bootstrap popover directly adjacent to the cursor's location (within the clicked element)

Overlaying a Bootstrap Collapse onto an element

Tips on adjusting section height as window size changes?

Ways to verify a function is invoked once using enzyme

Using the .map function on JSON data with and without a parent element in JavaScript

Customizing JSON Data Structure in jQuery DataTables for Enhanced Display

What could be causing the data in the data table to remain undeleted unless the page is manually refreshed

Fixing PHP Call Internal Server Error Using JQuery Ajax

Angular 4: Implementing a Re-login Dialog/Modal Using Interceptors

Bootstrap typehead not activating jQuery AJAX request

Creating personalized URLs for RESTful API with Node.js and MongoDB

Incorporating HTML5 transitions into your website