Question

I have created a reiszable box using jQuery UI and I then pass the values to a text box. The values can be in either CM or Inches.

The problem I have is when you drag the size after selecting Centimeters from the unit_type box, It reverts back to Inches. I think I just need to rethink the logic on it and remap it all out.

Can anyone help on this..?

Code is…

$(function()
{
    $("#resizable").resizable({
        aspectRatio: 16 / 9,
        maxWidth:  $("#max_width").val(),
        maxHeight: $("#max_height").val(),
        resize: function() {

            var widthInch = $("#resizable").width() / 200;
            var heightInch = $("#resizable").height() / 200;

            $("#unit_type").change(function()
            {
                var widthCM = $("#resizable").width() / 200 * 2.54;
                var heightCM = $("#resizable").height() / 200 * 2.54;

                $(".width").val(widthCM + '' + ' CM');
                $(".height").val(heightCM + '' + ' CM');
            })

            var widthCM = $("#resziable").width() / 200 * 2.54;
            var heightCM = $("#resizable").height() / 200 * 2.54;

            $(".width").val(widthInch + '' + ' Inches');
            $(".height").val(heightInch + '' + ' Inches');
        }
    });
})

Thanks

Answer 1

The problem lies in where you are calculating the size. The best solution is to pull this out into a new function and then call that function when the box is resized or the unit is changed. Something like this should work. (You’ll have probably modify it to fit your exact markup as I made some assumptions.)

$(function()
{
    $("#resizable").resizable({
        aspectRatio: 16 / 9,
        maxWidth:  $("#max_width").val(),
        maxHeight: $("#max_height").val(),
        resize: updateSize
    });
})

$("#unit_type").change(updateSize);

function updateSize() {
   unit = $("#unit_type").val();
   if(unit == "in") {
            var widthInch = $("#resizable").width() / 200;
            var heightInch = $("#resizable").height() / 200;

            $(".width").val(widthInch + '' + ' Inches');
            $(".height").val(heightInch + '' + ' Inches');
   } else if(unit == "cm") {
            var widthCM = $("#resizable").width() / 200 * 2.54;
            var heightCM = $("#resizable").height() / 200 * 2.54;

            $(".width").val(widthCM + '' + ' CM');
            $(".height").val(heightCM + '' + ' CM');
   }
}