Get div height in pixels although its height set to 100% - javascript

I wonder if there is any way to get div height in pixels, although its height set earlier to 100% height.
This is required as div content is dynamic so div height has different values based on content itself.
[Edit]
Div by default is hidden.
I need to get div height in pixels for later manipulation (smooth scrolling will be done for div)?
Is there any way to do this?

Since you tagged jQuery, use
$("#myElement").height();
http://api.jquery.com/height/
For Plain Ol' Javascript, you can use element.clientHeight or element.offsetHeight, depending on which one suits your needs.
Since the div is hidden, you will have to .show() it before calling .height(), and you can hide it again straight away:
var $myEl = $('#myElement').show();
var height = $myEl.height();
$myEl.hide();

theDiv.clientHeight

You can use height()
$("#divInQuestion").height();

You could use the .height() function:
$('#divid').height()

Well on slow browsers the show/hide method MIGHT cause the box to flicker (though the computer have to be really slow). So if you want to avoid this, give the div a opacity: 0 - and perhaps even a position: absolute, so it doesnt push the content. So to extend the code from before:
var $myEl = $('#myElement').css({"opacity": "0", "position": "absolute"}).show();
var height = $myEl.height();
$myEl.hide().css({"opacity": "", "position": ""});
But again. This might be overkill.

Related

How to get height of a div tag if html is dynamically inserted?

I have a div tag on my page.
<div id="filterDropdowns"></div>
I made html markup in my javascript and then inserted into div.
var markup = "";
markup = //Here makup is created through some logic.
$("#filterDropdowns").html(markup); //Inserted html
Everything is working fine.After this, when i trying to get the height of "filterdropdown", it's always 0. I have tried many ways to get the height but i am unable to get the height. I have tried jquery method like innerheight,outerHeight and javascript method as well but it always zero. How i can get the height?
try this for get height via jQuery :
alert($("#filterDropdowns").find("div").height());
height: auto; wont work. The div created by your logic, add height:inherit; to that div and also give a constant height to you #filterDropdowns It needs a height. If parent is 0 the child cannot inherit the height. So either specify a height in your div created your logic or inherit the parents height.
This code will give you the height:
$("#filterDropdowns").height()
Simple as that. No matter how the content was inserted. Dynamically or not.
However, please consider the following:
1) Make sure you check the height of the element really after you had already inserted its content. If you check the height before adding the content then, well, an empty element's height is most likely 0 (unless it is styled somehow).
2) Make sure the element is visible at the time you are checking the height, otherwise the result of the height method might be at least inaccurate.
3) If the contents of the element is positioned absolutely or floating then the height of the element will actually remain 0.
<div id="filterDropdowns" style="height:auto"></div>
try this
Try to this solution
var currentHeight = 0;
$(window).load(function() {
currentHeight = $('#filterDropdowns').outerHeight();
console.log("set current height on load = " + currentHeight)
});
Try this
html:
<div id="filterDropdowns" style="display:inline-block;height:auto"></div>
js:
$("#filterDropdowns").height()
Try jquery's .attr() function.
then, Write $('#filterDropdowns').attr('height','yourvalue');

Make pagesections fill browserheight

Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.

How do I get a useful value for height and width of a div element using javascript?

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()

height of page in javascript

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

Javascript clientHeight and alternatives

I am currently trying to modify a Javascript function that "slides in" a <div>. The script as it is requires you to define the height of the div, so it is mostly useless in dynamically filled <div>s. I found some text on the clientHeight property in javascript, but it would appear that it doesn't support <div>s with display set to none (which is the method used to slide the div in). That makes sense, as the height of that div in the client window is nothing.
Basically I was wondering what other methods you all know of, or if there's a way to get around the clientHeight = 0 when display: none.
Thanks!
Oh, and here's the function I'm using:
function getDivHeight(objName) {
return boxHeight = document.getElementById(objName).clientHeight;
}
A simple solution is to set it's visibility to "hidden" and it's display to "block" and measure it. However, some modern browsers will manage to update the page layout during this short time and you will get a nasty flicker. The easiest way to overcome this is to place the element in an absolutely positioned container with overflow set to "hidden".
I've had luck cloning the element, moving it offscreen, then displaying it to get the client height:
var original = document.getElementById(some_id);
var new_item = original.cloneNode(true);
document.body.appendChild(new_item); // item already hidden, so it won't show yet.
// you may wish to validate it is hidden first
new_item.style.position = "absolute";
new_item.style.left = "-1000px";
new_item.style.display = "block";
var height = new_item.clientHeight;
EDIT: Looking through the jQuery code, they do exactly what Tsvetomir Tsonev suggests. jQuery temporarily sets the style to "display: block; position: absolute; visibility: none", and then measures the height, swapping the properties back after the measurement.
So, it looks like you're stuck with having to do something hackish, whether it's cloning the node or risking having it flicker in some browsers... I like Tsvetomir's suggestion better than my initial hack as it, at least, doesn't involve cloning a node into the DOM that you don't need. Either way, the element must not be set to "display: none" in order to measure it's height. Isn't the DOM wonderful? :-)
EDIT 2: Also worth noting that, after jQuery gathers the height, it adds allowances for padding, margin and border sizes, so you may need to as well.
Yes, an element that is not displayed on the page has no dimensions.
It kind of makes sense. Consider an element that has been created and filled with a bunch of text, but not yet added to the document tree. How high is it? Depends on font-size. How big is font-size? Depends where in the document that div is inserted; its parent font-size would inherit through.
Similarly for an element with “display: none”. It's not rendered, so it has no dimensions. Couldn't we ask “how high would this be if it were ‘display: block’”? Turns out no, because if it were displayed, that in itself could change the dimensions of its parent block, and then the dimension of displayed elements would be inconsistent with the dimensions of non-displayed elements!
The typical solution is to unset “display: none”, measure the height of the element, and then immediately re-set “display: none”. The browser won't redraw in the middle of a bit of JavaScript, so you won't see a flicker on the page.
I nkow you guys solved this a long time ago but I thought I should share this since it quite tricky to get the height of a hidden div tag.
heres what I did after reading your post,
I placed the div i want to slide inside a 1px height div with overflow set to hidden.
you dont even need to set the display of the inner div to none since it is already there and if you use offsetHeight it should return the proper height for all browsers and you can use that height to slide your div up an down.
PEACE!!!
In IE you could try scrollHeight, but I'm not sure if it will work or if it is cross browser.

Categories

Resources