Twitter has a nice feature in which it will show how many characters remaining of your tweet. It also limits the characters to only 160. In this post i will show you how to do twitter like count remaining character using Jquery.
It is very interesting and easy to code. Use it to enrich your web application.
The Html
This is our html file. Simple enough, just using textarea, button and a span to dynamically change the number of remaining characters.
|
1 2 3 4 5 6 7 8 |
<body> <div id="box"> <p>(Maximum Allowed Characters : 160)</p> <p><textarea id="area" rows="10" cols="40"></textarea></p> <span id="message"> 160 </span> Characters Remaining <input type="button" id="tweet" value="Tweet"/> </div> <body> |
The Java Script
On the first load page of our count remaining character using jquery, we set the button to be disabled and also when the characters is greater than 160 or equal or less than 0. There are two other methods that are invoked when characters are greater than 160 or equal or less than 0, it is a method to make the text inside textarea become line through and a method to make the number of remaining characters become red.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tweet").attr("disabled","disabled"); $("#area").keyup(function(){ var chars=$(this).val().length; $("#message").text(160-chars); if(chars > 160 || chars <=0){ $("#tweet").attr("disabled","disabled"); $("#message").addClass("minus"); $(this).css("text-decoration","line-through"); }else{ $("#tweet").removeAttr("disabled"); $("#message").removeClass("minus"); $(this).css("text-decoration",""); } }); }); </script> |
The CSS
This Css make our web application looks beautiful, not only a white page. .minus class is added and removed dynamically when application is running. It depends on remaining characters, whether remaining characters are greater than 160 or equal to or less than zero like i said above.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style type="text/css"> #box{ width:400px; height:230px; background-color: pink; margin:50 auto 0; padding-top:20px; padding-left:40px ; } p{ margin: 0; } #area{ margin-bottom: 10px; } #tweet{ margin-left: 130px; } .minus{ color: red; } </style> |
Here’s some screenshot of our web app
You can try the Demo
