Bootstrap Snippet Thread view using HTML CSS Bootstrap jQuery

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