Adding a class based on a changing inline variable's value?

Question

How do we assign a class based on what an inline variable's value changes to?

Here is the demonstration which is much easier to understand: http://jsfiddle.net/eYGr5/75/

Basically, another script (I don't want to touch) is assigning an inline style to a div. I want to identify when "IF" this style's value has changed, to apply a class to a certain element.

Here is the minified non-interactive copy of the code:

HTML:

<div class="mm-active">mm-active</div>

<div class="mm-container" style="color:DarkGreen;">mm-container: By hovering here, the jQuery should look up the new inline style (DeepPink) and ONLY because of that inline style, turn mm-active lime green!</div>

CSS:

.activefix {
    background:Lime;
}

jQuery:

// This function gets the value of an inline style property, (Source: bit.ly/1er8vJ2):
(function($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));

// Now how do we assign a class based on what this inline variable changes to?
if ($(".mm-container").inlineStyle("color") == 'DeepPink') {
    $('.mm-active').addClass('activefix'); // This should apply "Lime" to mm-active
}

Is the other JS file using .addClass? we can overwrite it to include an event handler if that is the case. — JF it, Mar 12 '14 at 09:36
He said the other JS file is modifying the style, not the class. — Barmar, Mar 12 '14 at 09:42
@JFit What Barmar said. More specifically, the actual inline style I'll be changing is "display" which has a value that toggles from "block" to "none." — WebMW, Mar 12 '14 at 09:44
possible duplicate of [Detect changes in the DOM](http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom) — Barmar, Mar 12 '14 at 09:44
ok cool, even better.. what style's is it changing? might be an opportunity to use !important tag.. — JF it, Mar 12 '14 at 09:47

score 1 · Answer 1 · answered Mar 12 '14 at 09:39

IF the script that is adding the class is using jquery's .addClass() method, you should overwrite that method to add an event listener, then bind that listener to the event that is causing it to fire when .addClass is called on that event.

(function(){
 var originalAddClassMethod = jQuery.fn.addClass;
 jQuery.fn.addClass = function(){
     var result = originalAddClassMethod.apply( this, arguments );
     jQuery(this).trigger('cssClassChanged');
     return result;
 }
})();


$(function(){
 $("#Your Element To Add Handler To").bind('cssClassChanged', function(){ 
     $('.mm-active').addClass('activefix');
 });
});

score 0 · Answer 2 · answered Mar 12 '14 at 09:36

0

Colour is handled differently across browsers, some may return the rgba code and some the hex (regardless fo what you assign to them). I'd shy away from checking explicit colour names, but if you really insist, you need to write a function to read rgba/hex and translate them to your HTML entities.

answered Mar 12 '14 at 09:36

Andrei Nemes

3,062
1
16
22

Good to know, but "color" is just for demonstration. The actual inline style I'll be changing is "display" which has a value that toggles from "block" to "none." Does that change anything? – WebMW Mar 12 '14 at 09:39
The class _is_ being added in the inspector, so you certainly get there. – Andrei Nemes Mar 12 '14 at 09:46

Adding a class based on a changing inline variable's value?

2 Answers2