0

I have a 2 iframe's one (iframe1) which is 100% of the page, and the 2nd (iframe2) hovers over the first one.

How can I set the height of the main body to that of iFrame1 so that the scroll bar is on the main page and the iframe2 is anchored to the top of the main page?

i do this to do some custom tracking but right now the iframe2 scrolls down when I scroll the content of iframe1 which is done in its on iframe

here is what i have so far:

<html>
<head>

<style>
body{background:#efefef; height:100%; padding-top:40px;}
#wrap{margin:20px 20px 50px;}
</style>

    <style type="text/css">
        body, html
        {
            margin: 0; padding: 0; height: 100%; overflow: hidden;
        }

        #iframe_1
        {
            position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
        }

        #iframe_2
        {
            position:fixed;  left:0; top:0; margin-top: 440px;  margin-left: 425px; width:300px; height:500px;
        }

    </style>

</head>

<body>
<div id="wrap">


    <div id="iframe_1">
        <iframe width="100%" height="100%" src="http://www.loudounsmilecenter.com/our-services.aspx" frameborder="0" allowtransparency="true" ></iframe>
    </div>

    <div id="iframe_2">
        <iframe width="600px" height="600px" src="about:blank" frameborder="0" allowtransparency="true" ></iframe>
    </div>



</div>
</body>

i want the iframe_2 to be over the "" section in iframe1. because they aren't same domain i have cross-domain issues so i have to do an overlay with iframe to track.

because the scroll is in iframe_1, iframe_2 doesn't anchor to that section

let me know if you have any ideas.

Jaxxes
  • 1
  • 1
  • Please show us what have you tried so far. For example your `html` and `css` code. – Athafoud Oct 31 '15 at 13:59
  • i updated my post to include example and idea – Jaxxes Oct 31 '15 at 15:55
  • So you kind of want the iframe2 overlay the iframe1, transparent, so stuff inside iframe2 looks like the belong to iframe1, and when iframe1 scrolls, the iframe2 scrolls along with it? – Asons Oct 31 '15 at 16:47
  • yes, thats right. actually the iframe2 is transparent and will be used to do tracking when something is clicked in the section it overlays – Jaxxes Oct 31 '15 at 18:02
  • Check this link, http://stackoverflow.com/questions/5589756/is-there-a-cross-domain-iframe-height-auto-resizer-that-works, it shows a few ways how to set/keep iframe1 full height, which is what's needed to have iframe2 "hover" ontop of it. – Asons Nov 01 '15 at 15:42

0 Answers0