469,282 Members | 1,743 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,282 developers. It's quick & easy.

Popup above cursor

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
Jul 20 '05 #1
3 7221
mu*******@yahoo.de (Helmut) writes:
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;backgrou nd: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>
---

Other browsers will need other fixes.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2
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
Jul 20 '05 #3
mu*******@yahoo.de (Helmut) writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Obantec Support | last post: by
4 posts views Thread by darius | last post: by
24 posts views Thread by jonathon | last post: by
18 posts views Thread by Colin McGuire | last post: by
3 posts views Thread by atn2002 | last post: by
4 posts views Thread by jobs | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.