Looking to seamlessly transfer a div from one container to another.
I've got the CSS and HTML code ready for you to assist me, here is the snippet:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#myDIV {
border: 1px solid black;
margin-bottom: 10px;
width: 500px;
height: 300px;
box-sizing: border-box;
border: solid #000 2px;
background-color: #d12;
}
.ZE {
position: fixed;
width: 400px;
height: 100px;
background-color: #73AD81;
overflow: hidden;
border-radius: 20px 60px;
border: 2px solid #965D31;
}
.ZE.left {
top: 50%;
transform: translateY(-50%);
}
.ZE.right {
right: 0;
top: 50%;
transform: translateY(-50%);
}
.ZE.up {
left: 50%;
transform: translateX(-50%);
}
.ZE.down {
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
</style>
</head>
<body>
<div id="parent-div">
<div class="myDIV" id="myDIV"></div>
</div>
<script type="text/javascript">
var parent = document.getElementById("parent-div");
// for demo purposes
var data = {
isConnected: true
},
classes = ['left', 'right', 'up', 'down'];
//socket.on("isConnected", function(data) {
Receive the 'data' and confirm 'isConnected' is set to true
// loop for demo purposes
for (var i = 0; i < 4; i++) {
if (data.isConnected === true) {
parent.innerHTML += "<div class='ZE " + classes[i] + "'></div>"
}
}
//});
</script>
</body>
</html>Seeking guidance on moving the #myDIV div into the other generated divs such as ZE left ZE right. I believe it should be straightforward, but being new to this, some assistance would be appreciated.