Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.jade
Created Jul 27, 2016

Embed
What would you like to do?
Safari like URL Full page preview
.wrapper
.text="Hover over the URL to open a full-page preview of the link just like it does, when you do a triple click on a link in Safari."
a(href="https://codepen.io",class="link")='Codepen'
.iframe_wrapper
iframe(src="",class="iframe")

Safari like URL Full page preview

A pen that demonstrates the behaviour exhibited when you do a triple-click on a link in Safari. It generally opens up a preview pop up that shows the entire page.

A Pen by Dinesh Balaji on CodePen.

License.

var wrapper = document.querySelector('.wrapper');
var link = document.querySelector('.link');
var iframe_wrapper = document.querySelector('.iframe_wrapper')
var iframe = document.querySelector('.iframe');
var shown = false;
link.addEventListener('mouseenter', (event) => {
if (!shown) {
var src = event.target.href;
iframe.src = src;
iframe_wrapper.classList.add('show');
iframe_wrapper.style.left = event.target.offsetLeft + 'px';
iframe_wrapper.style.top = event.target.offsetTop + 'px';
shown = true;
}
});
wrapper.addEventListener('click', (event) => {
if (shown) {
iframe.src = '';
iframe_wrapper.classList.remove('show');
iframe_wrapper.style.left = '0px';
iframe_wrapper.style.top = '0px';
shown = false;
}
});
@import 'https://fonts.googleapis.com/css?family=Lato';
html, body {
width: 100%;
height: 100%;
font-family: 'Lato', sans-serif;
background: linear-gradient(90deg, rgba(82,255,191,1) 0%, rgba(64,231,212,1) 100%);
}
.wrapper {
width: 100%;
height: 100%;
.text {
width: 300px;
text-align: Center;
margin: 10px auto;
background: white;
border: 5px solid rgba(0, 0, 0, 0.5);
padding: 10px;
}
.link {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
text-decoration: underline;
color: white;
font-size: 20px;
}
.iframe_wrapper {
width: 80vw;
height: 50vh;
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #4a4a4a;
transform: translate(-100%, -100%);
box-shadow: 0px 0px 10px 0px #4b4b4b;
visibility: hidden;
transition: visibility .3s linear;
background: #4b4b4b;
&.show {
transform: translate(-50%, 35px) !important;
visibility: visible;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #4a4a4a;
transform: translate(-50%, -100%);
}
iframe {
width: 100%;
height: 100%;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.