Create a textarea limit with bootstrap

BTxtlimit

In this tutorial I will try to make the limit of textarea like twitter, and twitter interface to look like the real thing, then I also use one of the famous css framework bootstrap from twitter, in this tutorial I will use javascript to give the limit function the textarea, but if you want to use php scripts, you can also use it.

Well now we get to each step.

The first step is html markup

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap text limit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!--Google webfonts-->
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  </head>
  <body>
  <section class="box">
    <h3>What's up?</h3>
    <textarea id="status" rows="5" style="width:485px"></textarea>
    <span id="text_counter"></span><input class="btn btn-large btn-primary pull-right" type="submit" id="posting" value="Post" />
  </section>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

After that, go to the next step, styling elements.

@charset "utf-8";
body {
	background:url(../img/debut_light.png) fixed;
	font-family: 'Roboto', sans-serif;
	color:#fff;
}
.box {
	color:#000;
	margin:150px auto;
	padding:20px;
	width:500px;
	height:240px;
	background:#fff;
	border-radius:3px;
	border-bottom:4px solid #5e95cd;
	box-shadow: 0px 0px 30px #888888;
}
.overlimit{color: red;}

Now add the javascript function to provide a limit on your textarea.

$(document).ready(function(){
	    var left = 140
	    $('#text_counter').text('Characters left: ' + left);

	        $('#status').keyup(function () {

	        left = 140 - $(this).val().length;

	        if(left < 0){
	            $('#text_counter').addClass("overlimit");
	             $('#posting').attr("disabled", true);
	        }else{
	            $('#text_counter').removeClass("overlimit");
	            $('#posting').attr("disabled", false);
	        }

	        $('#text_counter').text('Characters left: ' + left);
	    });
	});

Well that was a tutorial of the textarea limit, well, I hope you can menikati my tutorial this. and do not forget to press the button like facebook fanspage to support me to keep working, thanks. 🙂

preview download

Advertisements

One thought on “Create a textarea limit with bootstrap

  1. You need targeted traffic to your website so why not try some for free? There is a VERY POWERFUL and POPULAR company out there who now lets you try their traffic for 7 days free of charge. I am so glad they opened their traffic system back up to the public! Sign up before it is too late: http://nsru.net/gscr

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