Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

<div>, onMouseOver, and X/Y relative positioning

Status
Not open for further replies.
josel

josel

Programmer
Joined
Oct 16, 2001
Messages
716
Location
US
Hello friends!

The project:
To show a popup window onMouseOver and close said windown onMouseOut ...

The Catch:
The window X/Y coordinates would have to be set according to link relative position.

I guess that since we have to deal with multiple resolutions, it would be necessary to capture pointer position on screen and from there derive the relative position for <div name&quot;thisPopUp&quot; ...>.

I know there is something out there that does this and then some, if you could point me in that direction, it will be more than enough.

Thanks in advance!


Jose Lerebours
KNOWLEDGE: Something you can give away enlessly and gain more of it in the process! - Jose Lerebours
 
Sort by date Sort by votes
you can use window.event.x and window.event.y (for IE, netscape has its own notation for this) to determine where on the screen the event took place.
 
Upvote 0 Downvote
I posted once a script that detects div position properties. Here it is:

<html>
<head>
<script>

function elemHeight(elemName) {

if (document.layers)
h = eval(&quot;document.layers[&quot; + elemName + &quot;].document.height&quot;)

//add 'document.all' for IE4 support
//else if (document.all)
// h = eval(&quot;document.all['&quot; + elemName + &quot;'].offsetHeight&quot;)

else if (document.getElementById)
h = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetHeight&quot;)

return(h);
}

function elemWidth(elemName) {

if (document.layers)
w = eval(&quot;document.layers[&quot; + elemName + &quot;].document.width&quot;)

else if (document.getElementById)
w = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetWidth&quot;)

return(w);
}


function elemTop(elemName) {

if (document.layers)
t = eval(&quot;document.layers[&quot; + elemName + &quot;].document.pageY&quot;)

else if (document.getElementById)
t = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetTop&quot;)

return(t);
}


function elemLeft(elemName) {

if (document.layers)
l = eval(&quot;document.layers[&quot; + elemName + &quot;].document.pageX&quot;)

else if (document.getElementById)
l = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetLeft&quot;)

return(l);
}


function elemProps(elemName) {

w = &quot;width= &quot; + elemWidth(elemName);
h = &quot;height= &quot; + elemHeight(elemName);
t = &quot;top= &quot; + elemTop(elemName);
l = &quot;left= &quot; + elemLeft(elemName);

dims = &quot;element name: &quot; + elemName + &quot;\n\n&quot; + w + &quot;; &quot; + h + &quot;\n&quot; + t + &quot;; &quot; + l ;

return(dims)
}

</script>
</head>
<body>
<a href=&quot;#&quot; id=&quot;testlink&quot; name=&quot;testlink&quot; onmouseover=&quot;alert(elemProps('testlink'))&quot;> [ ~ something ~ ] </a>
</body>
</html>

It's a cross-browser solution (IE, Opera5+, Mozilla/N6.x), but you have to remember that in order to make it work in NN4.x you have to deal with it's specific issues.

Use the values got by the script for positioning of the pop-up window, like this:

function newPopup() {

var props = &quot;toolbar=no,location=no,status=yes,scrollbars=auto,top=&quot; + elemTop(elemName) + &quot;,left=&quot; + elemLeft(testlink) + &quot;,width=150,height=100&quot;;

newWindow=window.open(&quot;&quot;,&quot;newWin&quot;,props);
newWindow.document.open();
newWindow.document.write('...');
newWindow.document.close();
}

I wrote this &quot;on the fly&quot; so it may require some debugging, I have no time to write and test a complete solution for you.

good luck

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
914
rogerte
rogerte
AbidingDude
  • Locked
  • Question Question
replaceChild() and Keeping Relationships
Replies
1
Views
1K
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question Question
Field with numbers and characters get nan
Replies
1
Views
508
ggriffit
ggriffit
198709km
  • Locked
  • Question Question
Grouping XML key value using XSLT
Replies
0
Views
933
198709km
198709km

Part and Inventory Search

Sponsor

Back
Top