Popup above cursor

[Helmut]

Hi!

I want to show a popup table just left-above my corsor. The following
code works fine (on IE), but if there are scrollbars at the browser
the popup is not positionend correctly:

*****************************************************************
....

function ShowPopup() {
document.getElementById(ShowPopup.arguments[0]).style.visibility =
'visible'
document.getElementById(ShowPopup.arguments[0]).style.top =
event.y - document.getElementById(ShowPopup.arguments[0]).offsetHeight
document.getElementById(ShowPopup.arguments[0]).style.left=
event.x - document.getElementById(ShowPopup.arguments[0]).offsetWidth
}
function HidePopup() {
document.getElementById(HidePopup.arguments[0]).style.visibility =
'hidden'
}

....

<a href="www.google.com" onmouseover="ShowPopup('ID_01')"
onmouseout="HidePopup('ID_01')">PopItUp</a>
....

<table id="ID_01" style="position:absolute; visibility:hidden">
<tr><td>This is a popup</td></tr>
</table>

....

*****************************************************************

I can't figure out what i have to do if there are scrollbars.
As a second question: what do i have to change to let it work on NN?

Thanks Helmut

 

[Lasse Reichstein Nielsen]

function ShowPopup() {
document.getElementById(ShowPopup.arguments[0]).style.visibility =
'visible'
document.getElementById(ShowPopup.arguments[0]).style.top =
event.y - document.getElementById(ShowPopup.arguments[0]).offsetHeight
document.getElementById(ShowPopup.arguments[0]).style.left=
event.x - document.getElementById(ShowPopup.arguments[0]).offsetWidth
}

I can do that shorter (and add scroll support too):

function ShowPopup(id) {
var elem=document.getElementById(id);
elem.style.visibility = "visible";
var root = document.documentElement || document.body;
elem.style.top = event.y + root.scrollTop - elem.offsetHeight;
elem.style.left = event.x + root.scrollLeft - elem.offsetWidth;
}

(Is there a reason for using ShowPupup.arguments[0] istead of just
specifying a named parameter?)

...

<a href="www.google.com" onmouseover="ShowPopup('ID_01')"
onmouseout="HidePopup('ID_01')">PopItUp</a>
...

<table id="ID_01" style="position:absolute; visibility:hidden">
<tr><td>This is a popup</td></tr>
</table>

Why use a table? If you want to support Netscape 4, you will want to
make it a div instead. You can put the table inside the div then, if
you really need it.

I can't figure out what i have to do if there are scrollbars.

See above.

As a second question: what do i have to change to let it work on NN?

Which NN. Netscape 4 and Netscape 6/7 are completely unrelated browsers.


Actually, in both Netscape 4 and Mozilla based browsers (including
Netscape 6+), you have an easier time finding the mouse coordinates
wrt. the page instead of the viewport, which is what you need to
place something absolutely next to the mouse. Both browsers' event
object have the properties pageX/pageY that are relative to the page,
as opposed to clientX/clientY (or the equivalent x/y that you use)
that are relative to the client window.

It is harder to get the width and height of the element in Netscape 4
(i.e., I couldn't find a way).

The following code works in IE, Mozilla and Opera 7:

---
<script type="text/javascript">
function getElement(id) {
var elem;
if (document.getElementById) { // standard browsers
elem = document.getElementById(id);
} else if (document.all) { // IE 4
elem = document.all[id];
}
return elem;
}

function ShowPopup(id,event) {
var elem = getElement(id);
var elemStyle = elem.style || elem; // for NS4, not used here

elemStyle.visibility = "visible";

var width = elem.offsetWidth || elem.width || 100; // default to 100
var height = elem.offsetHeight || elem.height || 100;

var posX,posY;
if (event.pageX) { // NS 4, Mozilla
posX = event.pageX;
posY = event.pageY;
} else { // IE, Opera
var root = document.documentElement || document.body;
posX = event.clientX - root.scrollLeft;
posY = event.clientY - root.scrollTop;
}

elemStyle.top = posY - height + "px";
elemStyle.left = posX - width + "px";
}

function HidePopup(id) {
var elem = getElement(id);
var elemStyle = elem.style || elem;
elemStyle.visibility = "hidden";
}
</script>
<div id="foo"
style="position:absolute;visiblity:hidden;background:yellow;">
Some<br>Text
</div>
<br>
<p>Argle Bargle Glop Glyf
<a href=""
onmouseover="ShowPopup('foo',event)"
onmouseout="HidePopup('foo')"> Link is here </a>
<p>

 

[Helmut]

Thanks Lasse - that helped me a lot.

(Is there a reason for using ShowPupup.arguments[0] istead of just
specifying a named parameter?)

Yes: Lack of knowledge ;-)

Why use a table? If you want to support Netscape 4, you will want to
make it a div instead. You can put the table inside the div then, if
you really need it.

changed my code to that


It now works for me but I had to do a little change:

The following code works in IE, Mozilla and Opera 7:
....

function ShowPopup(id,event) { ....
var posX,posY;
if (event.pageX) { // NS 4, Mozilla
posX = event.pageX;
posY = event.pageY;
} else { // IE, Opera
var root = document.documentElement || document.body;
posX = event.clientX - root.scrollLeft;
posY = event.clientY - root.scrollTop;

|
-----------------------------
It works if I use:
posX = event.clientX + root.scrollLeft;
posY = event.clientY + root.scrollTop;

I hope this was just a typo or did I miss something?

Helmut

 

[Lasse Reichstein Nielsen]

It works if I use:
posX = event.clientX + root.scrollLeft;
posY = event.clientY + root.scrollTop;

I hope this was just a typo or did I miss something?

Doh. Just a typo.
/L