Verhindern, dass ein Element von „Einfangen“ mit der Maus jQuery?

Question

Ich versuche, ein eingebettetes Objekt zu ändern. Das Problem ist, dass, wenn die Maus über das Objekt bewegt, ist es „Kontrolle“ der Maus nimmt, Bewegungsereignisse verschlingt. Das Ergebnis ist, dass Sie die div erweitern kann das Objekt enthält, aber wenn Sie versuchen, es zu schrumpfen, wenn die Maus den Bereich des Objekts tritt das Resize anhält.

Derzeit blende ich das Objekt während der Bewegung. Ich frage mich, ob es einen Weg gibt, um nur das Objekt zu verhindern, dass die Maus zu erfassen. Vielleicht ein anderes Element auf es überlagert, die vom Erreichen der eingebetteten Objekt Mausereignisse verhindert?

---

mit auf dem Resize Ghosting für eingebettete Objekte nicht funktioniert, btw.

---

eine Prämie Hinzufügen, da ich nicht immer scheinen kann, diese Funktion zu erhalten. So sammeln Sie einfach wie folgt vor:

Geben Sie eine Webseite mit einem PDF in sie eingebettet ist, auf der Seite zentriert. Die pdf kann die gesamte Seite nicht übernehmen; macht seine Breite / Höhe von 50% der Breite des Browserfensters oder so etwas.

Verwenden Sie jQuery 1.2.6 hinzufügen zu jeder Seite und Ecke des pdf Größe ändern.

Die pdf darf nicht die Mausauswahl und stoppen Ziehen, WENN DIE PDF SCHRUMPFEN. Das heißt, wenn ich auf dem Rande des pdf und beim Ziehen, wenn die Maus auf das Feld für das pdf eintritt, die Resize-Operation wird fortgesetzt.

Das muss 7. Bedingtes CSS im IE funktionieren (wenn gte IE7 oder was auch immer) Hacks sind in Ordnung.

---

Hmmm ... Ich denke, es könnte ein Problem mit iframe sein ...

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

Das funktioniert nicht. Wenn Sie mit der Maus den iframe verirrt in der Größe ändern Vorgang stoppt.

---

Es gibt einige gute Antworten; wenn die Prämie abläuft, bevor ich um kann vetting sie alle werde ich die Prämie (gleiche 150 Punkte) wieder einzusetzen.

Answer 1

Nun, ich war völlig unfähig ein XPS Document Viewer Beispiel oder Dingsbums zu finden, aber ich war in der Lage zu kommen mit this working sample . Es verwendet nicht die Overlay-Idee, aber es ist ein pdf, das Sie können die Größe ...

Bearbeiten die Sache, die diese Arbeit ohne die Auflage machte, war die wmode param auf transparent gesetzt wird. Ich bin nicht wirklich vertraut mit den Details, aber es machte es schön auf IE7 spielen. Funktioniert auch auf Firefox, Chrome, Safari und Opera.

neu bearbeiten ernsthafte Probleme, bekommen es mit Frames zu arbeiten. Einige Informationen, die ich gefunden habe, ist nicht sehr ermutigend. Ist es unmöglich, es mit einer <object> zu haben? Oder ein <object> innerhalb des iframe?

Answer 2

Ich würde Overlay beantworten, aber tatsächlichen Code bieten: P

Ich nenne es „follower“ statt Overlay und ist in meinem Threesixty-Plug-in für jQuery (ein bisschen einfache Quellcode zur Verfügung gestellt verwendet, verstehen Sie lesen, was passiert mit dem „follower“ div.

http://www.mathieusavard.info/threesixty

Answer 3

Overlay.

Ein Wort Antwort verboten, dieser Satz kein Verb.

Answer 4

Vielleicht Smartlook ist eine Alternative. Es ist wie jener Leuchtkasten Skripte aber für eingebettete Inhalte wie PDF-Dateien.

Answer 5

Hier ist was für mich, obwohl wird funktioniert die iframe verbergen, während die Größenänderung. Ist das ein Problem für Sie?

$(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

Mit IE können Sie anrufen SetCapture () / Release (), es hat super funktioniert mit iframes für mich.

Mit Firefox - transparentem Overlay, wie bereits vorgeschlagen

.

Answer 7

Dank Stackoverflow Der neue „Letzte Aktivität“ -Funktion, sah ich, dass Sie mich gebeten, ein Codebeispiel zu liefern. Ich habe nur geringe Prüfung (kann nicht scheinen, um Ihren Code zu bekommen, die PDF in IE Inline, vermutlich erfordert es eine PDF-Plugin, das ich habe nicht installiert ist), so kann dies nicht funktionieren. Aber es ist ein Anfang.

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

Answer 8

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();
        }
    });
});