I've implemented this dialogue box that shows a preview of the site you're abuot to go to. All looks good until I add more links on the same page. I've tried to adjust my div from absolute to whatever and have also fiddled around with the top - left spacing 50% or just 20 px or even middle. No dice on all. Any help would be great. I can throw you my website if need be. Thanks!
Here's the code in the head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://www.ampedupdesigns.com/js/livepreview.js">script>
<script src="http://www.ampedupdesigns.com/js/modernizr.custom.76025.js"></script>
<style type="text/css">
#livepreview_dialog
{
padding:0px;
height:200px;
width:300px;
background-color:#fff;
background-image:url('http://www.ampedupdesigns.com/images/icon_loading.gif');
background-repeat:no-repeat;
background-position:center center;
overflow:hidden;
position:fixed;
top:5; left:5;
border-radius:5px;
-moz-border-radius: 5px;
}
#livepreview_dialog #livepreview_frame
{
border-radius:5px;
-moz-border-radius: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".livepreview").livePreview();
});
</script>
Here's what each link looks like:
<a href="http://www.URL.com/" target="_blank" class="livepreview" >http://www.URL.com/</a>
<a href="http://www.URL2.com/" target="_blank" class="livepreview" >http://www.URL2.com/</a>
<a href="http://www.URL3.com/" target="_blank" class="livepreview" >http://www.URL3.com/</a>
And here's the code I place at the bottom of the page:
<div id="preview_dialog" style="display:none;">
<iframe id="link_frame" >
</iframe>
</div>