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 |
Google Maps API test | 4,057 Kb |
Nested flexbox layout for library catalog v2 | 3,409 Kb |
Test Case for ajax fail on single result v2 | 3,313 Kb |
Homepage thumbnail | 1,852 Kb |
Google Analytics Event Tracking using html5 data attributes | 2,560 Kb |
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating | 3,063 Kb |
Flexbox test | 2,846 Kb |
Test form validation with validate.js | 3,293 Kb |
Google Maps API Ground Overlay | 2,961 Kb |
Scratchpad | 5,672 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 |
Collapsing Widget | Er40 | 4,279 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
React TODO | Enieste | 3,320 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Delete Hover | Chungman93 | 2,557 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!