Skip to content

Instantly share code, notes, and snippets.

@Paul-Browne

Paul-Browne/index.html

Created December 4, 2020 11:07
Show Gist options
  • Save Paul-Browne/3f9dba9828886027c2ba555f4968a009 to your computer and use it in GitHub Desktop.
Save Paul-Browne/3f9dba9828886027c2ba555f4968a009 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/pijokefiju
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body{
margin: 0;
}
.bottom-bar{
position: fixed;
background: pink;
padding: 10px;
width: 100%;
bottom:0;
}
.bottom-bar span{
cursor: pointer;
}
.bottom-bar{
display: none;
}
.active-menu .bottom-bar{
display: block;
}
#debug{
position: fixed;
background: blue;
padding: 10px;
width: 100%;
top: 0;
color: white;
font-family: monospace;
}
#debug:before{
content: "debug: "
}
</style>
</head>
<body>
<div>
<nav class="bottom-bar">
<span>link 1</span>
<span>link 2</span>
<span>link 3</span>
</nav>
<h1>Hello world!!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<h1>Hello world!!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<h1>Hello world!!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
<h1>Bottom of the page</h1>
</div>
<div id="debug"></div>
<script id="jsbin-javascript">
window.addEventListener("resize", function(){
var root = document.documentElement;
if(resizingSmaller()){
root.classList.add("active-menu");
// debug
document.getElementById("debug").innerHTML = "resizing smaller";
}else{
root.classList.remove("active-menu");
// debug
document.getElementById("debug").innerHTML = "resizing larger";
}
});
function resizingSmaller(){
var _return = window.lastHeight > window.innerHeight ? 1 : 0;
window.lastHeight = window.innerHeight;
return !!_return;
}
// debug stuff
var spans = document.querySelectorAll("nav span");
var i = spans.length;
while(i--){
spans[i].addEventListener("click", function(e){
document.getElementById("debug").innerHTML = "clicked " + e.target.innerHTML;
})
}
</script>
<script id="jsbin-source-css" type="text/css">body{
margin: 0;
}
.bottom-bar{
position: fixed;
background: pink;
padding: 10px;
width: 100%;
bottom:0;
}
.bottom-bar span{
cursor: pointer;
}
.bottom-bar{
display: none;
}
.active-menu .bottom-bar{
display: block;
}
#debug{
position: fixed;
background: blue;
padding: 10px;
width: 100%;
top: 0;
color: white;
font-family: monospace;
}
#debug:before{
content: "debug: "
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">window.addEventListener("resize", function(){
var root = document.documentElement;
if(resizingSmaller()){
root.classList.add("active-menu");
// debug
document.getElementById("debug").innerHTML = "resizing smaller";
}else{
root.classList.remove("active-menu");
// debug
document.getElementById("debug").innerHTML = "resizing larger";
}
});
function resizingSmaller(){
var _return = window.lastHeight > window.innerHeight ? 1 : 0;
window.lastHeight = window.innerHeight;
return !!_return;
}
// debug stuff
var spans = document.querySelectorAll("nav span");
var i = spans.length;
while(i--){
spans[i].addEventListener("click", function(e){
document.getElementById("debug").innerHTML = "clicked " + e.target.innerHTML;
})
}
</script></body>
</html>
Raw
jsbin.pijokefiju.css
body{
margin: 0;
}
.bottom-bar{
position: fixed;
background: pink;
padding: 10px;
width: 100%;
bottom:0;
}
.bottom-bar span{
cursor: pointer;
}
.bottom-bar{
display: none;
}
.active-menu .bottom-bar{
display: block;
}
#debug{
position: fixed;
background: blue;
padding: 10px;
width: 100%;
top: 0;
color: white;
font-family: monospace;
}
#debug:before{
content: "debug: "
}
Raw
jsbin.pijokefiju.js
window.addEventListener("resize", function(){
var root = document.documentElement;
if(resizingSmaller()){
root.classList.add("active-menu");
// debug
document.getElementById("debug").innerHTML = "resizing smaller";
}else{
root.classList.remove("active-menu");
// debug
document.getElementById("debug").innerHTML = "resizing larger";
}
});
function resizingSmaller(){
var _return = window.lastHeight > window.innerHeight ? 1 : 0;
window.lastHeight = window.innerHeight;
return !!_return;
}
// debug stuff
var spans = document.querySelectorAll("nav span");
var i = spans.length;
while(i--){
spans[i].addEventListener("click", function(e){
document.getElementById("debug").innerHTML = "clicked " + e.target.innerHTML;
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment