I am creating a simple popup window and the window height will not resize to 30 pixels. It always defaults to 100 pixels. This behavior appears in all browsers. Am I missing something?
var myWindow;
function openWindow(url)
{
var windowFeatures = "width=530,height=30,status,resizable=no,scrollbars=0";
myWindow = window.open(url, "welcome", windowFeatures);
}
Here is my link
<a href='javascript:void(0)' onclick=openWindow('http://www.stackoverflow.com')> Open the window </a>
No, this is just the way it works. The "features" that you pass in to window.open are simply requests, and the browser is free to ignore any or all of them. Most browsers and/or the underlying OS itself impose a minimum width and height for windows -- there is nothing you can do to alter this via JavaScript.
Most browsers set a minimum window size around 100px so malicious users don't go making tiny windows from which to do lousy things. Even a well-intentioned window of sufficiently small size could become difficult for a user to find and close.
Maybe a lightBox or simpleModal type solution would be helpful? You'd have more control over the size of the display area.
Ok after a bit of tinkering I forgot about using the resizeTo() method. Can't believe I did not think of this earlier. (Wasted 2 hours)
Related
I would like to get the dimensions of the monitor. I would also call that the screen size, but apparently, that is not the same.
I have tried:
screen.width
screen.height
screen.availWidth
screen.availHeight
globalThis.screen.availWidth
globalThis.screen.availHeight
The thing is, all of these change when I change the browser window size. The monitor (screen?) does not. It is hardware.
Surely the OS knows the monitor's size. Surely it would be trivial to make that information available through JavaScript.
The reason I need this is that I am trying to determine if they are on a desktop, tablet, or mobile device. The size of their browser window is irrelevant.
Thanks for the help!
I found the problem. screen.width and screen.height do, in fact, return the monitor size. These numbers do not change when the browser window is re-sized. And there is no privacy issue around this. The problem is a bug in the Brave browser.
I'm sure this is the working as intended, but I find it kind of a pain.
In Chrome (and probably other browsers)
Generally, window.innerHeight gives me 801 (for example).
If I have a console open along the bottom half of my screen (going horizontally), this changes my window.innerHeight. If I've downloaded something, this pops up a bar at the bottom of the window and also changes window.innerHeight.
I don't having the dev tools open to make my site feel broken.
Is there a different measurement to use in javascript to ignore UI?
I don't want outerWidth, because this includes window tab heights and they won't be consistent cross browser.
I essentially want the height to be consistent whether or not there are any chrome ui elements present.
I don't think you can get exactly that number! The closest you can get is calculating the available height, minus os taskbar and such by using:
window.screen.availHeight
Which MDN says:
Returns the amount of vertical space available to the window on the
screen.
I made a jsfiddle to try it in here
MDN availHeight article
I just happened to notice the below behavior in chrome.The search suggestion is extending beyond the chrome window itself. I am curious as to how this can be implemented. Is this just some css styling? or something more?
This unfortunately is not possible. The search box is an internal part of chrome, thus part of the application itself. Your web page, which has the div inside of it is limited to the browser window itself, any attempt at breaking out of this container will simply end up in your div either being moved off-screen or your browser will simply get scrollbars. So long story short, this is not possible.
Besides that it would be quite dangerous as malicious users could pretty much take over everything you see on your computer screen.
I agree with Paradoxis his answer but there is a way. I can't see any use in it but a select box with a lot of options can extend beyond the chrome window.
I have tried playing with the width and height of the select box to, but as expected that only applies for within the window.
The behavior that you see in the screenshot is the ellipsis property of css
http://jsfiddle.net/HerrSerker/kaJ3L/1/
Still if you want to extend some div beyond the window of your browser
then try giving it more width than the width of your browser
eg:
width: 1900px;
I'm trying to detect the actual monitor resolution or size using either JQuery or JavaScript, the screen.availWidth or screen.width seem to work in all browsers except for firefox and explorer...
If the window is maximized it will get the information but if the window was scaled down or even zoomed it doesn't give the monitor resolution but looks at the window instead...
I've gone through several posts on here but haven't found anything and I think most of them are not stating the fact that the window size might not be maximized or zoomed when getting the wrong type of information...
I'm hoping there's a solution I'm missing, thanks ahead for any help ;)
JavaScript var x = "Available Width: " + screen.availWidth;
With jQuery:
$(window).width();
$(window).height();
Is there a way to find the browser height with the toolbars and buttons of the browser, not only the window or document height?
For the size of the viewport, you use window.innerWidth and window.innerHeight. For the whole window, including decorations, use window.outerWidth and window.outerHeight. Then, all you need to do is subtract one from the other.
Edit: There is no supported way of doing this in IE8 and older. This is explained in this article and also provides a workaround which involves resizing the browser window. There is also this Stack Overflow answer.