PDA

View Full Version : open a popup window - positioning



bdogiandy
Aug 14th, 2012, 12:48 AM
I am trying to open up a popup in a specific location (near where I am clicking on the button). There are a bunch of links auto-generated and this code basically pops up with content from an external URL.



function generatebad(program,id){
$("#generate").remove();
var url = uncache("generatebad.php?program="+program+"&url="+id);
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = generate_callback;
req.send(null);
}



With this code, the 'window' pops up way up above and I have to scroll forever (when I am at one of the last auto-generated links).

what is the best way to do this, even if it is something completely different?

Thanks in advance!!!

Old Pedant
Aug 14th, 2012, 01:03 AM
Ummm...give that you are doing $("#generate"), you must be using jQuery. And if that is so, why would you not then use jQuery's implementation of AJAX calls, instead of doing it "by hand".

Anyway, to locate any object on the screen, the basic code is like this:


function findTopLeftOfObject( obj )
{
var node = obj;
var x = 0;
var y = 0;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
return [x,y];
}

So then you can incorporate that into your code that positions the window.

Except you really shouldn't use a popup window; they can be blocked by popup blockers.

Instead, use a "popON" <div>.

bdogiandy
Aug 14th, 2012, 01:13 AM
Ummm...give that you are doing $("#generate"), you must be using jQuery. And if that is so, why would you not then use jQuery's implementation of AJAX calls, instead of doing it "by hand".

Anyway, to locate any object on the screen, the basic code is like this:


function findTopLeftOfObject( obj )
{
var node = obj;
var x = 0;
var y = 0;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
return [x,y];
}

So then you can incorporate that into your code that positions the window.

Except you really shouldn't use a popup window; they can be blocked by popup blockers.

Instead, use a "popON" <div>.

The code was done by someone I hired :) I know php, but not Javascript. However, I do know a lot of different languages - so was hoping to figure it out.


so, you are saying have an invisible DIV on the screen with an ID of 'popON' and then do something with that? Sorry if I am dense, just trying to figure this all out.

Old Pedant
Aug 14th, 2012, 01:24 AM
Yes.

Say you have this


<a href="#" onclick="doItHere(this,'testprogram','371'); return false;" ...>

And at the very top (or very bottom) of your page you have


<div id="popOn" style="display: none; position: absolute; height: 100px; width: 200px;"
onclick="this.style.display='none';"></div>


Then you might do this:


<script type="text/javascript">
function doItHere( where, program, id )
{
var node = where;
var x = 0;
var y = 0;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
var div = document.getElementById("popOn");
div.style.left = x + "px"; // you can "bias" x too...maybe use (x - 100) for example
div.style.top = y + "px"; // ditto for y of course

generatebad(program,id);
}

And, finally, in your generate_callback function (invoked by the AJAX code when the AJAX call completes) you would do something like:


function generate_callback( )
{
...
var div = document.getElementById("popOn");
div.innerHTML = "Any message you want to give";
div.style.display = "block";
}

bdogiandy
Aug 14th, 2012, 04:32 PM
ok, giving that a try. Having problems as my generatebad() function just pops up a window regardless - so I will have to figure out how to stop it from doing that and placing it into the div instead.

thanks.

bdogiandy
Aug 14th, 2012, 07:48 PM
Ended up using ColorBox instead :) Much easier for me. Thanks for the help!