Arem Daesh Aref Slash
KPCKevin Powell - Community
•Created by Arem Daesh Aref Slash on 10/17/2024 in #front-end
Design Dynamic "Panel" component approach?
ok, i'll just manipulate the dom. thanks
19 replies
KPCKevin Powell - Community
•Created by Arem Daesh Aref Slash on 10/17/2024 in #front-end
Design Dynamic "Panel" component approach?
style.css
.div1 {
background-color: green;
z-Index: 1;
}
.div2 {
background-color: blue;
z-Index: 2;
}
.box {
position: absolute;
width: 500px;
height: 100px;
}
button {
border-style: solid;
border-color: black;
border-width: 3px;
font-size: 28px;
margin-bottom: 1ch;
}
19 replies
KPCKevin Powell - Community
•Created by Arem Daesh Aref Slash on 10/17/2024 in #front-end
Design Dynamic "Panel" component approach?
Thanks for hint re: template tag. I checked it out.
I'm not looking to use this technique to design my overall app - just need to change the panel without needing to reload the page (ssr: a reload would output the correct panel content).
The code I have below works in principal - here it is swapping two colored boxes.
What do you think of that. Again, it's only point is to avoid a page-load to update a small part of the overall page.
Your review? Thanks
Here is the code I have working:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<h1>Preview</h1>
<button id="z-toggle" style="margin-bottom:2ch ;">Toggle z-order</button>
<div>
<div id="div1" class="box div1"></div>
<div id="div2" class="box div2"></div>
</div>
</body>
</html>
<script>
// window.onload = () => {
const button = document.getElementById("z-toggle");
button.addEventListener("click", (ev) => {
console.log("click");
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const tmp1 = window.getComputedStyle(div1).zIndex;
const tmp2 = window.getComputedStyle(div2).zIndex;
// console.log(
tmp1: ${tmp1});
// console.log(tmp2: ${tmp2});
div1.style.zIndex = tmp2;
div2.style.zIndex = tmp1;
// console.log( window.getComputedStyle(div1).zIndex);
// console.log( window.getComputedStyle(div2).zIndex);
})
// }
</script>19 replies