Issue
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.
Solution
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>
Answered By - CBroe
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.