CODEWITHSUNDEEP
javascripthtmljquery
RR Suthar
RR Suthar

Reputation: 653

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

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.

Upvotes: 0

Views: 90

Answers (2)

SidPro
SidPro

Reputation: 423

<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`;
}

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

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>

Upvotes: 1

Related Questions