2

I'd GREATLY appreciate any assistance that you can offer please re. the following which is leading to lots of unpaid overtime!

I'm attempting to overlay a div over an iframe which is the full size of the browser viewport, yet also make this overlaid div move with the iframe content beneath when scrolled. I'm also attempting for there to be only the one set of scrollbars displayed when the iframe is larger than the viewport.

The primary browser to be supported is Safari on OSX although support of the solution, if there is one, by other cross-platform browsers would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%;">
<head>
<title>Prototype dashboard overlay selector</title>

<script type="text/javascript">
function GotoDashboard (sel) {
var url = sel[sel.selectedIndex].value;
window.location = url;
}
</script>

</head>
<body style="height:100%; margin:0px; padding:0px; background-color:white; overflow:auto;">

<div scrolling="auto" style="width:100%; height:100%; margin:0px; padding:0px;">

<div scrolling="auto" style="position:relative; display:block; width:100%; margin:0px; padding:0px; overflow:scroll;">

<form name="foo" style="position:absolute; z-index:999; border:0px; margin:0px; padding:0px; top:10px; right:200px;">
    <select name="dashboardselector" onchange="GotoDashboard(this);" style="margin:0px; padding:0px; border:1px; background-color:red; font-color:white;">
    <option value="">Select Dashboard</option>
    <option value="http://www.google.co.uk">Foo</option>
    <option value="http://www.amazon.co.uk">Bar</option>
    </select>
</form> 

<iframe src="http://www.bbc.co.uk" frameborder="0" width="100%" height="100%" scrolling="no" style="display:inline; overflow:visible; z-index:-1; margin:0px; padding:0px; width:100%; border:0px;">
</iframe>

<div>
</div>
</body>
</html>
user1820625
  • 21
  • 3

0 Answers0