A Pen by Chase Harrison on CodePen.
Created
February 28, 2019 12:05
-
-
Save ChaseH88/b1cd01113e5c0df5bd79570bc4b6150c to your computer and use it in GitHub Desktop.
Staff Page Layout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="featureWrapper staff" xmlns:ms="urn:schemas-microsoft-com:xslt" xmlns:dt="urn:schemas-microsoft-com:datatypes"> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69028"><div class="overlay">overlay</div><h2>John Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>John Smith</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tortor in diam sagittis iaculis. Nunc placerat semper leo in cursus. Vivamus volutpat erat vel ligula blandit consequat. Nulla tempus ipsum at aliquam placerat. Etiam ut dapibus | |
| ante, at rhoncus nunc. Vivamus eget lectus bibendum dui tempor ultrices sed sed lacus. Aenean a felis orci. Phasellus ornare vulputate mauris id mattis. Aenean egestas facilisis turpis, a luctus eros sagittis vitae. Integer lacinia hendrerit risus, | |
| id malesuada dui pellentesque nec. Suspendisse ornare lectus sit amet elementum maximus.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69024"><div class="overlay">overlay</div><h2>Cindy Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Cindy Smith</h2> | |
| <p>Phasellus suscipit, ante a volutpat tincidunt, risus elit interdum lacus, vel luctus arcu lorem ut erat. Nulla non lorem blandit, pretium neque ut, placerat orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; | |
| Aliquam pulvinar justo augue, eu suscipit dolor mattis faucibus. Phasellus sit amet orci at purus congue commodo a nec odio. Nunc eget urna facilisis, fringilla quam id, viverra sem. Aenean vulputate nibh in turpis sodales condimentum. Donec et | |
| auctor nisi, id sagittis magna. Cras suscipit sapien ac consectetur posuere. Donec porttitor ac sem scelerisque sagittis. Cras consectetur lacus non laoreet vestibulum. Aenean blandit luctus sollicitudin.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69030"><div class="overlay">overlay</div><h2>Bob Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Bob Smith</h2> | |
| <p>Nam luctus eu velit sit amet scelerisque. Nulla in lectus vel leo dictum sodales non in urna. Nulla facilisi. Pellentesque sit amet rutrum dui. Aliquam ornare volutpat tincidunt. Sed commodo leo id placerat vulputate. Donec facilisis nulla eu nisl | |
| eleifend cursus. Praesent at nisl id augue consectetur consequat. Nulla id arcu sem. Phasellus finibus blandit libero non aliquet. Vivamus at est vel ex luctus facilisis et at nulla. Fusce fermentum, mi quis vestibulum fringilla, felis mi scelerisque | |
| erat, sit amet finibus metus eros sed ipsum. Proin blandit metus eu iaculis tincidunt.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69152"><div class="overlay">overlay</div><h2>Jenny Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Jenny Smith</h2> | |
| <p>Nam et bibendum ligula. Aenean auctor, leo nec convallis congue, arcu nibh elementum dolor, sit amet pulvinar massa sapien euismod eros. Proin dignissim sapien sed rhoncus sollicitudin. Morbi pulvinar purus sit amet sem imperdiet rhoncus. Proin | |
| quis felis vehicula, auctor purus finibus, sollicitudin magna. Proin mollis rutrum felis eu varius. Morbi eget nisi vestibulum, iaculis sapien ut, pellentesque lacus. Phasellus congue nec augue eu accumsan. Sed vel dignissim augue.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69156"><div class="overlay">overlay</div><h2>Tim Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Tim Smith</h2> | |
| <p>Nunc varius eget risus id elementum. Vestibulum arcu dolor, porttitor sed diam id, fringilla imperdiet metus. Morbi ex arcu, faucibus sodales luctus ac, lacinia eu dolor. Etiam elit tortor, luctus et nulla non, ultrices facilisis neque. Curabitur | |
| eu sapien volutpat, elementum erat at, bibendum risus. In hac habitasse platea dictumst. Fusce ut hendrerit est. Nam a finibus lorem, id efficitur nisi. In luctus urna leo, eu pulvinar tellus vestibulum a.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69028"><div class="overlay">overlay</div><h2>John Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>John Smith</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tortor in diam sagittis iaculis. Nunc placerat semper leo in cursus. Vivamus volutpat erat vel ligula blandit consequat. Nulla tempus ipsum at aliquam placerat. Etiam ut dapibus | |
| ante, at rhoncus nunc. Vivamus eget lectus bibendum dui tempor ultrices sed sed lacus. Aenean a felis orci. Phasellus ornare vulputate mauris id mattis. Aenean egestas facilisis turpis, a luctus eros sagittis vitae. Integer lacinia hendrerit risus, | |
| id malesuada dui pellentesque nec. Suspendisse ornare lectus sit amet elementum maximus.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69024"><div class="overlay">overlay</div><h2>Cindy Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Cindy Smith</h2> | |
| <p>Phasellus suscipit, ante a volutpat tincidunt, risus elit interdum lacus, vel luctus arcu lorem ut erat. Nulla non lorem blandit, pretium neque ut, placerat orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; | |
| Aliquam pulvinar justo augue, eu suscipit dolor mattis faucibus. Phasellus sit amet orci at purus congue commodo a nec odio. Nunc eget urna facilisis, fringilla quam id, viverra sem. Aenean vulputate nibh in turpis sodales condimentum. Donec et | |
| auctor nisi, id sagittis magna. Cras suscipit sapien ac consectetur posuere. Donec porttitor ac sem scelerisque sagittis. Cras consectetur lacus non laoreet vestibulum. Aenean blandit luctus sollicitudin.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69030"><div class="overlay">overlay</div><h2>Bob Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Bob Smith</h2> | |
| <p>Nam luctus eu velit sit amet scelerisque. Nulla in lectus vel leo dictum sodales non in urna. Nulla facilisi. Pellentesque sit amet rutrum dui. Aliquam ornare volutpat tincidunt. Sed commodo leo id placerat vulputate. Donec facilisis nulla eu nisl | |
| eleifend cursus. Praesent at nisl id augue consectetur consequat. Nulla id arcu sem. Phasellus finibus blandit libero non aliquet. Vivamus at est vel ex luctus facilisis et at nulla. Fusce fermentum, mi quis vestibulum fringilla, felis mi scelerisque | |
| erat, sit amet finibus metus eros sed ipsum. Proin blandit metus eu iaculis tincidunt.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69152"><div class="overlay">overlay</div><h2>Jenny Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Jenny Smith</h2> | |
| <p>Nam et bibendum ligula. Aenean auctor, leo nec convallis congue, arcu nibh elementum dolor, sit amet pulvinar massa sapien euismod eros. Proin dignissim sapien sed rhoncus sollicitudin. Morbi pulvinar purus sit amet sem imperdiet rhoncus. Proin | |
| quis felis vehicula, auctor purus finibus, sollicitudin magna. Proin mollis rutrum felis eu varius. Morbi eget nisi vestibulum, iaculis sapien ut, pellentesque lacus. Phasellus congue nec augue eu accumsan. Sed vel dignissim augue.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="image"><a class="expand" style="box-shadow: none;"><img runat="server" alt="" src="http://chaseharrison-test.televox.west.com/common/pages/UserFile.aspx?fileId=69156"><div class="overlay">overlay</div><h2>Tim Smith</h2></a></div> | |
| <div class="text"> | |
| <h2>Tim Smith</h2> | |
| <p>Nunc varius eget risus id elementum. Vestibulum arcu dolor, porttitor sed diam id, fringilla imperdiet metus. Morbi ex arcu, faucibus sodales luctus ac, lacinia eu dolor. Etiam elit tortor, luctus et nulla non, ultrices facilisis neque. Curabitur | |
| eu sapien volutpat, elementum erat at, bibendum risus. In hac habitasse platea dictumst. Fusce ut hendrerit est. Nam a finibus lorem, id efficitur nisi. In luctus urna leo, eu pulvinar tellus vestibulum a.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!--container--> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| getWidth(); | |
| function createExpandWrap(){ | |
| var divFeatures = $("div.staff div.feature"); | |
| for(var i = 0; i < divFeatures.length; i+=$.groupNum) { | |
| divFeatures.slice(i, i+$.groupNum).wrapAll("<div class='staffRow'></div>"); | |
| } | |
| $("div.staff div.staffRow").each(function(){ | |
| $("<div class='expandWrap'></div>").insertAfter($(this)); | |
| }); | |
| } | |
| $("div.feature a.expand").attr("href","#"); | |
| $("div.feature a.expand").on("click", function(resetExpand){ | |
| $("div.feature").removeClass("show"); | |
| $(this).parents(".feature").addClass("show"); | |
| $.activeText = $(this).parent().next().clone(); | |
| $.activeImage = $(this).children().first().clone(); | |
| $(".expandWrap").removeClass("active").empty(); | |
| $(this).parents(".staffRow").next(".expandWrap").html($.activeText).addClass("active"); | |
| $.activeImage.insertAfter("div.expandWrap.active div.text").wrap("<div class='image'></div>"); | |
| $("<a class='close' href='#' tabindex='1' onclick='return false;'>X</a>").appendTo(".expandWrap"); | |
| if ($("div.expandWrap div.text div.quotes").length > 0){ | |
| $("div.expandWrap div.text div.quotes").insertAfter("div.expandWrap div.image"); | |
| } | |
| $([document.documentElement, document.body]).animate({ | |
| scrollTop: $("div.expandWrap.active").offset().top-10 | |
| }, 750); | |
| $("div.staff a.close").on("click", function(){ | |
| $(".expandWrap").removeClass("active").empty(); | |
| $([document.documentElement, document.body]).animate({ | |
| scrollTop: $("div.feature.show").offset().top | |
| }, 750); | |
| }); | |
| $(document).keyup(function(e) { | |
| if (e.keyCode === 27) $("div.staff a.close").click(); | |
| }); | |
| }); | |
| function getWidth(){ | |
| if($(window).width() > 1024){ | |
| $.groupNum = 4; | |
| if($("div.expandWrap").length){ | |
| clearContents(); | |
| } | |
| createExpandWrap(); | |
| } | |
| if($(window).width() < 1023 && $(window).width() > 768){ | |
| $.groupNum = 3; | |
| if($("div.expandWrap").length){ | |
| clearContents(); | |
| } | |
| createExpandWrap(); | |
| } | |
| if($(window).width() < 768 && $(window).width() > 500){ | |
| $.groupNum = 2; | |
| if($("div.expandWrap").length){ | |
| clearContents(); | |
| } | |
| createExpandWrap(); | |
| } | |
| if($(window).width() < 500){ | |
| $.groupNum = 1; | |
| if($("div.expandWrap").length){ | |
| clearContents(); | |
| } | |
| createExpandWrap(); | |
| } | |
| } | |
| function clearContents(){ | |
| $("div.feature").unwrap(); | |
| $("div.expandWrap").remove(); | |
| } | |
| $(window).resize(function(){ | |
| getWidth(); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* TEMP STYLING */ | |
| .container {max-width: 1200px; margin: 0 auto;} | |
| /*animation*/ | |
| div.expandWrap {max-height: 0;overflow: hidden;opacity: 0;transition: opacity 900ms ease, max-height 900ms ease;position: relative;} | |
| div.expandWrap a.close {position: absolute; top: 3px; right: 3px; left: auto; bottom: auto; cursor: pointer; color: #fff; text-decoration: none;} | |
| div.expandWrap.active {max-height: none;opacity: 1;max-height: none;} | |
| /*expand text*/ | |
| div.expandWrap div.text {padding: 20px;} | |
| /*expand image*/ | |
| div.expandWrap div.image {line-height: 0;} | |
| /*temp styling*/ | |
| div.expandWrap {background-color: #eee;display: flex;max-height: 0;} | |
| /* END TEMP */ | |
| div.staff {display: flex; flex-wrap: wrap;} | |
| div.staff div.feature {padding: 10px;} | |
| /*text*/ | |
| div.staff div.feature > div.text {display: none;} | |
| /*image*/ | |
| div.staff div.feature > div.image img {max-width: 100%;} | |
| div.staff div.feature > div.image > a {position: relative; height: 100%; width: 100%; display: block; line-height: 0; cursor: pointer;} | |
| div.staff div.feature > div.image > a h2 {color: #fff; position: absolute; bottom: 15%; left: 50%; top: auto; right: auto; text-align: center; transform: translatex(-50%); opacity: 0; transition: opacity 700ms ease;} | |
| div.staff div.feature > div.image > a div.overlay {position: absolute; left: 0; right: 0; bottom: 0; top: 0; text-indent: -9999vw; background: transparent; transition: background 700ms ease;} | |
| /*hover/focus*/ | |
| div.staff div.feature > div.image > a:hover div.overlay, div.staff div.feature > div.image > a:focus div.overlay {background: rgba(0, 0, 0, 0.75);} | |
| div.staff div.feature > div.image > a:hover h2, div.staff div.feature > div.image > a:focus h2 {opacity: 1;} | |
| /*jquery row*/ | |
| div.staff div.staffRow {display: flex; flex-wrap: nowrap; justify-content: center; min-width: 100%;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment