How to set diffedert parameter for resizable elements in jQuery UI

I work with the dragable and resizable elements, and i have 2 types of box on page, small without image, and big with image.

For this 2 element i have resizable text on box, i create func when user start to resize element withd of text are changing, for big box it's working normal, for small no.

I fond the problem here:

 $('.box').resizable({
          minWidth: 50,
          minHeight: 44,
          maxWidth: 205,
          maxHeight: 87,
          resize: function(event, ui) {
            var size = ui.size;
            $(this).children().css('font-size', (size.width * size.height) / 580 + 'px');
            $(this).css('font-size', (size.width * size.height) / 580 + 'px');
          }
        });

For small box i want to set this paramater:

$('.box').resizable({
          minWidth: 20,
          minHeight: 24,
          maxWidth: 100,
          maxHeight: 87,
          resize: function(event, ui) {
            var size = ui.size;
            $(this).children().css('font-size', (size.width * size.height) / 580 + 'px');
            $(this).css('font-size', (size.width * size.height) / 580 + 'px');
          }
        });

If i set different parameter for small element than it's working normal. How i can set different parameter for objects. Plus i have dynamically creation of object in the view.

My code - jsFiddle

Solution 1:

I have worked on your example here: https://jsfiddle.net/Twisty/czhLjtud/12/

JavaScript

$(function() {
  function calcFont(s) {
    var result = Math.round((s.width * s.height) / 580);
    return result + "px";
  }

  $('.lpms3-box').draggable();

  $('.lpms3-box > .box').resizable({
    minWidth: 50,
    minHeight: 44,
    maxWidth: 205,
    maxHeight: 87,
    resize: function(event, ui) {
      var newFont = calcFont(ui.size);
      console.log(ui.size.width, ui.size.height, (ui.size.width * ui.size.height) / 580, "Set new font: " + newFont);
      $(this).css('font-size', newFont);
    }
  });
});

This appears to work for both boxes. It's not clear why it is not working for you.

For math, it is best to wrap all parts in ( and ) before appending any string items. So for example:

(size.width * size.height) / 580 + 'px'

This code is sort of ambiguous, + may be read as the wrong operator. I suggest this:

((size.width * size.height) / 580) + 'px'

This way the code knows the proper operations and will use + as the concat operator and not the addition operator.