How I can capture browser restore/maximize event in jQuery or javascript? We can use window.onresize but that only tells that the browser is resized. thanks!
There is no way to determine this on script level.
You could - as a very unreliable workaround - compare the window.width and document.clientWidth properties after a resize event and see whether they match, or almost match. If they do, it's possible a maximize action has taken place.
I think it won't get any better than that, and even this method is subject to many, many factors. If there is a vertical toolbar, preventing the browser from resizing to the screen's full width, the values will differ, making it harder and harder to determine a resize event.
Related
I doubt there would be a general Javascript method for doing this, but is there perhaps any way to determine if the viewport or window.document (the renderable portion of the window) is occluded by other windows prior to the window.document regaining focus?
The reason I want this functionality is that I would like to, upon regaining focus, avoid the typical input processing of the first left mouse click on the window if and only if the window was at least partially occluded. A person who has full visibility of the window intuitively expects that first click to cause interaction, regardless of focus status, however, if the window is obstructed, that first click is typically made with the intent bringing the window to the forefront without interaction.
All searches are yielding are methods to determine if an element is visible in your viewport, which is completely different.
Edit: I noticed that finance.yahoo.com has videos that are automatically muted when they are not visible. I'm not sure how that is accomplished, but perhaps the same mechanism could be used if someone knows what it is.
I have a function that positions an element in my Firefox extension, and I need that function to be called whenever an event causes the window/chrome layout to change.
Events would be:
When a new window is created, after the chrome is rendered.*
When a window is re-sized.
Any other event that might cause the chrome layout to change size or shape?
(*) Right now, the function runs when a new window is created using:
window.addEventListener("load",myfunction);
But this runs before the chrome is rendered, and element sizes have wonky values. I need it to run after Firefox determines the actual size and placement of the chrome elements.
What are the events I would need to bind to, and how do I bind them?
I was in a similar situation, and didn't really find a good solution. However, the non-standard MozAfterPaint event may help, but comes with a somewhat sizable performance penalty however (so make sure you remove it once you don't need it anymore).
The resize event should do the trick.
There are tons of things that may cause things to change. New CSS/Images loading, toolbar customization, etc. 1. and 2. should cover most (all?), however.
The devtools layoutview ("Box Model") seems to use MozAfterPaint as well.
If possible, you should try to avoid having to calculate sizes yourself, however, by making use of the XUL/HTML flexbox model and CSS without fixed sizes (or min/max sizes only).
For a long time, I've been looking for a way to detect when a DOM element's size or position has changed. It could be because the window resized, or because new child elements were added to the element, or because new elements were added around this element, or because CSS rules have changed, or because the user has changed their browser's font size. There are a huge number of reasons that an element's size or position would change.
I could hook event handlers for many of those events, but I think there are cases that aren't covered. I had hoped to use MutationObservers to just watch the element's offsetWidth or clientWidth, but it looks like those only apply to DOM attributes, not Node properties (or maybe that's just what Webkit implements). So, to be truly bulletproof, it looks like I would need to run a polling loop anyway.
Is this correct? Have I missed something important? Is polling the only bulletproof way to detect when an element's size or position has changed?
Edit
To give a little more context, this isn't tied to any one particular use case. For me, it has come up time and time again. In my current situation, I was hoping to have a canvas that is set, via CSS, to be 100% width and height of its parent. I want a script to adjust the canvas's width and height properties when its offsetWidth or clientWidth changed (this is for WebGL, where the width and height properties affect the framebuffer resolution). In another project, I wanted to have an element expand in height to fill whatever remaining space was in the user's browser window. I have come across this situation time and time again and, inevitably, the solution seems to be:
Listen to window.resize
Hook into any code that you write that might change the DOM (or maybe use Mutation Events or Mutation Observers)
Have a periodic polling operation to clean up any missed cases
(most people stop at 1, and maybe do a little of 2)
I just wanted to make sure I wasn't missing something vital.
Incidentally, in my WebGL situation, listening to window.resize is sufficient (and is somewhat preferable, because then the canvas dimensions and rendering resolution change at the same time).
You might could do it with CSS animations. Check out http://developer.streak.com/2012/11/how-to-detect-dom-changes-in-css.html and similar. I suppose it won't handle all your requirements though, now that I read through it some more.
A co-worker pointed me to a technique that uses the underflow and overflow events. I haven't tried it, and I have no idea what kind of browser support there is (looks like Chrome and FireFox, and it should work in IE by synthesizing the same events that browser would look for, but I have no idea which versions support the technique).
As of 2019, you have access to:
ResizeObserver to fire callback on size change. Be careful here, it's not supported everywhere yet.
MutationObserver that could be used for position, but I guess that's a bit overkill. Well supported though.
IntersectionObserver as a bonus, that allows you to check for intersection with ancestors. Extremly useful to optimize stuff, especially in WebGL. This is pretty well supported.
How can I set height, width and set the position of the current browser window in the document.ready() function of jQuery ?
There supposed to be two javascript functions to resize and move the browser window:
window.resizeTo(width, height);
window.moveTo(x, y);
These functions are not supported by Chrome and Opera, and other browsers might experience certain security restrictions as well.
If you want to pop a new window with a certain size, check out the parameters of window.open(). Your interface should also not rely on it entirely, for example you won't be able to do it on mobile browsers.
When thinking about if something is possible or not it's always a good start to think about ways to abuse it. Would you want windows on your screen to jump around every 100 milliseconds, just because some website wants to do that? Probably that's why it's unsupported or limited these days.
I have a pretty simple question, but with an answer that I am unable to find. I was wondering if it is possible to lock a web browser (sticking with IE for now is fine) from being resized under (or past or smaller than) a certain set of dimensions.
For example, a new pop up window that starts at 500px by 500px, but can be enlarged to any size, but cannot shrink below 400px by 400px. So, when the user tries to go below these boundaries, the browser simply locks, not allowing the user to go any further.
A javascript/css/html solution would be preferred.
Thanks!
Jaime
You may find this link to be useful. Essentially, he describes his issues with doing exactly what you're wanting to do. It SHOULD be simple; simply (within Javascript) trap the resize event, and check the size; if below the minimum size, force a resize to your minimum size. Sadly, it appears to not be that simple, but he describes a reasonable workaround.
Never tried it, but this site gives a pretty good overview of the technique.
Short answer: Not reliably.
Long answer: You might be able to, under certain circumstances, but many users will disable JavaScript window resizing and similar functionality.
What you require is not very user friendly but here is how you achieve this easily:
add the following function to your script tag :
function DonchaResizeThatThing() {
window.resizeTo(550, 450);
}
and then add the following event handler to your body tag
<body onresize="DonchaResizeThatThing();">
I hope this helps.