Develop Reference

How to get Height of an "element in 'auto 'mode" when it's height actually is not 'auto'? JavaScript

I need to get height of an element when it the height is auto, but I don't want to turn the actual height to 'auto', to find it. Let's say, now the heigh = '100vh'. I don't want to change it to 'auto', but I need to get height in pixels like it would be auto.
Basicly it is a div with a text. I use the following code, but it doesn't work without delay: setTimeout(() => {...}, 1);
<style>
#one {
height:100vh;
width:30vw;
background-color:rgb(1,1,1);
display:block;
float:left;}
</style>
<div id="one">
<p> A lot of text here </p>
</div>
<script>
window.addEventListener('resize', function() {
var one = document.getElementById("one");
one.style.height = 'auto';
if (window.innerHeight > one.clientHeight )
{
one.style.height = '100vh';
}
else
{
one.style.height = 'auto';
}
}, true);
</script>
The problem is that it doesn't have enought time to convert the height to auto and then to excecute the if else statement. So, if I wrap it in setTimeout(() => {...}, 1); delay it starts to work correctly.
But without the delay it doesn't work.
So, if I wrap it it looks like this:
<script>
window.addEventListener('resize', function() {
var one = document.getElementById("one");
one.style.height = 'auto';
setTimeout(() => {
if (window.innerHeight > one.clientHeight )
{
one.style.height = '100vh';
}
else
{
one.style.height = 'auto';
}
}, 0.1);
}, true);
</script>
But in this way while you resize the window it starts to excecute the first condition, and then the second, and then back the first, only because it doen't have time to turn it the height before the if else statement to 'auto'.
So I either need to make it faster to make it workable without the delay(what is not possible for some reason) or to get rid of the temporary changing of the height to auto.
So, basicly I have a little bit more complicated code, but it will take a lot of your time to explore it deeply. So I made it shorter and more readable.

You can just set the height to auto, measure it, and then delete the inline css (or revert it), and as long as you don't have a timeout or anything in between, it will all happen before a repaint can occur anyways - the client will never see it because it never actually happened:
document.getElementById('demo').style.height='auto';
const height = document.getElementById('demo').clientHeight;
document.getElementById('demo').style.height='';
console.log(`${height}px`)
#demo {
height: 100vh;
background: red;
}
<div id="demo">Hi</div>
To prove that it never happens, we have a timeout (just to let initial render complete), then we set the height to auto, busy loop for 10 seconds, then change it back - you'll never see the height change:
setTimeout(() => {
document.getElementById('demo').style.height='auto';
const height = document.getElementById('demo').clientHeight;
const now = Date.now();
while (Date.now() - now < 10000) {}
document.getElementById('demo').style.height='';
console.log(`${height}px`)
}, 100);
#demo {
height: 100vh;
background: red;
}
<div id="demo">Hi</div>

Background image inside DIV is repeated

I have a js animated div image which is repeated underneath. I've checked and edited the css a few times but it has not worked, i think it could be in this part of the js code I have supplied. Could someone please tell me how to apply no-repeat to the js?
{
class Slide {
constructor(el) {
this.DOM = {el: el};
this.DOM.slideImg = this.DOM.el.querySelector('.slide__img');
this.bgImage = this.DOM.slideImg.style.backgroundImage;
this.layout();
}
layout() {
this.DOM.slideImg.innerHTML = `<div class='glitch__img' style='background-image: ${this.DOM.slideImg.style.backgroundImage};'></div>`.repeat(5);
this.DOM.glitchImgs = Array.from(this.DOM.slideImg.querySelectorAll('.glitch__img'));
}
changeBGImage(bgimage, pos = 0, delay = 0) {
setTimeout(() => this.DOM.glitchImgs[pos].style.backgroundImage = bgimage, delay);
}
}

The JavaScript syntax to apply CSS background-repeat Property to an element is:
object.style.backgroundRepeat= "no-repeat";
in this case, object is the element to apply the property and value on.

If your ._slide_img needs a no-repeat, you can just put that in the CSS?
CSS file
.slide_img {
background-repeat:no-repeat;
}
If that doesn't work there's probably something else in your code that prevents it. In that case please include all your code so we can reproduce your problem.

When the mouse is not activating a class, add it? Javascript

I have two borders, one on the bottom of an H1, and the other on the right hand side of a div. I have them change color if the mouse is over either element. My idea is to change both borders to be the new color when the mouse is in neither. I figure my best bet would be some sort of JavaScript logic. Something like: if the mouse is not on a, and not on b, add id1 and id2, though I don't know how this will affect my id1 and id2 when the mouse goes back to them.
Is this the right answer, or is there another way I can do this? In case you're wondering the border is 2px wide. I am very new to JavaScript. So to recap, what I want is, the borders of my h1 and div to change when the mouse hovers over them, when the mouse is on neither, I wan't both borders to change at the same time. I'm after the simplest least messy way of solving this.

You could do it by applying css only when their container is hovered. Check out the snippet!
.container {
display:block;
width:100px;
}
.container:hover h1 {
border-right:solid 2px red;
}
.container:hover div {
border-top:solid 2px blue;
}
<div class="container">
<h1>Hi there</h1>
<div>my friend</div>
</div>

You can use the onmouseleave event to handle what happens when the mouse is not on the elements.
You can have a boolean value for each element that you set to true when the user hovers over them and false when the user leaves them. Then you can have an if statement in your onmouseleave event handler that checks whether the mouse is not on either of the elements.
//Get your h1 element
//Get your div element
var onH1 = false;
var onDiv = false;
function changeBoth() {
//Change both borders
}
h1.onmouseover = function() {
onH1 = true;
//Change h1 border
}
div.onmouseover = function() {
onDiv = true;
//Change div border
}
h1.onmouseleave = function() {
onH1 = false;
if((!onH1) && (!onDiv)) {
changeBoth();
}
}
div.onmouseleave = function() {
onDiv = false;
if((!onH1) && (!onDiv)) {
changeBoth();
}
}

Increment Div using Javascript for making it work like a Progress Bar

I am making use of div tag to make a custom Progress Bar instead of using HTML5 . I have write some code which is not working perfectly. Here in the code i am trying to get width of inner div using javascript and parsing it into integer to get width in number format for running the first IF Condition but i am getting the width of inner div null so the first IF Condition will never be executed.
The second IF Condition is simply to check progress is completed then clear the div width back to 0px and close the interval function.
<style type="text/css">
#outer{
width:300px;
height:50px;
background:#000;
border:1px solid #000;
}
#inner{
background-color: rgba(255,255,255,0.5);
margin:2px;
width:0px;
height:46px;
}
</style>
<script type="text/javascript">
var increaseWidth = 0;
function getID(element){
return document.getElementById(element);
}
function progressBarEvent(){
var interval = setInterval(function(){
if(parseInt(getID('inner').style.width) < 296) {
getID('inner').style.width = increaseWidth+"px";
increaseWidth++;
}
if(getID('inner').style.width) == "296px"){
getID('inner').style.width == "0px";
increaseWidth = 0;
clearInterval(interval);
}
}
,5
);
}
</script>
<div id="outer">
<div id="inner">
</div>
</div>
<button onclick="progressBarEvent()">Upload</button>

The problem is that for the very first time when there are no width style is set yet, this expression
parseInt(getID('inner').style.width)
will return NaN. So you never actually increase the width. You can fix it like this:
if ((parseInt(getID('inner').style.width) || 0) < 296) {
getID('inner').style.width = increaseWidth + "px";
increaseWidth++;
}
Also validate your code, currently it contains syntax error in this line:
if(getID('inner').style.width) == "296px"){
// extra ) ----------------^
And one more problem: change getID('inner').style.width == "0px"; to getID('inner').style.width = "0px"; because you mean assignment here, not comparison.
Demo: http://jsfiddle.net/hrtkwbx9/1/

Can't set elements height to its scrollHeight?

I can't for some reason make a smooth div, I'm trying to make it expand and contract when I click a button, but it doesn't work.
Javascript:
function expandContract(id) {
var object = document.getElementById(id);
if (object.style.height != "0px") {
object.style.height = "0px";
} else {
object.style.height = object.scrollHeight;
}
}
HTML:
<div id='test' style='overflow:hidden;'>
Test pest fest.
</div>
<button onClick='expandContract("test");'>Expand/Contract</button>
jsFiddle
I've also tried setting it do max-height, but still I can't get it to expand again. How would I do this without any javascript plugins?

You're missing +"px". You are required to set a unit (em, px, %, etc) when using style.height. Because scrollHeight gives you just a numeric value, you must append the units which are px in this case.
function expandContract(id) {
var object = document.getElementById(id);
if (object.style.height != "0px") {
object.style.height = "0px";
} else {
object.style.height = object.scrollHeight+"px";
}
}
jsFiddle

I got it to work in Chrome, as is.
IE when I changed the 'overflow' to 'scroll'.