Cant get fittext.js to work?!

Cant get the fittext.js jquery plugin to work, anyone know why?

<section class="content home">
	<a href="about.php" class="about">
		<h2 class="heading one">About</h2>
	</a>
	<a href="work.php" class="work">
		<h2 class="heading two">Work</h2>
	</a>
</section>
<section class="content home">
	<a href="blog.php" class="blog">
		<h2 class="heading three">Blog</h2>
	</a>
	<a href="contact.php" class="contact">
		<h2 class="heading four">Contact</h2>
	</a>
</section>

	<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 	<script src="js/jquery.fittext.js"></script>
	<script type="text/javascript">
		$(".heading").fitText();
	</script>

</body>

</html>
section{
width: 100%;
}

a{
display: block;
float: left;
width: 50%;
}

        h2{
            width: 100%;
            text-transform: uppercase;
            display: block;
            text-align: left;
            line-height: 69%;
            font-size: 250px/1;
        }

Hi,

This works for me.
Check your path to the fittext.js plugin.

Hmm I don’t know what im doing wrong or missing then… because it doesnt work for me and i have checked the paths etc a million times. Going crazy =/

Can you post a link to a page where this is not working?

Or, as the fittext.js plugin is very small, just copy this code and run it.
This works for me.

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>fittext.js example</title>
    <style>
      section{ width: 100%; }
      a{ display: block; float: left; width: 50%; }
      h2{ width: 100%; text-transform: uppercase; display: block; text-align: left; line-height: 69%; font-size: 250px/1; }
    </style>
  </head>

  <body>
    <section class="content home">
      <a href="about.php" class="about">
        <h2 class="heading one">About</h2>
      </a>
      <a href="work.php" class="work">
        <h2 class="heading two">Work</h2>
      </a>
    </section>
    <section class="content home">
      <a href="blog.php" class="blog">
        <h2 class="heading three">Blog</h2>
      </a>
      <a href="contact.php" class="contact">
        <h2 class="heading four">Contact</h2>
      </a>
    </section>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script>
      // fittext.js plugin
      (function($){
        $.fn.fitText = function(kompressor, options){
          var compressor = kompressor || 1,
              settings = $.extend({
                'minFontSize' : Number.NEGATIVE_INFINITY,
                'maxFontSize' : Number.POSITIVE_INFINITY
              }, options);

          return this.each(function(){
            var $this = $(this);
            var resizer = function () {
              $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
            };
            resizer();
            $(window).on('resize orientationchange', resizer);
          });
        };
      })( jQuery );
    </script>

    <script type="text/javascript">
      $(".heading").fitText();
    </script>
  </body>
</html>

thanks for the tip, by pasting the scipt directly i the file it worked.

Hi,

If that worked for you, it would indicate that something was wrong with the path to the external file or to the contents of the file itself.