Home/ Questions/Q 118169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T03:27:08+00:00

I’m trying to resize an embedded object. The issue is that when the mouse

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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?

    • 0