Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited
Created June 24, 2022 01:17
Embed
What would you like to do?
Meny surv
<!-- Menu element that rolls in from the left -->
<div class="meny">
<h3>More Tools</h3>
<ul>
<li><a href="http://lab.hakim.se/radar/">Share Photos</a></li>
<li><a href="http://lab.hakim.se/forkit-js/">Add a Video</a></li>
<li><a href="http://lab.hakim.se/scroll-effects/">Post Question</a></li>
<li><a href="http://lab.hakim.se/zoom-js">Share a Story</a></li>
<li><a href="http://lab.hakim.se/reveal-js">Add a Term</a></li>
<li><a href="https://itunes.apple.com/us/app/sinuous/id543097218">Post Event</a></li>
<li><a href="http://hakim.se/experiments/css/domtree/">Find a Job</a></li>
<li><a href="http://hakim.se/experiments/css/holobox/">Be a Mentor</a></li>
<li><a href="http://hakim.se/experiments/css/domtree/">Find a Mentor</a></li>
<li><a href="http://hakim.se/experiments/css/holobox/">Donate</a></li>
<li><a href="http://archive.landsurveyorsunited.org">LSU Archive</a></li>
</ul>
</div>
<!-- Arrow that appears from the left when menu is collapsed -->
<div class="meny-arrow">&#x25BA;</div>
<!-- Contents that will be rotated when the meny is expanded -->
<div class="meny-contents">
<div class="cover"></div>
<div id="copy"><a href="https://landsurveyorsunited.com/main/authorization/signUp?target=http://landsurveyorsunited.com/community">Sign Up</a> &bull; <a rel="author" href="https://landsurveyorsunited.com/main/authorization/signIn?target=http://landsurveyorsunited.com/community">Sign In</a></div>
<center><table>
<tbody>
<tr>
<td><details class="modal"><summary>🎙️</summary><div> <a href="/radio" target="load">Land Surveyor Radio</a><div><div class='embed-container'><iframe src='/radio' style='border:0'></iframe></div></div></details></td>
<td><details class="modal"><summary>🏬</summary><div> <a href="#contact" target="load">Land Survey Company Directory</a><div class='embed-container'><iframe src='https://directory.surveyearth.com/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🦶</summary><div> <a href="/mentorship" target="load">🦶Mentorship for Land Surveyors</a><div class='embed-container'><iframe src='/mentorship' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🧲</summary><div> <a href="/cv" target="load">Land Surveyor Resume CV Generator</a><div class='embed-container'><iframe src='https://storage.ning.com/topology/rest/1.0/file/get/8999865477?profile=original' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>📺️</summary><div> <a href="/video" target="load">📺️ Land Surveyor Video Theatre</a><div class='embed-container'><iframe src='https://learn.landsurveyorsunited.com/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🖼️</summary><div> <a href="/photo" target="load">Surveyor Submitted Photos</a><div class='embed-container'><iframe src='https://isurveyedthat.glideapp.io/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>📚️</summary><div> <a href="/almanac" target="load">Land Surveyor Learning Resources</a><div class='embed-container'><iframe src='https://prism.glideapp.io/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>📊</summary><div> <a href="/wiki/spreadsheets" target="load">Surveyor Spreadsheet Tools</a><div class='embed-container'><iframe src='https://landsurveyorsunited.com/hubs/excel' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🧿</summary><div> <a href="/hubs/Locations" target="load">🧿 Find Your Local Hub</a><div class='embed-container'><iframe src='https://learn.landsurveyorsunited.com/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🗺️</summary><div> <a href="/map" target="load">🗺️ Global Land Surveyors Map</a><iframe width="100%" height="520" frameborder="0" src="https://landsurveyors.carto.com/viz/9c0755a0-8fc6-11e6-b3bf-0ef24382571b/embed_map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe></details></td>
<td><details class="modal"><summary>💬</summary><div> <a href="/forum/topics" target="load">💬Land Surveyor Forums </a><div class='embed-container'><iframe src='https://landsurveyors.biew.site/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🌎</summary><div> <a href="/jobs" target="load">🌎Land Surveying Jobs Worldwide</a><div class='embed-container'><iframe src='https://jobs.landsurveyorsunited.org' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🛒</summary><div> <a href="/smarketplace" target="load">🛒Surveyor Marketplace & Virtual Mall</a><div class='embed-container'><iframe src='https://rss.smarketplace.org' style='border:0'></iframe></div></details></td>
</tr>
</tbody>
</table></center>
<div class="">
<h1>Resources and Tools</h1>
<h2>Land Surveyors United Community</h2>
<button class="panel-trigger-left">👈️ Surveyor Jobs Board</button><br><br>
<button class="panel-trigger-right">👉️ Surveyor marketplace</button><br><br>
<button class="panel-trigger-top">👆️ Surveying Community</button><br><br>
<button class="panel-trigger-bottom">👇️Land Surveyor Resources</button><br><br>
</div>
<div id="panel1" class="panel panel-left">
<div class="panel-container">
<div class="panel-contents">Surveying Jobs Board</div>
<div class='embed-container'><iframe src='https://jobs.landsurveyorsunited.org' style='border:0'></iframe></div>
<div class="panel-close-button">&#128473;</div>
</div>
</div>
<div id="panel2" class="panel panel-right">
<div class="panel-container">
<div class="panel-contents">Surveyor Marketplace</div>
<div class='embed-container'><iframe src='https://rss.smarketplace.org' style='border:0'></iframe></div>
<div class="panel-close-button">&#128473;</div>
</div>
</div>
<div id="panel3" class="panel panel-top">
<div class="panel-container">
<div class="panel-contents">Surveyor Marketplace Virtual Mall</div>
<div class='embed-container'><iframe src='https://app.smarketplace.org/full' style='border:0'></iframe></div>
<div class="panel-close-button">&#128473;</div>
</div>
</div>
<div id="panel4" class="panel panel-bottom">
<div class="panel-container">
<div class="panel-contents">Global Member Map </div>
<iframe width="100%" height="520" frameborder="0" src="https://landsurveyors.carto.com/viz/9c0755a0-8fc6-11e6-b3bf-0ef24382571b/embed_map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
<div class="panel-close-button">&#128473;</div>
</div>
</div>
</div>

