I have a function that tells what the current width of the user's screen is
but when i resize window to width less than 1024 that function doesnt output width less than 1024
function xxx(){
var x = window.screen.Width
console.log(x)
}
setInterval(xxx, 1000)
output:
1024
even if screen width less than 1024
how can i fix this without using #media requests?
already tried:
window.screen.innerwidth
Like #yousoumar said instead of using setInterval to get the user's screen width, use resize event to get the screen width whenever the screen resolution changes.
window.screen.width get only the user's screen width and it doesn't change according to the manual resizing of the browser
Instead window.innerWidth gets the browser width and it changes according to the manual resizing of the browser
function widthResizer(){
var width = window.innerWidth
console.log(width)
}
// Getting the width of the browser on load
widthResizer()
// Getting the width of the browser whenever the screen resolution changes.
window.addEventListener('resize', widthResizer)
Instead of setting up a setIntervall to track screen width changes, use the built in resize event.
As #Kumara pointed it, you would wanna use window.innerWidth, instead of window.screen.width, as the last one give the screen's original size, not the resized one.
function xxx(){
var x = window.innerWidth
console.log(x)
}
// that gives you the width on load
xxx();
// that is for when you change the width manually
window.addEventListener('resize', xxx);
Related
I have a in my document which I scale to full screen using the full screen JS API div.fullscreenRequest(). I find out how large the full screen actually is only after it has been activated, i.e., the fullscreenchange event has fired. In this event, I make some computations (original size of div versus new scaled-up size) so I can apply some transformations to the div to make it look right.
The issue I am having is that determining the full screen size is highly unreliable. In the fullscreenchange event, if I do detect that the full screen mode has been activated, and I use screen.width and screen.height, respectively, I sometimes get the correct values back (1920 x 1080) but sometimes I get 1920 x 948 for no apparent reason, non-deterministically. It appears that the event fires in some sort of racy way while the screen is still switching to full screen mode?
What is the reliable way of determining the full screen resolution?
What about this:
const width = window.screen.width * window.devicePixelRatio,
height = window.screen.height * window.devicePixelRatio;
console.log("screen size:", width + "x" + height);
I am looking into a way of getting the innerHeight and width of a browser (specifically chrome) so that the sizes stay consistent (as happens with outerHeight/width) when you are zoomed in or out on the page.
To be more specific. I am trying to set the height/width of a child window based on the current height and width of the parent window, and I am currently using inner height/width.
However, when if for example, you have a 1000px browser window, and them zoom to 50%. If you then get the inner width. It will report that as '2000px' When the child window is opened, it sets the width to 2000px. Then it sets the zoom on the child window based on the zoom of the parent window. This gets set to 50%, which then updates the size of the window, so you end with a width of 4000px at 50% zoom.
So I am mostly looking for a way of getting the inner dimensions either through the current zoom level and innerWidth, or using the outerWidth/Height, and trying to get the height/weight of space between the values. Neither of which I can see a way to get.
See code example on
https://jsfiddle.net/p05begnq/
using
function openWindow() {
var width = window.innerWidth;
var height = window.innerHeight;
window.open("https://www.google.com", "_blank", "width=" + width + ",height=" + height);
}
Click the 'Link' and google will open in a window the size of the output window.
Zoom out, click it again. The child window will now be bigger
Ended up using
width: window.outerWidth,
height: window.outerWidth/window.innerWidth * window.innerHeight,
as window.outerWidth/window.innerWidth gives a good approximation of the ratio, as inner and outer width are normally the same when at a standard zoom level
I am searching a way using javascript to find visitors browser window width and height but i want also find the maximum window sizes so if the user make the window smaller or bigger some elements change automatic position or size like facebook chat. Any suggestions ?
The maximum browser size width would be the width and height of the screen:
screen.height;
screen.width;
But I'd use CSS media queries for what you're trying to do:
http://css-tricks.com/css-media-queries/
Something like this would make the page background black if the window is less than 500px wide:
#media only screen and (max-width: 500px) {
body {
background: #000;
}
}
Update:
Oh, and you'll want a polyfill for older browsers that don't support media queries:
https://github.com/scottjehl/Respond
That'll get you media queries all the way down through IE6!
Maximum window height is
window.screen.availHeight - (window.outerHeight - window.innerHeight)
You can use window.innerWidth and window.innerHeight
You can position any dom element relative to window using css position 'fixed' or absolute so that on window resize the will readjust itself.
You can use window.onresize to listen window resize event
jQuery equivalent
$(window).width(); $(window).height() and $(window).resize(function(){});
If you can use jQuery, it's pretty easy to set up a listener in a cross-browser fashion:
$(window).resize(function() {
alert($(window).width()) //window width
alert($(window).height()) //window height
}).trigger("resize") //to ensure that you do whatever you're going to do when the window is first loaded;
I'm working on a mobile web app, and in my page I have a div element with its width set to 100%.
I need to set the height of this div so that the height is correct for a set aspect ratio. So for example, if the screen was sized to 300 pixels wide and the ratio was 3:2, my script should grab the width of the div (which at this point should be 300px) and set the height to 200px.
On first load, this works perfectly. However, if I rotate the screen of my phone to landscape, the width of the div obviously changes, so I need to reset its height in order to keep the correct ratio.
My problem is that I can't find an event which fires after the elements are resized. There is an orientationchange event built into jQuery Mobile, which helpfully fires when the screen is rotated from portrait to landscape and vice-versa:
$(window).bind('orientationchange', function (e) {
// Correctly alerts 'landscape' or 'portrait' when orientation is changed
alert(e.orientation);
// Set height of div
var div = $('#div');
var width = div.width();
// Shows the *old* width, i.e the div's width before the rotation
alert(width);
// Set the height of the div (wrongly, because width is incorrect at this stage)
div.css({ height: Math.ceil(width / ratio) });
});
But this event seems to fire before any of the elements in the page have resized to fit the new layout, which means (as mentioned in the comments) I can only get the pre-rotation width of the div, which is not what I need.
Does anyone know how I can get the div's new width, after things have resized themselves?
A few methods for you to try:
(1) Set a timeout inside your orientationchange event handler so the DOM can update itself and the browser can draw all the changes before you poll for the new dimension:
$(window).bind('orientationchange', function (e) {
setTimeout(function () {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
}, 500);
});
It won't make too big of a difference but note that Math.ceil takes a lot longer to complete (relatively) than Math.floor since the latter only has to drop everything after the decimal point. I generally just pass the browser the un-touched float number and let it round where it wants to.
(2) Use the window.resize event instead to see if that updated fast enough for you:
$(window).bind('resize', function (e) {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
});
On a mobile device this will fire when the orientation changes since the size of the browser view-port will also change.
(3) If you are updating the size of this <div> element because it holds an image, just apply some CSS to the image to make it always be full-width and the correct aspect ratio:
.my-image-class {
width : 100%;
height : auto;
}
Is there any way to set the minimum size of a popup window through JavaScript?
My problem is that when someone makes it as small as he can the content just looks stupid.
When creating pop-ups, you can only set width and height. But since the pop-up was created, it means you can change the height and width of the window when the pop-up loads.
Simply place an onload event inside your pop-up window:
window.onload = function() {
if (document.body.scrollHeight) {
var winWidth = document.body.scrollWidth;
var winHeight = document.body.scrollHeight;
} else if (document.documentElement.scrollHeight) {
var winHeight = document.documentElement.scrollHeight;
var winWidth = document.documentElement.scrollWidth;
} else {
var winHeight = document.documentElement.offsetHeight;
var winWidth = document.documentElement.offsetWidth;
}
window.resizeTo(winWidth, winHeight);
}
edit: Tested in IE7,8, Chrome, Safari 4, Firefox 3. Working, but you might need to take into account the size of menu+address bars and such, as the window size will be the outer size, and this function will find the size of the content. So to be safe you should probably add a couple of pixels, and also turn off scrollbars in the popup to make sure they won't take up any space.
I do not believe that you can set a minimum using the Javascript new window. I know you can set the size and disable the scroll bars and prevent resizing, but that would answer the minimum, but also impose a maximum as well, which you may not be wanting.
Most browsers have a minimum width and height.
Internet Explorer 7
minimum width > 250px
minimum height > 150px
When using windows.open, you can specify the height and width of the window like this:
window.open ("http://www.stackoverflow.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");
It is not the minimum size though, as the window will not be bigger when there is more room. You would have to check screen space yourself for that.
http://www.htmlgoodies.com/beyond/javascript/article.php/3471221
As seen in the link, you can set the minimum size. If you want to scale it so it gets bigger you must to that from within the popupwindow.