Centering JavaScript popup window

programming web dev
1

Hi,

I’ve got some Javascript that creates a popup window. I was wondering what I can add in to make the popup center itself on the user’s screen?

Only code I can find pushes the window however many pixels right and down… I was hoping for some sort of ‘50% screen width/50% screen height’ variables, so it works for every resolution.

Help is much appreciated. :slight_smile:

2

The center point is measured from top and left, therefore 50% will push your little dudes left hand side to the middle and the top point to the middle. You have to use a formula like:

var left = clientWidth/2 - windowWidth;
var top = clientHeight/2 - windowHeight;

moveTo(left,top);

Something along those lines, that borders between real and pseudo code. If you need further explanation as to why you have to use this kind of code, let me know.

3

Thanks for the reply!

I can’t think for myself that much when it comes to JavaScript. It isn’t really my forte. I tend to only use it when I have to… so I’m not that experienced.

I had some other script that I tried, but it just didn’t work. I don’t know why it didn’t work… it just didn’t.

This was it:

<script type=“text/javascript” language=“JavaScript”>
function popup(url)
{
scrolling = ‘yes’; // Scrolling Yes/No/Auto
pagename = ‘view’; // popup height
popht = 505; // popup height
popwth = 690; // popup width
scrleft = (screen.width / 2) - (popwth /2); //centres horizontal
scrtop = ((screen.height / 2) - (popht /2)) - 40; //centres vertical
window.open(url,’YBI’,‘top=’ + scrtop + ‘,left=’ + scrleft + ‘,height=’ + popht + ‘,width=’ + popwth + ‘,scrollbars=yes,resizable=no’);
}
// –>
</script>

(and because it didn’t work, I went back to the simpler popup code)

Can I add in the part you posted to my existing code, or was it all pseudo code to help me try to figure it out myself? Because if it was just pseudo code I have no chance XD. lol

The extent of my JavaScript knowledge is Googling what I’m after, copy and pasting, and understanding bits and pieces as I go for future reference.

4

[quote=GGMcGee;2344717]Thanks for the reply!

Can I add in the part you posted to my existing code, or was it all pseudo code to help me try to figure it out myself? Because if it was just pseudo code I have no chance XD. lol[/quote]

No problem, that was more real code than pseudo code, but I wouldn’t use my code I previously posted without modification. BTW, you have every chance in the world.

Here is a working example (feel free to use it as is):

<script type="text/javascript">
var win;

function popupWin(w,h,page)
{
   //get the width and height of the window
    var wide = w;
    var high = h;
    
    //this gets the total available width and height of the users screen
    screen_height = window.screen.availHeight;
    screen_width = window.screen.availWidth; 

    //this gets the left and top point by saying total width of the screen divided by 2 (center), minus the width of your window divided by 2, which make its center point the middle of the screen. Same for the top
    left_point = parseInt(screen_width/2)-(wide/2); 
    top_point = parseInt(screen_height/2)-(high/2); 

    //just doing a simple popup window here, but plugging your info into it, and setting the top and left corners to be our calculated points that will center your window.
    win = window.open(page, 'win', 'width='+wide+',height='+high+',left='+left_point+',top='+top_point+',toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no');     //make sure your window is in the front 
    win.focus(); 
}
</script>

Call it like so:
//popupWin(width, height, url)
popupWin(400, 400, ‘http://www.kirupa.com’);

Still have questions?

5

Thank you very much.

Works great! :smiley:

6

No problem!