0

Is it possible to get a custom context menu (DIV) expanding over several iframes?
I have 2 iframes (within a DIV each for some reason). In iframe 1 I have a custom context menu (another DIV). When I right-click in iframe 1 next to the border, the context menu appears under iframe 2:
How it is

This is how it should be:
How it should be

I already gave the context menu a z-index of 99.

EDIT:
Here are my 3 sites. The both iframes (left, right) and the index, where they are linked.
Sorry, I don't know how to import iframes into fiddlejs, so that I had to link them separately.

index.html
left.html
right.html

Evgenij Reznik
  • 17,916
  • 39
  • 104
  • 181
  • Can you make a fiddle and/or post the rest of your CSS? – Mooseman Apr 03 '13 at 22:45
  • What's the z-index for the iframes themselves? – helion3 Apr 03 '13 at 22:45
  • have a look at the firefox 3d inspect option. It does not only look cool, but it can actualy be helpfull when figuring out z-index problems. https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view – Pevara Apr 03 '13 at 23:05
  • @Mooseman: How can I embed the iframes into Fiddle? – Evgenij Reznik Apr 03 '13 at 23:06
  • You can just set the `src` attribute to `#` for the fiddle. – Mooseman Apr 03 '13 at 23:09
  • Can you add logic to intelligently position the context menu? In other words if it's close to the edge of its iFrame, re-position it. That's what our tooltip script does. I've used this approach in Unity games as well. – jahroy Apr 03 '13 at 23:37
  • 3
    All these people talking about `z-index` don't know what they're talking about. An iframe acts as a little window; something inside it will stay inside it. You can, however, put something over both iframes if it is in the containing page. You can use javascript to communicate between iframe and page to display the popup where you need it. With that change, z-index will actually help you. – Dave Apr 03 '13 at 23:37

4 Answers4

0

Specify z-index: 1 for both iframes. Keep the div with "context menu" at z-index:99.

Mooseman
  • 18,763
  • 14
  • 70
  • 93
0

Are you floating the div?

.contextmenu{float: left; z-index: 999999}
Dan
  • 17
  • 6
0

use something like 

z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999

thats what i do when i want something to float on top of everything else.

Thomas Lai
  • 875
  • 4
  • 11
  • 19
  • 5
    Perhaps a little too much? Even without considering the hassle of hiving to go fetching your div back from its orbit around mars, most browser will simply cap that to some value or another (like pointed out [here](http://stackoverflow.com/questions/8565821/css-max-z-index-value)) ;) – Grim Apr 03 '13 at 22:53
  • and what happens when somebody wants to put something on top of *that*? Use sensible numbers in `z-index`. Even multiples-of-1000 makes more sense than this. Besides `z-index` won't help here. – Dave Apr 03 '13 at 23:39
0

One option is to add logic that intelligently positions your context menu.

In other words, add code that re-positions the context menu div if it gets too close to the edge of the iFrame.

In other words:

IF popup's x-position IS GREATER THAN ( iFrame's size MINUS popup's width )

THEN reposition popup window to the left

This process is sometimes referred to as clamping the position of your context menu.

NOTE:

This will not be elegant unless the end user is aware of a logical separation between the two iFrames.

jahroy
  • 22,322
  • 9
  • 59
  • 108