CSS Scale and Transform causing overlaps

user_4543584 0
Viewed 770

In HTML page I am trying to achieve zoom functionality using CSS transform scale property. Inside the HTML page, I am having more div elements and all are placed using absolute position technique. Then I apply the scale property to each div and I was able to see like zoom but all div positions gots collapsed each other. So how to avoid collapse and maintain the gap between each other after applied scaling.

Please suggest me how to stop overlapping and how to calculate left and top position of each element accordingly to scale property.

var zoomScale = 1;

$(document).ready(function(){
  
  $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
    $(".zoomable").each(function(index){
      var left = $(this).position().left;
      var top = $(this).position().top;
      var newLeft = left*zoomScale +"px";
      var newTop = top*zoomScale +"px";
      $(this).css('transform',' scale('+zoomScale+','+zoomScale+')')
    });
  }

  function dispStatus(){
    $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }
  
  dispStatus();
  
});
#container{
     width:500px;
     height:500px;
     border:1px solid red;
     position:relative;
     overflow:auto;
}
.zoomable{
  background-color:lightblue;       
  border:1px solid red;
  width:100px;
  height:100px;
  position:absolute;
  transform-origin: top left;      
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>
<div id="displayStatus"></div>
<br/><br/>
<div id="container">
   <div class="zoomable">First Div</div>
   <div class="zoomable" style="left:105px">Second Div</div>
</div>

JSFiddle Link

css-transforms css html jquery javascript
1 Answers

You can add .zoomable div into one more parent (called .inner-container) and add zoom functionality to it. So that .container div will not get zoomed and zoomable div will maintain position.

See the Snippet below:

var zoomScale = 1;
$(document).ready(function(){
  $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
      $(".inner-container").css('transform',' scale('+zoomScale+','+zoomScale+')');
  }

 
  function dispStatus(){
   $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }

  dispStatus();

});
    
    .zoomable{
      background-color:lightblue;       
      width:100px;
      height:100px;
      position:absolute;
      border:1px solid red;
    }
    #container{
    width:500px;
    height:500px;
    border:1px solid red;
    position:relative;
    overflow:auto;
    }
    .inner-container{
      transform-origin: top left; 
    }
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>

<div id="displayStatus"></div>
<br/><br/>

<div id="container">
  <div class="inner-container">
    <div class="zoomable">First Div
    </div>
    <div class="zoomable" style="left:105px">Second Div
    </div>
  </div>
</div>
<br/><br/>

You can also test it here

user_84405980
Related