Skip to content

Instantly share code, notes, and snippets.

@ezodude
Forked from anonymous/jsbin.dutukoho.css
Last active August 29, 2015 14:03
Show Gist options
  • Save ezodude/21ba0817b336771ec214 to your computer and use it in GitHub Desktop.
Save ezodude/21ba0817b336771ec214 to your computer and use it in GitHub Desktop.
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';
}
<!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>
$('.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