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,168 |
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 |
Flexbox login form | 3,551 Kb |
Fetching book covers with the Google Books API | 8,769 Kb |
Get the app | 3,198 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 |
Flexbox test | 2,846 Kb |
AJAX content from an RSS feed using jQuery | 3,878 Kb |
Test Case for ajax fail on single result | 3,297 Kb |
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating | 3,063 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 |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 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!