I am having a frame-based webpage with 3 frames. A topliner, a navigation on the left side and a content frame on the bottom right side.
Now, I want to show up a popup-menu when the user right-clicks on the content-frame. Because a div-container can not go out of the frame, my idea was, placing the whole frame-page into a new iframe. In that page I could have a second iframe which is my popup-menu.
So now, I am having this layout:
<html> (start-page) <iframe (real content) <frameset top-frame navigation-frame content-frame > > <iframe> (my popup-menu, positioned absolutelly and hidden by default) </html>
In my content-frame I am having a ‘onmouseover’-event assigned to the body-tag. This event should open the popup-iframe at the current mouse-position. And exactly here is my problem: How to get the mouse-coordinates relativelly to the top-website (start-page in my draft)?
Currently I am having this mouseDown-function (works in IE only, right now – but getting it working in FF & Co shouldn’t be the problem…)
function mouseDown(e) { if (window.event.button === 2 || window.event.which === 3) { top.popupFrame.style.left = event.screenX + 'px'; top.popupFrame.style.top = event.screenY + 'px'; top.popupFrame.style.display = ''; return false; } }
As you can see, the ‘event.screenX’ and ‘screenY’ – variables are not that variables I can use, because they are not relative to the mainpage.
Any ideas?
If you are only planning to support IE – you can try using a new modal window by calling window.showModalDialog. You can position the new window anywhere on the screen.
There are many drawbacks to using a new window in general and a modal one at that…
By the way – FF 3 and up also supports window.showModalDialog