"Thread view"
Bootstrap 3.1.0 Snippet by karol-wojcik

<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"}); });

Related: See More


Questions / Comments: