CODEWITHSUNDEEP
javascriptjquery
blsn
blsn

Reputation: 1093

Calling script inside jquery code

The following code should trigger on change toggle containers that showing resized text to fit into a box.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://jquery-textfill.github.io/jquery-textfill/jquery.textfill.min.js"></script>

<script>
$(function(){
  $(".clsNumber").textfill();
});
</script>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".clsToggle").slideToggle();
  });
});
</script>
</head>

<body>
  <div class="clsToggle">
    <div class="clsNumber" style="width:100px; height:50px; background-color:red;">
      <span>One</span>
    </div>
  </div>
  <div class="clsToggle" style="display:none;">
    <div class="clsNumber" style="width:100px; height:50px; background-color:green;">
      <span>Two</span>
    </div>
  </div>
  <button>click me</button>
</body>

I would like that the resized text will work for both toggle containers.

Any reason why the hidden box (display:none;) ignores the other script (jQuery TextFill)?

Upvotes: 0

Views: 69

Answers (1)

Gurjaspal
Gurjaspal

Reputation: 74

Change the document.ready code with the following

$(document).ready(function(){
  $("button").click(function(){
    $(".clsToggle").slideToggle();
     $(".clsNumber").textfill();
  });
});

Please find the complete code here

Upvotes: 1

Related Questions