Revision: 42795
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at March 10, 2011 20:13 by atik
Initial Code
---javascript--- <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--- <div> <div id="count">145</div> <div id="barbox"><div id="bar"></div></div> </div> <textarea id="contentbox"></textarea> ---css--- #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; }
Initial URL
http://www.9lessons.info/2010/04/live-character-count-meter-with-jquery.html
Initial Description
$('#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.
Initial Title
Live Character Count Meter with Jquery
Initial Tags
jquery
Initial Language
jQuery