var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
height: 5000px;
width: 5000px;
background-color: #000000;
}
<div id="mydiv">
<div id="div1"></div>
</div>
I have a div on a webpage where the content requires a vertical scrollbar. Using javascript, I'm trying to calculate the offsetWidth and clientWidth so that I can ultimately calculate the width of the vertical scrollbar but apparently they are equal. I have:
html:
<div id="mydiv">
<div id="div1"></div>
</div>
css:
#div1 {
height: 5000px;
width: 5000px;
background-color: #000000;
}
js:
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
Main difference between clientWidth and offsetWidth :
(1) clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)
(2) offsetWidth is the outer width (ie. the space occupied by the element, including padding and borders)
As I can see in your CSS border and scrollbars is missing that is why you are getting same width in both case.
I have made updated CSS and now you will get different values. Please check below snippet:
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#mydiv {
padding: 20px;
border: 20px solid red;
}
<div id="mydiv">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
Take a look at the two snippet, you can see the difference with scrollbar and without scrollbar.
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
height: 100px;
width: 200px;
background-color: #000000;
}
#mydiv{
height:80px;
width:160px;
overflow:scroll
}
<div id="mydiv">
<div id="div1"></div>
</div>
Below snippet has no scrollbar and overflow, so the client width and offset width are same
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
height: 100px;
width: 200px;
background-color: purple;
}
<div id="mydiv">
<div id="div1"></div>
</div>
Related
first these are my references
jQuery Scroll to bottom of page/iframe
jQuery Scroll To bottom of the page
I create some divs and put them into a div container. I want the container always scrolling down to the newest div at the bottom.
$(document).ready(function() {
var container = $("#container");
var i = 0;
$("#btn").click(function() {
i++;
var div = $("<div></div>");
div.addClass("d");
div.html("Container " + i);
container.append(div);
container.scrollTop(container.height());
});
});
body {
background: white;
}
#container {
height: 160px;
width: 120px;
overflow-y: scroll;
background: gray;
}
.d {
height: 30px;
margin-bottom: 10px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">-- Add --</button>
<div id="container">
</div>
As you can see, this works fine untill I create more than 8 divs. Then the logic will break and the container does not scroll anymore.
The container should scroll to the current div with the number i (the current index)
Simply because the height is always fixed, instead consider scrolling with the height of all the child elements including their top/bottom margin. In other words, the height of the container if there is no fixed height specified.
To be more precise you only need to scroll with the height of all the child element minus the fixed height of the container which is the overflowing part. That's why your code work partially because until 8 elements you have an overflow lower than the fixed height of the container ( 8 * 40 = 320 => 320 - 160(fixed height) = 160(overflow) )
$(document).ready(function() {
var container = $("#container");
var i = 0;
$("#btn").click(function() {
i++;
var div = $("<div></div>");
div.addClass("d");
div.html("Container " + i);
container.append(div);
container.scrollTop(container.find('.d').length *
($('.d').height() + 10) -
container.height());
});
});
body {
background: white;
}
#container {
height: 160px;
width: 120px;
overflow-y: scroll;
background: gray;
}
.d {
height: 30px;
margin-bottom: 10px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">-- Add --</button>
<div id="container">
</div>
I’m trying to make a function that changes the CSS to the current height when I click a button. It won’t read the current height.
var height = $(window).height();
function openNav() {
document.getElementById("bodypacity").style.height = height;
}
#bodypacity {
width: 100%;
background-color: black;
opacity: 0.4;
position: absolute;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menunav"> <span id="menu" style="" onclick="openNav()">☰</span>
<img id="logo" src="logo.png">
</ul>
If I understand you correctly, you want to get the height of the window and set the element to equal height. You're very close to achieve that, all you need is to add "px" to the final height, because $(window).height() returns only number, so you can set the actual height using $(window).height() + "px", and it will be document.getElementById("target").style.height = height + "px"; in your case:
var height = $(window).height();
function openNav() {
document.getElementById("target").style.height = height + "px";
}
html,
body {
margin: 0;
padding: 0;
}
#target {
width: 100%;
height: 50px;
background-color: royalblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<button onclick="openNav()">Set Height</button>
</div>
Content overflows when JavaScript is used to adjust the div height, before it is it used to adjust the div content, if the adjusted div content is higher than the adjusted div height. This does not happen when JavaScript is not used to adjust the div height.
Basically, 2 divs are side by side, and the shorter div is adjusted to the height of the taller div. Then when a button is clicked, content is filled in the original shorter div, but the content overflows, if the content is higher than the adjusted div height. How can we fix this?
<?php
include("ajaxLink.php");
?>
<style>
#wrapper {
border: 1px solid black;
width: 1000px;
}
div:not(#wrapper) {
border: 1px solid red;
display: inline-block;
width: 49%;
}
#content2 {
vertical-align: top;
word-wrap: break-word;
}
</style>
<button onclick = 'fillContent2()'> Click me </button><br><br>
<div id = 'wrapper'>
<div id = 'content1'>
content1content1content1content1content1
content1content1content1content1content1
</div>
<div id = 'content2'>content2</div>
</div>
<script>
$(function(){
var height = getHeight("#content1");
setHeight("#content2", height, "px");
});
function fillContent2() {
$("#content2").html(
"content2content2content2content2content2<br>"+
"content2content2content2content2content2<br>"+
"content2content2content2content2content2"
);
} //end of function fillContent2()
function getHeight(name) {
var height = $(name).height();
return height;
} //end of function getWidth(name)
function setHeight(name,height,type) {
$(name).css("height", height + type);
} //end of function setHeight(name,height,type)
</script>
I want to control the automatic height change of the container when I add something that changes the lenght of the content. Right now, if I apply a innerHTML change on the content, the height is changed accordingly. I want to apply a transition to that height change. How can I do that? ( I can also use jQuery )
Record the height before changing the content, change the content, record the height after, set the height to the former height, and animate to the latter height. When the animation has completed, set the height to be automatic again. You can do this using height and animate.
Try it on JSFiddle.
var texts = [
"This is just some sample text that's being used to demonstrate animating the height when content changes.",
"Shorter."
];
var div = $('div').click(changeContent);
function changeContent() {
var oldHeight = div.height();
texts.push(div.text());
div.text(texts.shift());
var newHeight = div.height();
div.height(oldHeight);
div.animate({height: newHeight}, 'fast', function() {
div.height('auto');
});
}
div {
width: 150px;
background: lightgray;
overflow-y: hidden;
}
<div>This is some example content.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="containter" style="overflow:hidden">
<div>
Content.....
</div>
</div>
//add something...
$('#container').animate({height:$('#container').content().outerHeight()});
or:
$('#container').animate({height:$('#container').children().first().outerHeight()});
and when adding append to the div inside the containter:
$('#container').children().first().append(somethingNew);
Based on icktoofay's answer.
I make the button disabled while changing the height and add a fading effect. This solution is useful for updating of the products filter and so on.
Also I check the box-sizing property. If it's box-sizing then I get newHeight by .outerHeigth() instead of .height() to prevent the height fluctuation when new content has the same height. You can check this situation, for example by setting the random variable to value 5. The reason is that
.height() will always return the content height, regardless of the value of the CSS box-sizing property.
CodePen
$('#button').click(function() {
var $button = $(this),
buttonOriginalText = $button.html();
$button.prop('disabled', true).html('Updating...');
$('#content').animate({
opacity: 0
}, 'fast', function() {
var newHeight,
$content = $(this),
oldHeight = $content.height();
$content.html(getRandomContent());
newHeight = ('border-box' === $content.css('box-sizing') ? $content.outerHeight() : $content.height());
$content.height(oldHeight).animate({
height: newHeight,
opacity: 1
}, 'slow', function() {
$content.height('auto');
$button.prop('disabled', false).html(buttonOriginalText);
});
});
});
function getRandomContent() {
var random = 1 + Math.round(Math.random() * 11), // 1..12
paragraph = '<p>Paragraph</p>';
return paragraph.repeat(random);
}
* {
box-sizing: border-box; /* comment out to test "content-box" */
font: 16px Helvetica, 'sans-serif';
}
.content {
counter-reset: content;
padding: 6px 18px;
}
.content p {
counter-increment: content;
}
.content p:after {
content: ' ' counter(content) '.';
}
.content-box {
border: 2px solid red;
margin-top: 24px;
max-width: 220px;
}
<button id="button" class="button">Update the content</button>
<div class="content-box">
<div id="content" class="content">Animatie the automatic height when content is resized.</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
How can I use the current width/height (which are both specified in percentage 100%) as the minimum width/height?
Here is a try:
<!doctype html>
<html>
<head>
<title>Layout</title>
<script>
var myDiv = document.body;
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
myDiv = document.getElementById('wrapper1');
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#wrapper1 {
width: 100%;
height: 100%;
}
#wrapper2 {
width: 8%;
height: 100%;
float: left;
}
#wrapper3 {
width: 92%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
</html>
Trying to set min width/height of all divs to be the current width/height (which are both 100% by css) using Javascript (or using only css if possible)
Be aware of the fact that myDiv.style.height does not return the height of an element if that was set through CSS, but only if the div looked something like <div style="height: 10px"></div>. You should use:
var curHeight = myDiv.offsetHeight;
var curWidth = myDiv.offsetWidth;
Edit: Oh, and you need to move your script tag at the end of your html, or you won't be able to select wrapper1 (or in a different file?).
Here is references on offsetHeight and offsetWidth. Here
That is the only problem I see with your approach assuming you do a document.write to insert the retrieved css values.
As far as I understand, If you dont specify the width and height of a div by default it will always take it from its enclosing div.
example:
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
<style>
#wrapper1 {
width: 100%;
height: 100%;
}
</style>
This will apply width and height both as 100% to all 3 divs in wrapper1, wrapper2, wrapper3