Skip to content

Instantly share code, notes, and snippets.

@pablinhob

pablinhob/gist:91692353982f9c5e95126bdf1b850814

Created July 9, 2019 07:24
Show Gist options
  • Save pablinhob/91692353982f9c5e95126bdf1b850814 to your computer and use it in GitHub Desktop.
Save pablinhob/91692353982f9c5e95126bdf1b850814 to your computer and use it in GitHub Desktop.
Download ZIP
Geozzy iframe RS
Raw
gistfile1.txt
<html>
<head>
<title>Exemplo frame</title>
<style>
body {
padding:0;
margin:0;
}
header {
width:100%;
height:40px;
background-color:red;
position: fixed;
top:0;
}
</style>
</head>
<body >
<header> </header>
<img src="https://turismo.ribeirasacra.org/cgmlImg/470-areiixn/imgCollections/Vistas_Canon_Sil.jpg" style="float:left;margin-right:10px;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at fermentum eros. Curabitur luctus augue sit amet eros dictum, ac congue orci sodales. In ornare velit et sem egestas feugiat. Curabitur ante libero, tincidunt a lectus a, sagittis vulputate libero. Aenean auctor at tortor eget auctor. Aliquam augue orci, varius sed mi eu, bibendum viverra nibh. Fusce quis mi metus. Nam sit amet erat a nulla vehicula interdum. Aenean malesuada dolor at mauris finibus congue. Nam ut posuere urna.</p>
<p>Etiam quis posuere purus, a faucibus odio. Quisque tincidunt, turpis eget facilisis iaculis, mi ex ornare velit, tristique vulputate ligula lacus ac dolor. Maecenas tempor consectetur lacus ac pretium. Nullam ultricies imperdiet massa in egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus posuere lacus vitae consectetur. Aliquam tempor condimentum massa, a blandit mauris mollis vel. In vitae purus consectetur, pharetra augue nec, mattis lorem. Vivamus tellus nisl, dignissim at lacus convallis, mollis tristique sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales est quis mi efficitur lacinia. Phasellus dolor lorem, scelerisque a eros quis, ullamcorper convallis ipsum. Nulla facilisi. Phasellus pharetra, quam tincidunt semper faucibus, lorem eros feugiat erat, nec facilisis neque quam vel eros. Pellentesque tempus mi blandit erat ultrices, quis varius nisl feugiat.</p>
<p>Duis quis rutrum sapien, at condimentum risus. Aenean sed nisi ac velit pretium luctus. Curabitur et leo ac sapien viverra bibendum vitae et justo. Aenean eu maximus arcu. Fusce tempor, enim in cursus fringilla, massa lorem euismod quam, quis tempor leo ex vitae massa. Proin tincidunt quam sed erat bibendum auctor. Integer placerat lacinia molestie. Proin a erat erat. Praesent ut diam vitae felis tristique semper ornare et risus. Nunc vulputate magna quis leo elementum vehicula. Vestibulum elit dui, malesuada at ullamcorper tempus, eleifend non risus.</p>
<p>Mauris nisl diam, vestibulum et mi eget, dapibus lobortis lorem. Quisque ornare tincidunt faucibus. Etiam pretium nisi at dignissim condimentum. Donec venenatis, neque auctor maximus volutpat, turpis tellus dapibus lacus, ac suscipit lorem lectus ac elit. In quis libero lacinia, mattis augue vel, ullamcorper lorem. Integer finibus ac diam vel maximus. Duis a ultricies ex.</p>
<p>Fusce eu eros quis dui commodo congue. Maecenas a sodales lectus, pulvinar cursus ligula. Nunc tempor lectus efficitur semper congue. Vestibulum vel nunc vestibulum, dictum tortor eu, tristique urna. Vivamus fringilla imperdiet velit vel lacinia. Nam sagittis sapien lacinia, fermentum odio a, tincidunt ante. Quisque nec mauris sit amet eros imperdiet sodales nec non eros. Nunc mollis vestibulum auctor. Nam quis accumsan est, a egestas arcu. Etiam at ultrices ex. </p>
<img src="https://turismo.ribeirasacra.org/cgmlImg/5452-apbpaqb/imgCollections/Esgrafiados_na_Ribeira_Sacra.png" style="float:right;margin-left:10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at fermentum eros. Curabitur luctus augue sit amet eros dictum, ac congue orci sodales. In ornare velit et sem egestas feugiat. Curabitur ante libero, tincidunt a lectus a, sagittis vulputate libero. Aenean auctor at tortor eget auctor. Aliquam augue orci, varius sed mi eu, bibendum viverra nibh. Fusce quis mi metus. Nam sit amet erat a nulla vehicula interdum. Aenean malesuada dolor at mauris finibus congue. Nam ut posuere urna.</p>
<p>Etiam quis posuere purus, a faucibus odio. Quisque tincidunt, turpis eget facilisis iaculis, mi ex ornare velit, tristique vulputate ligula lacus ac dolor. Maecenas tempor consectetur lacus ac pretium. Nullam ultricies imperdiet massa in egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus posuere lacus vitae consectetur. Aliquam tempor condimentum massa, a blandit mauris mollis vel. In vitae purus consectetur, pharetra augue nec, mattis lorem. Vivamus tellus nisl, dignissim at lacus convallis, mollis tristique sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales est quis mi efficitur lacinia. Phasellus dolor lorem, scelerisque a eros quis, ullamcorper convallis ipsum. Nulla facilisi. Phasellus pharetra, quam tincidunt semper faucibus, lorem eros feugiat erat, nec facilisis neque quam vel eros. Pellentesque tempus mi blandit erat ultrices, quis varius nisl feugiat.</p>
<p>Duis quis rutrum sapien, at condimentum risus. Aenean sed nisi ac velit pretium luctus. Curabitur et leo ac sapien viverra bibendum vitae et justo. Aenean eu maximus arcu. Fusce tempor, enim in cursus fringilla, massa lorem euismod quam, quis tempor leo ex vitae massa. Proin tincidunt quam sed erat bibendum auctor. Integer placerat lacinia molestie. Proin a erat erat. Praesent ut diam vitae felis tristique semper ornare et risus. Nunc vulputate magna quis leo elementum vehicula. Vestibulum elit dui, malesuada at ullamcorper tempus, eleifend non risus.</p>
<p>Mauris nisl diam, vestibulum et mi eget, dapibus lobortis lorem. Quisque ornare tincidunt faucibus. Etiam pretium nisi at dignissim condimentum. Donec venenatis, neque auctor maximus volutpat, turpis tellus dapibus lacus, ac suscipit lorem lectus ac elit. In quis libero lacinia, mattis augue vel, ullamcorper lorem. Integer finibus ac diam vel maximus. Duis a ultricies ex.</p>
<p>Fusce eu eros quis dui commodo congue. Maecenas a sodales lectus, pulvinar cursus ligula. Nunc tempor lectus efficitur semper congue. Vestibulum vel nunc vestibulum, dictum tortor eu, tristique urna. Vivamus fringilla imperdiet velit vel lacinia. Nam sagittis sapien lacinia, fermentum odio a, tincidunt ante. Quisque nec mauris sit amet eros imperdiet sodales nec non eros. Nunc mollis vestibulum auctor. Nam quis accumsan est, a egestas arcu. Etiam at ultrices ex. </p>
<snippet>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var headerHeight = 40;
var geozzyExplorerFrame = document.getElementById("geozzyExplorerFrame");
var geozzyCurtain = document.getElementById("geozzyCurtain");
var geozzyTakemeout = document.getElementById("geozzyTakemeout");
// iframe dimensions
document.body.style.overflowX ='hidden';
geozzyExplorerFrame.style.width = '100%';
geozzyExplorerFrame.style.height= window.innerHeight-40;
// curtain dimensions
geozzyCurtain.style.width = geozzyExplorerFrame.style.width;
geozzyCurtain.style.height = geozzyExplorerFrame.style.height;
geozzyCurtain.style.position = 'absolute';
geozzyCurtain.style.zIndex = geozzyExplorerFrame.style.zIndex + 1;
geozzyCurtain.style.backgroundColor = "white";
geozzyCurtain.style.opacity = "0.5";
// take me out button
geozzyTakemeout.style.height = 20;
geozzyTakemeout.style.right = 20;
geozzyTakemeout.style.bottom = 20;
geozzyTakemeout.style.padding = 20;
geozzyTakemeout.style.cursor = "pointer";
geozzyTakemeout.style.backgroundColor = "green";
geozzyTakemeout.style.zIndex = geozzyCurtain.style.zIndex + 1;
geozzyTakemeout.style.position = 'fixed';
geozzyTakemeout.addEventListener("click", function(){
window.scrollTo(0, geozzyExplorerFrame.offsetTop-200);
});
// the scroll event
window.addEventListener('scroll', function(e) {
var iframeViewportOffset = geozzyExplorerFrame.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
if( iframeViewportOffset.top > headerHeight ) {
geozzyCurtain.style.display = "block";
geozzyTakemeout.style.display = "none";
}
else {
geozzyCurtain.style.display = "none";
geozzyTakemeout.style.display = "block";
}
});
});
</script>
<div id="geozzyCurtain"></div>
<div id="geozzyTakemeout">SÁCAME!!</div>
<iframe id="geozzyExplorerFrame" src="https://turismo.ribeirasacra.org/es/mapas-interactivos" ></iframe>
</snippet>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment