Link to home
Start Free TrialLog in
Avatar of gdemaria
gdemariaFlag for United States of America

asked on

Positioning a div near mouseClick in Firefox not working

Having trouble moving a window near where the mouse is clicked.   Works pretty well in IE, but not in fireFox.  The issue with Firefox is around the "event" (e).   Event not Found...

Can you help?


The big picture :   My page is sometimes called from within a very tall iFrame.   When it is, my pop-up div appears vertically centers, which places it below the screen (for example, a 300px tall div opens on an iFrame that is 3000px tall, that places the div at 1500px which is below the screen's view).   So I want to position the Y coordinate of the pop-up div to be near where the mouse-clicked.

Any better approaches also appreciated!!
function moveToClick(win) {
	var posx = 0;
	var posy = 0;
	 
	if (!e) var e = window.event;
    if (!e) {alert('no event');}
 
	var isIE = document.all;
	posx = isIE ? (e.clientX + document.body.scrollLeft) : e.pageX;
	posy = isIE ? (e.clientY + document.body.scrollTop) : e.pageY;
 
	alert('moving...');
    win.moveTo(posx,posy);
}
 
 
popDetail = function(ID) {
 var winName = 'popGlobal';
 var myWindow = ColdFusion.Window.getWindowObject(winName);
 
 if (top.location != location) { 
   // within an iFrame, need to move to click
   moveToClick(myWindow);
   } 
 else {
   // not within an iFrame, just center the window on the screen
   myWindow.center();
   }
}
 
 
<a onclick="popDetail(123);"> Product 123 Detail </a>
 
<a onclick="popDetail(456);"> Product 456 Detail </a>
 
<a onclick="popDetail(789);"> Product 789 Detail </a>
 
... long list follows ...  would like div to appear somewhere near click..

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

<a href="#" onclick="popDetail(123,event); return false"> Product 123 Detail </a>

and
popDetail = function(ID,e) {
.
moveToClick(myWindow,e);
and
function moveToClick(win,e)
 
 

 
 
 


 
Avatar of gdemaria

ASKER

Thanks for your response - is that the ONLY way for  Firefox  to get the event (putting it directly on onClick ) ?

That would be a pretty big change for my application since I have may files with code using the javascript function popDetail
Well the onClick is not optimal either since other (older) browsers will not make the link clickable without an href and with an href you need the return false.

Why use a popup at all. Position a div instead - much simpler

i am ok with having the href and returning false, I don't think that effects me negatively.  In fact, I'm pretty sure it is already like that, i was just being brief.

> Why use a popup at all. Position a div instead - much simpler

It is a div.   I referred to it as a pop-up div because it is something that appears on the screen when you click..   Any helping placing that div would be hugely appreciated.

The div is on a page called productList.htm,  productList.htm is called called by an iFrame inside of a page main.html

main.html
   <iFrame src="productList.cfm"  height="3000".....


I need the div to appear on the screen vertically (horizontally not a problem).   The problem with being inside an iFrame is that the iFrame is really tall, if you click an item low on the screen, the div can appear below the visible screen but within the tall iframe.

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
wow, that's very clever - thanks!

Before I close the question, any chance you have your own xy positioning javascript that works cross-browser?

The one I'm using (posted above) is not perfect.   When using within the iFrame, the div does not always appear where desired.   This is because it's within a scrolling iFrame inside of a scrolling window.

The goal is to have the div appear near the mouse click regardless of the scroll of the iFrame or the window.