Button onClick in not working with this JS or trigger jquery Resizable Font-size programmatically?

Question

Here is a resizable UI plugin JS that is working fine with mouse click & drag.
It's changing it's font-size with mouse. Meaning, when I change the width or height of my div with id="chartdiv" from mouse corner then it is changing the font-size correctly. However, when I change the width or height of my div with id="chartdiv" from button onClick, then it's not working.
I want to use this font-size resizable feature from Button.

For this query I already visited to this answer: How to trigger jquery Resizable resize programmatically? but there is not font-size function

What mistake am I making here?

Below is my code:

<!DOCTYPE html>
<html>
<head>
    <style>
        .resize{
    font-size: 2.8vh;
    white-space: nowrap;
    color: black;
    background: yellow;
    cursor: move;
    width: 300px;
    height: 130px
}

 .resize:focus {
   width: 500px;  }

    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>

 <button type="button" onClick = "document.getElementById('chartdiv').style.width = '600px';">Click Me!</button>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
    <script type="text/javascript">
        $('.resize').resizable( {
minWidth: 210,
minHeight: 120,
resize: function( event, ui ) {
        // handle fontsize here
        var size = ui.size;
        // something like this change the values according to your requirements
        $( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' ); 
    }
} );
    </script>
</body>
</html>

Thanks in advance.

when you resize div it trigger resize event with function that you have written, but when you click on button it explicitly set style width not resize event.to do this you have to write separate function for button. — SidPro, Dec 22 '20 at 13:46

SidPro · Answer 1 · 2020-12-22T14:20:30.970

1

<button type="button" onClick = "ResizeWithButton();">Click Me!</button>

function ResizeWithButton(){
     var x = document.getElementById('chartdiv');
     x.style.width = '600px';
     var rect = x.getBoundingClientRect();
     x.style.fontSize = `${(rect.width * rect.height)/2800}px`;
}

edited Dec 22 '20 at 14:20

answered Dec 22 '20 at 13:51

SidPro

428
1
5
16

score 1 · Accepted Answer · answered Dec 22 '20 at 13:53

Following creates a simple jQuery plugin function fontResize() that can be used in both instances

$.fn.fontResize = function() {
  return this.each(function() {
    const $el = $(this);
    $el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
  });
}

$('button.do-resize').click(function(){
   $('#chartdiv').width(600).fontResize()// use plugin function
})


$('.resize').resizable({
  minWidth: 210,
  minHeight: 120,
  resize: function(event, ui) {   
    $(this).fontResize();// use plugin function
  }
});

<!DOCTYPE html>
<html>

<head>
  <style>
    .resize {
      font-size: 2.8vh;
      white-space: nowrap;
      color: black;
      background: yellow;
      cursor: move;
      width: 300px;
      height: 130px
    }
    
    .resize:focus {
      width: 500px;
    }
  </style>
  <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>

<body>

  <button class="do-resize"  type="button" >Click Me!</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
  <div class="resize" id="chartdiv">Some name that is very long</div>


</body>

</html>

Hello @charlietfl plz tell me can i make this resize with smooth animation ? and how ? — RR Suthar, Dec 22 '20 at 14:01
Check out jQuery `animate()` https://api.jquery.com/animate/ — charlietfl, Dec 22 '20 at 14:03

Button onClick in not working with this JS or trigger jquery Resizable Font-size programmatically?

2 Answers2