Meny surv

A three dimensional and space efficient menu concept. Could easily be made CSS-only via :hover but touch is cool so I went for JavaScript.

A Pen by JFarrow on CodePen.

License.

(function(){
var meny = document.querySelector( '.meny' );
// Avoid throwing errors if the script runs on a page with
// no .meny
if( !meny || !meny.parentNode ) { return; }
var menyWrapper = meny.parentNode;
// Add a class to identify the parent of the meny parts
menyWrapper.className += ' meny-wrapper';
var indentX = menyWrapper.offsetLeft,
activateX = 40,
deactivateX = meny.offsetWidth || 200,
touchStartX = null,
touchMoveX = null,
isActive = false,
isMouseDown = false;
var supports3DTransforms = 'WebkitPerspective' in document.body.style ||
'MozPerspective' in document.body.style ||
'msPerspective' in document.body.style ||
'OPerspective' in document.body.style ||
'perspective' in document.body.style;
document.addEventListener( 'mousedown', onMouseDown, false );
document.addEventListener( 'mouseup', onMouseUp, false );
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'touchstart', onTouchStart, false );
document.addEventListener( 'touchend', onTouchEnd, false );
// Fall back to more basic CSS
if( !supports3DTransforms ) {
document.documentElement.className += ' meny-no-transform';
}
document.documentElement.className += ' meny-ready';
function onMouseDown( event ) {
isMouseDown = true;
}
function onMouseMove( event ) {
// Prevent opening/closing when mouse is down since
// the user may be selecting text
if( !isMouseDown ) {
var x = event.clientX - indentX;
if( x > deactivateX ) {
deactivate();
}
else if( x < activateX ) {
activate();
}
}
}
function onMouseUp( event ) {
isMouseDown = false;
}
function onTouchStart( event ) {
touchStartX = event.touches[0].clientX - indentX;
touchMoveX = null;
if( isActive || touchStartX < activateX ) {
document.addEventListener( 'touchmove', onTouchMove, false );
}
}
function onTouchMove( event ) {
touchMoveX = event.touches[0].clientX - indentX;
if( isActive && touchMoveX < touchStartX - activateX ) {
deactivate();
event.preventDefault();
}
else if( touchStartX < activateX && touchMoveX > touchStartX + activateX ) {
activate();
event.preventDefault();
}
}
function onTouchEnd( event ) {
document.addEventListener( 'touchmove', onTouchMove, false );
// If there was no movement this was a tap
if( touchMoveX === null ) {
// Hide the menu when tapping on the content area
if( touchStartX > deactivateX ) {
deactivate();
}
// Show the meny when tapping on the left edge
else if( touchStartX < activateX * 2 ) {
activate();
}
}
}
function activate() {
if( isActive === false ) {
isActive = true;
// Add the meny-active class and clean up whitespace
document.documentElement.className = document.documentElement.className.replace( /\s+$/gi, '' ) + ' meny-active';
}
}
function deactivate() {
if( isActive === true ) {
isActive = false;
// Remove the meny-active class
document.documentElement.className = document.documentElement.className.replace( 'meny-active', '' );
}
}
})();
/*
Simple slide-in panel, controlled by CSS variables.
JavaScript is only used for toggling class names on panel.
Supports all 4 directions left, right, top and bottom.
JavaScript function returns handler for use on triggers.
Panel closes on click outside panel (overlay) or on close button.
*/
(function() {
var setPanelHandler = function(panel) {
var panelClose = panel.querySelector(".panel-close-button"),
panelContainer = panel.querySelector(".panel-container"),
panelHandler = function(e) {
if (
(e.target === panel && !panel.classList.contains("panel-inactive")) ||
!e.currentTarget.contains(panelContainer)
) {
panel.classList.contains("panel-active")
? panel.classList.toggle("panel-inactive")
: panel.classList.add("panel-active");
}
}.bind(panel);
panel.addEventListener("click", panelHandler, false);
if (panelClose) panelClose.addEventListener("click", panelHandler, false);
return panelHandler;
};
var panelHandlerLeft = setPanelHandler(document.querySelector("#panel1"));
document
.querySelector(".panel-trigger-left")
.addEventListener("click", panelHandlerLeft, false);
var panelHandlerRight = setPanelHandler(document.querySelector("#panel2"));
document
.querySelector(".panel-trigger-right")
.addEventListener("click", panelHandlerRight, false);
var panelHandlerTop = setPanelHandler(document.querySelector("#panel3"));
document
.querySelector(".panel-trigger-top")
.addEventListener("click", panelHandlerTop, false);
var panelHandlerBottom = setPanelHandler(document.querySelector("#panel4"));
document
.querySelector(".panel-trigger-bottom")
.addEventListener("click", panelHandlerBottom, false);
})();
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
background-repeat: repeat;
font-family: 'Lato', Helvetica, sans-serif;
font-size: 16px;
color: #222;
}
/**
* Element which wraps all of the other .meny parts
*/
.meny-wrapper {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 0% 50%;
-moz-perspective-origin: 0% 50%;
-ms-perspective-origin: 0% 50%;
-o-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.meny,
.meny-contents {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-transform .4s ease;
-moz-transition: -moz-transform .4s ease;
-ms-transition: -ms-transform .4s ease;
-o-transition: -o-transform .4s ease;
transition: transform .4s ease;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
/**
* The menu element which expands out from the left.
*/
.meny {
display: none;
position: fixed;
height: 100%;
width: 200px;
z-index: 1;
margin: 0px;
padding: 15px;
-webkit-transform: rotateY( -30deg ) translateX( -97% );
-moz-transform: rotateY( -30deg ) translateX( -97% );
-ms-transform: rotateY( -30deg ) translateX( -97% );
-o-transform: rotateY( -30deg ) translateX( -97% );
transform: rotateY( -30deg ) translateX( -97% );
}
.meny-ready .meny {
display: block;
}
.meny-active .meny {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/**
* Page contents which gets pushed aside while meny is active.
*/
.meny-contents {
background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 20px 40px;
width: 100%;
height: 100%;
overflow-y: auto;
}
.meny-active .meny-contents {
-webkit-transform: translateX( 200px ) rotateY( 15deg );
-moz-transform: translateX( 200px ) rotateY( 15deg );
-ms-transform: translateX( 200px ) rotateY( 15deg );
-o-transform: translateX( 200px ) rotateY( 15deg );
transform: translateX( 200px ) rotateY( 15deg );
}
/**
* A shadow-like element placed on top of the contents while
* meny is active.
*/
.meny-contents .cover {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
z-index: 1000;
opacity: 0;
background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.meny-ready .meny-contents .cover {
display: block;
}
.meny-active .meny-contents .cover {
visibility: visible;
opacity: 1;
}
/**
* Graphic that highlights menu availability while inactive.
*/
.meny-arrow {
position: absolute;
top: 45%;
left: 12px;
z-index: 2;
font-family: sans-serif;
font-size: 20px;
color: #fff;
text-stroke: #000 2px 2px 2px;
-webkit-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.meny-active .meny-arrow {
left: -40px;
opacity: 0;
}
/**
* Fallback for browsers that don't support transforms.
*/
.meny-no-transform .meny,
.meny-no-transform .meny-contents {
-webkit-transition: left .4s ease;
-moz-transition: left .4s ease;
-ms-transition: left .4s ease;
-o-transition: left .4s ease;
transition: left .4s ease;
}
.meny-no-transform .meny {
left: -300px;
}
.meny-no-transform.meny-active .meny {
left: 0px;
}
.meny-no-transform .meny-contents {
position: absolute;
}
.meny-no-transform.meny-active .meny-contents {
left: 300px;
}
/**
* Styles that are more or less specific to the demo page:
*/
a {
color: #c2575b;
text-decoration: none;
-webkit-transition: 0.15s color ease;
-moz-transition: 0.15s color ease;
-ms-transition: 0.15s color ease;
-o-transition: 0.15s color ease;
transition: 0.15s color ease;
}
a:hover {
color: #f76f76;
}
h1,
h2 {
font-size: 18px;
}
.meny {
background: #333;
color: #eee;
}
.meny ul {
margin-top: 10px;
}
.meny ul li {
list-style: none;
font-size: 18px;
padding: 3px 5px;
}
.meny ul li:before {
content: '-';
margin-right: 5px;
color: rgba( 255, 255, 255, 0.2 );
}
.meny-contents>article {
max-width: 400px;
}
.meny-contents p {
margin: 10px 0 10px 0;
font-size: 16px;
line-height: 1.32;
}
.meny-contents small {
display: block;
margin-top: 10px;
padding-top: 10px;
color: #333;
font-size: 0.85em;
border-top: 1px dashed #ccc;
-webkit-text-size-adjust: none;
}
.meny-contents .sharing {
position: absolute;
bottom: 20px;
}
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500italic);
html {
height: 100%;
background-color: rgba(34, 32, 36, 1);
background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: url("https://storage.ning.com/topology/rest/1.0/file/get/10591557652?profile=RESIZE_930x");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font: normal 100% "Fira Sans", sans-serif;
}
h1,h2 {-webkit-text-stroke: 1px #cc0000;
-webkit-text-fill-color: #FFFFFF;font-weight:900;}
h1 {font-size:3.5em;}
h2 {font-size:2.5em;}
/* Main element. The page overlay */
.panel {
position: absolute;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 0;
overflow: hidden;
cursor: pointer;
/* Theese 3 vars controls the speed and size of the panel */
--panel-width: 40vw;
--panel-height: 40vw;
--panel-transition-speed: 0.3s;
}
.panel.panel-active {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
transition: background var(--panel-transition-speed) linear;
}
#copy {
position:fixed;
z-index:1000;
right:150px;
top:-8px;
font-size:.65em;
padding:8px 8px 2px 8px;
background: #000000;
border: 2px solid #737c85;
border-radius:.7em;
opacity: 0.9;
box-shadow:0 0 8px #5f7182;
color:#eee;
background-position: fixed;
}
#copy a {
color:#ccc;
text-decoration:none
}
#copy a:hover {
color:#fff
}
.panel.panel-inactive {
width: 0vw;
height: 0vh;
background: rgba(0, 0, 0, 0);
transition: background var(--panel-transition-speed) linear,
width 0s linear var(--panel-transition-speed),
height 0s linear var(--panel-transition-speed);
}
/* Panel Container. This is the element that slide in-out */
.panel-container {
display: block;
position: absolute;
background: #eee;
overflow: auto;
cursor: default;
transition: var(--panel-transition-speed) transform ease-in-out;
float: left;
}
/* Left side panel */
.panel.panel-left .panel-container {
top: 0;
left: 0;
width: var(--panel-width);
height: 100%;
transform: translate(calc(var(--panel-width) * -1), 0);
box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-left.panel-inactive .panel-container {
transform: translate(calc(var(--panel-width) * -1), 0) !important;
}
/* Right side panel */
.panel.panel-right .panel-container {
top: 0;
right: 0;
width: var(--panel-width);
height: 100%;
transform: translate(var(--panel-width), 0);
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-right.panel-inactive .panel-container {
transform: translate(var(--panel-width), 0) !important;
}
/* Top panel */
.panel.panel-top .panel-container {
top: 0;
left: 0;
height: var(--panel-height);
width: 100%;
transform: translate(0, calc(var(--panel-height) * -1));
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-top.panel-inactive .panel-container {
transform: translate(0, calc(var(--panel-height) * -1)) !important;
}
/* Bottom panel */
.panel.panel-bottom .panel-container {
bottom: 0;
left: 0;
height: var(--panel-height);
width: 100%;
transform: translate(0, var(--panel-height));
box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-bottom.panel-inactive .panel-container {
transform: translate(0, var(--panel-height)) !important;
}
/* Expand panel */
.panel.panel-active .panel-container {
transform: translate(0, 0);
}
/* Panel Close Button */
.panel-close-button {
position: absolute;
width: 1em;
height: 1em;
top: 0.5em;
right: 0.5em;
color: #ddd;
background: #cc0000;
cursor: pointer;
text-align: center;
font: normal 1em Arial;
line-height: 1em;
transition: color .4s ease-in-out;
}
.panel-close-button:hover {
color: #00ff00;
}
.button
{
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.button:hover
{
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.button:focus
{
outline: 0;
background: #fafafa;
}
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;
pointer-events: none;
}
/* Buttons and inputs */
button.button, input.button
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}
/* removes extra inner spacing in Firefox */
button::-moz-focus-inner
{
border: 0;
padding: 0;
}
/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner
{
padding: .4em;
}
/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
{
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Alef);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}
:root {
--gutter-horizontal: 10vw;
--gutter-vertical: 10vh;
}
img {
max-width: 100%;
}
details + details {
margin-top: 1em;
}
details.modal summary {
background: #fff;
color:#000066;
border: 2px solid black;
cursor: pointer;
display: inline-block;
padding: .25em .5em;
}
details.modal summary::-webkit-details-marker {
display: none;
}
details.modal summary::before {
content: "";
display: inline-block;
padding-right: .25em;
}
details[open].modal summary::before {
content: "Close";
}
details[open].modal {
overflow: auto;
padding: 1em;
position: fixed;
z-index: 10;
}
details[open].modal,
details[open].modal::after {
bottom: 10vh;
bottom: var(--gutter-vertical);
left: 10vw;
left: var(--gutter-horizontal);
right: 10vw;
right: var(--gutter-horizontal);
top: 10vh;
top: var(--gutter-vertical);
}
details[open].modal::before,
details[open].modal::after {
content: "";
position: fixed;
z-index: -1;
}
details[open].modal::before {
background: rgba(0, 0, 0, .75);
bottom: 0;
left: 0;
right: 0;
top: 0;
}
details[open].modal::after {
background: #fff;
}
.embed-container { position: relative; padding-bottom: 86.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.frameContainer{
position: fixed;
height: 100%;
top:0px;
left: 300px;
right:0px;
bottom:0px;
z-index:1;
}
.main_iframe{
height: 100%;
width: 100%;
border:none;
background:#3366ff;
}
<link href="https://landsurveyorsunited.github.io/cssfiles/multiplanel.js" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment