SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cant get fittext.js to work?!

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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 =/

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Can you post a link to a page where this is not working?

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    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>

  6. #6
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by ReGGaeBOSS View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •