Absolute div overlay iframe borders?

Question

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 ifra

Answer 1

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

    

        
data.dat
        
manual.html
        
readme.txt
        
model1.obj
        
human_model.obj
    



    

        
Delete
Open
Move
Copy
    

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;
}