Placing a pop-up window (div) near the clicked link


We have a website that is sometimes viewed from within an iFrame and sometimes not.

This page has a pop-up that appears, say it's 800px wide and 600px tall.

The pop-up will open by clicking the product name of a long list of products (say 500 products listed on a long scrolling page)

I need to figure how to make the pop-up appear in the window somewhere near the link that was clicked.
Right now, the pop-up appears centered horizontally and vertically.   So, that means if you click the third link on a long page, you have to scroll way down the page to see the pop-up - because it opens in the center of the iFrame which is really tall.


Can you help me with a formula that will help me determine the correct X and  Y coorindate to display the pop-up so that it will appear near the link whether that link is on a page within a tall iFrame or just on a page...


Thanks!!!
LVL 39
gdemariaAsked:
Who is Participating?
 
Samuel LiewCommented:
Try this
<script type="text/javascript">
var mouseX=0, mouseY=0;
function getCoord(e) {
	e = e || window.event;
	mouseX = e.clientX;
	mouseY = e.clientY;
}
function findPosX(obj) {
	var curleft = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}
function findPosY(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}
 
function click(e, str) { // pass the event
	getCoord(e); // pass the event
	
	document.getElementById("popUpFrameId").style.left = mouseX+'px';
	document.getElementById("popUpFrameId").style.top  = mouseY+'px';
	document.getElementById("popUpFrameId").src = str;
	document.getElementById("popUpFrameId").style.display = "block";
	return false; // stop the reloading of the page
}
</script>
 
<iframe id="popUpFrameId" style="position:absolute;display:none;"></iframe>
<a href="http://www.google.com" onclick="return click(event,this.href);">the link</a>

Open in new window

0
 
Samuel LiewCommented:
Did it solve the problem for you?
0
 
gdemariaAuthor Commented:
Hi Sam, thanks for checking back - I am getting close !

I took good information from your code, but you were doing things a bit different.  I am not trying to center an iFrame, I am trying to center a  DIV that appears in a page that is served through and iFrame.

Here is what I have.   It works pretty well in IE, but does not work in Firefox (the event is not defined in Firefox)


Your findPosX and findPosY functions look interesting, but I don't see them being used in the code anywhere.  So I left them out of the mix for now..

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Samuel LiewCommented:
Hi, the method "ColdFusion.Window.getWindowObject" and "myWindow.center();" is not provided, so I cannot really see what your script really does.

If you just want to display a div at the link, change the iframe in my code to a div, keeping the id and style as it is.
0
 
gdemariaAuthor Commented:
Is there any way to get around passing the event from the onClick function

    onclick="return click(event,this.href);"


I know that in IE, I can just reference the event   e = window.event
But firefox that doesn't seem to work.


I already have this code out on many many pages and I am trying to avoid having to change every onClick in every link just to grab the coordinates....  is that the only way firefox can get the xy ?



The function ColdFusion.Window.getWindowObject(winName) is a commercial function from Adobe, it just gets the DIV
0
 
Samuel LiewCommented:
That's the problem with cross-browser issues. Some stuff don't work on multiple browsers, and we have to find a workaround. Sometimes it's tedious. Right now I don't see any other way...
0
 
gdemariaAuthor Commented:
Thanks for the help !
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.