471,573 Members | 1,198 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,573 software developers and data experts.

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 7322
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
reply views Thread by leo001 | last post: by
reply views Thread by Vinnie | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.