/    Sign up×
Community /Pin to ProfileBookmark

Position popup div at mouse onclick

I have a small image. When I click on the image, I want a div to popup right at the mouse position. This is my code:

[CODE] function getRoomGridList(param)
{
var mylist = document.getElementById(“<%= txt_RoomGridList.ClientId %>”);
mylist.value = param;
var holderDiv = document.getElementById(‘RoomGridListDiv’);
var tempX = 0;
var tempY = 0;
var offset = 5;
if (document.all)
{
tempX = window.event.clientX + document.body.scrollLeft;
tempY = window.event.clientY + document.body.scrollTop;
}
else
{
tempX = window.event.pageX;
tempY = window.event.pageY;
}
if (tempX < 0)
{
tempX = 0;
}
if (tempY = 0)
{
tempY = 0;
}
holderDiv.style.top = (tempY + offset) + ‘px’;
holderDiv.style.left = (tempX + offset) + ‘px’;
holderDiv.style.display = ‘block’;
}[/CODE]

The first two lines have to do with aspx and feeding some text into an input inside the div.

And here’s the CSS:

[CODE]#RoomGridListDiv {
display: none;
position: absolute;
z-index: 10000;
}[/CODE]

It doesn’t work in IE or FF. In the FF JavaScript console, I get an error telling me that window.event is undefined. So I tried to add and alert(window.event.type) and then I get an error telling me that window.event doesn’t have any properties.

I’m calling this function from an onclick of the image.

What am I missing?

Thanks,
Natalie

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@nataliemacauthorSep 08.2006 — Okay, so I was thinking that it is also perfectly acceptable to position the popup div right at the image that the user will be clicking, so I found this:

[CODE]function getRoomGridList(param,obj)
{
var mylist = document.getElementById("<%= txt_RoomGridList.ClientId %>");
mylist.value = param;
var holderDiv = document.getElementById('RoomGridListDiv');
var curleft = curtop = 0;
if (obj.offsetParent)
{
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent)
{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
holderDiv.style.display = 'block';
holderDiv.style.position = 'absolute';
holderDiv.style.top = curtop;
holderDiv.style.left = curleft;

}[/CODE]

Which works a treat in IE, but the div just opens at its default position in FF. Any ideas to get it working in FF?
×

Success!

Help @nataliemac spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...