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>

Recommended Answers

All 5 Replies

have you tried looking looking at your console?

I use blogspot. I'm not sure what a console is. I think I need to establish a div with a unique class next to each different url. Or something like that. I'll still work on it. Thank you for resonding. It's much appreciated.

If you view the source of the site "www.ampedupdesigns.com", you can see their example.

Thank you. Great find!

haha, that site has the same trouble mine did if you add more than a few links. All good. Just a bug in the original code. No worries. Thanks a ton.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.