Nested flexbox layout for library catalog
How do I make an nested flexbox layout for library catalog?
What is a nested flexbox layout for library catalog? How do you make a nested flexbox layout for library catalog? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.
Nested flexbox layout for library catalog - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>nested flexbox layout for library catalog</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <h2>Result List</h2> <div class="result-list"> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">1. Handle with care</h3> </div> <div class="panel-body result-detail"> <div class="result-author"> <p>Picoult, Jodi, 1966-</p> <p>Large Print<br> 2012</p> <p>1 available copy at Caringbah Library<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#" class="btn btn-success">Place Hold</a> <br /> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"> <table class="table hidden"> <tbody> <tr> <th>Location</th> <th>Call No.</th> <th>Status</th> </tr> <tr> <td>Caringbah Large print fiction</td> <td>LP PICO</td> <td>Available</td> </tr> <tr> <td>Bundeena Adult Fiction</td> <td>PICO</td> <td>DUE 03-12-16</td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">2. House rules</h3> </div> <div class="panel-body result-detail"> <div class="result-author"> <p>Picoult, Jodi, 1966-</p> <p>Book<br> 2012</p> <p>1 available copy at Cronulla Library<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#" class="btn btn-success">Place Hold</a> <br /> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"> <table class="table hidden"> <tbody> <tr> <th>Location</th> <th>Call No.</th> <th>Status</th> </tr> <tr> <td>Cronulla Fiction</td> <td><a href="/search~S1?/cPICO/cpico/-3,-1,,E/browse">PICO</a></td> <td>Available </td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">3. The pact [electronic resource] : a love story</h3> </div> <div class="panel-body result-detail"> <div class="result-cover"><img src="http://placehold.it/120x180"/></div> <div class="result-author"> <p>Picoult, Jodi, 1966-</p> <p>eBook<br> 2012</p> <p>1 available copy at<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"></div> </div> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">Leaving home [sound recording]</h3> </div> <div class="panel-body result-detail"> <div class="result-cover"><img src="http://placehold.it/120x180"/></div> <div class="result-author"> <p>Picoult, Jodi, 1966-<br> Audiobook<br> 2012</p> <p>0 available copies. 1 hold on first copy returned of 1 copy.<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#" class="btn btn-success">Place Hold</a> <br /> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"> <table class="table hidden"> <tbody> <tr> <th>Location</th> <th>Call No.</th> <th>Status</th> </tr> <tr> <td>Sutherland Compact discs</td> <td>CDF PICO</td> <td>DUE 29-11-16</td> </tr> </tbody> </table> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Nested flexbox layout for library catalog - Script Codes CSS Codes
.result-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.result-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-preferred-size: 100%; flex-basis: 100%;
}
@media (min-width: 768px) and (max-width: 1199px) { .result-item { -ms-flex-preferred-size: 49%; flex-basis: 49%; } .result-item:nth-child(2n+1) { margin-right: 2%; }
}
@media (min-width: 1200px) { .result-item { -ms-flex-preferred-size: 32%; flex-basis: 32%; margin-right: 1.2%; }
}
.result-detail { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
@media (min-width: 480px) { .result-detail { -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
}
.result-author { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.result-actions { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0;
}
Nested flexbox layout for library catalog - Script Codes JS Codes
$('a.show-copies').on('click', function(e) { console.log('click recorded'); var getResultDetail = $(this).parentsUntil('.result-item').next('.result-status').children('table'); $(getResultDetail).toggleClass('hidden'); e.preventDefault();
});

Developer | Martin Boyce |
Username | boycetrus |
Uploaded | September 20, 2022 |
Rating | 3 |
Size | 3,271 Kb |
Views | 14,161 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Test Case for ajax fail on single result | 3,297 Kb |
Bootstrap Panel List | 2,472 Kb |
AJAX content from an RSS feed using jQuery | 3,878 Kb |
First steps with Handlebars.js | 3,978 Kb |
Google Maps API Ground Overlay | 2,961 Kb |
Google Maps API Custom Overlay | 3,336 Kb |
Sutherland Shire Libraries Catalogue Search | 2,732 Kb |
Fetching book covers with the Google Books API | 8,769 Kb |
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating | 3,063 Kb |
Flexbox horozontal scrolling booklist | 5,605 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Out of the blue | Giaco | 2,537 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
AOR site logo | Thatbram | 2,527 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Slider css only | Armandobau | 2,161 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!