Bootstrap Snippet Submission Client using HTML CSS 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 ---------->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<label>This is a very early version of something that has greatly moved forward. If you'd like the newer versions please Like and I'll update. If there's no interest then I won't bother as I need to tear it down from a production environment.</label>
<div class="clientWindow">
    <table class="clientTable">
    
        <tr>
            
            <td>
        
                <div id="clientPanelIcons" class="clientPanel">
                
                    <ul id="shortcutList">
                        <li data-target="home" class="menuListItemDefault"><i class="fa fa-home" aria-hidden="true"></i></li>
                        <li onclick="$('.clientConsole').slideToggle('fast');" data-target="console" class="menuListItemDefault"><i class="fa fa-code" aria-hidden="true"></i></li>
                        <li onclick="startSearch('mailbox');" class="menuListItemDefault"><i class="fa fa-list" aria-hidden="true"></i></li>
                        <li onclick="stopSearch('mailbox');" class="menuListItemDefault" style="color: red;"><i class="fa fa-list" aria-hidden="true"></i></li>
                        <li onclick="startSearch('page');" class="menuListItemDefault"><i class="fa fa-list" aria-hidden="true"></i></li>
                        <li onclick="stopSearch('page');" class="menuListItemDefault" style="color: red;"><i class="fa fa-list" aria-hidden="true"></i></li>
                    </ul>
                
                </div>
            
            </td>
            
            <td>
            
                <div id="clientPanelMenu" class="clientPanel">
                
                    <div id="menuLogo">Tracker</div>
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
.searchProgressContainerDefault {
    margin-top: 0px;
    height: 0px;
    background-color: none;
    
}
#mailboxSearch {
    
    
        
}
.clientWindow {
    
    height: 1000px;
    width: 100%;
    background-color: #f5f5f5;
  
}
.mailboxListSearch {
    padding: 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    
}
#consoleButtonGroup {
    
    margin-left: 20px;
    
}
.clientConsole {
    top: 0;
    
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
$( document ).ready(function() {
    initUI();
});
function initUI() {
    
    $("#menuList li").click(function(){
        
        var thisItem = this;
        var currentClass = $(this).attr("class");
        $(this).attr("class", "menuListItemSelected");
        
        loadMailbox($(this).data("target"));
        
        
        $("#menuList li").each(function(){
            if (this !== thisItem) {
                
                $(this).attr("class", "menuListItemDefault").animate({backgroundColor: "#17141f", color: "#b8b5c0"},{duration: 170, complete: function() {}} ); ;;
                
            }
   
        });
        
    });
    
    $("#menuList li").hover(function(){
        
        var currentClass = $(this).attr("class");
        
        if (currentClass == "menuListItemDefault") { 
            
            $(this).stop().animate({backgroundColor: "#201c2b", color: "#f3f3f3"},{duration: 170, complete: function() {}} ); 
        
        } else if (currentClass == "menuListItemSelected") {
            
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Submission Client"
Bootstrap 3.3.0 Snippet by marshallx

Related: See More

Questions / Comments:

"Submission Client" Bootstrap 3.3.0 Snippet by marshallx

Related: See More

Questions / Comments:

"Submission Client"
Bootstrap 3.3.0 Snippet by marshallx