Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show live preview in a small popup of linked page on mouse over on link?

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

like image 594
Jitendra Vyas Avatar asked Jan 22 '10 12:01

Jitendra Vyas


People also ask

How do I open live preview?

Open the Quantum Visualizer project in which you have your web app designed. From the main menu, go to Build > Live Preview Settings. The Live Preview Settings window appears. Select the Adaptive Web channel for all the required platforms.

How do you make a link in Preview?

Link previews are usually generated by fetching the URL and parsing meta tags of the page for title and description and image tags for thumbnails. This can be done by making basic GET requests to the URL. This method works when we just want to parse the meta tags and the page is rendered on the server.

How do I preview a Web page on an app?

You can use an hidden Iframe and set it source to the url entered in the textbox. Then, get the content of the iframe and append it to you preview div. $("#preview"). load($('#urltopreview').


Video Answer


5 Answers

You can use an iframe to display a preview of the page on mouseover:

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
This live preview for <a href="https://en.wikipedia.org/">Wikipedia</a>
  <div class="box">
    <iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
    </iframe>
  </div> 
remains open on mouseover.

Here's an example with multiple live previews:

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
Live previews for <a href="https://en.wikipedia.org/">Wikipedia</a>
  <div class="box">
     <iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
     </iframe>
  </div> 
and <a href="https://www.jquery.com/">JQuery</a>
  <div class="box">
     <iframe src="https://www.jquery.com/" width = "500px" height = "500px">
     </iframe>
  </div> 
will appear when these links are moused over.
like image 80
Anderson Green Avatar answered Oct 11 '22 17:10

Anderson Green


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" />
<p id="p1"><a href="http://cnet.com">Cnet</a></p>
<p id="p2"><a href="http://codegena.com">Codegena</a></p>
<p id="p3"><a href="http://apple.com">Apple</a></p>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">     
  <script type="text/javascript">
    $(function() {
                $('#p1 a').miniPreview({ prefetch: 'pageload' });
                $('#p2 a').miniPreview({ prefetch: 'parenthover' });
                $('#p3 a').miniPreview({ prefetch: 'none' });
            });
  </script> <script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>

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.
like image 29
Shan Eapen Koshy Avatar answered Oct 11 '22 18:10

Shan Eapen Koshy


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.

like image 45
Dan Dascalescu Avatar answered Oct 11 '22 19:10

Dan Dascalescu


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" />
like image 30
user3347064 Avatar answered Oct 11 '22 19:10

user3347064


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.

like image 43
Fischer Avatar answered Oct 11 '22 17:10

Fischer