In this tutorial we will learn how to create a function in JavaScript that will open a new window and how we will center the window through some mathematics equations.

With JavaScript you can create dynamic HTML websites which is very useful for different things such as form security, open new window from a link, display date and many things. To understand JavaScript Language you will need to be familiar with C++.

In this post we will study the command below:

// Javascript Command

window.open("link", "title", "settings")

// To open a new window<br>

The attributes for this command are the following:

• link
• window title
• window settings

And below we have some window settings equal with 0 (False) or 1 (True):

toolbar = 1 | 0 (True or False)
location = 1 | 0 (True or False)
menubar = 1 | 0 (True or False)
directories = 1 | 0 (Internet Explorer Only)
resizable = 1 | 0 (True or False)
fullscreen = 1 | 0 (Internet Explorer Only)
status = 1 | 0 (True or False)
scrollbars = 1 | 0 (True or False)
width = 200 (Width of the window - in pixels. Minimum is 100)
height = 200 (Height of the window - in pixels. Minimum is 100)
left = 100 (Left position of the window - in pixels. Default is 0)
top = 100 (Top position of the window - in pixels. Default is 0)

To declare a function that we will need to call it from onClick command, we need to type a name and desired variables for our function:

function your_function_name(url, width, height) {

   // Your commands will be here

}

Enough with theory. Let’s create our custom function with the window.open() command:

function open_window(url, width, height) {
   var my_window;

   my_window = window.open(url, "Title", "scrollbars=1, width="+width+", height="+height+", left=0, top=0");
   my_window.focus();
}

To call our newly function we need to write the JavaScript code inside the href attribute or we can use the onClick attribute:

<a href="javascript: open_window('file.html',900,600);">Open New Window</a>

<!-- OR -->

<a href="javascript: open_window('http://www.extremestudio.ro/blog',900,600);">Open New Window</a>

<!-- OR -->

<a onClick="open_window('file.html',900,600);">Open New Window</a>

Now to center our window we need to thing to a mathematics equation that help us. Remeber that the default window Top and Left is 0.

Top = Y Position and Left = X Position

So here is an example:

• If we have a 1024×768 Desktop Resolution
• We will divide by 2, both width and height
• Left Position will be: 1024 / 2 = 512 ( Screen Width / 2 = Half )
• Top Position will be: 768 / 2 = 384 ( Screen Height / 2 = Half )

To center window we need to lower the top and left position with the window width and height divided by 2

• (Desktop Resolution Width / 2) – (Window Width / 2)
• (Desktop Resolution Height / 2) – (Window Height / 2)

Below is an image that explains this equation:

So now our function will look like this:

function open_window(url, width, height) {
   var my_window;

   //screen.width = Desktop Width
   //screen.height = Desktop Height

   var center_left = (screen.width / 2) - (width / 2);
   var center_top = (screen.height / 2) - (height / 2);

   my_window = window.open(url, "Title", "scrollbars=1, width="+width+", height="+height+", left="+center_left+", top="+center_top);
   my_window.focus();
}

Now your function is finished. You can test this file by clicking the “Live Demo” button or you can directly download file.

Live Demo

Download Example