473,373 Members | 1,170 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,373 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 7425
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Obantec Support | last post by:
Hi i leached some code and strung together a popup i need for a page with 5 help buttons. Now i could use 5 scripts and pre-load the values but i would rather get a better understanding of how...
1
by: twinfire | last post by:
I have an mfc dialog application that sets a dll as a global keyboard hook. The dll looks for the correct key press, grabs the mouse coords and then sends a message back to the dialog app. I am...
4
by: darius | last post by:
Hello, I seem to be having trouble with a rather simple problem. I am opening a new window with the window.open command, and even though I set scrollbar=yes, I can't seem to get the window to...
24
by: jonathon | last post by:
Hi all, I have a web app with a popup window for entering data. I don't want to access the web every time this window is opened, as most of the app is AJAX. But I can't figure out how to open...
18
by: Colin McGuire | last post by:
Hi - this was posted last weekend and unfortunately not resolved. The solutions that were posted almost worked but after another 5 days of working on the code everynight, I am not further ahead....
3
by: atn2002 | last post by:
I'm trying to create a control which when the mouse button gets pressed on one div an absolute positioned div pops up in place of the cursor. From there the cursor should interact with the dialog...
4
by: jobs | last post by:
the javascript: function ShowTooltip(L1in) { document.getElementById("L1").innerText=L1in; y = event.clientY + document.documentElement.scrollTop; var Popup= document.getElementById("Popup")...
0
by: ravitunk | last post by:
can anyone tell me how to open a popup window(.aspx page) on Mouse Rollover...everytime cursor is moved to a row of a gridview..this should also send a parameter to the popup window....where the...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

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.