?
Solved

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

Posted on 2009-04-22
7
Medium Priority
?
394 Views
Last Modified: 2012-05-06

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!!!
0
Comment
Question by:gdemaria
  • 4
  • 3
7 Comments
 
LVL 14

Accepted Solution

by:
sam2912 earned 2000 total points
ID: 24211704
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
 
LVL 14

Expert Comment

by:sam2912
ID: 24277435
Did it solve the problem for you?
0
 
LVL 39

Author Comment

by:gdemaria
ID: 24278882
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
Technology Partners: 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 14

Expert Comment

by:sam2912
ID: 24280278
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
 
LVL 39

Author Comment

by:gdemaria
ID: 24280364
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
 
LVL 14

Expert Comment

by:sam2912
ID: 24284371
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
 
LVL 39

Author Closing Comment

by:gdemaria
ID: 31573633
Thanks for the help !
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
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

839 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