Bootstrap Snippet filter layout 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 ---------->
<div id="main-container" class="main-container nav-effect-1">
  <nav class="nav-menu nav-effect-1" id="menu-1">
    <h2 class="">The Library</h2>
    <ul>
      <li><a class="" href="#">Checkout</a></li>
      <li><a class="" href="#">Return</a></li>
      <li><a class="" href="#">About</a></li>
      <li><a class="" href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="main clearfix">
    <!-- Header Content -->
    <header id="header" class="page-header">
      <div class="page-header-container row">
        <!-- Logo -->
        <div class="main-logo">
          <a href="#" class="logo">The Library</a>
        </div>
        <div class="menu-search">
          <!-- Main Navigation -->
          <div class="main-navigation">
            <a href="#">Menu</a>
          </div>
          <!-- Search -->
          <div class="catalog-search">
            <input class="shuffle-search input_field " type="search" autocomplete="off" value="" maxlength="128" id="input-search" />
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
/*
 *  Imports
*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css");
/*
 *  Variables
*/
/* Single Line truncation */
/* Multiline truncation */
/*
 *  Global styles
*/
html,
body,
.main,
.main-container {
  height: 100%;
}
body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #313131;
  background: #ecf0f1;
}
.row {
  max-width: 1024px;
}
/*
 *  Typography
*/
body,
p,
a,
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
// Get Color Attribute
// Set the background book color
$("li.book-item").each(function() {
  var $this = $(this);
  $this.find(".bk-front > div").css('background-color', $(this).data("color"));
  $this.find(".bk-left").css('background-color', $(this).data("color"));
  $this.find(".back-color").css('background-color', $(this).data("color"));
  $this.find(".item-details a.button").on('click', function() {
    displayBookDetails($this);
  });
});
function displayBookDetails(el) {
  var $this = $(el);
  $('.main-container').addClass('prevent-scroll');
  $('.main-overlay').fadeIn();
  $this.find('.overlay-details').clone().prependTo('.main-overlay');
  $('a.close-overlay-btn').on('click', function(e) {
    e.preventDefault();
    $('.main-container').removeClass('prevent-scroll');
    $('.main-overlay').fadeOut();
    $('.main-overlay').find('.overlay-details').remove();
  });
  $('.main-overlay a.preview').on('click', function() {
    $('.main-overlay .overlay-desc').toggleClass('activated');
    $('.main-overlay .overlay-preview').toggleClass('activated');
  });
  $('.main-overlay a.back-preview-btn').on('click', function() {
    $('.main-overlay .overlay-desc').toggleClass('activated');
    $('.main-overlay .overlay-preview').toggleClass('activated');
  });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"filter layout"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"filter layout" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"filter layout"
Bootstrap 3.3.0 Snippet by evarevirus