473,746 Members | 2,262 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

cursor postion for DIV relative position - understanding clientX/Y and OffsetX/Y

I'm trying to understand this and don't get it...

I found some code that looks like it's going to work if I can make
sense of how to position the div.

The code displays a div with some data when I mouse over an element (A
column in an ASP.NET Gridview, but I suppose that's not important)

Everything works great, except I can't seem to position the div where I
want given scrolling.

pardon the comments and failed attempts.

the javascript:

<script language="javas cript" type="text/javascript">
function ShowTooltip(L1, L2)
{
document.getEle mentById("L1"). innerText=L1;
document.getEle mentById("L2"). innerText=L2;
//x = event.clientX + document.body.s crollLeft;
y3 = event.clientY + document.body.s crollTop + 10;
y = event.y ;
yy = event.offsetY;
//x = event.clientX ;
//y = event.clientY ;
//y = event.clientY ;
status= y + ' ' + yy + ' ' +y3;
var Popup= document.getEle mentById("Popup ")
Popup.style.dis play="block";
Popup.style.pos ition="absolute ";
Popup.style.lef t = 230;
//Popup.style.top = y + 650
Popup.style.top = y;
Popup.style.bac kground="#D2D5D E";

}

function HideTooltip()
{
document.getEle mentById("Popup ").style.displa y="none";
}
</script>

The Div:
</div>
<div id="Popup" class="transpar ent" >
<table >
<tr>
<td id="L1" align="left"</td>
</tr>
<tr>
<td id="L2" align="left"</td>
</tr>
</table>
</div>
The code that sets what to do onmouseover:

e.Row.Cells(0). Attributes.Add( "onmouseove r", "ShowTooltip(r, pdate);")
e.Row.Cells(0). Attributes.Add( "onmouseout ", "HideTooltip(); ")

So my question is... If the grid is around 700px from the top, and
dispays about 10 rows, and apparently row is what the event is changing
on, how can have the popup showup just left of the row item i've
hovered over. It seems to me both clientY and offsetY are affected by
scrollpositon. and event.OffsetY appear to be relative to the row I'm
hovering over so it don't seem like it will be much help Perhaps If I
could get the Y of the cursor from the very top of the page that might
be good enough.

Nov 20 '06 #1
1 11969

jobs wrote:
I'm trying to understand this and don't get it...

I found some code that looks like it's going to work if I can make
sense of how to position the div.
[...]
Everything works great, except I can't seem to position the div where I
want given scrolling.
[...]
So my question is... If the grid is around 700px from the top, and
dispays about 10 rows, and apparently row is what the event is changing
on, how can have the popup showup just left of the row item i've
hovered over. It seems to me both clientY and offsetY are affected by
scrollpositon. and event.OffsetY appear to be relative to the row I'm
hovering over so it don't seem like it will be much help Perhaps If I
could get the Y of the cursor from the very top of the page that might
be good enough.
If you want to find the position of an element, try Quirksmode:

<URL: http://www.quirksmode.org/js/findpos.html >

To get the position of the cursor when an event occurs:

<URL: http://www.quirksmode.org/js/events_properties.html >

Matt Kruse has a pretty good Position library that will "Find the
position of an object on the page regardless of the layout, css, or
positioning used":

<URL: http://www.javascripttoolbox.com/lib/objectposition/ >

And a utilities library that will do the cursor position thing (among
others):

<URL: http://www.javascripttoolbox.com/lib/util/ >

Use them as-is, or just the bits you're interested in.
--
Rob

Nov 20 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
3421
by: Nige | last post by:
I've just given one of my sites (www.wealdbroadband.co.uk) an overhaul. Anyone know if there is a way of fixing text at a certain relative position down a page? I'd like the "(c) 2003 ..." notice to appear at the same place as you go through the pages, but it varies if you alter the window width and cause a line to wrap/unwrap. -- Nige
1
10116
by: Dave Hammond | last post by:
I have an html element (a link) with an onclick handler which opens a popup window, and would like to position that window at the coordinates where the element appears on the page. I have installed a document.onclick event handler which saves the eventX and eventY values, then use those values to set the window top/left coordinates. The problem is that the eventX and eventY values always seem to be the previous coordinates, not the...
1
1408
by: Luqman | last post by:
Where is Form Relative Position and Absolute Position in VS.Net 2005 ? Best Regards, Luqman
8
3361
by: Edward | last post by:
I used to do this all the time in HTML-table layouting. How do I do this in CSS? -------------------------------------------------- <table width="400px"> <tr> <td bgcolor="beige">one line of text</td> </tr> <tr> <td bgcolor="#eeeeee" align="center">this is another line of text</td>
0
1405
by: Rain | last post by:
In the example below. If I have the position:relative in the first div, then the menu disapears when dropped, if I do not have it, then it apears over the top of all the other divs when dropped. Why ?????? <div style="position:relative;"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
9
12526
by: MarwaAlSagheer | last post by:
How can i get relative position in different resolutions using c# ??
5
4392
Frinavale
by: Frinavale | last post by:
Hi! I'm attempting to display a <div> element on top of my page's content so that the user cannot interact with it while being prompted to answer a question. I have set this <div> to have a position:fixed style (have also tried position:absolute as well). On my page I have a button with a style of "top:50%; position:relative;" and this button is appearing on top of the <div> element that is supposed to be preventing user interaction. I...
1
1323
by: mfaisalwarraich | last post by:
Hi everyboyd, im trying to make a function which will keep the cursor to its position if non integer value is entered into a textbox. im using the following code: Public Class Form1 Private Sub txtNo_KeyUp(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles txtNo.KeyUp NumericOnly(txtNo.Text) End Sub Public Function NumericOnly(ByVal sValue As String) As String Dim sAns As String ...
0
8975
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8801
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9286
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9219
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6774
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4587
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3294
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2768
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2200
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.