I am relying on $(window).width(); & $(window).height(); for a resizing function and they seem to come out differently in different browser, same thing is also happening with innerWidth/innerHeight. What is the best way of getting an accurate value for this?
Thanks for any help
Thanks for inpt - for clarification I am using jquery Thanks but I am using 1.7.1 and I have the following css:
*{padding:0;margin:0;border:0;}
with no changes to padding or margin in html or body
$(window).width() is get the browser viewport width, why the ie browser get the less width? because in the left side of the browser, it has a border. so when you use the .width mothed, the ie browser's width will less than chrome\safari\firefox's.
Turns out the documentation clarifies that:
$(window).width(); // returns width of browser viewport
So being the viewport, each browser has a different viewport usable area.
it is a old version jquery bug
Ensure you're using body, html {margin:0; padding:0;} - might be default values in different browsers otherwise.
Related
I was trying to get the screen available height (not include task bars and etc) in Javascript. screen.availHeight in Mac OS/Linux gives me exactly what I need. However, in Windows 10 screen.availHeight returns longer than I expect. It seems to include the length of task bars as well.
How can I get the maximum available height not including the task bars and etc in Windows 10?
So I'm pretty sure using jQuery is the solution!
This code will work quite fine:
$(window).height(); // browser viewport height
Also I'm sure this is not problem of Windows, it's sounds like some kind of browser problem :)
Have you tried to use document.height also? Is this not working either?
$(document).height(); // HTML document height
Try this one:
window.innerHeight;
If you want the height of the window you can do window.innerHeight
If you want the height of the screen you can do window.screen.height
document/window outerHeight provides the size of the window (e.g when the browser windows is re-sized the value changes ).
screen.availHeight gives you the actual screen size (including the actual browser navigation etc)
I tried creating a fixed div set with top:0,buttom:0 and get the outerHeight but it's also restricted to the window's current size.
What is the best way to get the max available height when the window is maximized ?
Thanks.
EDIT
The answer, provided with the help of #Greg Burghardt is
screen.availHeight - (window.outerHeight - window.innerHeight)
You may be looking for:
document.documentElement.offset[Height|Width]
A good reference: A Tale of Two Viewports
I've found that using the Modernizr.mq() function to check media queries is a much more accurate way to run Javascript based on the viewport width, because it matches up with my CSS.
However, is it possible to get a width value from Modernizr?
Using built-in tests, nope, that's not possible. At least, there are no mentions in the Modernizr docs.
However, you don't need Modernizr to get the dimensions of your browser. You can do it by using plain javascript:
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
Original answer
I'm looking for a code that either:
Prevents an element from extending beyond the edge of a window.
OR
Detects the window width or height so that the element's width/height may be set in units of px.
This code only needs to work in Google Chrome.
I've done a LOT of research and everything looks so complicated. Isn't there a simple CSS solution?
Thanks much in advance!
I had a similar problem that jQuery solved for me,
var width = jQuery(window).width();
there's also a .height() method
I have the following webpage:
A tall webpage with only a vertical scrollbar and no horizontal scrollbar. The document and window therefore have the same width.
When I ask IE8 for $(document).width(), it returns the viewport width including the vertical scrollbar. FF returns the right answer.
I cannot use $('body') for this, because it returns the same width as the window object (it is set to 100% somehow, so it doesn't work when the page gets smaller).
How can I make IE8 output the right value? Thanks in advance.
UPDATE
I actually did some more testing to my problem. and I found that when the horizontal scrollbar becomes visible as well (because of a smaller window), IE8 DOES get the right size. So this makes my problem even more complicated because I can't set an ugly if(IE8)-hack.
UPDATE2
The problem lies in my CSS and jQuery.
The actual case seems to be the problem:
My css says:
body
{
overflow-y:scroll;
}
IE8 doesn't count this as part of the body, but IE7 does. How to fix this? Call jQuery for a fix?
I put this problem to the jQuery crew: http://bugs.jquery.com/ticket/8048.
They don't think it's a bug. Their advice is to use $('body').width(). And this does indeed the job for me.
I still find it strange that the body in IE8 is adjusted to the scrollbar, but the $(document).width() stays the same. I used this jsFiddle for testing. It results in the same glitch, but jQuery thinks it's ok, because W3C doesn't say anything about it... Or something like that.