Peter Clark Peter Clark - 3 months ago 43
HTML Question

overlay div over iframe

I'm making a widget similar to the uservoice widgets, except I want the content of the page to be in an iFrame rather than the widget appear via javascript.
How can I have a full page (width/height 100%) iFrame with a div fixed to the left of the browser, an example (using javascript rather than css/html) is here:

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

Any ideas? I can't make the iFrame fill the entire page, and also have the appear on top. I've played with z-indexes to no luck. Code example:

<html xmlns="" xml:lang="en" lang="en">

#widget {
left: 0px;
position: absolute;
top: 50%;
display: block;
width: 25px;
#content {
<div id="widget">

<iframe frameborder="0" id="content" src="" width="100%" height="100%"></iframe>


If you're not loading cross domain then you could just load in using jquery ajax call

$(document).ready(function () {

and replace your iframe with

<div id="content"></div>