How to change the style of a div and reset it after 1000ms?-CodePudding

I have multiple (only 2 in this example) divs overlapping with each other...

What I'd like to do is to add buttons that represents each div, which when clicked, should increase their respective div's z-index for 1000ms only, in order to stay on top of all the other overlapping divs. This is the only purpose of the increase in z-index.

I was able to do some part of this, however, on second round of clicking, the secondary divs keep hiding behind the originally-on-top div.

Please check and run the snippet below:

function increaseDivOne() {
    const box = document.getElementById('Div1');
    box.style.zIndex = '999';
    setTimeout(function () {
        box.style.zIndex = '1';
    }, 1000);
}
function increaseDivTwo() {
    const box = document.getElementById('Div2');
    box.style.zIndex = '999';
    setTimeout(function () {
        box.style.zIndex = '1';
    }, 1000);
}

#Div1 {
  position: absolute;
  width: 300px;
  height: 150px;
  background-color: lightblue;
  border: 1px solid black;
}

#Div2 {
  position: relative;
  top: 130px;
  left: 30px;
  width: 300px;
  height: 150px;
  background-color: coral;
  border: 1px solid black;
}

<button onclick="increaseDivTwo()">Increase Div 2</button>
<br><br>
<button onclick="increaseDivOne()">Increase Div 1</button>

<ul>Try this:</ul>
<li>Click "Increase Div 2"</li>
<li>Click "Increase Div 1"</li>
<li>Click "Increase Div 2" again and notice it will show up but will hide behind Div1 after 1s</li>
<p>My goal is to raise the z-index of a div for 1s, just enough to be on top of the other div and vice versa, but it should stay on top after the 1s set timeout. <br> Please note there's more Div in my actual project that will utilize this function.</p>
<div id="Div2">
  <h1>Div 2</h1>
</div>

<div id="Div1">
    <h1>Div 1</h1>
</div>

Thank you in advance for any help.

CodePudding user response：

From the discussion in comments, I think it would be enough if you just reset the z-index for the currently on-top one, when a new one needs to be moved to the front - without any timers.

You could loop over all relevant div elements - or simply remember the previous one in a variable, and then reset z-index specifically for only that.

And then it would also be a bit nicer, if we did not manipulate inline styles for this, but simply set a class to apply the necessary z-index to the currently "active" element.

var previous = null;
function increaseDiv(num) {
  if(previous) {
    previous.classList.remove('active');
  }
  var div = document.getElementById('Div' num);
  div.classList.add('active');
  previous = div;
}

#Div1 {
  position: absolute;
  width: 300px;
  height: 150px;
  background-color: lightblue;
  border: 1px solid black;
}

#Div2 {
  position: relative;
  top: 130px;
  left: 30px;
  width: 300px;
  height: 150px;
  background-color: coral;
  border: 1px solid black;
}

div.active {
  z-index: 999;
}

<button onclick="increaseDiv('2')">Increase Div 2</button>
<br><br>
<button onclick="increaseDiv('1')">Increase Div 1</button>

<div id="Div2">
  <h1>Div 2</h1>
</div>

<div id="Div1">
    <h1>Div 1</h1>
</div>

CodePudding user response：

if the divs got the same index, then the childnode order takes relay on priority of display, that's the problem here, to keep priority on the last div selected, you should then rewrite your function as the following :

function increaseDivOne() {
    const box = document.getElementById('Div1');
    box.style.zIndex = '999';
    setTimeout(function () {
       box.style.zIndex = '1';
       var elms=document.querySelectorAll('div[id^="Div"]:not(#Div1)');
       for (var p in elms) {
           elms[p].style.zIndex=-1;
       }
    }, 1000);
}