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.'
