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";
Related
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";
});
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/
I am trying to position an element relative to another element that is not its parent using jquery. The problem is that the non-parent element is dynamic and changes in height depending on the item. My goal is to position the element in the bottom right corner of the nonparent element and have it stay in the position relative to that nonparent element regardless of height. I also am a total noob when it comes to jquery.
// Reposition DIV
var nonparent = $('.DIVtoBeRelativeTo');
var position = nonparent.offset();
var child1 = $('.ChildDIV').offset
var width = nonparent.width();
var height = nonparent.height();
var position = nonparent.position();
var bottomLeftX = position.left;
var bottomLeftY = position.top + height;
var bottomRightX = position.left + width;
var bottomRightY = position.top + height;
Use this way:
nonparent.offset().left;
nonparent.offset().top;
Let's say we have this image:
So you need to use:
Element.css("left", NonParent.offset().left + NonParent.width() - Element.width());
Code:
// Reposition DIV
var NonParent = $('.DIVtoBeRelativeTo');
var Element = $('.ChildDIV');
Element.css("left", NonParent.offset().left + NonParent.width() - Element.width());
Is it possible to resize the entire 'div' container using javascript ? Inside my div i have 2 images and placed one over another. 1st image has is 720x1280 and 2nd image has 40x40. Now, while resizing my div container both the images should get resized proposinally.
function addWidth() {
var elem = document.getElementById("Image1");
if (elem != null) {
var mydiv = elem.clientWidth;
document.getElementById("divImage").style.width = mydiv + "px";
}
}
function resizediv() {
var height = window.innerWidth;
if (document.body.clientHeight) {
height = document.body.clientHeight;
}
height = parseInt(height) - 10;
document.getElementById("Image1").style.height = parseInt(height - document.getElementById("divImage").offsetTop - 8) + "px";
}
window.onresize = resizediv;
I have tried for an single image and its works fine. But i want the same to happens for an div container.
Try this:
$(window).resize(function() {
addWidth();
resizediv();
});
Along with this, like #Alex said, you can also add width:100% for the images.
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.