Event Detect When CSS Property Changed Using Jquery

Event detect when css property changed using Jquery

Note

Mutation events have been deprecated since this post was written, and may not be supported by all browsers. Instead, use a mutation observer.

Yes you can. DOM L2 Events module defines mutation events; one of them - DOMAttrModified is the one you need. Granted, these are not widely implemented, but are supported in at least Gecko and Opera browsers.

Try something along these lines:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

You can also try utilizing IE's "propertychange" event as a replacement to DOMAttrModified. It should allow to detect style changes reliably.

Trigger event using Jquery on CSS change?

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.

JQuery: detecting css state change

It is expected of the checkbox value to remain 1 regardless of the checked state. In a classic form the checked state determins wether the value is sent or not, and not if the submission contains 1 or 0. What you're looking for is probabily the "checked" attribute.

setting checked attribute:

$('#check').attr('checked', true);

getting "checked" state:

$('#check').attr('checked'); // returns true / false

from what I'm aware of there is no easy way of checking for a property change other than checking at intervals in an infinite loop but I'm prety certain you don't need to do that.
Clicking the label should change the checkbox "checked" attribute. If you need 1 or 0 value and not a "1 or nothing" you could listen to the checkbox "change" event and prevent de-checking, but instead change value to 0 if it is 1, or vice-versa.

$('#check').change(function(event){
    event.PreventDefault();
    $(this).val( ( $(this).val(  ) + 1 ) % 2 );
});

However preventing the change also cancels any styling based on the checked property so you must refer to the checked state in another way: either in css using

input[value=1] + label

or you could add a small piece of code to toggle a custom class

$('#check').change(function(event){
    event.PreventDefault();
    $(this).val( ( $(this).val(  ) + 1 ) % 2 );
    $(this).toggleClass('checked');
});

and refer to it from css like this:

input.checked + label

CSS Property Change Listener

I think you're looking for this:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

If you google for it, a bunch of stuff comes up. This looks promising though:

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

Is it possible to listen to a style change event?

Since jQuery is open-source, I would guess that you could tweak the css function to call a function of your choice every time it is invoked (passing the jQuery object). Of course, you'll want to scour the jQuery code to make sure there is nothing else it uses internally to set CSS properties. Ideally, you'd want to write a separate plugin for jQuery so that it does not interfere with the jQuery library itself, but you'll have to decide whether or not that is feasible for your project.

HTML detect change on style of element

You may use MutationObserver:

document.querySelector('button').addEventListener('click', function(e) {    var ele = document.getElementById('corps');    if (ele.style.display == 'block')        ele.style.display = 'none';    else        ele.style.display = 'block';});

var observer = new MutationObserver(function(mutationsList, observer) {    for (var mutation of mutationsList){        console.log('The ' + mutation.attributeName + ' attribute was modified.');    }});observer.observe(document.getElementById('corps'), { attributes: true});

<div id="corps" style="display: block;">1111111111111111</div><button>Change div style</button>

function checkForChanges()
{
    if ($('.slide-out-div').hasClass('open'))
        $('.otherDiv').css('top','0px');
    else
        setTimeout(checkForChanges, 500);
}

$(checkForChanges);