3 Replies Latest reply on Jan 15, 2014 7:38 AM by resdesign

    How can I make the fittext.js plugin work?

    wrongtarget

      Hello!
      I'm a newbie on Edge, so please bear with me.
      I've been trying to make the fittext.js plugin (http://fittextjs.com/) work on my project but is not doing anything in preview.

      This is what I have on my Stage on creation complete:

       

       

        yepnope( { load: "edge_includes/jquery.fittext.js" } );

       

       

       

       

      $("h1").fitText();

       

       

      I have my text elements as h1. I tried doing it with ids ( $("#title").fitText(); ) instead and I still get no result.
      Am I missing something?

       

      Thanks!

        • 1. Re: How can I make the fittext.js plugin work?
          wrongtarget Level 1

          I seemed to be making some kind of progress with this code

           

           

            yepnope(

          {

                    nope:[

                    'edge_includes/jquery.fittext.js',

                    ],

                    complete: init

          }

          );

           

           

           

           

          function init() {

            $("h1").fitText();

          }

           

           

           

          The text is showing small now :S So SOMETHING must be happening. It is not resizing with my window though

          • 2. Re: How can I make the fittext.js plugin work?
            wrongtarget Level 1

            Solved by adding Sarah's scale-to-fit code. Can somebody check the page here and give me some feedback? Thanks! http://wrongtarget.com/patria/
            My creationComplete looks like this now:

             

             

              yepnope(

            {

                      nope:[

                      'edge_includes/jquery.fittext.js',

                      ],

                      complete: init

            }

            );

            sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

            "transform-origin":"0 0",

            "-ms-transform-origin":"0 0",

            "-webkit-transform-origin":"0 0",

            "-moz-transform-origin":"0 0",

            "-o-transform-origin":"0 0"

            });

             

             

            function scaleStage() {

                var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

                var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

             

             

                var parentWidth = stage.parent().width(); // Get the parent of the stage width

                var parentHeight = $(window).height(); // Get the browser window height

             

             

                var stageWidth = stage.width(); // Get the stage width

                var stageHeight = stage.height(); // Get the stage height

             

             

                var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

                var desiredHeight = Math.round(parentHeight * 1); // Set the new height of the stage as it scales

             

             

                var rescaleWidth = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

                var rescaleHeight = (desiredHeight / stageHeight); // Set a variable to calculate the new height of the stage as it scales

             

             

                var rescale = rescaleWidth;

             

             

                if (stageHeight * rescale > desiredHeight) // Do not scale larger than the height of the browser window

                                rescale = rescaleHeight;

             

             

            // Rescale the stage!

                       stage.css('transform', 'scale(' + rescale + ')');

                 stage.css(  '-o-transform', 'scale(' + rescale + ')');

                       stage.css('-ms-transform', 'scale(' + rescale + ')');

                 stage.css('-webkit-transform', 'scale(' + rescale + ')');

                       stage.css('-moz-transform', 'scale(' + rescale + ')');

                 stage.css('-o-transform', 'scale(' + rescale + ')');

                       parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

            }

             

             

            // Make it happen when the browser resizes

            $(window).on('resize', function(){

                       scaleStage();

            });

             

             

            // Make it happen when the page first loads

            $(document).ready(function(){

                scaleStage();

            });

             

             

             

             

            function init() {

              fitText();

            }

             

            1 person found this helpful
            • 3. Re: How can I make the fittext.js plugin work?
              resdesign Adobe Community Professional & MVP

              it's working great!