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
– SidPro, Commented Dec 22, 2020 at 13:46

charlietfl · Accepted Answer · 2020-12-22 13:53:11Z

1

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>

answered Dec 22, 2020 at 13:53

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RR Suthar Over a year ago

Hello @charlietfl plz tell me can i make this resize with smooth animation ? and how ?

charlietfl Over a year ago

Check out jQuery animate() api.jquery.com/animate

RR Suthar Over a year ago

can you help me to add this plzzzzzzzzzzzzzz.

SidPro · Accepted Answer · 2020-12-22 14:20:30Z

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, 2020 at 14:20

answered Dec 22, 2020 at 13:51

SidPro

4431 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related