Resize Browser Windows Using JavaScript

Fortunately, you cannot move or resize a browser window your JavaScript code did not create.  Imagine the chaos that could ensue if any random function could shrink your browser window to the size of a quarter. However, you can use built-in JavaScript functions to resize and reposition browser windows instantly.

New to JavaScript? Visit Udemy to learn pro coding tips.

Popups: The Good and the Bad

Popup blockers are so popular these days that many browsers build them right into their infrastructure. A popup is simply a browser window that opens while you’re viewing another browser window. While some sites open popups that display advertising, others use popups to display helpful information. For instance, you might want site visitors to view a small popup that shows a map or table. The following code creates and opens a new popup browser window that you can control:

window1 = window.open("MyCreatedWindow.html", "", "width=300, height=200");

Note the variable named window1. That variable holds a reference to your new popup window. That variable is important because you need it to manipulate the new window. The first parameter contains the URL you wish to open in the new window. This example opens an HTML page named MyCreatedWindow.html. Leave this parameter blank if you’d like to open an empty window. The final two optional parameters enable you to set the new window’s width and height in pixels. Those values are 300 and 200 in this example.

The second parameter controls how JavaScript opens a new window. When you leave it that parameter blank or give it a value of  “_blank,” JavaScript creates a new window. Other possible values appear below:

_top – Content replaces framesets that may exist in the current page

_self – Content replaces the content in the current page

_parent – Content loads in the page’s parent frame if one exists

Name – Specifics the name you’d like to call the window you create

Different users may view your Web pages using different browser resolutions. If you create a window and resize it to 800 pixels wide, people with screens narrower lower than 800 pixels must scroll to view the window. If you want to resize a window so that it’s small enough to fit a user’s display area, make your window smaller than the display area. The window.screen object can help you discover a user’s screen resolution, as shown below:

var screenWidth = screen.width;
var screenHeight = screen.height;

Learn more about windows, browsers and JavaScript methods at Udemy.

Resize a Popup Window

Even though you can set a window’s dimensions when you open it, you can resize it later using the code shown below:

window1.resizeTo(333, 444);

That statement resizes the window1 window you created so that it’s 333 pixels wide and 444 pixels tall. While resizeTo helps you resize a window to specific dimensions, the resizeBy method resizes a window by increments. Suppose your window was 400 pixels wide, 200 pixels tall and you wanted it to be 30 pixels taller. You could do that using the following code:

window1.resizeBy(0, 30);

When a browser resizes your window, it moves the window’s bottom right edge down by the value you specify in the arguments. Because the first argument is 0, the window’s width does not change. The height increases by 30 pixels because the second argument is 30. The window’s upper left corner does not move.

Using resizeBy is an excellent way to allow users to resize a window incrementally. For instance, you could provide them with a button that called a function when clicked. That function could execute the resizeBy method which resized the window by a small amount. Pass negative arguments to resizeBy to make a window smaller, as shown below:

window1.resizeBy(-20, -60);

This statement shrinks a window’s width by 20 pixels and its height by 60 pixels.

Handle Resize Events

When a browser does something, JavaScript often knows about it. For instance, if you resize your browser window manually, JavaScript can alert you to that event. You’ll need to set up an event handler to do that, as shown below:

window1.onresize=function() {
alert("Resize event occurred");
};

This code tells JavaScript to execute the code within the function whenever a window resizes. Replace the alert statement with the code you’d like to run when a resize event occurs. This example adds an onresize event to the window1 popup window described in previous examples. However, you can also add this event to your main window using the following code:

window.onresize=function() {
alert("Resize event occurred");
};

Resize and Move a Popup Window

What happens if you resize a popup window and part of the window moves off-screen? That can happen if the window is near the edge of your screen and you make the window larger. If you’d like to reposition a window after resizing it, use the moveTo JavaScript method, as seen in the following code snippet:

window1.moveTo(x, y);

Replace x with the desired x coordinate and y with the desired y coordinate. For instance, if you want to move the window to a location that’s 400 pixels from the screen’s left edge and 200 pixels from the screen’s top edge, use the following code:

window1.moveTo(400, 200);

If you need to resize a window and move it, you’ll probably find it easier to resize it first and then move it to a new location.

JavaScript also has a moveBy method that works similar to the resizeBy method. Call moveBy when you need to move a window by a certain amount, as seen below:

window1.moveBy(20, -30);

In this example, JavaScript moves the window1 popup window 20 pixels to the right and 30 pixels up. The window moves up 30 pixels instead of down 30 pixels because you pass moveTo -30, a negative number.

Additional Resizing Tips

Now that you know how to move windows, resize them and determine a user’s screen dimensions, you can resize and move any window so that it’s always within view. For instance, assume that you a user’s screen width is 640 pixels and you want to create a window that’s 440 pixels wide. You know that your window will remain on-screen as long as you don’t move it more than 200 pixels from the screen’s left edge. In other words, a 440 pixel-wide window positioned 200 pixels from the left places its right border at the screen’s right edge if the screen is 640 pixels wide.

Remember that some people surf the Web with popup blockers on and JavaScript off. Therefore, it’s not wise not to put important functionality in popup windows that some people may not be able to open. You can create “pseudo” popup windows by creating divs that contain content you’d like to display. You may have seen these types of divs when your screen suddenly darkened and an image appeared in a box. Because these divs are not popups, popup blocker software cannot prevent them from appearing.  Finally, there are some restrictions when resizing certain windows.

JavaScript has many built-in methods that can save you programming time. Find them at Udemy.