Search code examples
javascripthtmlcssz-index

Change ZIndex dynamiclly by clicking on a div

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>

Solution

  • 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.