How to get sum of many div height using javascript? - 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";
});

Related

js code for adding width of a class is not working

I want to change the width by adding 20%. My div class width in percentage. For example i have div with width 20%. I am using class name for stylesheet. When each time the page loading it want increase by 10%. The code is shown below. the avascript code document.getElementsByClassName("box")[0].style.width; is not working` proper. Please help me.
html
<div class="box">
var width = document.getElementsByClassName("box")[0].style.width;
var n = width + 20%;
width = n;
.box{
width:40%;
height:300px;
background-color:red;
}
<div class="box">
</div>
This line has a syntax error
width + 20%;
If you want to calculate percentage then
width = width + width*20/100;
Edit
As #Rory pointed out in the comments, your width value isn't getting set because width value isn't getting fetched correctly at first place, here is the updated code
var ele = document.getElementsByClassName("box")[0];
var width = parseInt(window.getComputedStyle(ele).width); //get computed style instead of style property
width = width + width*20/100;
document.getElementsByClassName("box")[0].style.width = width;
Edit 2
As pointed out by #Anant, if you want to increase with in percentage, then
var fn = (elem) => ((elem.offsetWidth/(elem.offsetParent || elem).offsetWidth)*100).toFixed(2)+'%' ;
var ele = document.getElementsByClassName("box")[0];
var width = parseInt(fn(ele)); //get computed style instead of style property
console.log(width);
//width = width + width*20/100;
width = (width + 20) + "%";
console.log(width);
document.getElementsByClassName("box")[0].style.width = width;
Demo
var fn = (elem) => ((elem.offsetWidth/(elem.offsetParent || elem).offsetWidth)*100).toFixed(2)+'%' ;
var ele = document.getElementsByClassName("box")[0];
var width = parseInt(fn(ele)); //get computed style instead of style property
console.log(width);
//width = width + width*20/100;
width = (width + 20) + "%";
console.log(width);
document.getElementsByClassName("box")[0].style.width = width;
.box{
width:40%;
height:300px;
background-color:red;
}
<div class="box">
</div>

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";

CSS max() function alternative

I would like to set the min-height of a HTML element to the maximum of two values, but unfortunately css doesn't support max().
Here's my css code:
#content{ min-height:calc( 100% - 100px); }
The other value is constant number (400px). I think I have to use JS, but I cant figure out how to do that.
Here is my JS code:
function layout(){
var y = document.getElementById("content");
y.style.minHeight = Math.max(parseInt(y.style.minHeight), 400).toString + "px";
}
window.onload = layout;
window.onresize = layout;
alert(parseInt(y.style.minHeight)) gives me naN.
What am I doing wrong?
Regards
I can't determine a direct way to get the calculated result of the min-height style.
But the following function assigns it to the height of the element, from which we can get it as the element's new offsetHeight.
The function then restores the original height of the element:
function layout() {
var y = document.getElementById('content'),
h = y.offsetHeight;
y.style.height = getComputedStyle(y).getPropertyValue('min-height');
y.style.minHeight = Math.max(y.offsetHeight, 400) + 'px';
y.style.height = h + 'px';
} //layout
Working Fiddle

jQuery - How to know if window is resizing in width/height or both?

I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?
By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});
Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/

Automatically adjusting font size to fit container

I have a defined style for div with fixed width and the text inside the div could have different lengths, like in this example. Is there any method using CSS and/or JS to adjust the text size in such a way that it will stay in bounds of the container?
this may work for you, try this
var originalFontSize = 12;
var divWidth = $('.cell').width();
$('.cell span').each(function(){
var spanWidth = $(this).width();
var newFontSize = (divWidth/spanWidth) * originalFontSize;
$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
});​

Categories

Resources