2

I'm wondering if there is a way to have a div, absolutely positioned, hover over the border of the iframe that div is in. Can this be done?

My case: I have an iframe with a list of files in it, on the right end of each file there is a button. I want to have a div-popup with some functions like a contextmenu. But because this button is at the edge of the iframe the absolutely positioned div is put behind/outside the iframe viewport. I want it to overlay in the rest of my document, outside the iframe.

​<iframe width="100" height="100">
div would be in here, say 300 x 100 px.
</iframe>
overlayed div should be visible here as well, basically the div should overlay the iframe.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Ben Fransen
  • 10,884
  • 18
  • 76
  • 129

2 Answers2

5

Well, technically you can't do that. However, if you hijack the events in the iframe, you can recreate the context menu in the main window and use the relative position of the div within the iframe + the absolute position of the iframe itself.

So, to sum up, the context menu can be outside the iframe, and manipulated by the events from within the iframe.

Let me show you how it can be done. I don't have your code, so I'm just making a very crude proof of concept. :)

Example | Code

HTML

<iframe id='my_frame'></iframe>

<div id='copy_to_frame'>
    <ul id='files_list'>
        <li>data.dat</li>
        <li>manual.html</li>
        <li>readme.txt</li>
        <li>model1.obj</li>
        <li>human_model.obj</li>
    </ul>
</div>

<div class='context_menu'>
    <ul>
        <li>Delete</li><li>Open</li><li>Move</li><li>Copy</li>
    </ul>
</div>

Javascript

//Declare the necessary variables, good practice
var frame = $("#my_frame"),
    frame_contents = frame.contents(),
    frame_body = frame_contents .find("body"),
    copy_list = $("#copy_to_frame"),
    context_menu = $(".context_menu");

var bInside = false;

//Fill the iframe with a list
frame_body.html(copy_list.html());
copy_list.hide();
paint();

//Attach event handler for context menu popup etc.
$("#files_list li", frame_body).click(function(e){
    var $this = $(this);
    var rel_x = $this.position().left + $this.outerWidth() + 5,
        rel_y = $this.position().top + $this.outerHeight()/2 - context_menu.outerHeight()/2 - frame_body.scrollTop(),
        abs_x = frame.offset().left,
        abs_y = frame.offset().top;

    e.stopPropagation();

    context_menu.css({
        top: rel_y + abs_y,
        left: rel_x + abs_x
    });

    //Show the context menu in this window
    context_menu.show();
    paint($this);
});

//Hide when clicking outside the context menu
$(document).add(frame_body).click(function(){
    if(!bInside){
        context_menu.hide();
        paint();
    }
});

//Determine if mouse is inside context menu
context_menu.mouseenter(function(){
    bInside = true;
}).mouseleave(function(){
    bInside = false;
});

function paint(el){
    $("#files_list li", frame_body).css({
        "background-color": "white",
        "border": "1px solid transparent"
    });

    if(el){
        el.css({
            "background-color": "#ddecfd",
            "border": "1px solid #7da2ce"
        });
    }
}

CSS

#my_frame{
    position: absolute;
    border: 1px solid gray;
    width: 200px;
    height: 100px;
    top: 50%; left: 50%;
    margin-top: -62.5px;
    margin-left: -100px;
    z-index: 1;
}


.context_menu{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 2;
}

.context_menu ul{
    border: 1px solid black;
    border-right: 0;
    display: inline-block;
}

.context_menu li{
    display: inline-block;
    border-right: 1px solid black;
    padding: 2px;
    text-align: center;
    margin: 0px;
    cursor: default;
}

.context_menu li:hover{
    background-color: lightgray;
}
ShadowScripter
  • 7,314
  • 4
  • 36
  • 54
2

This is a bit of a guess based on the minimal information that was provided, but...

You can manipulate the contents of an <iframe> from within the parent document using jQuery, like so:

$('#myFrame').contents().find('a').click(function() { /*...*/ });

This allows you to detect when the user has clicked inside the <iframe>. Then you can work out where to position your overlay <div>.

Your overlay <div> will need to have position: fixed set. You can use jQuery's .offset() method to get the coordinates of the <iframe> and the link that was clicked inside the <iframe>. You can use these two values to calculate where to position the overlay <div> in the parent document. For example, to position the overlay to the left of the <iframe> and on the same vertical level as the link that was clicked you can do this:

$('#overlayDiv')
    .offset({
        left: $('#myFrame').offset().left - $('#overlayDiv').width(),
        top: $('#myFrame').offset().top + $(this).offset().top
    })

See this fiddle for a basic example of how it could work: http://jsfiddle.net/Gxd3M/2/

(Note that this assumes that the contents of the parent document and the iframe both come from the same server, i.e. they have the same origin.)

FixMaker
  • 3,759
  • 3
  • 26
  • 44