"Search Platform"
Bootstrap 3.3.0 Snippet by marshallx

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">
<div class="widthContraint">
<div class="inputContainer">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="logoModifier">ANC SEARCH</span>
<input type="text" class="form-control" placeholder="Search for.." id="searchField">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="searchButton" data-loading-text="Searching..">Search</button>
</span>
<span id="deviceCheckbox" class="input-group-addon">
<input type="checkbox" aria-label=""> Show Devices
</span>
</div>
</div>
<div class="progressContainer">
</div>
<ul class="resultsContainer">
<li>
<div class="panel panel-default" id="searchPanel">
<div class="panel-heading" id="searchPanelHeading">Result</div>
<div class="panel-body">
<table class="table" id="addressTable">
<tr>
<td>ANC Code</td>
<td>EFK</td>
<td>BTID</td>
<td>4532</td>
<td>Sort Code</td>
<td>24004233</td>
<td width="100%"></td>
</tr>
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
.container {
width: 100%;
}
.widthContraint {
margin: 0 auto;
width: 600px;
}
.inputContainer {
width: 100%;
border-bottom: 2px solid #428bca;
padding-bottom: 8px;
padding-top: 8px;
}
.progressContainer {
width: 100%;
}
.resultsContainer {
padding: 0;
margin: 0;
list-style: none;
width: 100%;
margin-top: 8px;
}
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
$( document ).ready(function() {
initEvents();
});
function initEvents() {
$("#searchButton").on("click", function () {
var $btn = $(this).button("loading");
$("#searchField").attr("disabled", true);
});
$(".inputContainer").hover(function(){
$(this).stop().animate({borderBottomWidth: "4px"},{duration: 170, complete: function() {}} );
}, function () {
$(this).stop().animate({borderBottomWidth: "2px"},{duration: 170, complete: function() {}} );
});
}
function enableInput() {
$("#searchButton").button("loading");
$("#searchField").attr("disabled", false);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hi @marshallx,

Kindly upgrade this snippet to bootstrap v4.4.1

nicotravassos (1) - 5 years ago - Reply 1