Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Twitter Like Message Box With Live Character Count using HTML, Jquery and CSS

In this tutorial, we are going to discuss how to create twitter like message box using HTML, jQuery and CSS. Here we are counting live character or word count using jQuery.
Like wise twitter it will accept only 250 characters and when word count is more than 250, then it will show error message below the text area.


Twitter Tweet Message Box with Live Character Count

Lets see the complete example for twitter like Message Box and with the help of jQuery we are counting the total number of character entered in textarea box. 




type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
href="circle.css" rel="stylesheet" type="text/css">
src="progress-circle.js">

body
{
background
-color: #f1f1f1;
}
.main-container {
width
: 500px;
height
: 140px;
margin
: 0px auto;
background
: #f2f8fd;
padding
: 10px;
border
: 3px solid #bedff6;
border
-radius: 10px;
}
.main-container:after {
content
: ".";
display
: block;
height
: 0;
clear
: both;
visibility
: hidden;
}
.img-circle {
border
-radius: 50%;
width
: 70px;
height
: 70px;
}
.EdgeButton {
border
-radius: 100px;
box
-shadow: none;
cursor
: pointer;
font
-size: 14px;
font
-weight: bold;
line
-height: 20px;
padding
: 6px 16px;
position
: relative;
text
-align: center;
white
-space: nowrap;
background
-color: #4AB3F4;
color
: white;
}
#count {
position
: absolute;
z
-index: 10;
padding
: 2px;
margin
: 6px;
text
-align: center;
font
-size: 15px;
font
-weight: bold;
}
#circle {
float: left;
}
#error-message {
width
: 300px;
float: left;
margin
-top: 8px;
color
: red;
display
: none;
}

type="text/javascript">
$
(document).ready(function() {
// Default count value
var count = 0;
// textarea max accept 250 characters...
var maxLength = 250;
$
("textarea").keyup(function() {

var getTextCount = $(this).val();
var main = getTextCount.length * 100;
var valueInPercentage = Math.ceil(main / maxLength);
var charCount = maxLength - getTextCount.length;

// set text count value...
if (getTextCount.length maxLength) {
$
('#count').html(charCount);
$
('#circle').progressCircle({
nPercent
: valueInPercentage,
showPercentText
: false,
circleSize
: 37,
thickness
: 6
});
} else {
$
('#count').html(maxLength - getTextCount.length);
$
('#error-message').show();

}
return false;
});


// Display loader on first load...
$
('#circle').progressCircle({
nPercent
: 0,
showPercentText
: false,
circleSize
: 37,
thickness
: 6
});

});




Twitter Tweet Message Box with Live Character Count

class="main-container">

class="img-circle" src="H33H0z.jpg" />


style="float:right;margin-right:52px;">

id="error-message">*It accept max 250 characters.


id="circle">
id="count">250









Output : 



Download link:
https://github.com/skptricks/php-Tutorials/tree/master/Twitter%20Like%20Message%20Box%20With%20Live%20Character%20Count%20using%20HTML-%20Jquery%20and%20CSS


Demo Link :
https://skptricks.github.io/learncoding/twitter-like-message-box-with-live-character-count/twitter.html





This post first appeared on Selenium Web Driver Tutorials, please read the originial post: here

Share the post

Twitter Like Message Box With Live Character Count using HTML, Jquery and CSS

×

Subscribe to Selenium Web Driver Tutorials

Get updates delivered right to your inbox!

Thank you for your subscription

×