How to show live preview in a small popup of linked page on mouse over on link ?
like this
http://cssglobe.com/lab/tooltip/03/
but live preview
This question is related to
javascript
jquery
css
xhtml
Another way is to use a website thumbnail/link preview service LinkPeek (even happens to show a screenshot of StackOverflow as a demo right now), URL2PNG, Browshot, Websnapr, or an alternative.
Personally I would avoid iframes and go with an embed tag to create the view in the mouseover box.
<embed src="http://www.btf-internet.com" width="600" height="400" />
You could do the following:
Of course this isn't actually live.
What would be more sensible is that you could generate preview images for certain URLs e.g. every day or every week and use them. I image that you don't want to do this manually and you don't want to show the users of your service a preview that looks completely different than what the site currently looks like.
You can use an iframe to display a preview of the page on mouseover:
.box{_x000D_
display: none;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
a:hover + .box,.box:hover{_x000D_
display: block;_x000D_
position: relative;_x000D_
z-index: 100;_x000D_
}
_x000D_
This live preview for <a href="https://en.wikipedia.org/">Wikipedia</a>_x000D_
<div class="box">_x000D_
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">_x000D_
</iframe>_x000D_
</div> _x000D_
remains open on mouseover.
_x000D_
Here's an example with multiple live previews:
.box{_x000D_
display: none;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
a:hover + .box,.box:hover{_x000D_
display: block;_x000D_
position: relative;_x000D_
z-index: 100;_x000D_
}
_x000D_
Live previews for <a href="https://en.wikipedia.org/">Wikipedia</a>_x000D_
<div class="box">_x000D_
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">_x000D_
</iframe>_x000D_
</div> _x000D_
and <a href="https://www.jquery.com/">JQuery</a>_x000D_
<div class="box">_x000D_
<iframe src="https://www.jquery.com/" width = "500px" height = "500px">_x000D_
</iframe>_x000D_
</div> _x000D_
will appear when these links are moused over.
_x000D_
You can display a live preview of a link using javascript using the code below.
<embed src="https://www.w3schools.com/html/default.asp" width="60" height="40" />_x000D_
<p id="p1"><a href="http://cnet.com">Cnet</a></p>_x000D_
<p id="p2"><a href="http://codegena.com">Codegena</a></p>_x000D_
<p id="p3"><a href="http://apple.com">Apple</a></p>_x000D_
_x000D_
_x000D_
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>_x000D_
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet"> _x000D_
<script type="text/javascript">_x000D_
$(function() {_x000D_
$('#p1 a').miniPreview({ prefetch: 'pageload' });_x000D_
$('#p2 a').miniPreview({ prefetch: 'parenthover' });_x000D_
$('#p3 a').miniPreview({ prefetch: 'none' });_x000D_
});_x000D_
</script> <script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>
_x000D_
Learn more about it at Codegena
id="p1" - Fetch image preview on page load.
id="p2" - Fetch preview on hover.
id="p3" - Fetch preview image each time you hover.
I have done a little plugin to show a iframe window to preview a link. Still in beta version. Maybe it fits your case: https://github.com/Fischer-L/previewbox.
HTML structure
<div id="app">
<div class="box">
<div class="title">How to preview link with iframe and javascript?</div>
<div class="note"><small>Note: Click to every link on content below to preview</small></div>
<div id="content">
We'll first attach all the events to all the links for which we want to <a href="https://htmlcssdownload.com/">preview</a> with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
</div>
<h3>Preview the link</h3>
<div id="result"></div>
</div>
We'll first attach all the events to all the links for which we want to preview with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
<script type="text/javascript">
(()=>{
let content = document.getElementById('content');
let links = content.getElementsByTagName('a');
for (let index = 0; index < links.length; index++) {
const element = links[index];
element.addEventListener('click',(e)=>{
e.preventDefault();
openDemoLink(e.target.href);
})
}
function openDemoLink(link){
let div = document.createElement('div');
div.classList.add('preview_frame');
let frame = document.createElement('iframe');
frame.src = link;
let close = document.createElement('a');
close.classList.add('close-btn');
close.innerHTML = "Click here to close the example";
close.addEventListener('click', function(e){
div.remove();
})
div.appendChild(frame);
div.appendChild(close);
document.getElementById('result').appendChild(div);
}
})()
To see detail at How to live preview link
Source: Stackoverflow.com