Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Question

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Is there a way to detect when the CSS property "display" of an image is changed by another JavaScript script or function and then execute some JS code? I tried using $(this).bind('propertychange', function(){}) but it doesn't work, and setInterval is not recommended. Are there any other solutions?

javascript jquery css callback

Answer 1

Answer №1

Here is the solution you need:

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

Answer 2

Here is the solution you need:

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

Answer 3

Answer №2

This content resides within the legacy JavaScript files that are not meant to be altered:

// Here lies the untouched, original function
function originalFunction(sel) {
    alert(sel);
    $(sel).css("display","none");
}

Here is the modified portion in your code:

// Example callback function to be passed into the extended function below
function myCallback(s) {
    alert("The image with src = '" + $(s).attr("src") + "' has been modified!");
}


// Extension of the function without directly modifying it
originalFunction = (function(legacyFn, callback) {

    // Single argument function to be assigned back to originalFunction
    return function(sel) {

        // Call the "original" originalFunction, triggering alert and hiding image.
        legacyFn(sel);  

        if(callback) callback(sel);  // Execute the callback function
    }

})(originalFunction, myCallback);

The variable originalFunction now holds a function accepting one parameter. This function is returned by a self-executing anonymous function which takes two arguments: the reference to the original originalFunction before any modifications, and the reference to the callback function. These references are enclosed within the closure to maintain their values even after reassigning originalFunction.

To summarize, at a higher level, originalFunction and myCallback are inputs for the self-executing function, stored in legacyFn and callback respectively. A new function is then assigned to originalFunction.

When you invoke

originalFunction('.someClassOnAnImage')

, the legacyFn triggers, displaying an alert with the selector and hiding the image. Subsequently, if present, the callback function will execute, printing:

The image with src = '.someClassOnAnImage' has been modified!

Although lacking the elegance of addEventListener, this method enables customization of legacy functions without tampering with the original source files. It extends functionality while preserving the original functions intact.

You can neatly store all extensions in a separate JavaScript file or within your current script. To revert to the default behavior, simply delete your additional functions.

Answer 4

This content resides within the legacy JavaScript files that are not meant to be altered:

// Here lies the untouched, original function
function originalFunction(sel) {
    alert(sel);
    $(sel).css("display","none");
}

Here is the modified portion in your code:

// Example callback function to be passed into the extended function below
function myCallback(s) {
    alert("The image with src = '" + $(s).attr("src") + "' has been modified!");
}


// Extension of the function without directly modifying it
originalFunction = (function(legacyFn, callback) {

    // Single argument function to be assigned back to originalFunction
    return function(sel) {

        // Call the "original" originalFunction, triggering alert and hiding image.
        legacyFn(sel);  

        if(callback) callback(sel);  // Execute the callback function
    }

})(originalFunction, myCallback);

The variable originalFunction now holds a function accepting one parameter. This function is returned by a self-executing anonymous function which takes two arguments: the reference to the original originalFunction before any modifications, and the reference to the callback function. These references are enclosed within the closure to maintain their values even after reassigning originalFunction.

To summarize, at a higher level, originalFunction and myCallback are inputs for the self-executing function, stored in legacyFn and callback respectively. A new function is then assigned to originalFunction.

When you invoke

originalFunction('.someClassOnAnImage')

, the legacyFn triggers, displaying an alert with the selector and hiding the image. Subsequently, if present, the callback function will execute, printing:

The image with src = '.someClassOnAnImage' has been modified!

Although lacking the elegance of addEventListener, this method enables customization of legacy functions without tampering with the original source files. It extends functionality while preserving the original functions intact.

You can neatly store all extensions in a separate JavaScript file or within your current script. To revert to the default behavior, simply delete your additional functions.

Answer 5

Answer №3

The Solution: Check out this related post >> is there an alternative to DOMAttrModified that will work in webkit

The Commentary: Navigating the complexities of DOM Mutation events can be tricky, especially with conflicting implementations in browsers like Webkit and Gecko. While one side offers DOMAttrModified, the other boasts about mutation observer. The inconsistency may seem frustrating, but it's just another challenge in the ever-evolving world of web development.

Side Note: Sharing this insight for those who may encounter similar hurdles in the future.

Answer 6

The Solution: Check out this related post >> is there an alternative to DOMAttrModified that will work in webkit

The Commentary: Navigating the complexities of DOM Mutation events can be tricky, especially with conflicting implementations in browsers like Webkit and Gecko. While one side offers DOMAttrModified, the other boasts about mutation observer. The inconsistency may seem frustrating, but it's just another challenge in the ever-evolving world of web development.

Side Note: Sharing this insight for those who may encounter similar hurdles in the future.

Answer 7

Answer №4

Expanding on Jeff's idea, my suggestion would be to create a unified function that handles modifications to the image style property. This function can act as a central point through which all other functions interact with the image style property.

function adjustImageDisplay(selector, callback) {
    $(selector).css("display","block");
    if(callback)
        callback();
}

function hideImage(selector, callback) {
    $(selector).css("display","none");
    if(callback)
        callback();
}

You can call upon these functions from any part of your JavaScript code whenever you need to alter the image CSS property. The functions also accept a callback function as an argument, which will be executed afterwards if provided as the 2nd parameter.

You could potentially consolidate these into a single function, but I'll leave that decision up to you based on your specific objectives for this task.

Answer 8

Expanding on Jeff's idea, my suggestion would be to create a unified function that handles modifications to the image style property. This function can act as a central point through which all other functions interact with the image style property.

function adjustImageDisplay(selector, callback) {
    $(selector).css("display","block");
    if(callback)
        callback();
}

function hideImage(selector, callback) {
    $(selector).css("display","none");
    if(callback)
        callback();
}

You can call upon these functions from any part of your JavaScript code whenever you need to alter the image CSS property. The functions also accept a callback function as an argument, which will be executed afterwards if provided as the 2nd parameter.

You could potentially consolidate these into a single function, but I'll leave that decision up to you based on your specific objectives for this task.

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Simple guide to returning values from PHP using AJAX

The position of the HTML class shifts when the window is resized

Encountered a Vue.js Vuex error: "Unable to dispatch function in context."

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Is there a way to modify the appearance of a block element and transmit a parameter to a PHP function?

Struggling with Duplicated Images

Issues with the functionality of Bootstrap

In Javascript, comparing a regular array value with an array value created by the match function

Unable to execute Javascript function within a click event handler

Achieving successful content loading through AJAX using the .load function

Creating a Javascript Regular Expression to detect both accented and non-accented variations of a given string

After resizing, reordering, hiding, or showing columns in the kendo grid, the grid's data source will be set to

Is there a risk of overloading the server and browser by making constant AJAX calls at regular intervals?

Utilizing Jquery: Extracting the value of a child element upon clicking the encompassing parent div

Utilizing Vue to send information to the POST function

Changing position attributes on fixed divs may not function properly on Android devices

When the text in a Material UI Textfield is updated using setState in React, the Hinttext may overlap with the newly set

How can I get the class name of the drop destination with react-dnd?

Leverage Reveal.js within Next.js by installing it as an npm package

Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding