Bootstrap Snippet chat hub using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-fluid">
    <div class="row">
        <div class="col-md-3">
             <div class="row chats-row">
                <div class="col-md-12">
                    <a href="#" class="list-group-item open-request">
                       <p>Name:  Matthew Townsen</p>
                       <p>Email:  mtownsen@teamsupport.com</p>
                       <p>Time:  2:47 PM</p>
                       <p>Message:  It's all broken</p>
                       <button class="btn btn-default">Accept</button>
                    </a>
                    <a href="#" class="list-group-item chat-request">Robert Johnson - Muroc Industries</a>
                </div>
                <div class="col-md-12">
                    <a href="#" class="list-group-item">Travis Pitts - TeamSupport</a>
                    <a href="#" class="list-group-item list-group-item-success">Heather Townsen - MyCCA</a>
                    <a href="#" class="list-group-item active">Eric Harrington - TeamSupport</a>
                </div>
             </div>
        </div>
        <div class="col-md-9 current-chat">
            <div class="row chat-toolbar-row">
                <div class="col-sm-12">
                    <div class="btn-group chat-toolbar" role="group" aria-label="...">
                        <button id="chat-leave" class="btn btn-default ticket-option" type="button">
                          <i class="glyphicon glyphicon-remove-sign"></i> Leave Chat
                        </button>
                        <button id="chat-invite" class="btn btn-default ticket-option" type="button">
                          <i class="glyphicon glyphicon-plus"></i> Invite
                        </button>
                        <button id="chat-customer" class="btn btn-default ticket-option" type="button">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.blue { background: blue }
.grey { background: grey }
.chats-row { height: 100vh; }
.chats-row div { 
    height: 50%;
    border: 1px solid #ddd;
    padding: 0px; 
}
.list-group-item {
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    
}
.list-group-item:first-child {
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.current-chat { 
    height: 100vh; 
    border: 1px solid #ddd;
}
.chat-toolbar-row {
    background-color: #f5f5f5;
}
.chat-toolbar {
    margin-top: 10px;
    margin-bottom: 10px;
}
.current-chat-area {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( document ).ready(function() {
    $( ".chat-request" ).click(function(e) {
      e.preventDefault();
      $('.open-request').html('Matthew Townsen - TeamSupport').removeClass('open-request')
      $(this).html('<p>Name:  Matthew Townsen</p>' +
                       '<p>Email:  mtownsen@teamsupport.com</p>' +
                       '<p>Time:  2:47 PM</p>' +
                       '<p>Message:  Its all broken</p>' +
                       '<button class="btn btn-default">Accept</button>')
                       .addClass('open-request');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"chat hub"
Bootstrap 3.3.0 Snippet by mtownsen

Related: See More

Questions / Comments:

"chat hub" Bootstrap 3.3.0 Snippet by mtownsen

Related: See More

Questions / Comments:

"chat hub"
Bootstrap 3.3.0 Snippet by mtownsen