[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Positioning a div near mouseClick in Firefox not working

Posted on 2009-04-30
6
Medium Priority
?
572 Views
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;
 
	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

0
Comment
Question by:gdemaria
  • 3
  • 3
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24276898
<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)
 
 

 
 
 


 
0
 
LVL 39

Author Comment

by:gdemaria
ID: 24278835
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24283305
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 39

Author Comment

by:gdemaria
ID: 24283512

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.

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 24288980
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

0
 
LVL 39

Author Comment

by:gdemaria
ID: 24289646
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.  
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

834 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