Develop Reference

How to get sum of many div height using javascript?

HTML div contain dynamic data, For calculate div height i used
var pageSize = 990;
var clientHeight = 300;
clientHeight = document.getElementById('testing1').clientHeight;
var selector_classes = ['career_sum', 'exp_cal', 'ref_cal', 'port_cal', 'curri_cal', 'certi_cal'];
selector_classes.forEach(function(element) {
clientHeight = document.getElementById('testing').clientHeight + clientHeight;
});
Testing is same id for div
That working fine. My question is how can i set style for those div which position greater than pagesize?
Can anyone help me?

You can check clientWidth of body
let pageWidth = document.body.clientWidth;
selector_classes.forEach(function(element) {
clientHeight = document.getElementById('testing').clientHeight + clientHeight;
if(clientHeight > pageWidth) element.style.color = "red";
});

appendchild after some specific pixel inside div javascript

I want to append a div inside another div after some specific pixel. For example, First, I created a Div than I calculate its Height with offsetHeight. Now I want to append a Div Inside parent Div in middle (Half of parents div height)
var ts = document.querySelectorAll('article')[0];
var ks = ts.offsetHeight;
var lirf = ks/2;
<article>Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
</article>
Want to Append Child at lirf px in above code
Find Answer Close Enough
When I use absolute position my div overlap other as shown in below code:
<div id='get' style=''>kad</div>
<article >Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
</article>
<script>
var ts = document.querySelectorAll('article')[0];
var ks = ts.offsetHeight;
var lirf = ks/2;
var kk = document.getElementById('get');
kk.style.position = "absolute";
kk.style.top=lirf+'px';
</script>

var ts = document.querySelectorAll('article')[0];
var ks = ts.offsetHeight;
var lirf = ks/2;
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.position = 'absolute';
div.style.top= lirf+'px';
document.querySelectorAll('article')[0].appendChild(div);
Hope this helps!
If vertically centering an element is your aim, go through this https://vanseodesign.com/css/vertical-centering/

Dynamically adjust font size by pure javascript

I have a code similar to this:
var a = document.createElement('div');
a.style.width = '200px';
a.style.fontSize = fontSize(a.offsetWidth, 5);
a.innerHTML = 'Example';
document.body.appendChild(a);
function fontSize(reference, factor){
return (reference*factor)/100 + 'px';
}
However when I run it, the element font size appears to be 0px. The console.log returns expected value tho.
Similar code works on an javascript object that I tried:
var Object = function(target){
var default = {
fontSize: fontSize(target.clientWidth, 5);
}
}
jsFiddle here
What did I do wrong?

The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
Your newly created div element has not been appended to the document when you try to read the offsetWidth, consequently it has a layout width of 0 so you end up with a font-size of 0px.
You need to put the div in the document before you measure how much space it takes up in the document.
Alternatively, you need to use a value other than offsetWidth (such as style.width.

Your logic is good, but you should append your element to the DOM before trying to retrieve its size:
var a = document.createElement('div');
a.style.width = '200px';
a.innerHTML = 'Example';
document.body.appendChild(a);
a.style.fontSize = fontSize(a.offsetWidth, 5);
function fontSize(reference, factor) {
return (reference * factor) / 100 + 'px';
}
Forked your Fiddle here

Just put a.style.fontSize = fontSize(a.offsetWidth, 5); after document.body.appendChild(a);.
var a = document.createElement('div');
a.style.width = '200px';
a.innerHTML = 'Example';
document.body.appendChild(a);
a.style.fontSize = fontSize(a.offsetWidth, 5); // <--- Move here
function fontSize(reference, factor){
return (reference*factor)/100 + 'px';
}
In fact, there's CSS properties you can't edit while the element is not added to the DOM. Font-size is one of them.

You need to append "a" to document first before you calculate its offsetWidth.
Refer - http://www.w3schools.com/jsref/prop_element_offsetwidth.asp
var a = document.createElement('div');
a.style.width = '200px';
document.body.appendChild(a);
a.style.fontSize = fontSize(a.offsetWidth, 5);
a.innerHTML = 'Example';
function fontSize(reference, factor){
return (reference*factor)/100 + 'px';
}

Screen Resizing Javascript

function sizeChange() {
var container = document.getElementById('container');
var main = document.getElementById('main');
var content = document.getElementById('content');
var h = window.innerHeight;
container.style.height = h;
main.style.height = h*.9;
content.style.height = (h*.9)*.9;
}
document.addEventListener("resize", sizeChange);
I'm trying to manipulate the items in my html so the height of the container is constantly the height of the window and that when it's scaled, the height of the container scales. I have it set up so it gets the ID of each element it's going to manipulate and then adjusts by a % of what I want it to be. Does anyone have any feedback on why this is happening?

I would think most of what you are doing could be done with CSS. If you want to stick with JS, then you need to add units to your values. So change the code to something like
container.style.height = h+"px";
main.style.height = Math.floor(h*.9)+"px";
content.style.height = Math.floor((h*.9)*.9)+"px";

How do I get the height of a <DIV> not including the horizontal scrollbar using JQuery?

I am writing a jQuery plugin which makes use of two nested <DIV> elements.
The outer div has a fixed width with overflow:scroll and the inner div (which is much wider) contains the content which I want to scroll around.
This all works fine apart from the fact that I want to use some JavaScript (with jQuery) to set the height of the inner div to exactly match the height of the outer div, less the height of the horizontal scroll bar.
At the moment I'm setting it to the height of the outer div, less about 20 pixels. This sort of works, but it's not going to be browser independent and is definately a hack!
Any help would be very much appreciated!

You need to use element.clientHeight. In jQuery that would be something like:
var heightWithoutScrollbar = $('#outer')[0].clientHeight;

I found a function which can get the width of a scrollbar
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
OS Scrollbars are uniform in width, whether displayed vertically or horizontally, so you can use the width returned as the height of a horizontal scrollbar.
Edit: My original code same didn't work, however I've updated my code to a working function. You can see it in action here: http://jsbin.com/ejile3
The page will alert the width of the scrollbar.