开发者

How can I stop adobe reader in IE7/8 bleeding through my jQuery UI dialogue?

I have a simple setup with http://denishoctor.me/re开发者_如何学Pythonadertest.html (code below aswell). The button opens a dialogue over an embeded pdf. This is fine in everything but IE6/7/8.

Does anyone know how to stop this?

Thanks, Denis

<button type="button">Click Me</button>

<iframe id="iFrameResponse" style="margin-left:250px;height:500px;width:100%" src="http://knowwheretheygo.org/media//static/content/sample.pdf"></iframe>

<div id="InformationDialog" style="display: none;">This is my info</div>

<script type="text/javascript">
  $(document).ready(function() {
      $( "#InformationDialog" ).dialog( {
          title: "Information",
          autoOpen: false,
          hide: "slide",
          show: "slide",
          width: 225,
          position: [100,125],
          height: 400
      } );

      $("button").click(function() {
        $("#InformationDialog").dialog('open'); return false; 
      });
   });
</script>

UPDATE: I've found http://groups.google.com/group/jquery-ui/browse_thread/thread/66c7d2d31feedea9?fwc=1. WHich talks about http://brandonaaron.net/code/bgiframe/docs/. Anyone know what changes would be required to get it to work in IE for PDFs, as mentioned?


OK so of course this isn't ideal but it works and the I've not seen anything else. Also only do this to IE6/7/8, and don't punish the good browsers out there:

Stick an iFrame under the popup and above the PDF. With dragging and resizing turned off for a jQueryUI Dialog this works great. With them turned on there seems to be some flicking due to what I assume is repaints and position.

Example can be found @ http://denishoctor.me/examples/iframepdf/test.html


My technique is to simply resize/hide the iframe. Safari requires the iframe to be resized.

     $("#pdf").css("visibility", "hidden");
     if (navigator.userAgent.indexOf("Safari") > -1) {
        $("#pdf").height("5px");
      }
      $("#dialog-modal").dialog({
            height: 350,
            width: 800,
            buttons: [
            {
                text: "Close",
                click: function() {
                    $("#pdf").css("visibility", "visible");
                        if (navigator.userAgent.indexOf("Safari") > -1) {
                          $("#pdf").height("500px");
                        }
                }
            }],

            close: function(event, ui) {
                $("#pdf").css("visibility", "visible");
                if (navigator.userAgent.indexOf("Safari") > -1) {
                    $("#pdf").height("500px");  //whatever the height of your PDF iframe is
                }
            }
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