0

I need an embedded pdf (I tried embed and iframe for that), on to of it there's a canvas (transparent) that people can draw on.

In Opera the embedded pdf is always on top.

http://plnkr.co/edit/c1LlRiw2eLiZsp2VAmvb?p=preview

HTML:

<div class="background">
  <iframe src="http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf"></iframe>
</div>
<div class="canvas-container">
    <canvas width="400" height="400"></canvas>
</div>

CSS:

.background, .canvas-container
{
    width: 400px;
    position: absolute;
    top: 0; left: 0;
}

.background {
    height: 300px;
    background-color: #367889;
    border: 1px solid red;
    z-index: 1;
}

.canvas-container {
    height: 400px;
    border: 1px dotted blue;
    z-index: 2;
}

Javascript:

document.addEventListener("DOMContentLoaded", function() {
  var ctx = document.getElementsByTagName('canvas')[0].getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(400, 400);
  ctx.stroke();
});

Help me stackoverflow, you're my only hope.

pambuk
  • 5,146
  • 4
  • 21
  • 20

1 Answers1

0

Looks like a very related matter: z-index does not work in Internet Explorer with pdf in iframe

I don't know about Opera, but I was able to see your issue using IE10. Looks specific to pdf though, as this short piece of code works neatly:

<!DOCTYPE html>
<html>

<body>
  <div>
    <iframe src="http://www.w3schools.com" style="position: absolute;">
      <p>Your browser does not support iframes.</p>
    </iframe>
    <div style="height: 300px; width: 200px; background-color:black; position: absolute;">
    </div>
  </div>
</body>

</html>
Community
  • 1
  • 1
Florent Henry
  • 702
  • 1
  • 7
  • 25
  • Thanks, I'll try to test it soon (I went with pdfjs for now, which of course works since it renders pdf on canvas element). – pambuk Apr 10 '15 at 17:14