Why is resizing the browser window bad practice?

I asked how I can resize the browser window with JavaScript. Everybody told me not to do it. Why is this a bad practice?

I think sometimes it can be good. For example, I want to show users a tweeting popup page. After a user tweeted, I want to redirect him to twitter main page to let him verify his tweet. But tweeting page is small and main page should be big. In this case, making the browser window bigger seems good for user. Am I wrong? Then how should I do in this case?

Update

I think I need to make somethings clear.

1. I also don’t want my browser to be resized. Resizing users’ browser is usually bad. What I want to know is that there could be some case it can be good.
2. I also don’t like popups. But as @zzzBov said, pop-outs are different. That is used in many websites even in Stack Exchange(You can see share buttons under the favorite button). I don’t think it would be better if those buttons were jQuery modal dialog.

And, JavaScript resizeTo function can resize the browser. When I tested that function, it works well in browsers but Chrome. In Chrome, it works just in popups. I might be wrong, but I guess Chrome team also may thought that the resizeTo function would be needed in popups.

Update2

Most people just don’t want the method resizeTo to be used anytime and anywhere. I think if that method were totally evil and useless, the browsers vendors had already disabled that method, but they didn’t.

In Chrome and Opera, the resizeTo method is available just in popups, and in Firefox users can disable it manually. I’m sure that one should be very careful when using the method. But I believe this method can be useful in some case.

why is my website resizing browser windows

I have had a report that my company’s website is resizing at least one employee’s browser windows. I experienced this behavior myself on the user’s computer, and it was mystifying because the resizing only occurred on our site, not on any other site, and it occurred on both Firefox and Internet Explorer. The user has a Windows 7 machine running updated software. She has no add-ons, themes, or plugins besides the usual (Flash etc.) and her settings are the factory defaults. I cleared the browser cache on both browsers and restarted the computer and it still occurred. The only thing left is the css, but none of it seems suspicious to me.

What is happening is, when she clicks a button or internal link on the site, then when the new page finishes loading, the browser window resizes to approximately 80% of the width of the content. That is, the very last thing the page does as it loads is to resize itself. If she zooms in or out, then on the next load, it again resizes to 80% or so of the smaller or larger size of the content. If she maximizes and then loads a page, then the window resizes to 80% but somehow maintains the «maximized» icon. (You then have to click twice on the «maximized» icon to maximize.)

The reason I am flummoxed is that I thought this kind of behavior was something you could only do with JavaScript, but I deliberately tested this with pages that had no JavaScript at all and it still occurred. There is exactly one page on the website that has browser-resizing JavaScript on it, but it resizes to a pixel size, not a percentage, and it’s part of a web service that wasn’t in use while I was testing.

What kinds of things should I investigate to solve this issue? Because this is an employee, I have to either fix the website or fix her computer, so ideas for investigating both would be great.

How can I refresh the screen on browser resize?

Is it possible to refresh a page on browser size change? I use some styles that create areas on a page and if the browser is scaled down the layout break.

Perhaps I can detect the document size change with jQuery?

9 Answers 9

Update for anyone viewing this now. JQuery now considers bind a deprecated function.

And the way proximus’ response works (at least in Opera/Chrome/Firefox) it constantly polls for resizing even if the browser is just sitting there. It appears that the resize function was called automatically when it hit location.reload(), causing it to hit an infinite loop. Here’s what I pulled together that also solved the problem.

Here’s a pure JS solution, because I think it’s not fair to use jQuery for everything.

A drawback is that it won’t work in IE «browser» older than 9.

If you’re looking for a jQuery solution, you can use something like this:

Maybe it makes sense to additionally use a timeout.

Simple. This doesn’t fire multiple events just one event every x second(s). The accepted answer will throw too many events

for jQuery replace window.addEventListener(‘resize’ with $(window).resize

This one worked for me!

There is an onresize event you can listen for:

Just use this code

There is a problem if someone drag window to resize — there would be too many resize events.

It is better to use timer, to clean that up:

The already mentioned solutions work for the most of the cases. Safari on mobile devices (like tablets or phones) slightly changes the resolution when a user starts scrolling. This yields to an unusable page because the site refresehes when the user starts scrolling. To avoid this, set a threshold in px . If the browser resizes above this threshold , the page will reload. A jQuery solution might look like this:

Not the answer you’re looking for? Browse other questions tagged javascript jquery css or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

How to Disable browser window auto-resizing in Firefox

Hate it when a web site resizes your browser window? In Firefox, you can stop that.

While development etiquette has generally made web browsing a more pleasant experience over the years, removing such horrors as blinking text and the background midi. Unfortunately, there are a few annoyances still left on web sites, and one of the worst is the forced resizing of your web browser. Nothing peeves me more than having my browser window be resized to full screen without my permission, but if you’re a Firefox user, you can do something about it.

Here is how to disable the resizing of your browser window in Firefox.

How to disable automatic browser resizing in Firefox

• In Firefox, navigate to the Firefox menu and down to “Preferences”
  • (in Windows, it will be under Tools->Options)
• Navigate to the Content tab
• Find “Enable Javascript” and hit the button next to it that says “Advanced”
• Uncheck the topmost item, “Move or resize existing windows”

That’s all you have to do.

Firefox will no longer allow web pages to resize your browser window.

If anyone knows how to disable browser resizing in Safari or other web browsers, please post how in the comments.

JavaScript window resize event

How can I hook into a browser window resize event?

There’s a jQuery way of listening for resize events but I would prefer not to bring it into my project for just this one requirement.

13 Answers 13

jQuery is just wrapping the standard resize DOM event, eg.

jQuery may do some work to ensure that the resize event gets fired consistently in all browsers, but I’m not sure if any of the browsers differ, but I’d encourage you to test in Firefox, Safari, and IE.

First off, I know the addEventListener method has been mentioned in the comments above, but I didn’t see any code. Since it’s the preferred approach, here it is:

Never override the window.onresize function.

Instead, create a function to add an Event Listener to the object or element. This checks and incase the listeners don’t work, then it overrides the object’s function as a last resort. This is the preferred method used in libraries such as jQuery.

object : the element or window object
type : resize, scroll (event type)
callback : the function reference

Then use is like this:

or with an anonymous function:

The resize event should never be used directly as it is fired continuously as we resize.

Use a debounce function to mitigate the excess calls.

window.addEventListener(‘resize’,debounce(handler, delay, immediate),false);

Here’s a common debounce floating around the net, though do look for more advanced ones as featuerd in lodash.

This can be used like so.

It will never fire more than once every 200ms.

For mobile orientation changes use:

Here’s a small library I put together to take care of this neatly.

Solution for 2018+:

You should use ResizeObserver. It is a browser-native solution that has a much better performance than to use the resize event. In addition, it not only supports the event on the document but also on arbitrary elements .

Currently, Firefox, Chrome, Safari, and Edge support it. For other (and older) browsers you have to use a polyfill.

I do believe that the correct answer has already been provided by @Alex V, yet the answer does require some modernization as it is over five years old now.

There are two main issues:

Never use object as a parameter name. It is a reservered word. With this being said, @Alex V’s provided function will not work in strict mode .

The addEvent function provided by @Alex V does not return the event object if the addEventListener method is used. Another parameter should be added to the addEvent function to allow for this.

NOTE: The new parameter to addEvent has been made optional so that migrating to this new function version will not break any previous calls to this function. All legacy uses will be supported.

Here is the updated addEvent function with these changes:

An example call to the new addEvent function: