Cant get fittext.js to work?!

**ReGGaeBOSS** · May 7, 2013 05:32

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

Code HTML4Strict:

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

Code CSS:

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

**Pullo** · May 7, 2013 05:54

Hi,

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

**ReGGaeBOSS** · May 7, 2013 07:47

Originally Posted by Pullo

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 =/

**Pullo** · May 7, 2013 08:00

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

**Pullo** · May 7, 2013 10:36

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

Code:

<!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>

**ReGGaeBOSS** · May 7, 2013 18:52

Originally Posted by Pullo

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

Code:

<!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.

**Pullo** · May 7, 2013 22:28

Hi,

Originally Posted by ReGGaeBOSS

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

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.

User Tag List

Thread: Cant get fittext.js to work?!

Thread Tools

Display

Cant get fittext.js to work?!

Bookmarks

Bookmarks

Posting Permissions