1

I am designing a website having lot of sub-pages. So the links are placed on a single page when the user hover the link i need to show the corresponding webpage as thumbnail in a tooltip.

I tried may jquery plugins but they are provide image based thumbnail view only.

I came across below

data:text/html,<html><head><!--[if IE]><style>iframe{zoom:0.2;}</style><![endif]--><style>iframe{width:800px;height:520px;border:none;-moz-transform:scale(0.2);-moz-transform-origin:0 0;-o-transform:scale(0.2);-o-transform-origin:0 0;-webkit-transform:scale(0.2);-webkit-transform-origin:0 0;}</style></head><body><iframe src="http://www.bing.com"></iframe></body></html>

Past it on browser's address bar will load webpage in iframe.But i dont know how make the above code works with ajax.

Thanks.

Krish
  • 2,590
  • 8
  • 42
  • 62
  • Did you try using that URI as `src` attribute of a iframe? – ulentini Apr 26 '13 at 12:11
  • If you successfully put it within an iframe tag, use jQuery to set the `src` should be as simple as `$('#previewFrame').attr('src', 'data:text/html...')` – ulentini Apr 26 '13 at 12:22
  • This almost [similar question](https://stackoverflow.com/questions/3162815/jquery-webpage-preview) may help you. Although it does not implement the `data` property that you are using prior. – KevinIsNowOnline Apr 26 '13 at 12:08

1 Answers1

2

Source: jQuery Webpage Preview

<html>

    <head>
        <!--[if IE]>
            <style>
                #frame {
                    zoom: 0.2;
                }
            </style>
        <![endif]-->
        <style>
            #frame {
                width: 800px;
                height: 520px;
                border: none;
                -moz-transform: scale(0.2);
                -moz-transform-origin: 0 0;
                -o-transform: scale(0.2);
                -o-transform-origin: 0 0;
                -webkit-transform: scale(0.2);
                -webkit-transform-origin: 0 0;
            }
        </style>
    </head>

    <body>
        <iframe id="frame" src="http://www.bing.com"></iframe>
    </body>

</html>
Community
  • 1
  • 1