Frame position in JavaScript
I have a web page based on a frame with 3 frames. A topliner, left side navigation and content frame on the bottom right side.
Now I want to display a popup menu when the user right-clicks on the content frame. Since the container div cannot get out of the frame, my idea was that the entire page frame got into a new iframe. On this page, I can have a second iframe which is my popup menu.
So now I have a layout like this:
<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 have an "onmouseover" -event assigned to the body tag. This event should open an iframe popup at the current mouse position. And this is where my problem is: how do I get the mouse coordinates back relative to the top site (start page in my draft)?
I currently have this mouseDown function (only works in IE, right now - but getting it to work in FF and Co shouldn't be a 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 variables that I can use because they are not related to the main page.
Any ideas?
source to share
If you plan to support IE, you can try using the new modal by calling window.showModalDialog. You can position the new window anywhere on the screen.
There are many downsides to using the new window in general and modal in that ...
By the way - FF 3 and above also supports window.showModalDialog
source to share
You say this is an enterprise application - do you need to support the entire mainstream browser or is IE enough?
I am asking this because IE has a feature that works exactly the way you want it to:
window.createPopup(...)
http://msdn.microsoft.com/en-us/library/ms536392(VS.85).aspx
The popup will be visible even outside the browser window! :-)
To show this, use the .show (...) method, which takes position and size arguments (see MSDN for details). Nicely, you can also pass a link to a page element that the position is relative to, so you can easily position the popup relative to a specific page element, a specific frame, a specific browser window, or even relative to the desktop.
source to share
I would highly recommend switching the frameset to standard DIV layout using css. Here's a good starting point for customizing many different css layouts .
I know this may not be what you want to hear, but there are many flaws in the footage other than the popup menu issue you are currently experiencing. For example:
- Frames are difficult or impossible to bookmark correctly, as the frameset is usually the only page visible in the address.
- It's very easy to break out of a frameset by downloading the link in a new browser window. This means that the user can lose navigation or get lost.
- They do not degrade intelligently on mobile devices and in text browsers. A big plus for css layouts is that even without including styles, they are still usable.
source to share