I'm currently looking for a javascript to do a math calculation for me. I'm looking for something that will read the height of an entire window (not screen size), minus 100px from that value, and then output in to, lets say, a style value. Is something like this possible?
Thanks in advance!
To calculate the height of a div, you can use the property innerHeight, something like:
var height = document.getElementById('somediv').innerHeight;
Then, you can do the calculations you need on this variable, and use later in something like:
document.getElementById('otherdiv').style.height = height + 'px';
Related
Is there way to check page height?
Like If I have container div and my contents goes of 100% height.
I need to check full height of that container div.
Like if it is 100% + more 400px I want to add something next to that div.
$('.container div').outerHeight();
codepen-http://codepen.io/nagasai/pen/XKZgyq
Add if condition for that value
var x = $('.container div').outerHeight();
Update x ,onresize check x value greater than x+400px
Page height is a native javascript property.
Just do a
window.innerHeight
to get the current window height which works well since it only includes from the bottom tool/search bar to the end of browser
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.
Firebug tells me the computed style of my_div:
width 300px
height 453.167px
Yet when I execute console.log(mydiv.style.height), it gives me an empty string, even though console.log(mydiv) logs the correct element. I am sure the page has loaded by the time this logging code is called. I'd appreciate a solution that does not use jQuery.
Depending on the browser of choice, one of these will do:
mydiv.offsetHeight
mydiv.clientHeight
Get full height of a clipped DIV
Getting the height of a div
UPDATE:
Many browser inconsistencies have been fixed since my original answer. Now the clientHeight property of a DOM element is reliable.
var height = element.clientHeight;
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().
Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
Original answer:
If you use the jQuery JS library, you can just do this:
var computed_height = $('#my_div').height();
If you use the Prototype JS library, it's similar:
var computed_height = $('my_div').getHeight();
Using a library is often the easiest & most cross-browser way to do something. Getting computed styles with vanilla js is unreliable because the properties are different across browsers.
Hello i'm trying to change the offsetHeight of an element. i used the following
document.getElementById('id').style.offsetHeight = 0;
but i saw no visible change. Can anyone help me please?
The offsetHeight property indicates the height of the visible area for an element. It's a shorthand that contains the sum of dimensions from padding, scrollbars and borders.
However, it can't be used to change the actual size and as noted in comments, offsetHeight is a property of an element, not style.
To modify the actual size use height, padding or border.
You should set style.height to a string ending in px.
You should set style.height and remember to add the unit at the end like 'px' , in the case you get it from offsetHeightfor example (well you know what unit you need). It's style and you have all the different units ('px','%','em', 'vh', ...etc).
Here is an example:
myHeightInPx = 200;
DomElement.style.height = myHeightInPx + 'px';
Also to note is that offsetHeight return the height as a number, an integer. The unit is px. And if you get a value using it. you need always to add the unit 'px' when setting style.height, just like in above and the bellow example:
DomElement.style.height = AnotherDOMelment.offsetHeight() + 'px';
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()