CODEWITHSUNDEEP
javascriptjqueryiframesafarishow-hide
Pawan Pillai
Pawan Pillai

Reputation: 2065

Unable to hide a PDF embedded in an iframe in safari?

I have a PDF embedded inside iframe. I need to hide this iframe on click of a button. But for some reason, the iframe section does not hide in Safari browser. The same code works fine in IE, Chrome and Firefox.

Here is a snippet from my HTML page:

<div id="PDFSection" style="text-align:center;">
    <iframe id="PDFFrame" src="sample.pdf"> Loading...
    </iframe>
    <hr />
    <input id="btnEmail" type="button" value="Email" name="btnEmail"/>
</div>

and here is the jquery part I am calling to hide the div:

$(document).ready(function() {
    $( "#btnEmail" ).click(function() {
    $( "#PDFSection" ).hide();
    });
});

I have tried toggle() instead of hide() and also tried to call hide() on the iframe element itself. But nothing is able to hide the PDF object. I do see that when the jQuery code runs, it hides the PDFSection div (as I can see the button and hr line getting hidden), but the PDF stays on the screen.

Here is a screenshot of what happens before and after clicking the button: enter image description here

Upvotes: 1

Views: 1472

Answers (1)

mr.VVoo
mr.VVoo

Reputation: 2270

i just tested your example:

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $( "#btnEmail" ).click(function() {
            $( "#PDFSection" ).hide();
        });
      });
    </script>
  </head>
  <body>
    <div id="PDFSection" style="text-align:center;">
    <iframe id="PDFFrame" src="about:blank"> Loading...
    </iframe>
    <hr />
    <input id="btnEmail" type="button" value="Email" name="btnEmail"/>
</div>
  </body>
</html>

and it works fine in safari 6.0.2 (8536.26.17) on OSX Mountain Lion. Maybe you should open the developer console cmd+alt+i and look for further error messages.

Upvotes: 1

Related Questions