-
-
Save ezodude/21ba0817b336771ec214 to your computer and use it in GitHub Desktop.
Panel Control (http://jsbin.com/dutukoho/215/edit)
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
| body{ | |
| height: 470px; | |
| width: 320px; | |
| } | |
| .content, .footer{ | |
| border: 1px solid #ccc; | |
| } | |
| .content{ | |
| height: 400px; | |
| overflow-y: scroll; | |
| background-color: SEAGREEN; | |
| color: #fff; | |
| padding: 10px; | |
| } | |
| .footer{ | |
| height: 50px; | |
| width: 100%; | |
| /* overflow: hidden; */ | |
| /* position: relative; */ | |
| } | |
| .panel-control{ | |
| width: 100%; | |
| background-color: thistle; | |
| position: fixed; | |
| -webkit-transition: -webkit-transform 0.5s; | |
| transition: transform 0.5s; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slide-up { | |
| -webkit-transform: translateY(-75%); | |
| transform: translateY(-75%); | |
| } | |
| .panel-toggle{ | |
| width: 50%; | |
| height: 50px; | |
| display: block; | |
| } | |
| .panel-toggle.hide:before{ | |
| content: 'show'; | |
| } | |
| .panel-toggle.show:before{ | |
| content: 'hide'; | |
| } | |
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://zeptojs.com/zepto.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class="content"> | |
| <h1>I gotta piss</h1> | |
| <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p> | |
| <h1>Hold on to your butts</h1> | |
| <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p> | |
| <h1>Is she dead, yes or no?</h1> | |
| <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p> | |
| </div> | |
| <div class="footer"> | |
| <div class="panel-control"> | |
| <button class="panel-toggle hide"></button> | |
| <div class="panel-subviews"> | |
| <p>Choice 1</p> | |
| <p>Choice 1</p> | |
| <p>Choice 1</p> | |
| <p>Choice 1</p> | |
| <p>Choice 1</p> | |
| <p>Choice 1</p> | |
| <p>Choice 1</p> | |
| <p>Choice 1</p> | |
| </div> | |
| </div> | |
| </div> | |
| </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
| $('.panel-control').css({ | |
| width: $('.footer').width(), | |
| height: $('.panel-control').height() + 25 | |
| }); | |
| $('.panel-toggle').css({ | |
| width: $('.footer').width(), | |
| height:$('.footer').height() | |
| }); | |
| $('.panel-toggle').on('click', function(){ | |
| var hidden = $(this).hasClass('hide'); | |
| if(hidden){ | |
| $(this).removeClass('hide').addClass('show'); | |
| $('.panel-control').addClass('slide-up'); | |
| $('.content').css({'overflow-y': 'hidden'}); | |
| }else{ | |
| $(this).removeClass('show').addClass('hide'); | |
| $('.panel-control').removeClass('slide-up'); | |
| $('.content').css({'overflow-y': 'scroll'}); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment