Function to get the font and calculate the width of the string not working on first instance

Posted by user3627265 on Stack Overflow See other posts from Stack Overflow or by user3627265
Published on 2014-05-27T03:22:30Z Indexed on 2014/05/27 3:25 UTC
Read the original article Hit count: 125

Filed under:
|
|
|
|

I'm trying to calculate the width of the string based on the font style and size. The user will provide the string, the font style and the font size, and then after giving all the data the user will hit the submit button and the function will trigger. Basically this script works but only when the submit button is hit twice or the font is selected twice,. I mean if you selec DNBlock as a font, it will not work for first time, but the second time you hit submit, it will then work. I'm not sure where is the problem here, but when I used the default font style like Arial, times new roman etc it works perfectly fine. Any Idea on this? I suspected that the font style is not being rendered by the script or something. Correct me if I'm wrong. Thanks

     //Repeat String        
          String.prototype.repeat = function( num )
          {
              return new Array( num + 1 ).join( this );
          }

          //Calculate the width of string
          String.prototype.textWidth = function() {

              var fntStyle = document.getElementById("fntStyle").value;

              if(fntStyle == "1")
              {
                  var fs = "DNBlock";
              }
              else if(fntStyle == "2")
              {
                  var fs = "DNBlockDotted";
              }
              else if(fntStyle == "3")
              {
                  var fs = "DNCursiveClassic";
              }
              else if(fntStyle == "4")
              {
                  var fs = "DNCursiveDotted";
              }

              else if(fntStyle == "5")
              {
                  var fs = "FoundationCursiveDots-Regul";
              }


            var f = document.getElementById("fntSize").value.concat('px ', fs), 
                o = $('<div>' + this + '</div>')
                      .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
                      .appendTo($('body')),
                w = o.width();

            o.remove();

            return w;
          }


//Trigger the event
         $("#handwriting_gen").submit(function () {

                var rptNO = parseInt($('#rptNO').val());

                  $("[name='txtLine[]']").each(function(){

                      alert(this.value.repeat(rptNO).textWidth());
                      if(this.value.repeat(rptNO).textWidth() > 1000)
                      {
                        $(this).focus();
                        $(this).css({"background-color":"#f6d9d4"}).siblings('span.errorMsg').text('Text is too long.');
                        event.preventDefault();

                      }                    
                });                
               });

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery