Member Avatar for jonsan32

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="">script>
        <script src=""></script>
<style type="text/css">
#livepreview_dialog
{

    padding:0px;
    height:200px;
    width:300px;
    background-color:#fff;
    background-image:url('');
    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="" target="_blank" class="livepreview" ></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>
  • 3 Contributors
  • 5 Replies
  • 141 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by jonsan32

Dani AI

Generated

A few focused checks will usually fix this kind of floating-preview problem. observed the preview works for a few links but breaks as more are added; found the demo behaves the same; and was right to point at the console — that is the quickest way to catch the failure.

Checklist (run these in order)

  • Confirm the CSS you set actually applies to the element the plugin inserts. If your stylesheet targets the wrong selector the browser will ignore your rules and the plugin’s JS will position the box unpredictably.
  • Use valid CSS lengths. Nonzero top/left values must include units (for example, px); otherwise the rule is ignored and the browser falls back to whatever the script computes.
  • Make sure the floating dialog is appended to document.body (not inside a transformed or relatively positioned parent). A transformed ancestor or a constrained offsetParent can change how fixed/absolute positioning behaves and produce strange offsets.
  • Ensure a sensible z-index so the preview sits above page content, and avoid duplicate element IDs if the plugin creates one shared dialog for all links — either reuse a single dialog consistently or give each preview a unique container.
  • Check for JS errors in the console and use console.log to print the computed offsets the script uses for positioning; that often reveals whether the script is reading the wrong element or an unexpected offsetParent.

Simple positioning pattern (fallback)

var pos = $link.offset();
$dialog
  .stop(true)
  .css({ top: pos.top + $link.outerHeight(), left: pos.left, position: 'absolute' })
  .show();

Debugging steps

  • Open DevTools -> Elements -> computed styles to see the final top/left and offsetParent.
  • Put a few console.log statements around the plugin’s position calculation to compare link offsets vs dialog positions.
  • Reproduce the minimal case on a blank page: one stylesheet, jQuery, plugin, and a couple of links. If it works there, inspect what on your real page (wrappers, transforms, extra CSS) interferes.

These checks address the most common causes (selector/unit mismatch, offsetParent/transform issues, z-index and plugin re-use).

Recommended Answers

All 5 Replies

Member Avatar for elneco

have you tried looking looking at your console?

Member Avatar for jonsan32

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.

Member Avatar for JorgeM

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

Member Avatar for jonsan32

Thank you. Great find!

Member Avatar for jonsan32

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.