I get the width of the browser using the following line:
$(document).width()
and then I set the element to this width.
But in IE, the horizontal scrollbar appears (width is larger than the browser size - I think this is because it counts the width of vertical scrollbar). I use the html 4.0 transition doctype. What should I do?
Try the clientWidth property, like so:
$('body').attr('clientWidth')
From the Mozilla Developer Center:
clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
From MSDN:
Retrieves the width of the object including padding, but not including margin, border, or scroll bar.
It shouldn't count the scrollbar. Does your element have margin or border? That would be added to the width of the element and affect the horizontal scrolling. Just try subtracting from the $(document).width() value.
You can use $(window).width(), which doesn't include the scrollbar. However, that's the window width not the document width. The document can be a lot wider than the window in horizontal scrollbar situations. If your page will never get wide enough for a horizontal scrollbar, this may be fine for you.
Getting the scrollbar-less document width in IE (Quirksmode), regardless of the existence of a horizontal scrollbar, I know of no perfect solution. This is what I'm currently using:
var maxLikelyScrollbarWidth = 25; // It's 20px on my IE
var hscroll = $(document).width() > $(window).width() + maxLikelyScrollbarWidth;
var widthNoScrollbar = hscroll ? $(document).width() : $(window).width();
It's not perfect but does the job. There are edge cases though.
Related
To check if a rectangular element is fully inside the window viewport, I can do this:
// NOTE: Only vertical checks shown. Remember that y increases while going down the page.
if (top > window.scrollY && bottom < document.documentElement.clientHeight + window.scrollY)
However, there are websites where all elements have absolute positions (!!) (example). In those cases, document.documentElement.clientHeight is 0 and the check will fail (UPDATE: apparently the value being 0 happens on Firefox but not Chrome or Edge).
I'm trying to solve this by using window.innerHeight instead for these cases, but it includes the horizontal scroll bar height.
I don't want to assume a fixed pixel height for the scroll bar, nor to create temporary HTML elements for calculations, and I'm not using jQuery. I've seen code calculating the scroll bar height with offsetHeight - clientHeight but that won't work here since both are 0.
What are my options? This feels like an extremely duplicate question but fact is that I couldn't find an answer. Thanks.
Instead of document.documentElement.clientHeight, use document.body.clientHeight, it should work on both Firefox and Chrome.
More explanation on the difference between the two are here: difference between document.documentElement.clientHeight and document.body.clientHeight
If body is smaller than viewport, then the viewport size is returned.
What I am trying to do is resize a picture so that the body fits inside the viewport. I want to have one of those nice "above the fold" layouts where the user does not need to scroll. It breaks though when the screen is so large that the body is smaller than the viewport.
If body < viewport
then
document.body.scrollHeight (body) = document.documentElement.clientHeight (viewport)
The jQuery solution is to use $(document).height(), but it gives the larger of the viewport or the document.
How to get the height of the entire document with JavaScript offers solutions that fail here for the same reason.
How do I find the body height where the body height is less than the viewport height?
To prevent this trouble, you can use CSS Viewport variables to define your body height equal to the viewport! See above:
body {
height: 100vh;
}
In this case i am using the vh variable, that corresponds to the Viewport Height. Check the other options of viewport variables that your can use.
I am trying to draw a spotlight on some page elements during a user interface tutorial (see CSS3 spotlight effect using a rounded rectangle with gradients).
For example, here's the navbar:
and spotlighted (rest of the page is dimmed out):
However, one of the elements on my page is giving me trouble. Here's it's positioning in Chrome:
However, jQuery thinks it is 330px by 60px:
> var blah = $('.user-list')
[
<div class="well well-skinny user-list">…</div>
]
> blah.height()
60
> blah.width()
330
This results in a spotlight that is too small when it is drawn:
The weird thing is, there are lots of other elements on the page (like the navbar) whose sizes are calculated correctly, and the spotlight shows them properly.
What is up with this element that causes jQuery to show an incorrect height and width? Some additional information:
The entire page is on border-box sizing except for input elements, which don't play well with bootstrap.
There is 9px padding on all sides with a 1px border, which makes up for the size discrepancy, however there are many other elements with border/padding where the size calculation works properly, and this is the only element that is weird. For example, the bootstrap navbar shown above has 20px of padding on the left and right sides, but the width is calculated correctly.
Width is poorly explained in many places, however, it is more properly defined as the width of the "context box". More information, here.
A css width of an element is (according to box-sizing css property)
if(it is border-box)
css width = element content width + padding + border
if ( it is padding-box)
css width = element content width + padding
If(It is content-box , which is by default)
css width = element content width
and so for height
jQuery .width() always give the element content width.
If you want elements width and height with padding you can use .innerWidth() and innerHeight() method.
If you want include border size than use .outerWidth() and .outerHeight()
I have a div. I've set the width of the div to auto. I want this div to be a square, so I've set the height of the div to 100%. Now if I set the width of the div to 100% it wouldn't be a square as most screens are rectangle, so I thought I could get the current height of the div in pixels and set the width as the height in landscape mode, and do the opposite in portrait mode, but I have no idea about how to go about this. Please assist me for the same. I'm using HTML and JavaScript
Without any extension like jQuery:
var div = document.getElementById("myDiv");
var height = div.clientHeight;
div.style.width = height + 'px';
I don't think JavaScript is necessary for that; if you are doing mobile/tablet design you could use media queries to change the width and height of your div; and if you want it to be square you could set the width and height to be the same with CSS. Experiment with percentages until you find which values produce equal width and height in web developer or firebug.
What I want is, an example when passing the mouse on element in page, then forced to increase the height of scrollbar, in that case, I want to shows alert box.
I have used the following code
if(document.body.offsetHeight < document.body.scrollHeight ){
alert('not Equal')
}
Also I have used clientHeight function Instead of offsetHeight function,
But he does not work well except only in chrome and safari browsers.
Update....
You can not determine if the page has scrollbars using document.body, use an div container instead, it must have overflow css property and specified height and / or width. After this you can use .offsetHeight and .scrollHeight to dermine if the content is bigger than the size of the container.