0

I have a div with width: 200px and I am adding text in it dynamically, I want the text to fit in this div but the text is getting out. I have tried to change the font size on character count but it does not work in all cases, like if string contains character with more width like W or M, the text goes out of the div.
Below is my code

if(cs >= 1 && cs <= 4) {
 if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({'margin-top':'-162px'});
        $('#overlay_image_text').css({'font-size':60+'px'});
    }else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({'margin-top':'-154px'});
        $('#overlay_image_text').css({'font-size':48+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else
    {
        $('#overlay_image_text').css({'margin-top':'-162px'});
        $('#overlay_image_text').css({'font-size':60+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }
 }
 else if(cs == 5) {
   if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({'margin-top':'-152px'});
        $('#overlay_image_text').css({'font-size':54+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({'margin-top':'-143px'});
        $('#overlay_image_text').css({'font-size':45+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else
    {
        $('#overlay_image_text').css({'margin-top':'-143px'});
        $('#overlay_image_text').css({'font-size':45+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }
}
2
Contributors
2
Replies
15
Views
1 Year
Discussion Span
Last Post by AleMonteiro
1

Just a remark about your code, it would be much more elegant and performatic like this:

 var $overlay = $('#overlay_image_text'),
    engraving = this.engravingFontCaseSenstiveOptions(cText);

 if( engraving == "Lower")
    {
        $overlay.css({
            'margin-top':'-162px',
            'font-size':60+'px'
        });
    }else if(engraving == "Upper")
    {
        $overlay.css({
            'margin-top':'-154px',
            'font-size':48+'px',
            'margin-left':'0px'
        });
    }
    .
    .
    .

In general notes, evit calling the same function over and over again. And every time you all $("#") or .css({}) you're executing a function. This take serious effect if inside a large loop. Obs.: you should cache the var outside the loop but not in the global namespace, store somewhere it will not have attachaments as soon as possible.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.