Calling script inside jquery code

Question

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)?

Gurjaspal · Accepted Answer · 2014-05-10 18:43:14Z

1

Change the document.ready code with the following

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

Please find the complete code here

answered May 10, 2014 at 18:43

Gurjaspal

742 bronze badges

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

Collectives™ on Stack Overflow

Calling script inside jquery code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related