Prevent an element from "capturing" the mouse using jQuery?

Question

I'm trying to resize an embedded object. The issue is that when the mouse hovers over the object, it takes "control" of the mouse, swallowing up movement events. The result being that you can expand the div containing the object, but when you try to shrink it, if the mouse enters the area of the object the resize halts.

Currently, I hide the object while moving. I'm wondering if there's a way to just prevent the object from capturing the mouse. Perhaps overlaying another element on top of it that prevents mouse events from reaching the embedded object?

---

using ghosting on the resize doesn't work for embedded objects, btw.

---

Adding a bounty, as I can't ever seem to get this working. To collect, simply do the following:

Provide a webpage with a PDF embedded in it, centered on the page. The pdf can't take up the entire page; make its width/height 50% the width of the browser window or something.

Use jQuery 1.2.6 to add resize to every side and corner of the pdf.

The pdf MUST NOT CAPTURE THE MOUSE and stop dragging WHEN SHRINKING THE PDF. That means when I click on the edge of the pdf and drag, when the mouse enters the display box of the pdf, the resize operation continues.

This must work in IE 7. Conditional CSS (if gte ie7 or whatever) hacks are fine.

---

Hmmm... I'm thinking it might be an issue with iframe...

    <div style="text-align:center; padding-top:50px;">
    <div id="doc" style="width:384px;height:512px;">
    <iframe id="docFrame" style="width: 100%; height: 100%;"
 src='http://www.ready.gov/america/_downloads/sampleplan.pdf'&gt;
    </iframe></div></div>
    <div id="data"></div>
    <script type="text/javascript">
        $(document).ready(function() {
        var obj = $('#docFrame');
            $('#doc').resizable({handles:'all', resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({width: ui.size.width, height: ui.size.height});
            }});
        });
    </script>

This doesn't work. When your mouse strays into the iframe the resize operation stops.

---

There are some good answers; if the bounty runs out before I can get around to vetting them all I'll reinstate the bounty (same 150 points).

Answer 1

Overlay.

One word answers prohibited, this sentence no verb.

Answer 2

I would answer overlay, but will provide actual code :P

I call it "follower" instead of overlay and is used in my ThreeSixty plug-in for jQuery (kinda simple source code provided, you will understand reading what's happens to the "follower" div.

http://www.mathieusavard.info/threesixty

Answer 3

Well I was utterly unable to find a XPS Document Viewer example or whatnot, but I was able to come up with this working sample. It doesn't use the overlay idea, but it's a pdf that you can resize...

edit the thing that made this work without the overlay was the wmode param being set to transparent. I'm not really familiar with the details but it made it play nice on IE7. Also works on Firefox, Chrome, Safari and Opera.

new edit having serious trouble getting it to work with frames. Some information I've found is not very encouraging. Is it impossible to have it with an <object>? Or an <object> inside the iframe?

Answer 4

Perhaps SmartLook is an alternative. It's like those lightbox scripts but for embedded content such as pdfs.

Answer 5

Here is what works for me, though is does hide the iframe while resizing. Is that an issue for you?

$(document).ready(function() {
    var obj = $('#docFrame');
    $('#doc').resizable(
    { 
        handles: 'all', 
        resize: function(e, ui) {
            $('#data').html(ui.size.width + 'x' + ui.size.height);
            obj.attr({ width: ui.size.width, height: ui.size.height });
        },
        start: function(e, ui) { $('#docFrame').hide(); },
        stop: function(e, ui) { $('#docFrame').show(); }
    });
});

Answer 6

With IE you can call setCapture()/releaseCapture(), it worked great with iframes for me.

With Firefox -- transparent overlay, as already suggested.

Answer 7

Thanks to StackOverflow's new "Recent Activity" feature, I saw that you asked me to provide a code example. I did only minor testing (can't seem to get your code to inline the PDF in IE, presumably it requires a PDF plugin, which I don't have installed), so this may not work. But it's a start.

<div style="text-align: center; padding-top: 50px;">
    <div id="doc" style="width: 384px; height: 512px; position: relative;">
        <div id="overlay" style="position: absolute; top: -5px; left: -5px;
            padding: 5px; width: 100%; height: 100%; background: red;
            opacity: 0.5; z-index: 1; display: none;"></div>
        <iframe id="docFrame" style="width: 100%; height: 100%; position: relative; z-index: 0;"
            src='http://www.ready.gov/america/_downloads/sampleplan.pdf'&gt;&lt;/iframe&gt;
    </div>
</div>
<div id="data"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var obj = $('#docFrame'), overlay = $('#overlay');
        $('#doc').resizable({
            handles: 'all',
            start: function() {
                overlay.show();
            },
            resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({
                    width: ui.size.width,
                    height: ui.size.height
                });
            },
            stop: function(e, ui) {
                overlay.hide();
            }
        });
    });
</script>