Skip to content

Instantly share code, notes, and snippets.

@paddy2k

paddy2k/jsbin.uVoTIHik.css

Created January 8, 2014 01:01
Show Gist options
  • Save paddy2k/8309836 to your computer and use it in GitHub Desktop.
Save paddy2k/8309836 to your computer and use it in GitHub Desktop.
Download ZIP
A simple HTML5 QR Code scanner built using https://github.com/LazarSoft/jsqrcode
Raw
jsbin.uVoTIHik.css
aside,
#navMenuBg{
left: 0px;
top: 50px;
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}
#navMenu{
left: -280px;
-webkit-transform: translate3d(-5px,0,0);
-moz-transform: translate3d(-5px,0,0);
-o-transform: translate3d(-5px,0,0);
transform: translate3d(-5px,0,0);
z-index: 2;
width: 280px;
background: rgba(50,50,50, 1);
color:white;
-webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6);
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6);
}
#navMenuBg{
background-color: rgba(0,0,0,0.5);
opacity: 0;
display:none;
}
#navMenu li{
position: relative;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
#navMenu ul{
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}
.transition{
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
-ms-transition: all 0.15s ease-out;
-o-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
body{
margin:0px;
padding:0px;
font-family:sans;
margin-top:50px;
}
header{
position:fixed;
top:0px;
z-index: 3;
width:100%;
height: 50px;
background-color: darkorange;
color: #fff;
}
article h1{
font-size: 1.3em;
margin: 0.1em 0.1em 0em;
}
article h2{
font-size: 1em;
margin: 0em;
font-weight:normal;
}
#hamburger {
float:left;
border: 1px solid #fff;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
height: 24px;
padding: 3px 4px 3px;
margin: 6px;
position: relative;
width: 25px;
background: darkorange;
}
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
opacity:1;
margin-top: 3px;
width: 90%;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.1s ease-in;
-webkit-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
#hamburger.open div:first-child{
-webkit-transform: translateY(7px) rotate(45deg);
-ms-transform: translateY(7px) rotate(45deg);
-ms-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
#hamburger.open div:last-child{
-webkit-transform: translateY(-7px) rotate(-45deg);
-ms-transform: translateY(-7px) rotate(-45deg);
-ms-transform: translateY(-7px) rotate(-45deg);
transform: translateY(-7px) rotate(-45deg);
}
#hamburger.open div:nth-child(2){
opacity:0;
}
Raw
jsbin.uVoTIHik.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>Welcome to JS Bin</title>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<header>
<section>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<article>
<h1>App Title</h1>
<h2>App Sub-title</h2>
</article>
</section>
</header>
<main>
Body of the page
<div >
status: <span id="status"></span>
</div>
<div >
touchStart: <span id="touchStart"></span>
</div>
<div >
touchMove: <span id="touchMove"></span>
</div>
<div >
touchEnd: <span id="touchEnd"></span>
</div>
<section>
<article>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</article>
</section>
</main>
<div id="navMenuBg"></div>
<aside id="navMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 0</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</aside>
</body>
</html>
Raw
jsbin.uVoTIHik.js
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var haltEvent = function(event) {
event.preventDefault();
event.stopPropagation();
};
var transform = (document.body.style.webkitTransform>-1) ? 'webkitTransform':'transform';
transform = (document.body.style.mozTransform>-1) ? 'mozTransform':transform;
transform = (document.body.style.msTransform>-1) ? 'msTransform':transform;
var menuWidth = 280;
var navMenu = document.getElementById('navMenu');
var navMenuBg = document.getElementById('navMenuBg');
var hamburger = document.getElementById('hamburger');
var navMove = false;
var navOpened = false;
var onStart = function (e){
var startTouch = e.changedTouches[0];
if(startTouch.pageX < 15 && startTouch.pageY > 50 && !navOpened){
navMove = true;
document.getElementById('status').innerText = "Start ";
window.requestAnimationFrame(function(){
navMenuBg.style.display = "block";
navMenu.style[transform] = "translate3d(10px,0,0)";
});
window.addEventListener("touchmove", onMove, false);
window.addEventListener("touchend", onEnd, false);
window.addEventListener("touchcancel", onEnd, false);
}
if(navMove){
haltEvent(e);
}
document.getElementById('touchStart').innerText = startTouch.pageX;
};
var onMove = function (e){
//haltEvent(e);
if(navMove){
var moveTouch = e.changedTouches[0];
var fudgeFactor = 30;
var progress = 1-((menuWidth - moveTouch.pageX)/ menuWidth);
var navPosition = moveTouch.pageX + (fudgeFactor * progress);
document.getElementById('touchMove').innerText = navPosition;
navPosition = (navPosition > menuWidth) ? menuWidth : navPosition ;
navMenuBg.style.opacity =progress;
navMenu.style[transform] = "translate3d("+navPosition+"px,0,0)";
navMove = true;
}
};
var onEnd = function (e){
if(navMove){
haltEvent(e);
var endTouch = e.changedTouches[0];
document.getElementById('touchEnd').innerText = endTouch.pageX;
if((menuWidth/2) > endTouch.pageX){
closeNav();
}
else{
openNav();
}
}
navMove = false;
window.removeEventListener("touchmove", onMove, false);
window.removeEventListener("touchend", onEnd, false);
};
var openNav = function(startX){
navMove = false;
document.getElementById('status').innerText = "Open ";
navMenuBg.classList.add("transition");
navMenu.classList.add("transition");
navMenuBg.style.display = "block";
navMenuBg.style.opacity = 1;
navMenu.style[transform] = "translate3d("+menuWidth+"px,0,0)";
hamburger.classList.add('open');
setTimeout(function(){
navMenuBg.classList.remove('transition');
navMenu.classList.remove('transition');
}, 150);
navOpened = true;
var navMenuMoving = false;
var navMenuStartPosX;
var navMenuStartPosY;
var navMenuScroll;
navMenu.addEventListener("touchstart", function(e){
haltEvent(e);
navMenuStartPosX = e.changedTouches[0].pageX;
navMenuStartPosY = e.changedTouches[0].pageY;
navMenuScroll = navMenu.scrollTop;
}, false);
navMenu.addEventListener("touchmove", function onMove(e){
haltEvent(e);
var movePos = e.changedTouches[0];
var distanceX = (movePos.pageX - navMenuStartPosX)*-1;
var distanceY = (movePos.pageY - navMenuStartPosY)*-1;
// Close the window if swiping left
if(distanceX > (movePos.pageX*0.8)){
closeNav();
navMenu.removeEventListener("touchmove", onMove, false);
}
// Scroll window underneath
navMenu.scrollTop = navMenuScroll+distanceY;
navMenuMoving = true;
}, false);
navMenu.addEventListener("touchend", haltEvent, false);
navMenu.addEventListener("touchcancel", haltEvent, false);
};
var closeNav = function(startX){
navMove = false;
document.getElementById('status').innerText = "Close ";
navMenuBg.classList.add("transition");
navMenu.classList.add("transition");
navMenuBg.style.opacity = 0;
navMenu.style[transform] = "";
hamburger.classList.remove('open');
setTimeout(function(){
navMenuBg.classList.remove('transition');
navMenuBg.style.display = "none";
navMenu.classList.remove('transition');
navMenu.scrollTop = 0;
}, 150);
navOpened = false;
//navMenuBg.removeEventListener("click", closeNav, false);
};
window.addEventListener("touchstart", onStart, false);
navMenuBg.addEventListener("click", closeNav, false);
hamburger.addEventListener("click", function(){
if(navOpened){
closeNav();
}
else{
openNav();
}
}, false);
navMenuBg.addEventListener("touchmove", function(e){
haltEvent(e);
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment