I'm currently working on an HTML page that features a draggable and zoomable grid.
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="main">
<div id="top_div">
<!-- some GUI -->
</div>
<div id="central_container">
<div id="grid_container_static">
<div id="grid_container_movable">
<table id="grid">
</table>
</div>
</div>
</div>
<div id="bottom_div">
<!-- some GUI -->
</div>
</div>
<script>
$( function() {
$("#grid_container_movable").draggable();
});
</script>
Relevant CSS:
<style>
body, html{
margin: 0px;
display: flex;
flex-direction: column;
}
* {
box-sizing:border-box;
}
body{
height: 100%;
}
#header{
background-color: green;
flex-grow: 1;
}
#central_container{
background-color: red;
min-height: 60%;
max-height: 60%;
}
#grid_container_static{
overflow: hidden;
}
</style>
The cells of the table are dynamic square tiles styled with the .tile class. If the total size of the grid exceeds the space within the grid_container_static, the excess is hidden behind the parent elements without affecting them. The user can drag the grid to reveal the hidden portions successfully.
To enhance this functionality, I've created a zoom function using JavaScript that adjusts the size of the grid tiles when the user scrolls the mouse wheel:
<script>
window.addEventListener("wheel", event => {
const delta = Math.sign(event.deltaY);
if(delta < 0){
current_tile_size ++;
}else{
if(current_tile_size > 1){
current_tile_size --;
}
}
var tiles = document.getElementsByClassName('tile');
for(var i = 0; i < tiles.length; i++){
tiles[i].style.width = current_tile_size+"em";
tiles[i].style.height = current_tile_size+"em";
}
});
</script>
While this script works as intended, it inadvertently affects the parents' heights when changing the tile size. My goal is to modify the zoom function to only impact the grid itself, ensuring that any excess remains hidden behind the parent elements without altering their dimensions. How can I achieve this?