Quantcast
Channel: portalZINE NMN | Development meets Creativity
Viewing all articles
Browse latest Browse all 68

Get notified for CSS, Attribute or Property changes in an element

$
0
0

jQuery-Watch is a nice little plugin that monitors CSS, Attribute or Property changes in an element.

It uses the MutationObserver internally for modern browsers and uses setInterval() polling as a fallback for older browsers.

MutationObserver Syntax

Browser Support / Polyfill

var element = document.getElementById("Notebox");

var observer = new MutationObserver(observerChanges);
observer.observe(element, {
    attributes: true,
    subtree: opt.watchChildren,
    childList: opt.watchChildren,
    characterData: true
});

/// when you're done observing
observer.disconnect();

function observerChanges(mutationRecord, mutationObserver) {
    console.log(mutationRecord);
}

jQuery-Watch Syntax

$("#btnChangeContent").click(function () {
    // assign text programmatically
    $("#SomeContent").text("Hello - time is " + new Date());
});
// watch the content
$("#SomeContent").watch({
    properties: "prop_innerHTML",
    watchChildren: true,
    callback: function (data, i) {
        console.log("text changed");
        alert('text changed' + data.vals[i]);
    }
});

jQuery-Watch on Github


Viewing all articles
Browse latest Browse all 68

Trending Articles