Last active
August 29, 2015 14:16
-
-
Save offirgolan/5e84dce9ea2d417960ac to your computer and use it in GitHub Desktop.
Expanding Cards - JS Bin - http://jsbin.com/rahagi
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery.min.js"></script> | |
| <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| /** Start - Showcase CSS **/ | |
| .title { | |
| width 100%; | |
| text-align: center; | |
| background-color: #F25F70; | |
| margin-top: 0; | |
| padding: 10px; | |
| color: white; | |
| text-transform: uppercase ; | |
| border-bottom: 1px solid #F8F8F8; | |
| font-size: 16px; | |
| min-width: 1100px; | |
| font-weight: 200; | |
| } | |
| .instructions { | |
| margin-top: 30px; | |
| width: 50%; | |
| text-align: center; | |
| padding: 15px; | |
| border: 1px dotted grey; | |
| margin-left: 25%; | |
| } | |
| .instructions span { | |
| padding: 0px 5px | |
| } | |
| /** End - Showcase CSS **/ | |
| /** Start - Demo CSS **/ | |
| .card-container { | |
| width: 100%; | |
| min-width: 1100px; | |
| padding: 1%; | |
| height: 470px; | |
| margin-top: 30px; | |
| position: relative; | |
| } | |
| .card { | |
| position: absolute; | |
| height: 450px; | |
| padding: 15px; | |
| border: 1px solid lightgrey; | |
| border-radius: 3px; | |
| background-color: #fafafa; | |
| transition: left 500ms ease-in-out 0s, width 500ms ease-in-out 0s; | |
| -webkit-transition: left 500ms ease-in-out 0s, width 500ms ease-in-out 0s; | |
| top: 14px; | |
| z-index: 0; | |
| } | |
| .card-header { | |
| border-bottom: 1px solid lightgrey; | |
| height: 40px; | |
| text-align: center; | |
| } | |
| .card-body { | |
| padding: 20px 10px 0px 10px; | |
| overflow: scroll; | |
| position: relative; | |
| height: 370px; | |
| } | |
| /* Define absolute position for each card */ | |
| .card-small:nth-of-type(1) { | |
| left: 1%; | |
| } | |
| .card-small:nth-of-type(2) { | |
| left: 34%; | |
| } | |
| .card-small:nth-of-type(3) { | |
| left: 67%; /* 34*2 - 1% for padding*/ | |
| } | |
| /* Define center position of first and last card */ | |
| .card.center:nth-of-type(1), | |
| .card.center:nth-of-type(3) { | |
| left: 34%; | |
| } | |
| .card.card-small { | |
| width: 32%; | |
| min-width: 350px; | |
| } | |
| .card.card-large { | |
| width: 98%; | |
| left: 1% !important; | |
| } | |
| .top { | |
| z-index: 1; | |
| } | |
| .toggle { | |
| position: absolute; | |
| right: 15px; | |
| top: 15px; | |
| cursor: pointer; | |
| } | |
| /** End - Demo CSS **/ | |
| </style> | |
| </head> | |
| <body> | |
| <div class="title"> | |
| Expanding Cards Demo | |
| </div> | |
| <div class="card-container"> | |
| <div class="card card-small"> | |
| <span class="glyphicon glyphicon-resize-full toggle"></span> | |
| <div class="card-inner"> | |
| <div class="card-header"> | |
| Card 1 | |
| </div> | |
| <div class="card-body"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget pellentesque ipsum, id molestie diam. Aenean vestibulum metus vel odio euismod iaculis. In euismod lobortis nulla et dictum. Vestibulum in cursus odio. Sed rhoncus massa in purus mattis, id tincidunt lectus pellentesque. Suspendisse rhoncus dolor non eros tincidunt, quis fringilla tellus porta. Nunc ipsum justo, ultricies eget suscipit vitae, viverra blandit arcu. Aliquam ultrices sem in bibendum luctus. Sed sagittis nec magna nec vehicula. Donec vehicula ligula vitae dui rhoncus, id rhoncus elit mollis. Pellentesque placerat quis felis a efficitur. Curabitur eleifend facilisis iaculis. In ante lorem, accumsan ut quam vel, fringilla pretium felis. Quisque eget odio ut nisl porta convallis. Praesent bibendum congue nulla, sit amet dignissim lectus placerat at. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card card-small"> | |
| <span class="glyphicon glyphicon-resize-full toggle"></span> | |
| <div class="card-inner"> | |
| <div class="card-header"> | |
| Card 2 | |
| </div> | |
| <div class="card-body"> | |
| Sed fermentum urna non neque viverra, eu pulvinar mi sagittis. Cras nec elit sit amet neque semper pellentesque. Nunc elementum cursus volutpat. Nulla a mi eu nulla lacinia consequat sit amet ac urna. Duis eu purus non massa lacinia sollicitudin eu id sem. Praesent id justo sapien. Donec interdum, dui in congue bibendum, justo ligula faucibus enim, vitae tincidunt justo enim id eros. Duis rutrum malesuada efficitur. Sed egestas sed ligula aliquam pulvinar. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card card-small"> | |
| <span class="glyphicon glyphicon-resize-full toggle"></span> | |
| <div class="card-inner"> | |
| <div class="card-header"> | |
| Card 3 | |
| </div> | |
| <div class="card-body"> | |
| Aenean egestas pharetra viverra. Praesent vehicula consectetur nisi et dapibus. Curabitur sed nunc risus. Sed elit elit, bibendum sed placerat vitae, sollicitudin ac leo. Aliquam at suscipit mi. Sed id ex maximus, sagittis sem ut, tempus velit. Nam dapibus, purus vel porttitor varius, odio justo fermentum nisl, non maximus neque augue vulputate tortor. Praesent eu eros ut odio aliquam vehicula. Maecenas lacinia vel massa sed hendrerit. Morbi non pretium purus. Suspendisse rutrum tincidunt dui, in facilisis odio ornare in. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="instructions"> | |
| Click on the <span class="glyphicon glyphicon-resize-full"></span> button to expand a card | |
| </div> | |
| <script id="jsbin-javascript"> | |
| $(function() { | |
| $('.toggle').on('click', function() { | |
| var card = $(this).parent('.card'); | |
| var isMaximizing = card.hasClass('card-small'); | |
| var animationDelay = 500; // in ms | |
| /** | |
| Ordering of animations is different depending on if we maximize or minimize a card | |
| **/ | |
| if(isMaximizing) { | |
| card.toggleClass('top'); | |
| $('.card').toggleClass('center'); | |
| // Wait for cards to center, then maximize | |
| setTimeout(function() { | |
| card.toggleClass('card-small card-large'); | |
| }, animationDelay); | |
| } else { | |
| card.toggleClass('card-small card-large'); | |
| // Wait until card has minized, then re-position cards | |
| setTimeout(function() { | |
| $('.card').toggleClass('center'); | |
| // Reset z-index after cards are in their rightful place | |
| setTimeout(function() { | |
| card.toggleClass('top'); | |
| }, animationDelay); | |
| }, animationDelay); | |
| } | |
| $(this).toggleClass('glyphicon-resize-full glyphicon-resize-small'); | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery.min.js"><\/script> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script> | |
| <script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class="title"> | |
| Expanding Cards Demo | |
| </div> | |
| <div class="card-container"> | |
| <div class="card card-small"> | |
| <span class="glyphicon glyphicon-resize-full toggle"></span> | |
| <div class="card-inner"> | |
| <div class="card-header"> | |
| Card 1 | |
| </div> | |
| <div class="card-body"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget pellentesque ipsum, id molestie diam. Aenean vestibulum metus vel odio euismod iaculis. In euismod lobortis nulla et dictum. Vestibulum in cursus odio. Sed rhoncus massa in purus mattis, id tincidunt lectus pellentesque. Suspendisse rhoncus dolor non eros tincidunt, quis fringilla tellus porta. Nunc ipsum justo, ultricies eget suscipit vitae, viverra blandit arcu. Aliquam ultrices sem in bibendum luctus. Sed sagittis nec magna nec vehicula. Donec vehicula ligula vitae dui rhoncus, id rhoncus elit mollis. Pellentesque placerat quis felis a efficitur. Curabitur eleifend facilisis iaculis. In ante lorem, accumsan ut quam vel, fringilla pretium felis. Quisque eget odio ut nisl porta convallis. Praesent bibendum congue nulla, sit amet dignissim lectus placerat at. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card card-small"> | |
| <span class="glyphicon glyphicon-resize-full toggle"></span> | |
| <div class="card-inner"> | |
| <div class="card-header"> | |
| Card 2 | |
| </div> | |
| <div class="card-body"> | |
| Sed fermentum urna non neque viverra, eu pulvinar mi sagittis. Cras nec elit sit amet neque semper pellentesque. Nunc elementum cursus volutpat. Nulla a mi eu nulla lacinia consequat sit amet ac urna. Duis eu purus non massa lacinia sollicitudin eu id sem. Praesent id justo sapien. Donec interdum, dui in congue bibendum, justo ligula faucibus enim, vitae tincidunt justo enim id eros. Duis rutrum malesuada efficitur. Sed egestas sed ligula aliquam pulvinar. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card card-small"> | |
| <span class="glyphicon glyphicon-resize-full toggle"></span> | |
| <div class="card-inner"> | |
| <div class="card-header"> | |
| Card 3 | |
| </div> | |
| <div class="card-body"> | |
| Aenean egestas pharetra viverra. Praesent vehicula consectetur nisi et dapibus. Curabitur sed nunc risus. Sed elit elit, bibendum sed placerat vitae, sollicitudin ac leo. Aliquam at suscipit mi. Sed id ex maximus, sagittis sem ut, tempus velit. Nam dapibus, purus vel porttitor varius, odio justo fermentum nisl, non maximus neque augue vulputate tortor. Praesent eu eros ut odio aliquam vehicula. Maecenas lacinia vel massa sed hendrerit. Morbi non pretium purus. Suspendisse rutrum tincidunt dui, in facilisis odio ornare in. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="instructions"> | |
| Click on the <span class="glyphicon glyphicon-resize-full"></span> button to expand a card | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">/** Start - Showcase CSS **/ | |
| .title { | |
| width 100%; | |
| text-align: center; | |
| background-color: #F25F70; | |
| margin-top: 0; | |
| padding: 10px; | |
| color: white; | |
| text-transform: uppercase ; | |
| border-bottom: 1px solid #F8F8F8; | |
| font-size: 16px; | |
| min-width: 1100px; | |
| font-weight: 200; | |
| } | |
| .instructions { | |
| margin-top: 30px; | |
| width: 50%; | |
| text-align: center; | |
| padding: 15px; | |
| border: 1px dotted grey; | |
| margin-left: 25%; | |
| } | |
| .instructions span { | |
| padding: 0px 5px | |
| } | |
| /** End - Showcase CSS **/ | |
| /** Start - Demo CSS **/ | |
| .card-container { | |
| width: 100%; | |
| min-width: 1100px; | |
| padding: 1%; | |
| height: 470px; | |
| margin-top: 30px; | |
| position: relative; | |
| } | |
| .card { | |
| position: absolute; | |
| height: 450px; | |
| padding: 15px; | |
| border: 1px solid lightgrey; | |
| border-radius: 3px; | |
| background-color: #fafafa; | |
| transition: left 500ms ease-in-out 0s, width 500ms ease-in-out 0s; | |
| -webkit-transition: left 500ms ease-in-out 0s, width 500ms ease-in-out 0s; | |
| top: 14px; | |
| z-index: 0; | |
| } | |
| .card-header { | |
| border-bottom: 1px solid lightgrey; | |
| height: 40px; | |
| text-align: center; | |
| } | |
| .card-body { | |
| padding: 20px 10px 0px 10px; | |
| overflow: scroll; | |
| position: relative; | |
| height: 370px; | |
| } | |
| /* Define absolute position for each card */ | |
| .card-small:nth-of-type(1) { | |
| left: 1%; | |
| } | |
| .card-small:nth-of-type(2) { | |
| left: 34%; | |
| } | |
| .card-small:nth-of-type(3) { | |
| left: 67%; /* 34*2 - 1% for padding*/ | |
| } | |
| /* Define center position of first and last card */ | |
| .card.center:nth-of-type(1), | |
| .card.center:nth-of-type(3) { | |
| left: 34%; | |
| } | |
| .card.card-small { | |
| width: 32%; | |
| min-width: 350px; | |
| } | |
| .card.card-large { | |
| width: 98%; | |
| left: 1% !important; | |
| } | |
| .top { | |
| z-index: 1; | |
| } | |
| .toggle { | |
| position: absolute; | |
| right: 15px; | |
| top: 15px; | |
| cursor: pointer; | |
| } | |
| /** End - Demo CSS **/</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(function() { | |
| $('.toggle').on('click', function() { | |
| var card = $(this).parent('.card'); | |
| var isMaximizing = card.hasClass('card-small'); | |
| var animationDelay = 500; // in ms | |
| /** | |
| Ordering of animations is different depending on if we maximize or minimize a card | |
| **/ | |
| if(isMaximizing) { | |
| card.toggleClass('top'); | |
| $('.card').toggleClass('center'); | |
| // Wait for cards to center, then maximize | |
| setTimeout(function() { | |
| card.toggleClass('card-small card-large'); | |
| }, animationDelay); | |
| } else { | |
| card.toggleClass('card-small card-large'); | |
| // Wait until card has minized, then re-position cards | |
| setTimeout(function() { | |
| $('.card').toggleClass('center'); | |
| // Reset z-index after cards are in their rightful place | |
| setTimeout(function() { | |
| card.toggleClass('top'); | |
| }, animationDelay); | |
| }, animationDelay); | |
| } | |
| $(this).toggleClass('glyphicon-resize-full glyphicon-resize-small'); | |
| }); | |
| });</script></body> | |
| </html> |
This file contains 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
| /** Start - Showcase CSS **/ | |
| .title { | |
| width 100%; | |
| text-align: center; | |
| background-color: #F25F70; | |
| margin-top: 0; | |
| padding: 10px; | |
| color: white; | |
| text-transform: uppercase ; | |
| border-bottom: 1px solid #F8F8F8; | |
| font-size: 16px; | |
| min-width: 1100px; | |
| font-weight: 200; | |
| } | |
| .instructions { | |
| margin-top: 30px; | |
| width: 50%; | |
| text-align: center; | |
| padding: 15px; | |
| border: 1px dotted grey; | |
| margin-left: 25%; | |
| } | |
| .instructions span { | |
| padding: 0px 5px | |
| } | |
| /** End - Showcase CSS **/ | |
| /** Start - Demo CSS **/ | |
| .card-container { | |
| width: 100%; | |
| min-width: 1100px; | |
| padding: 1%; | |
| height: 470px; | |
| margin-top: 30px; | |
| position: relative; | |
| } | |
| .card { | |
| position: absolute; | |
| height: 450px; | |
| padding: 15px; | |
| border: 1px solid lightgrey; | |
| border-radius: 3px; | |
| background-color: #fafafa; | |
| transition: left 500ms ease-in-out 0s, width 500ms ease-in-out 0s; | |
| -webkit-transition: left 500ms ease-in-out 0s, width 500ms ease-in-out 0s; | |
| top: 14px; | |
| z-index: 0; | |
| } | |
| .card-header { | |
| border-bottom: 1px solid lightgrey; | |
| height: 40px; | |
| text-align: center; | |
| } | |
| .card-body { | |
| padding: 20px 10px 0px 10px; | |
| overflow: scroll; | |
| position: relative; | |
| height: 370px; | |
| } | |
| /* Define absolute position for each card */ | |
| .card-small:nth-of-type(1) { | |
| left: 1%; | |
| } | |
| .card-small:nth-of-type(2) { | |
| left: 34%; | |
| } | |
| .card-small:nth-of-type(3) { | |
| left: 67%; /* 34*2 - 1% for padding*/ | |
| } | |
| /* Define center position of first and last card */ | |
| .card.center:nth-of-type(1), | |
| .card.center:nth-of-type(3) { | |
| left: 34%; | |
| } | |
| .card.card-small { | |
| width: 32%; | |
| min-width: 350px; | |
| } | |
| .card.card-large { | |
| width: 98%; | |
| left: 1% !important; | |
| } | |
| .top { | |
| z-index: 1; | |
| } | |
| .toggle { | |
| position: absolute; | |
| right: 15px; | |
| top: 15px; | |
| cursor: pointer; | |
| } | |
| /** End - Demo CSS **/ |
This file contains 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
| $(function() { | |
| $('.toggle').on('click', function() { | |
| var card = $(this).parent('.card'); | |
| var isMaximizing = card.hasClass('card-small'); | |
| var animationDelay = 500; // in ms | |
| /** | |
| Ordering of animations is different depending on if we maximize or minimize a card | |
| **/ | |
| if(isMaximizing) { | |
| card.toggleClass('top'); | |
| $('.card').toggleClass('center'); | |
| // Wait for cards to center, then maximize | |
| setTimeout(function() { | |
| card.toggleClass('card-small card-large'); | |
| }, animationDelay); | |
| } else { | |
| card.toggleClass('card-small card-large'); | |
| // Wait until card has minized, then re-position cards | |
| setTimeout(function() { | |
| $('.card').toggleClass('center'); | |
| // Reset z-index after cards are in their rightful place | |
| setTimeout(function() { | |
| card.toggleClass('top'); | |
| }, animationDelay); | |
| }, animationDelay); | |
| } | |
| $(this).toggleClass('glyphicon-resize-full glyphicon-resize-small'); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment