Question 43997 in Html Question posted in
Some basic documentation can be found here.

Change ZIndex dynamiclly by clicking on a div – Html

I am writing some thing like windows7 concept.
by double click on an icon one window will open.
if you double click on an icon for for example 4 times 4 windows will be open for you.
when we have many open windows when you click on a window It’s z-index should increase and show on other open windows.
my problem is that I can’t write code for its z-index and actually when you click on an icon it just open one time and when you click again noting happen.

let pc = document.getElementById('pc')
let folder = document.getElementById('folder')
let bin = document.getElementById('bin')
let pcwindow = document.getElementById('pcwindow')
let folderwindow = document.getElementById('folderwindow')
let binwindow = document.getElementById('binwindow')
let pcwindow2 = document.getElementById('pcwindow2')
let folderwindow2 = document.getElementById('folderwindow2')
let folderwindow3 = document.getElementById('folderwindow3')
let binwindow2 = document.getElementById('binwindow2')
let binwindow3 = document.getElementById('binwindow3')
let setting = document.getElementById('setting')
let f2 = document.getElementById('f2')
let f3 = document.getElementById('f3')
let f4 = document.getElementById('f4')
let pic = document.getElementById('pic')
let folder2 = document.getElementById('folder2')
let pcwindow3 = document.getElementById('pcwindow3')
let b1 = document.getElementById('b1')
let b2 = document.getElementById('b2')
let b3 = document.getElementById('b3')
let b4 = document.getElementById('b4')
let b5 = document.getElementById('b5')
let b6 = document.getElementById('b6')
let b7 = document.getElementById('b7')
let b8 = document.getElementById('b8')
let b9 = document.getElementById('b9')



pc.addEventListener("dblclick", () => {

    pcwindow.style.display = "block"
    pcwindow.style.top = "50px"
    pcwindow.style.left = "100px"



})


b1.addEventListener("click", () => {

    pcwindow.style.display = "none"


})

folder.addEventListener("dblclick", () => {

    folderwindow.style.display = "block"
    folderwindow.style.top = "75px"
    folderwindow.style.left = "100px"


})

b2.addEventListener("click", () => {

    folderwindow.style.display = "none"

})

bin.addEventListener("dblclick", () => {

    binwindow.style.display = "block"
    binwindow.style.top = "95px"
    binwindow.style.left = "100px"

})

b3.addEventListener("click", () => {

    binwindow.style.display = "none"

})


setting.addEventListener("dblclick", () => {

    pcwindow2.style.display = "block"
    pcwindow2.style.top = "110px"
    pcwindow2.style.left = "100px"

})

b4.addEventListener("click", () => {

    pcwindow2.style.display = "none"

})

folder2.addEventListener("dblclick", () => {

    pcwindow3.style.display = "block"
    pcwindow3.style.top = "125px"
    pcwindow3.style.left = "100px"

})

b7.addEventListener("click", () => {

    pcwindow3.style.display = "none"

})

f2.addEventListener("dblclick", () => {

    folderwindow2.style.display = "block"
    folderwindow2.style.top = "140px"
    folderwindow2.style.left = "100px"

})

b5.addEventListener("click", () => {

    folderwindow2.style.display = "none"

})

pic.addEventListener("dblclick", () => {

    folderwindow3.style.display = "block"
    folderwindow3.style.top = "155px"
    folderwindow3.style.left = "100px"

})

b8.addEventListener("click", () => {

    folderwindow3.style.display = "none"

})

f3.addEventListener("dblclick", () => {

    binwindow2.style.display = "block"
    binwindow2.style.top = "170px"
    binwindow2.style.left = "100px"

})

b6.addEventListener("click", () => {

    binwindow2.style.display = "none"

})

f4.addEventListener("dblclick", () => {

    binwindow3.style.display = "block"
    binwindow3.style.top = "185px"
    binwindow3.style.left = "100px"

})

b9.addEventListener("click", () => {

    binwindow3.style.display = "none"

})

function ad() {
    document.getElementsByClassName('d').style.zIndex = "1"
}
body {
    background-image: url(img/150-1509609_hd-abstract-wallpaper-neon-smoke-71-images-colorful.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.folder {
    width: 80px;
    height: 80px;
}

.folder:hover {
    background-color: rgba(162, 162, 162, 0.195);
}

.pc:hover {
    background-color: rgba(162, 162, 162, 0.195);
}

.pc {
    width: 80px;
    height: 80px;
}

.bin:hover {
    background-color: rgba(162, 162, 162, 0.195);
}

.bin {
    width: 80px;
    height: 80px;
}

.pcwindow {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#folderwindow {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#binwindow {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#pcwindow2 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#pcwindow3 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#folderwindow2 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#folderwindow3 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#binwindow2 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#binwindow3 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#b1 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b2 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b3 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b4 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b5 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b6 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b7 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b8 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b9 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}


/* /////////////////////////////////////////////////////////////// */

.taskbar {
    position: fixed;
    bottom: 0;
    height: 43px;
    width: 100%;
    background: #292929;
}

.taskbar .icons-left {
    height: 43px;
    display: inline-block;
}

.taskbar .icons-left #start-menu {
    height: 43px;
    width: 48px;
    position: relative;
    background-image: url(img/Windows_icon_logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.taskbar .icons-left #start-menu i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 21px;
    color: white;
}

.taskbar .icons-left a {
    display: table-cell;
    border-bottom: 2px solid transparent;
}

.taskbar .icons-left a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-left a.border:focus {
    border-bottom: 2px solid rgba(245, 245, 245, 0.651);
}

.taskbar .icons-left .px {
    width: 1px;
}

.taskbar .icons-left .px a {
    pointer-events: none;
}

.taskbar .icons-right {
    height: 43px;
    float: right;
}

.taskbar .icons-right #wifi {
    height: 43px;
    width: 49px;
    background-image: url("https://raw.githubusercontent.com/gcazin/pure-css-windows-10-desktop/master/icons/wifi.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.taskbar .icons-right #sound {
    height: 43px;
    width: 49px;
    background-image: url("https://raw.githubusercontent.com/gcazin/pure-css-windows-10-desktop/master/icons/volume.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.taskbar .icons-right .datetime {
    display: table-cell;
    width: 70px !important;
    cursor: pointer;
    padding-top: 3px;
}

.taskbar .icons-right .datetime span {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 11.3px;
    color: white;
}

.taskbar .icons-right .datetime:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-right a {
    display: table-cell;
}

.taskbar .icons-right a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-right a:not(:first-child) {
    margin-left: -4px;
}

.taskbar .icons-right .small-icons {
    width: 24px !important;
}

.zindex1 {
    z-index: 1;
}

.zindex2 {
    z-index: -1;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="content/style.css">
</head>

<body>

    <div class="pc">
        <img id="pc" class="d pc" src="content/img/Gabriel-Leblanc-Historic-Mac-Mac.512.png" alt="">

    </div>

    <div id="folder" class="folder">
        <img class="folder" src="content/img/folder.png" alt="">
    </div>
    <div id="bin" class="bin">
        <img class="bin" src="content/img/icons8-recycle-bin-48.png" alt="">
    </div>
    <div id="pcwindow" class="d pcwindow">
        <input id="b1" type="button">
        <img id="setting" src="content/img/Settings-Icon-Graphics-15383788-1-580x374.jpg" style="width: 130px;height: 100px; margin-left: 15px;">
        <img id="folder2" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="folderwindow" class="d">
        <input id="b2" type="button">
        <img id="pic" class="folderwindow" src="content/img/pic.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img id="f2" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>


    <div id="binwindow" class="d" onclick="ad()">
        <input id="b3" type="button">
        <img id="f3" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img id="f4" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="pcwindow2" class="d">
        <input id="b4" type="button">
        <img src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/pc2.png" style="width: 100px;height: 100px; margin-left: 15px;">

    </div>
    <div id="pcwindow3" class="d">
        <input id="b7" type="button">
        <img src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/id.png" style="width: 100px;height: 100px; margin-left: 15px;">

    </div>
    <div id="folderwindow2" class="d">
        <input id="b5" type="button">
        <img src="content/img/id.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/id.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="folderwindow3" class="d">
        <input id="b8" type="button">
        <img src="content/img/pexels-stein-egil-liland-1933239.jpg" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/4545819.jpg" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/150-1509609_hd-abstract-wallpaper-neon-smoke-71-images-colorful.jpg" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="binwindow2" class="d">
        <input id="b6" type="button">
        <img src="content/img/ff.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/fff.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="binwindow3">
        <input id="b9" type="button">
        <img src="content/img/file1.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/file2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>


    <div class="taskbar">
        <div class="icons">
            <div class="icons-left">
                <!-- <div class="btn-group dropup">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> -->
                <a href="start-menu-modal" id="start-menu"><i class="fab fa-windows"></i></a>
                <!-- </button> -->
                <!-- <ul class="dropdown-menu">
                        <li><button class="dropdown-item" type="button">Action</button></li>
                        <li><button class="dropdown-item" type="button">Another action</button></li>
                        <li><button class="dropdown-item" type="button">Something else here</button></li>
                    </ul>
                </div> -->


            </div>
            <div class="icons-right">

                <a href="#sound-modal" id="sound" class="small-icons"></a>
                <a href="#wifi-modal" id="wifi" class="small-icons"></a>
                <div class="datetime">
                    <span class="hour">15:59</span>
                    <span class="date">20/9/2023</span>
                </div>

            </div>
        </div>
    </div>
    <script src="content/script.js"></script>
</body>

</html>
Tags:

3

Answers


  1. 0

    You can consider adding a class called "active" that has a z-index of 2, and add an eventListener to the window that adds the "active" class to the window.

    I made a Fiddle to demonstrate this:

    In CSS, I added a class called "active"

    /* add this class */
.active {
  z-index: 2;
}

    Then in JavaScript, I added the following:

      // this is the portion to make the window active
  newWindow.addEventListener("click", () => {
  if (document.querySelector(".active")) {
    document.querySelector(".active").classList.remove("active");
  }
    newWindow.classList.add("active");
  })
  // end of the portion

    Every time a window is clicked, any existing "active" class is removed. Then, an "active" class is added to the selected window.

    Login or Signup to reply.
  2. 0

    To do it dynamically

    What you can do is store a global variable called zIndexCounter set to 0 in the beginning (or any other value that you find relevant). Each time you create a new window, assign it a z-index equal to this counter and then increment the counter.

    Like this you ensure that the next created window will always have a higher z-index than the previous one.

    Login or Signup to reply.
  3. 0

    I didn’t use z-index, I created an array of opened windows, and move the clicked window to the end of array so it will appear at the top of other windows. Then remove old windows add the array of new windows to page.

    You can also add zIndex here but unnecessary.

    windows.forEach((elem) => body.appendChild(elem)); // add rearrange windows to page

    to

    windows.forEach((elem, i) => {
  elem.style.zIndex = i;
  body.appendChild(elem);
}); // add rearrange windows to page

/* also have to add this in double click function */
window.style.zIndex = len();

    Sorry I modified many places.

    1. Add class .new_window to each window opened by double click. So I can select them more easily.

    2. Removed same functions, elements and class in js/html/css code.

    const items = [{
    icon: document.getElementById("pc"),
    class: "pcwindow",
    html: `<input class="b" type="button"><img id="setting" src="content/img/Settings-Icon-Graphics-15383788-1-580x374.jpg" style="width: 130px;height: 100px; margin-left: 15px;"><img id="folder2" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">`
  },
  {
    icon: document.getElementById("folder"),
    class: "folderwindow",
    html: `<input class="b" type="button"><img id="pic" class="folderwindow" src="content/img/pic.png" style="width: 100px;height: 100px; margin-left: 15px;"><img id="f2" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">`
  },
  {
    icon: document.getElementById("bin"),
    class: "binwindow",
    html: `<input class="b" type="button"><img id="f3" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;"><img id="f4" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">`
  },
];
const body = document.querySelector("body");

/* get current number of windows */
const len = () => document.querySelectorAll(".new_window").length;

/* move clicked window to top */
const toTop = (e) => {
  let windows = [...document.querySelectorAll(".new_window")]; // create an array of windows
  if (windows.length <= 1) return; // we dont need to rearrange windows if windows.length <= 1
  windows.forEach((elem) => elem.remove()); // remove old windows
  windows.push(windows.splice(windows.indexOf(e.target), 1)[0]); // move clicked window to the end of array, it will appear on top of other windows
  windows.forEach((elem) => body.appendChild(elem)); // add rearrange windows to page
};
const closeWindow = (e) => {
  e.target.parentElement.remove();
};
items.forEach((d) => {
  d.icon.addEventListener("dblclick", () => {
    let window = document.createElement("div");
    window.className = `d new_window ${d.class}`;
    window.innerHTML = d.html;
    window.style.display = "block";
    window.style.top = `${25 + 25 * len()}px`;
    window.style.left = "100px";
    body.appendChild(window);
    window.addEventListener("click", toTop);
    window.querySelector(".b").addEventListener("click", closeWindow);
  });
});
    body {
  background-image: url(img/150-1509609_hd-abstract-wallpaper-neon-smoke-71-images-colorful.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

.folder {
  width: 80px;
  height: 80px;
}

.folder:hover {
  background-color: rgba(162, 162, 162, 0.195);
}

.pc:hover {
  background-color: rgba(162, 162, 162, 0.195);
}

.pc {
  width: 80px;
  height: 80px;
}

.bin:hover {
  background-color: rgba(162, 162, 162, 0.195);
}

.bin {
  width: 80px;
  height: 80px;
}

.pcwindow {
  border: 3px solid black;
  width: 600px;
  height: 400px;
  background-color: white;
  margin: auto;
  display: none;
  position: absolute;
}

.folderwindow {
  border: 3px solid black;
  width: 600px;
  height: 400px;
  background-color: white;
  margin: auto;
  display: none;
  position: absolute;
}

.binwindow {
  border: 3px solid black;
  width: 600px;
  height: 400px;
  background-color: white;
  margin: auto;
  display: none;
  position: absolute;
}

.b {
  float: right;
  width: 50px;
  height: 50px;
  background-image: url(img/rsz_cross.png);
}


/* /////////////////////////////////////////////////////////////// */

.taskbar {
  position: fixed;
  bottom: 0;
  height: 43px;
  width: 100%;
  background: #292929;
}

.taskbar .icons-left {
  height: 43px;
  display: inline-block;
}

.taskbar .icons-left #start-menu {
  height: 43px;
  width: 48px;
  position: relative;
  background-image: url(img/Windows_icon_logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.taskbar .icons-left #start-menu i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 21px;
  color: white;
}

.taskbar .icons-left a {
  display: table-cell;
  border-bottom: 2px solid transparent;
}

.taskbar .icons-left a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-left a.border:focus {
  border-bottom: 2px solid rgba(245, 245, 245, 0.651);
}

.taskbar .icons-left .px {
  width: 1px;
}

.taskbar .icons-left .px a {
  pointer-events: none;
}

.taskbar .icons-right {
  height: 43px;
  float: right;
}

.taskbar .icons-right #wifi {
  height: 43px;
  width: 49px;
  background-image: url("https://raw.githubusercontent.com/gcazin/pure-css-windows-10-desktop/master/icons/wifi.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.taskbar .icons-right #sound {
  height: 43px;
  width: 49px;
  background-image: url("https://raw.githubusercontent.com/gcazin/pure-css-windows-10-desktop/master/icons/volume.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.taskbar .icons-right .datetime {
  display: table-cell;
  width: 70px !important;
  cursor: pointer;
  padding-top: 3px;
}

.taskbar .icons-right .datetime span {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-size: 11.3px;
  color: white;
}

.taskbar .icons-right .datetime:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-right a {
  display: table-cell;
}

.taskbar .icons-right a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-right a:not(:first-child) {
  margin-left: -4px;
}

.taskbar .icons-right .small-icons {
  width: 24px !important;
}

.zindex1 {
  z-index: 1;
}

.zindex2 {
  z-index: -1;
}
    <div class="pc">
  <img id="pc" class="d pc" src="content/img/Gabriel-Leblanc-Historic-Mac-Mac.512.png" alt="">
</div>
<div id="folder" class="folder">
  <img class="folder" src="content/img/folder.png" alt="">
</div>
<div id="bin" class="bin">
  <img class="bin" src="content/img/icons8-recycle-bin-48.png" alt="">
</div>
<div class="taskbar">
  <div class="icons">
    <div class="icons-left">
      <!-- <div class="btn-group dropup">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> -->
      <a href="start-menu-modal" id="start-menu"><i class="fab fa-windows"></i></a>
      <!-- </button> -->
      <!-- <ul class="dropdown-menu">
                        <li><button class="dropdown-item" type="button">Action</button></li>
                        <li><button class="dropdown-item" type="button">Another action</button></li>
                        <li><button class="dropdown-item" type="button">Something else here</button></li>
                    </ul>
                </div> -->
    </div>
    <div class="icons-right">
      <a href="#sound-modal" id="sound" class="small-icons"></a>
      <a href="#wifi-modal" id="wifi" class="small-icons"></a>
      <div class="datetime">
        <span class="hour">15:59</span>
        <span class="date">20/9/2023</span>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search