What I'm trying to achieve is an iframe positioned over another iframe containing a PDF document - the first iframe should be transparent, and it should cover the iframe with PDF. I need this specifically for IE (9+).
The code I've tried so far:
<html> <head> <style> </style> </head> <body> <iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe> <iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe> </body> </html> iframeContent.html:
<html> <style type="text/css"> </style> <body style="background: transparent"> </body> </html> However, the above doesn't work - the iframe is not transparent. Does anyone know how to solve this? As I said in the comments below, the solution posted below doesn't work with Adobe reader DC installed (if it works at all).
5 Answers
Answers 1
I created two html files as below and it worked for me. I adjusted the width and height to 100% and it worked as you expect. Don't try with any jsbin etc instance and its not working there for security reasons as you load external site in iframe. Try with actual html file and load them in the browser which worked for me.
Html 1: pdf.html
<html> <head> <style type="text/css"> #outer { position: fixed; left: 150px; top: 20px; width: 100px; z-index: 2; } #inner{ background-color: transparent; } .cover { position: absolute; border: none; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } #pdf { position: relative; z-index: 1; } </style> </head> <body> <div id="outer"> <div id="inner"> <iframe src="iframeContent.html" style="width:90px; height:70px; background-color: transparent;" frameborder="0" allowtransparency="true"></iframe> </div> <iframe class="cover" src="about:blank" allowtransparency="true"></iframe> </div> <iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="600px" id="PDF" name="PDF" frameborder="0"></iframe> </body> </html> Html 2: iframecontent.html
<html> <body> <h1 style="background-color:transparent;">Test</h1> </body> </html> Answers 2
May be this will helps you
<html> <head> <style> </style> </head> <body> <iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:none transparent;" allowtransparency="true"></iframe> <iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe> </body> </html> iframecontent.html
<html> <style type="text/css"> </style> <body style="background:none transparent;"> </body> </html> Answers 3
For the iframe which you want to display transparent:
body{ opacity: 0.0; background: transparent; color: transparent; } Answers 4
Try setting setting opacity: 0 on the outer iframe.
Using your modified code,
<iframe src="iframeContent.html" frameborder="0" style="opacity: 0; z-index: 2; width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe> <iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe> You can also use z-index to manage stacking of elements. All elements default z-indez is 1. THose with higher values will appear on top of elements with a lower z-index.
Answers 5
Try this code:
HTML 1
<!--Code for transparent iframe--> <html> <body style="background: none transparent"> <div> I am a crappy container on top of this boring PDF</div> </body> </html> HTML 2
<!--Code for both iframes. <html> <head> <style> </style> </head> <body> <iframe src="SO1.html" frameborder="0" style="width: 100%; height: 300px; position: fixed; left:0px; top: 0px;" allowtransparency="true"></iframe> <iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe> </body> </html> This positions the transparent iframe correctly on top of the PDF. Also, you had a syntax error for the attribute allowTransparency, it shouldn't have a capital T.
0 comments:
Post a Comment