How To Make Live Character Count Meter with Jquery

Hei there, in this post, I want to describe you how to make live character count meter with jquery codes. This is a very simple interesting tutorial with jquery codes. You can make it easily with ten line of JavaScript code. Follow this post for doing better your web application skill. 
Character Count Meter with Jquery
Character count meter helps you to count any kind of character and words. It's a simple tool but so helpful. You just visit my demo page from below link for the experience.

Character Count Meter with Jquery

Follow codes appear below for making live count meter. Ok, let's see how can you make it.

JavaScript Code
$('#contentbox').keyup(function(){} - contentbox is the ID of the textbox. 
Using $(this).val() getting the textbox value. bar is the div ID of the count meter $('#bar').animate() increasing the width.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;

if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Full ');
}
return false;
});

});
</script>

HTML Code
<div>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>
CSS Code
#bar
{
background-color:#5fbbde;
width:0px;
height:16px;
}
#barbox
{
float:right; 
height:16px; 
background-color:#FFFFFF; 
width:100px; 
border:solid 2px #000; 
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#count
{
float:right; margin-right:8px; 
font-family:'Georgia', Times New Roman, Times, serif; 
font-size:16px; 
font-weight:bold; 
color:#666666
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
These are the code which can help you to make lice character count meter with JavaScript. Enjoy it and let me know about your experience.

About luthfar rahman

Luthfar Rahman is a founder of "Guide to Blogging and Tech" ,He is a Blogger and Studying CSE at "North South University".Follow me on Facebook ,Google+ and Twitter.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment