Adjust the ZIndex on a div through interactive clicking

Question

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is implementing the z-index functionality to ensure that the clicked window comes to the front among others. Currently, the code only allows one window to open upon clicking an icon, and subsequent clicks do not trigger any action.

let pc = document.getElementById('pc')
// Remaining JavaScript code...

// CSS styles...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    // Head content...
</head>
<body>
    // HTML structure...
    </body>

</html>

javascript html css z-index

Answer 1

Answer №1

If you want to enhance the functionality, try incorporating a class named "active" with a z-index of 2. Then, set up an eventListener on the window that includes the addition of the "active" class.

To visualize this concept, I created a Fiddle:

In my CSS, I introduced a class known as "active"

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

Subsequently, in JavaScript, I included the following code:

// This snippet makes the window active
newWindow.addEventListener("click", () => {
if (document.querySelector(".active")) {
document.querySelector(".active").classList.remove("active");
}
newWindow.classList.add("active");
})
// End of the snippet

Whenever a window is clicked, any pre-existing "active" class gets removed. Following that, the selected window receives the "active" class designation.

Answer 2

If you want to enhance the functionality, try incorporating a class named "active" with a z-index of 2. Then, set up an eventListener on the window that includes the addition of the "active" class.

To visualize this concept, I created a Fiddle:

In my CSS, I introduced a class known as "active"

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

Subsequently, in JavaScript, I included the following code:

// This snippet makes the window active
newWindow.addEventListener("click", () => {
if (document.querySelector(".active")) {
document.querySelector(".active").classList.remove("active");
}
newWindow.classList.add("active");
})
// End of the snippet

Whenever a window is clicked, any pre-existing "active" class gets removed. Following that, the selected window receives the "active" class designation.

Answer 3

Answer №2

Implementing dynamic z-index values

To achieve this dynamically, one approach is to maintain a global variable named zIndexCounter initialized to 0 at the start (or any other starting value of your choice). Whenever a new window is created, assign it a z-index value equal to the current counter value, then increment the counter.

This method guarantees that each subsequent window will always have a higher z-index compared to the previous one.

Answer 4

Implementing dynamic z-index values

To achieve this dynamically, one approach is to maintain a global variable named zIndexCounter initialized to 0 at the start (or any other starting value of your choice). Whenever a new window is created, assign it a z-index value equal to the current counter value, then increment the counter.

This method guarantees that each subsequent window will always have a higher z-index compared to the previous one.

Answer 5

Answer №3

I came up with an alternative approach without using z-index. Instead, I created an array to manage the order of opened windows. When a window is clicked, it moves to the end of the array, ensuring it appears on top of other windows. The old windows are removed and replaced with the rearranged new windows.

You could also incorporate zIndex, but based on my process, it's unnecessary.

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

Additionally, you can include the following code snippet inside the forEach loop:

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

/* Also make sure to add this in the double-click function */
window.style.zIndex = len();

I made quite a few modifications throughout the code:

Applied the class .new_window to simplify the selection of windows opened via double click.
Eliminated redundant functions, elements, and classes within the JavaScript, HTML, and CSS sections.

// JavaScript 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 the current number of windows
const len = () => document.querySelectorAll(".new_window").length;

// Move the clicked window to the top
const toTop = (e) => {
  let windows = [...document.querySelectorAll(".new_window")]; 
  if (windows.length <= 1) return; 
  windows.forEach((elem) => elem.remove()); 
  windows.push(windows.splice(windows.indexOf(e.target), 1)[0]); 
  windows.forEach((elem) => body.appendChild(elem)); 
};
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);
  });
});

// CSS Code
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;
}
...

<!-- HTML Markup -->
<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>
...

Answer 6

I came up with an alternative approach without using z-index. Instead, I created an array to manage the order of opened windows. When a window is clicked, it moves to the end of the array, ensuring it appears on top of other windows. The old windows are removed and replaced with the rearranged new windows.

You could also incorporate zIndex, but based on my process, it's unnecessary.

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

Additionally, you can include the following code snippet inside the forEach loop:

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

/* Also make sure to add this in the double-click function */
window.style.zIndex = len();

I made quite a few modifications throughout the code:

Applied the class .new_window to simplify the selection of windows opened via double click.
Eliminated redundant functions, elements, and classes within the JavaScript, HTML, and CSS sections.

// JavaScript 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 the current number of windows
const len = () => document.querySelectorAll(".new_window").length;

// Move the clicked window to the top
const toTop = (e) => {
  let windows = [...document.querySelectorAll(".new_window")]; 
  if (windows.length <= 1) return; 
  windows.forEach((elem) => elem.remove()); 
  windows.push(windows.splice(windows.indexOf(e.target), 1)[0]); 
  windows.forEach((elem) => body.appendChild(elem)); 
};
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);
  });
});

// CSS Code
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;
}
...

<!-- HTML Markup -->
<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>
...

Adjust the ZIndex on a div through interactive clicking

Answer №1

Answer №2

Implementing dynamic z-index values

Answer №3

Similar questions

The property being set in Angular is undefined, causing an error

How can I fix the position of the close button when using the paper component of a modal in material ui to ensure responsiveness on the screen

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

Which approach is more impactful: consistently sending an ajax request or breaking down the result within a function?

Customizing the appearance of two separate tables

Ways to prevent users from pushing multiple child data or adding more than one child to a specific child in the Firebase database

jQuery Files in Conflict

Tips for incorporating line breaks into a contenteditable div using the key combination of ctrl + enter

Decrease the size of the "subscribe" button

Unable to render Material Icons on Vue/Quasar web app hosted on Azure

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

Implementing a Slide animation in React

A guide on incorporating dynamic formControlName functionality into AngularJs2

Tips for accessing values from a bs4 result set in Beautiful Soup?

Sending STATIC_URL to Javascript file in Django

Listening to React events on multiple elements in an array

In Visual Studio, make sure to include a reference to AngularJS.min.js within another JavaScript file

Managing Actions in React-Redux: Understanding the Dispatch Function

What is the method for determining the width of a Mat-Table once it has been displayed?

Both if and else statements are carrying out code in JavaScript/jQuery