CODEWITHSUNDEEP
javascripthtmlcssiframe
Kristian
Kristian

Reputation: 3461

Display element outside of iframe

Is it possible to show poshytip from iframe so it is also displaying outside of iframe? Eg. like overflow: visible..

And if not, then how hard would be to display poshytip for parent document and position it relative to my content? What are browser security measures?

NB! Iframe has a fixed height!

Like so:

    +----------------------------+
    |         POSHYTIP           |
    |                            |
    |                            |
    |                            |
    +--\  /----------------------+
+-------\/---------------------------------------------------------+
|             IFRAME BANNER                                        |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

Cheers!

Upvotes: 13

Views: 12518

Answers (5)

Ronit
Ronit

Reputation: 1

To deal with the problem, I defined an iframe with a bigger width/height, and I gave the main div inside the iframe the width/height according to the actual size I need. And so the inner div can contain an element that comes out of it, while still inside the iframe, but for the user it looks like it is outside the iframe.

<html>
    <body>
        <div style="background: gray; height: 300px; width: 300px;" >
            <iframe src="..." style="width: 200px; height: 200px;" >
                <html>
                    <body>
                        <div id="MainDivInTheFrame" style="border: 3px solid red; width: 100px; height: 100px;" >
                            <div>
                                all the main content of the iframe
                            </div>
                            <div style="position: absolute; bottom: 0; left: 0;" >
                                inside the iframe, but looks like it is outside the iframe
                            </div>
                        </div>
                    </body>
                </html>
            </iframe>
        </div>
    </body>
</html>

see the output image:

element outside an iframe

Upvotes: 0

Alex Dn
Alex Dn

Reputation: 5553

I think it's possible, but it not straightforward and simple. You can modify/extend the plugin that will appending the tooltip element to window.parent.body. Make it position absolute and calculate the position.

Of course it can be done if both frames/iframes not violates same origin policy.

Upvotes: 4

cassi.lup
cassi.lup

Reputation: 1261

Unfortunately, it's not possible.

<iframe> is another separate browser window. It's just a means of 'seeing' inside that web document through your parent document. It's different than a normal in which you can extend elements outside of its margins.

Also, it is considered a security vulnerability for other sites to be able to place content outside their given space.

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28635

As already mentioned it is impossible to do what you are asking with an iFrame as it is in essence a separate browser. Have you though about changing the looks/reaction of the banner on hover? You could easily change the banner image and show a little information to the user.

Since this is an ad that from what you have said will be on sites you cannot change, you will not have access to change the page the ad is displayed on; therefore, your ad needs to be completely functional in and of itself.

Upvotes: 0

Kyle
Kyle

Reputation: 67194

This is not possible. An iFrame is in essence a separate browser window inside document that references other pages. (As you said, it's an advertisement banner module.)

You'll have to place the tooltip to reference the iframe itself if you want a tooltip.

Upvotes: 13

Related Questions