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).
-
Overlay.
One word answers prohibited, this sentence no verb.
Will : Sorry, I'm a noob. Code sample is welcome, as googling jquery overlay doesn't do much for me.eyelidlessness : 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.Will : If you can get it to work, and demonstrate it, take the bounty. I can't get a goddamn overlay to do jack shiznit. -
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.
-
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
wmodeparam being set totransparent. 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?Will : Gimme a couple days to test this; the sample looks good with flash paper, but it might crap on xps/pdf.Will : Trying with an iframe with the source set to a doc...Paolo Bergantino : Let me know how it goes.Will : Updated the question with sample code. I hadn't considered it could be the iframe messing things up... -
Perhaps SmartLook is an alternative. It's like those lightbox scripts but for embedded content such as pdfs.
Will : Its interesting, however I can't use it in this project. Thanks for the info, tho. -
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(); } }); });Will : Undeleted because this might work. Why did you delete it?Jab : 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. :) -
With IE you can call setCapture()/releaseCapture(), it worked great with iframes for me.
With Firefox -- transparent overlay, as already suggested.
Will : Gimme some code and I'll try it out. -
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>Will : 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.
0 comments:
Post a Comment