jquery not working after resize div onclick

by

Here is a jquery to auto resize text according to #outer div width and height okay. If i change #outer div width and height manually before render HTML then its fitting text (auto resizing text) properly to #outer div. Just Like see in Example 1 and Example 2 its fitting text.

Example-1

 $.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 50; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}

$('#inner').fitInText();
#outer {
  display: table;
  width: 500px;
   height: 300px;
   transition: width 1s;
}

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    
<div id="outer">
  <div id="inner" contenteditable=true>
          We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don’t have and more on helping you learn how to find the answers within thes is less on answering questions you don’t have and mos is less on answering questions you don’t have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions.

  </div>
</div>

Example-2 with increased #outer div width and height, its still working to fit text into #outer

 $.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 50; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}

$('#inner').fitInText();
#outer {
  display: table;
  width: 700px;
   height: 400px;
   transition: width 1s;
}

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    
<div id="outer">
  <div id="inner" contenteditable=true>
          We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don’t have and more on helping you learn how to find the answers within thes is less on answering questions you don’t have and mos is less on answering questions you don’t have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions.

  </div>
</div>

But if i change #outer div width and height ratio from Jquery onclick button then its not changing text font size again and not fitting text to div.

means i want making change #outer div width and height through button then it should be working Like see Example 3, Although i added onclick="fitInText()" to button. . i want to make work it with example 3 situation.

After click on button just add any letter, space in #outer div content and see magic.

$.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 50; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}

$('#inner').fitInText();



//Jquery for change outer div width
$('.newsize').on('click', function() {
    $('#outer').toggleClass('newouter');
});
#outer {
  display: table;
  width: 500px;
   height: 300px;
   transition: width 1s;
}

#outer.newouter {
  display: table;
  width: 700px;
   height: 400px;
}

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}
<script src="code.jquery.com/jquery-1.9.1.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <button class="newsize" onclick="fitInText()"> Change Width Height </button>
    
<div id="outer">
  <div id="inner" contenteditable=true>
          We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don’t have and more on helping you learn how to find the answers within thes is less on answering questions you don’t have and mos is less on answering questions you don’t have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions.

  </div>
</div>

56 thoughts on “jquery not working after resize div onclick”

Leave a Comment