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