Struggling to implement a zoom in/out feature on my web app using the jqueryUI slider.
Having trouble handling cases where the parent div shrinks too much, causing issues with the child containers.
<div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
<div class="conflicted inline-block originator">
<div class="right-number">I should stay</div>
<div class="left-number">I should stay</div>
<div class="middle-number">I Should disapper</div>
</div>
</div>
Code snippet is available at http://jsfiddle.net/aQKwE/
The aim is to resize the parent div ('puck' class) using a jquery slider or similar method. However, as the div shrinks, the contained divs become messy.
The goal is to dynamically remove the middle child div if space becomes limited, allowing the left and right child divs to expand accordingly.
If the container gets even smaller, the plan is to eliminate the right div next, leaving only the left one visible.
In extreme cases, all content should be hidden so only the parent background is displayed.
Seeking a CSS solution rather than writing additional Javascript to individually hide each child div when needed.
Any suggestions?