In the process of creating a grid UI, I want users to be able to click on cells and scale them.
Intended Outcome:
- Cells should be prevented from scaling out of the container and being cropped.
- Cells can overlap with one another when scaled.
- Only one cell needs to be scaled at a time, although this is not a top priority.
Undesired Behavior: (parts of cell O disappear) Desired Behavior: https://i.sstatic.net/4Ipgy.png
My Strategy:
My plan is to use the transform: scale() translate() properties simultaneously to achieve the desired effect. This can be observed with cell N (translateY(22px)).
Challenges:
This method does not scale effectively when there are 9 cells, let alone the 90 cells in my real use case.
The container must have an overflow: hidden setting. Scrolling is not an acceptable solution.
My Inquiry:
It seems like my current approach to solving this problem is quite basic, and there may be a more efficient way to accomplish this programmatically.
Is there a more effective method to construct such a UI? (I am open to utilizing plugins or trying alternative methods).
If not, what is a recommended way to script this using jQuery?
$(function() {
$(".cell").click(function() {
$(this).toggleClass("zoom-in");
});
});.grid {
width: 300px;
height: 300px;
background: gray;
overflow: hidden;
}
.cell {
background: tomato;
width: 30%;
height: 30%;
margin: 5px;
float: left;
text-align: center;
z-index: 999;
transition: all 0.2s ease-in-out;
}
.zoom-in {
transform: scale(2);
transition: all 0.2s ease-in-out;
}
#nord {
background-color: white;
}
#nord.zoom-in {
transform: scale(2) translateY(22px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> Click white and red cells to scale. Click again to revert.</div>
<div class="grid">
<div class="cell">NW</div>
<div id="nord" class="cell">N</div>
<div class="cell">NO</div>
<div class="cell">W</div>
<div class="cell">C</div>
<div class="cell">O</div>
<div class="cell">SW</div>
<div class="cell">S</div>
<div class="cell">SO</div>
</div>