Geek Answers Handbook

Overlay div over iframe

I create a widget similar to uservoice widgets, except that the content of the page should be in an iFrame, not the widget displayed through javascript. How can I get the full iFrame (width / height 100%) of an iFrame with a div located to the left of the browser, an example (using javascript, not css / html) is here: http://uservoice.com/demo

I want this widget to appear initially on the page, and the content to be loaded via iFrame.

Any ideas? I can not get the iFrame to fill the entire page, and also display on top. I have not played with z-indexes. Code example:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style> #widget { left: 0px; position: absolute; top: 50%; display: block; z-index:100001; width: 25px; } #content { z-index:1; } </style> </head> <body> <div id="widget"> widget </div> <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> </body> </html>
+7
html css iframe
source share
6 answers

If you are not uploading the cross domain, you can simply upload using jQuery ajax call http://docs.jquery.com/Ajax/load

 $(document).ready(function () { $("#content").load("page.html"); });

and replace your iframe with

 <div id="content"></div>
+10
source share

What is clickjacking , right?

Nothing can work for a long time, because browsers (rightfully) see this as a security risk that should be prevented.

+5
source share

You probably need to add margin: auto; to your iFrame or floating div. This will make it fill the screen 100%.

Example:

 .width { position:absolute; left:0; right:0; top:0; bottom:0; width:250px; height:150px; margin:auto; }

To fix it to the left of the browser, you can use:

 margin:auto auto auto 0;

Good luck

+4
source share

with this code i get a double scrollbar right to right. One for the website and one for the i-frame.

 <style> iframe { position: absolute; border: none; box-sizing: border-box; width: 100%; height: 100%; } </style> <div> <iframe src="http://..."> </iframe> </div>
+1
source share

You can wrap your iframe in a div with a lower z-index, and then put the div above it with a higher z-index.

0
source share

This worked for me:

  • add overlay div with high z-index and absolute position
  • make iframe also positioned absolute
  • add iframe inside div

overlay div:

 <div style="z-index:99;position:absolute;top:0;right:0"> ...overlay html... </div>

iframe:

 <style> iframe { position: absolute; border: none; box-sizing: border-box; width: 100%; height: 100%; } </style> <div> <iframe src="http://..."> </iframe> </div>
0
source share

More articles:


All Articles