Monday, November 19, 2012

Dynamic Font resize using jQuery

You can change font size of your entering text when it display somewhere. Element ids, classes and variable names are declared as my app. You can change them as you wish.

var font_size=40;
$("#front_text").keyup(function(){
   $("#preview_text").text($("#front_text").val());
   var front_length = $("#preview_text").text().length;
   if(front_length < 5){
    $("#preview_text").css("font-size",font_size+"px");    
   }else if(front_length >= 5 && front_length < 10){ 
    $("#preview_text").css("font-size",(font_size-10)+"px");
   }else if(front_length >= 10 && front_length < 15){
    $("#preview_text").css("font-size",(font_size-20)+"px");
   }else if(front_length >= 15 && front_length < 20){
    $("#preview_text").css("font-size",(font_size-25)+"px");
   }else{
    $("#preview_text").css("font-size",(font_size-29)+"px");
   }
});​

No comments:

linkwithin

go