2

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'>
    </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).

5
  • Embedded object as in flash or shockwave?
    – Ken
    Oct 6, 2008 at 20:24
  • Its the xps document viewer. I've had this same issue with Adobe's PDF viewer in the past.
    – user1228
    Oct 7, 2008 at 11:37
  • hey, can you show the code to generate this embedded pdf you're talking about? I'll have a go at it. Jan 27, 2009 at 17:39
  • Dude, come on. I'm giving up points on this one. Google it.
    – user1228
    Jan 27, 2009 at 19:12
  • I have. I can't find a damn xps document viewer thing on a page for the life of me. Jan 27, 2009 at 21:38

8 Answers 8

3
+75

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?

2
  • Gimme a couple days to test this; the sample looks good with flash paper, but it might crap on xps/pdf.
    – user1228
    Jan 28, 2009 at 15:17
  • Updated the question with sample code. I hadn't considered it could be the iframe messing things up...
    – user1228
    Jan 28, 2009 at 16:36
1

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

0

Overlay.

One word answers prohibited, this sentence no verb.

3
  • Sorry, I'm a noob. Code sample is welcome, as googling jquery overlay doesn't do much for me.
    – user1228
    Oct 6, 2008 at 20:03
  • You can simply add a hidden overlay element which overlaps the object, is set to be 100% height/width, and toggle it during resize. I will post pseudocode as a separate answer if this is not enough information to go on. Oct 6, 2008 at 23:45
  • If you can get it to work, and demonstrate it, take the bounty. I can't get a goddamn overlay to do jack shiznit.
    – user1228
    Jan 27, 2009 at 15:55
0

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

1
  • Its interesting, however I can't use it in this project. Thanks for the info, tho.
    – user1228
    Feb 1, 2009 at 16:49
0

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(); }
    });
});
1
  • because he said "Currently, I hide the object while moving. I'm wondering if there's a way to just prevent the object from capturing the mouse." I didn't catch that comment about the current way he is doing it the first time I read it. :)
    – Jab
    Feb 2, 2009 at 16:54
0

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

With Firefox -- transparent overlay, as already suggested.

0
0

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'></iframe>
    </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>
1
  • I'll test this out. Thanks. Also, you might want to look at the foxit plugin for PDFs. Decent replacement for adobe's without all the crap that goes along with it.
    – user1228
    Feb 1, 2009 at 16:54
0
var dframe = $("#docFrame");

$(document).ready(function () {
    var b = dframe;
    $("#doc").e({
        b: "all",
        resize: function (c, a) {
            $("#data").html(a.size.width + "x" + a.size.height);
            object.attr({
                width: a.size.width,
                height: a.size.height
            });
        },
        start: function () {
            dframe.hide();
        },
        stop: function () {
            dframe.show();
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy