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