0

I have a class called

.informations

when this class is shown I would love to add a class to some other elements such as

#logo
#totale
.submenu
#fp-nav

so to change their font color from black to white. Is there any way to achieve that?

Check this JsFiddle

Federico
  • 1,392
  • 1
  • 17
  • 40

1 Answers1

1

If you use jQuery, you can use this extension (found here):

(function($) {
    $.each(['show','hide'], function(i, val) {
        var _org = $.fn[val];
        $.fn[val] = function() {
            this.trigger(val);
            _org.apply(this, arguments);
        };
    });
})(jQuery);

Working JSFiddle.

HTML

<div class="informations">
  When this is shown, other elements get white color.
</div>

<div id="logo">
  Logo
</div>

<div id="totale">
  Totale
</div>

<div class="submenu">
  Submenu
</div>

JavaScript

$(".informations").on("show", function() {
    $("#logo, #totale, .submenu, #fp-nav").addClass("white-text");
});

setTimeout(function() {
    $(".informations").show();
}, 2000);

CSS

.white-text {
  color: #fff;
  background-color: #000;
}

.informations {
  display: none;
}

UPDATE 1

Try this, found here

JavaScript

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
      if(mutationRecord.target.style.display !== "none") {
        console.log('display changed, now visible!');
        $("#logo, #totale, .submenu, #fp-nav").addClass("white-text");
      } else {
        console.log('display changed, now visible!');
        $("#logo, #totale, .submenu, #fp-nav").removeClass("white-text");
      }
    });    
});

observer.observe($(".informations")[0], { attributes : true, attributeFilter : ['style'] });

setTimeout(function() {
    $(".informations").show();
  setTimeout(function() {
    $(".informations").hide();
  }, 2000);
}, 2000);
Community
  • 1
  • 1
Arg0n
  • 8,283
  • 2
  • 21
  • 38
  • Thanks @Arg0n, the problem is that the .informations is a slide and it's not shown after a delay of time, I don't know how to fix your code based on this. – Federico May 19 '16 at 07:24
  • it's shown as the second slide in a sequence of X slides. it's basically never hidden. When it's displayed on the screen, then I want to addClasses. – Federico May 19 '16 at 07:28
  • Updated my code for other way to watch for changes in style. – Arg0n May 19 '16 at 07:32