it-swarm.com.de

<div> Ebene über PDF

Das Problem, mit dem ich konfrontiert bin, sieht so aus: Ich habe eine Ebene, die auf einer PDF-Seite auf der Seite platziert wird. Das PDF wird entweder zum Einbetten oder iframe zum Einfügen verwendet. Der CSS-Stil gilt jedoch nicht für PDF (weil es sich um ein Plug-In handelt?). Daher stelle ich selbst z-index: 1000 für die ein, diese Ebene geht immer noch hinter die PDF-Datei. eine Idee, wie man das beheben kann?

hier ist der Code:

<style type="text/css">
<!--#apDiv1 {
    position:absolute;
    left:543px;
    top:16px;
    width:206px;
    height:223px;
    z-index:1000;
    background-color:#999999;
}
</style>
<body>
  <!-- embed the pdf  -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
  alt : <a href="test.pdf">test.pdf</a>
</object>

  <!-- layer -->

<div id="apDiv1" >Whatever text or object here.</div>
</body>
20
Murvinlai

Nach dem Lesen einiger Foren ... (hier einige Kommentare)

Das PDF wird vom Acrobat Reader Plugin geladen. Es macht sein eigenes Ding und hat nichts mit HTML oder sogar dem Browser zu tun (abgesehen vom Laden durch den Browser). Leute haben das gleiche Problem mit dem Flash-Plugin und Dafür gibt es keine Lösung. Ich könnte mir vorstellen, dass es auch keine Lösung dafür gibt. Am besten gestalten Sie Ihre Menüs so, dass sie nicht in den von der PDF-Datei belegten Bereich gehen.

Wenn es sich um ein Plugin handelt, können Sie andere Elemente nicht zuverlässig darüber platzieren. Browser lassen in der Regel die meisten ihrer Fähigkeiten los, Elemente zu "schichten", wenn Plugins beteiligt sind.

Es gibt keine direkte Unterstützung für das Überlagern der 'z-Indexierung' eines div entweder in der Api oder im Dom. Das Plug-In lädt eine ausführbare Datei, die in sehr einfachen Worten ein Loch in das Browserfenster schlägt. Die Verwendung der "iframe shim" -Technik ist die Standard-Problemumgehung, obwohl Transparenz schwierig sein kann.

Meine LÖSUNG: Zwei iframes, jeder innerhalb eines div mit unterschiedlichem z-index. Wenn Sie auf den gelben div klicken, wird der leere iframe (vor dem pdf-iframe) angezeigt, sodass Sie das grüne div sehen können innerhalb des pdf-Dokuments.

<html>
<head>
     <script type="text/javascript">
        function showHideElement(element){
            var elem = document.getElementById(element);

            if (elem.style.display=="none"){
                elem.style.display="block"
            }
            else{
                elem.style.display="none"
            }
        }
    </script>
</head>
<body>
    <div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
    <div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>

    <div style="position:absolute;z-index:20;margin-left:200px;">
    <iframe visible="true"  id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >

     </iframe>
     </div>

    <div style="position:absolute;z-index:10;margin-left:100px;">
    <iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >

     </iframe>
     </div>

</body>
</html>

Fernando Rodríguez [email protected]

25

Es gibt ein Jquery-Plugin bgiframe , das die Implementierung dieses Updates recht einfach macht.

5
Chris Shaffer

Im Allgemeinen können Sie diese Probleme mit dem Z-Index umgehen, indem Sie ein Iframe-Shim direkt unter dem div platzieren. Das heißt, es hat die gleiche Größe und Position (aber keinen tatsächlichen Inhalt). Ich bin nicht 100% sicher, dass dies für PDFs funktioniert, aber ich weiß, dass dies einige andere Probleme mit dem Z-Index behebt (z. B. Auswahlboxen in IE6).

iframe-Shims können sehr schmerzhaft sein, wenn Sie das div dynamisch platzieren, da Sie das iframe-Shim damit verschieben müssen.

1
Daniel Lew

Ich habe gerade eine Lösung dafür gefunden. Verwenden Sie den google pdf-Viewer im iframe, um Ihr pdf auf der Seite anzuzeigen. Dann funktioniert es wie jedes andere div.

beispiel:

<iframe id = "ifr" src = "http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true" style = "width: 718px; height: 700px;" Frameborder = "0">

1
Blake

Wenn es sich um IE Ihr Testen handelt, könnte es sich um dasselbe Problem wie bei der ComboBox handeln. Versuchen Sie, iframe in div einzufügen.

0
Migol

Eine Lösung für einige Umstände besteht darin, den iframe mit einem div-Element zu umschließen und das Stilattribut 'clip' für das div- oder iframe-übergeordnete Element zu verwenden.

<!DOCTYPE html>
<html>
<head>
    <title>Test Page - IFramed PDF Document Clipping</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>

        <style type='text/css'>
            body {padding:0em;margin:0em;font-size:16px;position:relative;}
            body * {line-height:1em;}
            #TOPNAV {list-style:none;display:block;}
            #TOPNAV li {display:inline;}
            #IFRAMEWRAPPER 
            {
                display:block;margin:0em;padding:0em;
                position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
            }
            #docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
            input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
            .clearfix {zoom:1;}
        </style>

        <script type='text/javascript'>
            $(document).ready(function () {

                $('#TOPNAV input').click(function () {
                    $("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
                    $(this).toggleClass('ACTIVE');
                    $("#IFRAMEWRAPPER").css("padding", "1em");
                    $("#IFRAMEWRAPPER").css("padding", "0em");

                    $("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
                    $("#IFRAMEWRAPPER").toggleClass("clearfix");
                    $("#IFRAMEWRAPPER").hide();
                    $("#IFRAMEWRAPPER").slideDown(2);
                });

                $('#btnCLICK1').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
                });
                $('#btnCLICK2').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
                });
                $('#btnCLICK3').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
                });
                $('#btnCLICK4').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
                });
            });
        </script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
    <ul id='TOPNAV'>
        <li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
        <li><input type='button' id='btnCLICK2' value='LEFT' /></li>
        <li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
        <li><input type='button' id='btnCLICK4' value='TOP' /></li>
    </ul>
</div>
<div id="IFRAMEWRAPPER">
    <iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>

</body>
</html>
0
Brett Caswell