Please look at this code
http://jsfiddle.net/rkumarnirmal/VG47Z/3/
There is nothing wrong there. So now check this one
http://jsfiddle.net/rkumarnirmal/4GrsD/6/
You can find that the $(document).height() value is differing in the second jsfiddle and the red box is placing down beyond the area. Why is it so?
I want to place the red box at the bottom most inside the document area and I don't want to use this
bottom: 0px;
Could anyone guide me?
Thanks!
at a q glance, it looks like the problem is because you are mixing
.css("height");
with 'computed height
.height();
use .css("height") to get the doc height as well as setting the final position.
update as comment: apologies ( less haste )
$("body").css("height");
returns the height value only if one is set in css or a recent programs set it.
try
$("body").height()
instead of $(document).height();
document is larger than body
Your question : How can I use .css("height") for getting doc height?
$(document).height();
if you got an object with margins you can use
$(object).outerHeight();
It will take all his height
Related
I've a trouble with the style of nav element in my web application.
As you're able to see, if to focus on element nav#menu.horizontal-menu - I can see the actual width/height of that element in Chrome.
BUT! When I try to obtain that element in JavaScript by the id - menu (as you can see the tag declaration of nav tag in the bottom part of screen):
There is no both width or height values of it...
I rather understand, that it may be because of:
`nav#menu.horizontal-menu` != `nav`
But, it's only my suggestion... I've tried then to use both functions:
getElementsByClassName()
querySelector()
But... also no success as you can see in screens, what's wrong and how to get so needed actual width and height options from element?
Thanks!
I think you are looking for this answer:
How do I retrieve an HTML element's actual width and height?
.style.width only checks what is filled in in the style attribute of the element. OffsetWidth would probably work...
That's because there are no width and height styles defined for it.
To calculate the rendered width and height, use a.offsetWidth and a.offsetHeight. Those are the values that DevTools are showing on hover.
Have you tried:
var width = document.getElementById('foo').offsetWidth;
var height = document.getElementById('foo').offsetHeight;
For cross-browser compatibility I'm recommending you to use jQuery
With the code below, the alert doesn't return the actual size of #main, it always returns the value of #main's css width with the % dropped. So in this case I get 95 in the alert. If I alert parent().width() I get 100.
The data returned from the .get() call is a ul that sometimes is wider than #main, and sometimes not. The width of the content doesn't seem to have any bearing on what .width() returns.
So my question is, how do I get the true pixel width of #main?
CSS:
#container {
width: 100%;
}
#main {
width: 95%;
overflow: hidden;
}
HTML:
<div id="conatiner">
<div id="main"></div>
</div>
Javascript/jQuery:
$.get('page.php', function(result) {
$('#main').html(result);
});
alert($('#main').width();
I ran into this same issue while trying to implement jquery.autogrow-textarea on textareas used for inline editing. The textareas were contained within div's that were not yet displayed (css display: none;). While debugging the .autogrow() javascript code, I discovered that jQuery's .width() was returning the percentage value with the '%' character removed as opposed to the calculated width in pixels (e.g. 100 for 100%, 80 for 80%).
Here is the jsfiddle that illustrates this scenario: http://jsfiddle.net/leeives/ujE6s/
To work around this, I changed my code to .autogrow() as soon as the textarea was displayed instead. The calls to .width() were then accurate.
I'm not sure if you're working with hidden content or not, but thought I'd write up my answer in case others stumbled upon this (like I did) while searching for an issue with jQuery's .width().
I ran into this same problem. For whatever reason (environment) I was not able to pull the correct .width() off of a div that had a percentage value for the width in CSS.
The accepted answer to this post:
webkit browsers are getting elements.width() wrong
where Gaby answered with the suggestion to use: $(window).load(...) worked perfectly.
$(window).load(function () {
alert($('#main').width();
});
I know it's an old post, but this may be useful info to someone if they don't come across the other post.
This is because AJAX is asynchronous. When you run the alert, the request hasn't come back.
Fixed code:
$.get('page.php', function(result) {
$('#main').html(result);
alert($('#main').width());
});
This works if you fix the last line of your code:
alert($('#main').width());
Here is the fiddle
http://jsfiddle.net/UMAbx/
Also, div id=container was spelled incorrectly in the HTML. Fixed in the fiddle.
jQuery width() returns the width of an element without its border and padding.
CSS width in the other hand could include border and padding (that depends on your browser/css default box model behaviour).
If you need the entire width of the element, you should use jQuery outerWidth() instead.
$.get('page.php', function(result) {
$('#main').html(result);
alert($('#main').outerWidth();
});
I can't seem to replicate this behavior. Perhaps someone overrode jQuery.fn.width() with an implementation that returns the value as a percentage? I'd debug in Firebug or similar and inspect that function to be sure.
Morning all,
I'm trying to create a Mootools effect to show and hide replies to a comment on a discussion board. When the user clicks the "replies" link in the comment I want to increase the height of the comment container and then fade in the replies content. If the replies content is already visible, clicking on the link would reverse the effect.
I've got it sort of working, but I'm having trouble getting the correct height of my hidden elements (repliesH in my JS). I've tried getDimensions(), measure() and getComputedSize(), but they all give the same result: when elements are set to display:none I get a height that is too small; when I set them to display:block the height is correct. Can any kind person spot where I'm going wrong?
http://jsfiddle.net/andfinally/tVBCa/
Cheers
Fred
=======================
A BIT LATER
Just noticed - the width of the .comments-list container seems to have something to do with this problem. When I remove that width the effect works OK. This probably means that getDimensions gets the height of an element when it's not nested in anything. Can anyone suggest how I can work out what the height'll be when it is nested?
Cheers
Fred
you could use Fx.Reveal, it's very useful when u encounter these kind of problems, and it simplifies A LOT your code, i.e. (I've forked your example) => http://jsfiddle.net/steweb/DH27F/
A simple way to workaround it:
replies.show();
var repliesH = replies.getDimensions().y;
replies.hide();
Just show it, get dimensions and hides it again. This runs so fast that neither is visible to the user.
Your updated Fiddle here.
I need to be able to store the current height and width of a div at any point in time.
Currently I am using div.style.height/width which works fine when the styling is applied inline.
The problem is that this returns for example 600px and not 600.
Is there a better way to do this? If not, whats the best way to get just the number 600?
My updated code looks like this:
var div = document.getElementById('container');
div.scrollLeft = contentdim.cx*scalar - parseInt(div.style.width)/2;
div.scrollTop = contentdim.cy*scalar - parseInt(div.style.height)/2;
Which works fine in FF. For some reason scrollTop is messing up in Chrome though..
Note: This is a function which is called onscroll for the div.
try div.offsetHeight || div.clientHeight
parseInt(div.style.height) is more generic than div.style.height.replace("px","")
However div.style.offsetHeight might be better because it does not rely on style being explicitly set (but you have to render the div before you can read the value)
div.style.height.replace("px","")
With jQuery, a bit more elegant, you can do it as well: http://api.jquery.com/height/
$("div").height()
//returns just the integer
To summarize the above:
document.getElementById('yourElement').style.height
CSS height if it has been set in a stylesheet. Will not include padding, margin, etc. If it is not set, you may wind up with values like auto.
document.getElementById('yourElement').offsetHeight
Height of the HTMLElement as rendered in the browser, including padding, scrollbars etc. (The total offset this Element's height consumes). Note that this often can be equivalent to clientHeight but that is not guaranteed.
Here is how offsetHeight is defined on Mozilla Developer Center. Note that there are a few differences with clientHeight, namely clientHeight does not include rendered scrollbars; offsetHeight will generally give you the maximum value.
Use jQuery:
height()
width()
I'm unable to get the height of a page in javascript when the page is larger than the screen.
I thought this would get me the right height:
$(document).height();
but that only gets the height of the screen, same as:
$('body').height();
same as:
document.offsetHeight;
For some reason all these examples only return the height of the screen. Can somebody help?
Using jQuery (which you did specify), $(document).height() will return exactly what you're asking for.
To clarify the usage of the height() method:
$('.someElement').height(); // returns the calculated pixel height of the element(s)
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
I suspect, that if $(document).height() is not working for you, something is wrong. You may be:
Calling it too early. Like, before the DOM is ready
Have some uncleared floats that are not causing some block level elements to expand to their real height. Thus messing up height calculations.
Have something critical absolutely positioned. Absolutely positioned elements do not contribute towards height calculations of their parent elements.
If you're cool with using jQuery, what about getting the body or html height? like:
var winHeight = $('body').height();
I was looking for this and landed up here. Without Jquery, you can get this with plain JS also. Below works:
console.log(document.body.clientHeight,document.body.scrollHeight,document.body.offsetHeight)
Do note the below link to clarify which to use:
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
I think you need to add window.pageYOffset (the amount the page has been scrolled, in pixels).
http://www.quirksmode.org/dom/w3c_cssom.html
Not sure about JQuery. But this link, might help you to understand various properties and how they behave in different modes in different browsers.
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html