CODEWITHSUNDEEP
jqueryhtmlcss
Sema
Sema

Reputation: 21

Convert px to mm and Keep in mm

I have a 100mm x 100mm <div>.

When I call .resizable(), this <div> is turning into a pixel value.

What should I do in order for it to be mm when it changes size?

The example code i had done is as follows:

https://jsfiddle.net/SemaK/b4h0f3dr/

$(document).ready(function() {
  $('#div1').resizable().draggable();


  (function($) {
    $.fn.toMillimeters = function() {
      var element = this,
        width = parseInt(element.css('width')),
        height = parseInt(element.css('height')),
        millimeters = {};
      millimeters.width = Math.floor(width * 0.264583);
      millimeters.height = Math.floor(height * 0.264583);

      return millimeters;
    };
  })(jQuery);

  $(function() {
    var mmLength = $('#div1').toMillimeters();
    $('#output').text('Width: ' + mmLength.width + ' mm ' +
      'Height: ' + mmLength.height + ' mm');
  });


});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<div id="output" style="height: 10mm; width: 80mm; background-color: #5bc0de"></div>
<div id="div1" style="width:80mm; height:80mm; background-color:#9d9d9d">
</div>

Upvotes: 2

Views: 1914

Answers (1)

Marco
Marco

Reputation: 644

try this formula :

  millimeters.width = Math.floor((width * 25.4) / dpi);
  millimeters.height = Math.floor((height * 25.4) / dpi);

Upvotes: 1

Related Questions