1

I would like to know if there is a way to change a div's style when the style of another div changes.

Let's say for example that we have a div (test1), that changes its z-index after 5 sec. I would like to change the css of another div (test2) when test1 has z-index=2.

Jason
  • 15,017
  • 23
  • 85
  • 116
user3193190
  • 37
  • 8
  • Show HTML and the code you have tried? – Varun Aug 30 '15 at 15:12
  • Please post the code you have and what you've tried so far. – Daniel Hoffmann-Mitscherling Aug 30 '15 at 15:12
  • 1
    possible duplicate of [Event detect when css property changed using Jquery](http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery) – Kamil Szymański Aug 30 '15 at 15:31
  • If it's only for a parent-child-descendant situation, then it should be trivial to handle with CSS by just adding/removing/toggling/whatever a class to the parent. But if the other div can be anywhere, they you'll need some javascript stuff. – Roope Aug 30 '15 at 15:34
  • The code is from a slideshow of a plugin in wordpress. I am trying to animate the text. I have seen that the slideshow has each image in a div. When the image is in front, the zIndex is equal 3. When this happends,i want to change the css of an inner div. I am sorry for tot quotting but i am from mobile app and do not know where to find it. – user3193190 Aug 30 '15 at 15:34
  • How exactly is the `z-index` changing? It may be easier to hook the change in the second div to the action of the first. – apaul Aug 30 '15 at 18:07

1 Answers1

0

I don't think there are built in events for that, but you could use a setInterval like this:

var divStyle = null;
setInterval(function () {
   var newDivStyle = $("#myDiv").attr("style");
   if (newDivStyle !== divStyle) {
      divStyle = newDivStyle;
      $("#myDiv").trigger("divStyleChange");
   }
}, 50);

$("#myDiv").bind("divStyleChange", function () {
    $("#myDiv2").css("background-color", "#"+((1<<24)*Math.random()|0).toString(16));
});

function ChangeColorOfOuterDiv() {
    $('#myDiv').css('background-color','#'+((1<<24)*Math.random()|0).toString(16));
}
#myDiv {
    width:100px;
    height:100px;
    background-color:red;
}
#myDiv2 {
    width:50px;
    height:50px;
    background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <div id="myDiv2"></div>
</div>

<button onClick="ChangeColorOfOuterDiv()">Change color of outer div</button>
Forivin
  • 14,780
  • 27
  • 106
  • 199