Twitter Like Count Remaining Character Using Jquery

1

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.

flash_live_system_ip_ver1_3_icon_33

Live Demo

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.

<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.

<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.

<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
Count Remaining Character Using Jquery

You can try the Demo
flash_live_system_ip_ver1_3_icon_33

Live Demo

Advertisements

2 thoughts on “Twitter Like Count Remaining Character Using Jquery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s