jquery overlay wrong positioning

Question

I have a div (with class triggers) with the images and that div is in a div with id container. the positioning for the container div is set to relative which causes the overlay to appear in the bottom right corner and when the image is larger it will go outside the screen.

how can I fix this?

I read this one but that would not be a good solution for me, I can't move it outside the main div and I can't remove the relative positioning for the container div -> Jquery tools Overlay CSS Conflict, Image positioned under the overlay

I posted in the forum but no help was given yet -> http://flowplayer.org/tools/forum/40/32440

Answer 1

This can be fixed by moving the overlay element outside of the relatively positioned div.

You can do this easily with jquery just before you apply the overlay method, e.g.

<div style="position: relative; top: -5px;">
    <a href="#" class="overlayTrigger" rel="myOverlay">My overlay trigger</a>
    <div id="myOverlay"> Testing 123 </div>
</div>

<script>
jQuery(function($) {
    $("a[rel].overlayTrigger").each(function() {
        var el = $(this);
        var target = el.attr('rel');
        $(target).appendTo('body');
        el.overlay({
            target: target,
            top: "center",
            expose: { 
                color: '#333',
                loadSpeed: 200,
                opacity: 0.9
            }
        });
    });
});
</script>

Answer 2

I found with IE8, even if I put the overlay code just before the closing body tag, it still would not display correctly. Only the above: $(target).appendTo('body'); worked! This was probably due to other javascript writing to the DOM. Simple thing, use it to be sure.