Display source html in iframe on rollover

Question

I have a db with one field containing the source html of webpages. I have a table that shows the url that leads to the source HTML.

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td class="hover">URL1</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td class="hover">URL1</td>
        <td>This is a Td</td>
        <td>This is a Td</td>        
        <td>This is a Td</td>
    </tr>
</table>
<div class="stuff">
</div>

when I roll over a url in the table , I want to display the associated db HTML in an iframe.

based on:

http://jsbin.com/urarem/3/edit?html,css,output

which appears to do exactly what I want, I have:

$(document).ready(function() {
    $('.hover').on('mouseover', function() {
        var html = '<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>';
        $('.stuff').html(html);
    });

Assuming I dynamically load the html source into the variable 'html' on rollover , how do I display this in an Iframe as above?

Answer 1

You just get the value or innerHTML (depending on how the original HTML is laid out), and then load that into the src of the iframe. You can do it like this:

JS:

$('.hover').on('mouseover', function(e) {
    var url = $(this).html();
    $('.stuff').attr('src',url).show();
}).on('mouseleave', function(e) {
   $('.stuff').hide().removeAttr('src'); 
});

HTML:

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td class="hover">www.wikipedia.com</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td class="hover">www.google.com</td>
        <td>This is a Td</td>
        <td>This is a Td</td>        
        <td>This is a Td</td>
    </tr>
</table>
<iframe class="stuff">
</iframe>

JSFiddle example.