<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<a href="#" class="btn btn-danger btn-sm btn-block" role="button">COMPOSE</a>
</div>
<div class="col-sm-9 col-md-10">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Back to inbox">
<span class="glyphicon glyphicon-arrow-left"></span> Back to inbox</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Remove">
<span class="glyphicon glyphicon-trash"></span> Remove</button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Mark as unread</a></li>
</ul>
</div>
<div class="pull-right">
<span class="text-muted"><b>1</b> of <b>277</b></span>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li><a href="#"><span class="badge pull-right">42</span> Inbox </a>
</li>
<li><a href="http://www.jquery2dotnet.com">Outbox</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="badge pull-right">3</span>Trash</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10">
<div class="msg-wrap">
<p class="thread-title">Thread title</p>
<div class="msg odd">
<div class="col-md-3 author">
<h5 class="media-heading">Naimish Sakhpara <small class="text-muted"> </small></h5><small class="text-muted">
<i class="fa fa-clock-o"></i> 12:10am</small>
<a href="#" class="">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACqUlEQVR4Xu2Y60tiURTFl48STFJMwkQjUTDtixq+Av93P6iBJFTgg1JL8QWBGT4QfDX7gDIyNE3nEBO6D0Rh9+5z9rprr19dTa/XW2KHl4YFYAfwCHAG7HAGgkOQKcAUYAowBZgCO6wAY5AxyBhkDDIGdxgC/M8QY5AxyBhkDDIGGYM7rIAyBgeDAYrFIkajEYxGIwKBAA4PDzckpd+322243W54PJ5P5f6Omh9tqiTAfD5HNpuFVqvFyckJms0m9vf3EY/H1/u9vb0hn89jsVj8kwDfUfNviisJ8PLygru7O4TDYVgsFtDh9Xo9NBrNes9cLgeTybThgKenJ1SrVXGf1WoVDup2u4jFYhiPx1I1P7XVBxcoCVCr1UBfTqcTrVYLe3t7OD8/x/HxsdiOPqNGo9Eo0un02gHkBhJmuVzC7/fj5uYGXq8XZ2dnop5Mzf8iwMPDAxqNBmw2GxwOBx4fHzGdTpFMJkVzNB7UGAmSSqU2RoDmnETQ6XQiOyKRiHCOSk0ZEZQcUKlU8Pz8LA5vNptRr9eFCJQBFHq//szG5eWlGA1ywOnpqQhBapoWPfl+vw+fzweXyyU+U635VRGUBOh0OigUCggGg8IFK/teXV3h/v4ew+Hwj/OQU4gUq/w4ODgQrkkkEmKEVGp+tXm6XkkAOngmk4HBYBAjQA6gEKRmyOL05GnR99vbW9jtdjEGdP319bUIR8oA+pnG5OLiQoghU5OElFlKAtCGr6+vKJfLmEwm64aosd/XbDbbyIBSqSSeNKU+HXzlnFAohKOjI6maMs0rO0B20590n7IDflIzMmdhAfiNEL8R4jdC/EZIJj235R6mAFOAKcAUYApsS6LL9MEUYAowBZgCTAGZ9NyWe5gCTAGmAFOAKbAtiS7TB1Ng1ynwDkxRe58vH3FfAAAAAElFTkSuQmCC" style="width: 64px; height: 64px;" alt="64x64" data-src="holder.js/64x64" class="media-object">
</a>
</div>
<div class="col-md-9">
Arnab Goswami: "Some people close to Congress Party and close to the government had a #secret #meeting in a farmhouse in Maharashtra in which Anna Hazare send some representatives and they had a meeting in the discussed how to go about this all fast and how eventually this will end."
</div>
<div class="clearfix"></div>
</div>
<div class="msg even">
<div class="col-md-3 author">
<h5 class="media-heading">Naimish Sakhpara <small class="text-muted"> </small></h5><small class="text-muted">
<i class="fa fa-clock-o"></i> 12:10am</small>
<a href="#" class="">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACqUlEQVR4Xu2Y60tiURTFl48STFJMwkQjUTDtixq+Av93P6iBJFTgg1JL8QWBGT4QfDX7gDIyNE3nEBO6D0Rh9+5z9rprr19dTa/XW2KHl4YFYAfwCHAG7HAGgkOQKcAUYAowBZgCO6wAY5AxyBhkDDIGdxgC/M8QY5AxyBhkDDIGGYM7rIAyBgeDAYrFIkajEYxGIwKBAA4PDzckpd+322243W54PJ5P5f6Omh9tqiTAfD5HNpuFVqvFyckJms0m9vf3EY/H1/u9vb0hn89jsVj8kwDfUfNviisJ8PLygru7O4TDYVgsFtDh9Xo9NBrNes9cLgeTybThgKenJ1SrVXGf1WoVDup2u4jFYhiPx1I1P7XVBxcoCVCr1UBfTqcTrVYLe3t7OD8/x/HxsdiOPqNGo9Eo0un02gHkBhJmuVzC7/fj5uYGXq8XZ2dnop5Mzf8iwMPDAxqNBmw2GxwOBx4fHzGdTpFMJkVzNB7UGAmSSqU2RoDmnETQ6XQiOyKRiHCOSk0ZEZQcUKlU8Pz8LA5vNptRr9eFCJQBFHq//szG5eWlGA1ywOnpqQhBapoWPfl+vw+fzweXyyU+U635VRGUBOh0OigUCggGg8IFK/teXV3h/v4ew+Hwj/OQU4gUq/w4ODgQrkkkEmKEVGp+tXm6XkkAOngmk4HBYBAjQA6gEKRmyOL05GnR99vbW9jtdjEGdP319bUIR8oA+pnG5OLiQoghU5OElFlKAtCGr6+vKJfLmEwm64aosd/XbDbbyIBSqSSeNKU+HXzlnFAohKOjI6maMs0rO0B20590n7IDflIzMmdhAfiNEL8R4jdC/EZIJj235R6mAFOAKcAUYApsS6LL9MEUYAowBZgCTAGZ9NyWe5gCTAGmAFOAKbAtiS7TB1Ng1ynwDkxRe58vH3FfAAAAAElFTkSuQmCC" style="width: 64px; height: 64px;" alt="64x64" data-src="holder.js/64x64" class="media-object">
</a>
</div>
<div class="col-md-9">
Arnab Goswami: "Some people close to Congress Party and close to the government had a #secret #meeting in a farmhouse in Maharashtra in which Anna Hazare send some representatives and they had a meeting in the discussed how to go about this all fast and how eventually this will end."
</div>
<div class="clearfix"></div>
</div>
<div class="msg odd">
<div class="col-md-3 author">
<h5 class="media-heading">Naimish Sakhpara <small class="text-muted"> </small></h5><small class="text-muted">
<i class="fa fa-clock-o"></i> 12:10am</small>
<a href="#" class="">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACqUlEQVR4Xu2Y60tiURTFl48STFJMwkQjUTDtixq+Av93P6iBJFTgg1JL8QWBGT4QfDX7gDIyNE3nEBO6D0Rh9+5z9rprr19dTa/XW2KHl4YFYAfwCHAG7HAGgkOQKcAUYAowBZgCO6wAY5AxyBhkDDIGdxgC/M8QY5AxyBhkDDIGGYM7rIAyBgeDAYrFIkajEYxGIwKBAA4PDzckpd+322243W54PJ5P5f6Omh9tqiTAfD5HNpuFVqvFyckJms0m9vf3EY/H1/u9vb0hn89jsVj8kwDfUfNviisJ8PLygru7O4TDYVgsFtDh9Xo9NBrNes9cLgeTybThgKenJ1SrVXGf1WoVDup2u4jFYhiPx1I1P7XVBxcoCVCr1UBfTqcTrVYLe3t7OD8/x/HxsdiOPqNGo9Eo0un02gHkBhJmuVzC7/fj5uYGXq8XZ2dnop5Mzf8iwMPDAxqNBmw2GxwOBx4fHzGdTpFMJkVzNB7UGAmSSqU2RoDmnETQ6XQiOyKRiHCOSk0ZEZQcUKlU8Pz8LA5vNptRr9eFCJQBFHq//szG5eWlGA1ywOnpqQhBapoWPfl+vw+fzweXyyU+U635VRGUBOh0OigUCggGg8IFK/teXV3h/v4ew+Hwj/OQU4gUq/w4ODgQrkkkEmKEVGp+tXm6XkkAOngmk4HBYBAjQA6gEKRmyOL05GnR99vbW9jtdjEGdP319bUIR8oA+pnG5OLiQoghU5OElFlKAtCGr6+vKJfLmEwm64aosd/XbDbbyIBSqSSeNKU+HXzlnFAohKOjI6maMs0rO0B20590n7IDflIzMmdhAfiNEL8R4jdC/EZIJj235R6mAFOAKcAUYApsS6LL9MEUYAowBZgCTAGZ9NyWe5gCTAGmAFOAKbAtiS7TB1Ng1ynwDkxRe58vH3FfAAAAAElFTkSuQmCC" style="width: 64px; height: 64px;" alt="64x64" data-src="holder.js/64x64" class="media-object">
</a>
</div>
<div class="col-md-9">
Arnab Goswami: "Some people close to Congress Party and close to the government had a #secret #meeting in a farmhouse in Maharashtra in which Anna Hazare send some representatives and they had a meeting in the discussed how to go about this all fast and how eventually this will end."
</div>
<div class="clearfix"></div>
</div>
<div class="msg even">
<div class="col-md-3 author">
<h5 class="media-heading">Naimish Sakhpara <small class="text-muted"> </small></h5><small class="text-muted">
<i class="fa fa-clock-o"></i> 12:10am</small>
<a href="#" class="">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACqUlEQVR4Xu2Y60tiURTFl48STFJMwkQjUTDtixq+Av93P6iBJFTgg1JL8QWBGT4QfDX7gDIyNE3nEBO6D0Rh9+5z9rprr19dTa/XW2KHl4YFYAfwCHAG7HAGgkOQKcAUYAowBZgCO6wAY5AxyBhkDDIGdxgC/M8QY5AxyBhkDDIGGYM7rIAyBgeDAYrFIkajEYxGIwKBAA4PDzckpd+322243W54PJ5P5f6Omh9tqiTAfD5HNpuFVqvFyckJms0m9vf3EY/H1/u9vb0hn89jsVj8kwDfUfNviisJ8PLygru7O4TDYVgsFtDh9Xo9NBrNes9cLgeTybThgKenJ1SrVXGf1WoVDup2u4jFYhiPx1I1P7XVBxcoCVCr1UBfTqcTrVYLe3t7OD8/x/HxsdiOPqNGo9Eo0un02gHkBhJmuVzC7/fj5uYGXq8XZ2dnop5Mzf8iwMPDAxqNBmw2GxwOBx4fHzGdTpFMJkVzNB7UGAmSSqU2RoDmnETQ6XQiOyKRiHCOSk0ZEZQcUKlU8Pz8LA5vNptRr9eFCJQBFHq//szG5eWlGA1ywOnpqQhBapoWPfl+vw+fzweXyyU+U635VRGUBOh0OigUCggGg8IFK/teXV3h/v4ew+Hwj/OQU4gUq/w4ODgQrkkkEmKEVGp+tXm6XkkAOngmk4HBYBAjQA6gEKRmyOL05GnR99vbW9jtdjEGdP319bUIR8oA+pnG5OLiQoghU5OElFlKAtCGr6+vKJfLmEwm64aosd/XbDbbyIBSqSSeNKU+HXzlnFAohKOjI6maMs0rO0B20590n7IDflIzMmdhAfiNEL8R4jdC/EZIJj235R6mAFOAKcAUYApsS6LL9MEUYAowBZgCTAGZ9NyWe5gCTAGmAFOAKbAtiS7TB1Ng1ynwDkxRe58vH3FfAAAAAElFTkSuQmCC" style="width: 64px; height: 64px;" alt="64x64" data-src="holder.js/64x64" class="media-object">
</a>
</div>
<div class="col-md-9">
Arnab Goswami: "Some people close to Congress Party and close to the government had a #secret #meeting in a farmhouse in Maharashtra in which Anna Hazare send some representatives and they had a meeting in the discussed how to go about this all fast and how eventually this will end."
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="send-wrap ">
<form accept-charset="UTF-8" action="" method="POST" role="form" class="">
<div class="form-group">
<textarea class="form-control counted" rows="3" placeholder="Write a reply..."></textarea>
</div>
<div class="form-group">
<h6 class="pull-right" id="counter">2500 characters remaining</h6>
<button class="btn btn-info" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
body{ margin-top:50px;}
.messages .list-group-item:first-child {border-top-right-radius: 0px;border-top-left-radius: 0px;}
.messages .list-group-item:last-child {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
.messages .list-group .checkbox { display: inline-block;margin: 0px; }
.messages .list-group input[type="checkbox"]{ margin-top: 2px; }
.messages .list-group .glyphicon { margin-right:5px; }
.messages .list-group .glyphicon:hover { color:#FFBC00; }
a.list-group-item.read { color: #222;background-color: #F3F3F3; }
hr { margin-top: 5px;margin-bottom: 10px; }
.nav-pills>li>a {padding: 5px 10px;}
.ad { padding: 5px;background: #F5F5F5;color: #222;font-size: 80%;border: 1px solid #E5E5E5; }
.ad a.title {color: #15C;text-decoration: none;font-weight: bold;font-size: 110%;}
.ad a.url {color: #093;text-decoration: none;}
.message-wrap
{
box-shadow: 0 0 3px #ddd;
padding:0;
}
.msg
{
padding:5px;
border-top:1px solid #ddd;
margin:0;
}
.msg.odd {
background-color: #FFFFFF;
}
.msg.even {
background-color: #F4F6F8;
}
.msg .author {
border-right: 1px solid #ddd;
}
.msg-wrap {
padding:10px;
}
.msg-wrap .thread-title {
font-size: 22px;
font-weight: 400;
color: #222222;
padding: 0 0 0 10px;
}
.send-wrap
{
border-top: 1px solid #eee;
padding:10px;
/*background: #f8f8f8;*/
}
.highlight
{
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.msg-wrap .media-heading
{
color:#003bb3;
font-weight: 700;
}
.msg-date
{
background: none;
text-align: center;
color:#aaa;
border:none;
box-shadow: none;
border-bottom: 1px solid #ddd;
}
/**
*
* jquery.charcounter.js version 1.2
* requires jQuery version 1.2 or higher
* Copyright (c) 2007 Tom Deater (http://www.tomdeater.com)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($) {
/**
* attaches a character counter to each textarea element in the jQuery object
* usage: $("#myTextArea").charCounter(max, settings);
*/
$.fn.charCounter = function (max, settings) {
max = max || 100;
settings = $.extend({
container: "<span></span>",
classname: "charcounter",
format: "(%1 characters remaining)",
pulse: true,
delay: 0
}, settings);
var p, timeout;
function count(el, container) {
el = $(el);
if (el.val().length > max) {
el.val(el.val().substring(0, max));
if (settings.pulse && !p) {
pulse(container, true);
};
};
if (settings.delay > 0) {
if (timeout) {
window.clearTimeout(timeout);
}
timeout = window.setTimeout(function () {
container.html(settings.format.replace(/%1/, (max - el.val().length)));
}, settings.delay);
} else {
container.html(settings.format.replace(/%1/, (max - el.val().length)));
}
};
function pulse(el, again) {
if (p) {
window.clearTimeout(p);
p = null;
};
el.animate({ opacity: 0.1 }, 100, function () {
$(this).animate({ opacity: 1.0 }, 100);
});
if (again) {
p = window.setTimeout(function () { pulse(el) }, 200);
};
};
return this.each(function () {
var container;
if (!settings.container.match(/^<.+>$/)) {
// use existing element to hold counter message
container = $(settings.container);
} else {
// append element to hold counter message (clean up old element first)
$(this).next("." + settings.classname).remove();
container = $(settings.container)
.insertAfter(this)
.addClass(settings.classname);
}
$(this)
.unbind(".charCounter")
.bind("keydown.charCounter", function () { count(this, container); })
.bind("keypress.charCounter", function () { count(this, container); })
.bind("keyup.charCounter", function () { count(this, container); })
.bind("focus.charCounter", function () { count(this, container); })
.bind("mouseover.charCounter", function () { count(this, container); })
.bind("mouseout.charCounter", function () { count(this, container); })
.bind("paste.charCounter", function () {
var me = this;
setTimeout(function () { count(me, container); }, 10);
});
if (this.addEventListener) {
this.addEventListener('input', function () { count(this, container); }, false);
};
count(this, container);
});
};
})(jQuery);
$(function() {
$(".counted").charCounter(2500,{container: "#counter"});
});