Positioning a div near mouseClick in Firefox not working

Posted on 2009-04-30
Last Modified: 2012-05-06
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;




popDetail = function(ID) {

 var winName = 'popGlobal';

 var myWindow = ColdFusion.Window.getWindowObject(winName);

 if (top.location != location) { 

   // within an iFrame, need to move to click



 else {

   // not within an iFrame, just center the window on the screen;



<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

Question by:gdemaria
    LVL 75

    Expert Comment

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

    popDetail = function(ID,e) {
    function moveToClick(win,e)


    LVL 39

    Author Comment

    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
    LVL 75

    Expert Comment

    by:Michel Plungjan
    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
    LVL 39

    Author Comment


    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

       <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.

    LVL 75

    Accepted Solution

    You could modify at load time

    window.onload=function() {
      var lnks = document.getElementsByTagName('a')
      for (var i=0, n=lnks.length;i<n;i++) {
        if (lnks[i].innerHTML.indexOf('Detail') !=-1) {
          lnks[i].onclick=function(event) { popDetail(lnks.innerHTML.replace(/[^\d]/g,""),event); return false}
    The regexp has not been tested since I am not sure if I should change the innerHTML or copy the string representation of the existing onclick, but since you are not posting actual code, I will wait till I hear from you about this

    Open in new window

    LVL 39

    Author Comment

    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.  

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    Zoom web page in 2 21
    Need help with jQuery 14 58
    GPS save in database 19 20
    Is there a way to optimise this code? 3 19
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now