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.
Related
Is there any way to know, at a given moment, if the page is currently zoomed-in?
I don't need to know the zoom level, and I don't need to catch the event: I simply need a cross browser solution that allows to know if the page is zoomed or not (e.g. a function that returns true or false). Unfortunately the solutions that I have found are completely outdated or work only on some browsers.
I need that in order to block gesture detection while the page is zoomed.
This is a one page scrolling site for kids. The content is best viewed at 1200 pixels wide. Is there a way I can make the window default to that size when the site is visited?
No, but you can have a landing page with a button on it that opens your desired page using window.open, and you can tell window.open how big you want the window it opens to be.
Details here, but basically (inside a click handler or similar):
window.open("http://example.com", "width=1200");
This is a suggestion to the browser, which it can ignore if it likes, but a value in that range is likely to be fine. (Whereas browsers tend to disallow very small windows.) You can also specify height, whether it has various window features, etc.
Of course, if you can make the page work well in any width, that would be better. Some of us are positively irritated by sites that try to tell us how wide our browser windows should be. :-)
You can open a new window of specific size on a click of a link/button using window.open like :
<a href="some url"
onclick="window.open(this.href,'targetWindow',
'width=700px,
height=700px');
return false;">Popup link</a>
There are two ways you can do this:
Using a div, iframe, or other element to contain everything on your page and specify the size on it. This won't change the actual size of the browser window.
Open a new window (popup) and specify a size on that. Note that if it's not done as part of the user clicking on something, it will likely be blocked by the browser's popup blocker. More info can be found here
Both of those are ignoring any issues with trying to force a size on the user. Things like:
What if their screen isn't large enough?
Will this be annoying to my users?
What if my user resizes the window?
Will all browsers support the resizing I'm after?
Will trying to resize cause horizontal scroll bars?
In general you should aim for something that can work across multiple sizes, but have a more reasonable minimum size. 1024x768 is usually a good resolution to aim for. This will much around with mobile browsers, but I presume you're not worried about those.
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.
I am looking to create a fullsize window using javascript but I am having difficulties trying to take the actual size of the window into account. I can get the resolution of the desktop but if I set the windows width and height to that value, it is not 100% correct as it does not seem to be taking into account the size of the border for the browser application itself. How can I calculate my target width and height to take the browsers application border into account?
So basically you want to mimic the effect of hitting F11? Check out [old dead link]
I want to warn you that it's a usability nightmare. Try to think of a better way to execute your design without going full screen. Messing with the user's system settings is a HUGE no-no, and changing browser dimensions/resizing windows definitely falls under that category.
To find out the windows height and width you can use the following:
window.innerHeight/Width -> All browsers but not IE
document.body.clientHeight/Width -> All browsers
document.documentElement.clientHeight/Width -> All browsers
More info here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
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.