We Keep Coding

Why is this div height returning 0?

I am completely stuck on this one. I'm trying to get the height of a div, but it's constantly returning 0, despite trying numerous ways to resolve the problem. Here's the code.
document.addEventListener("DOMContentLoaded", function() {
const topDrawer = document.querySelector('.drawer__container--top');
console.log(topDrawer.offsetHeight)
})
.drawer {
&__container {
width: 100%;
position: absolute;
width: 90%;
background: white;
height: 500px;
// left: 50%;
transition: all .3s ease-in-out;
border-radius: 1rem;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
z-index: 3;
&--top {
top: 0;
// transform: translateY(-400px) translateX(-50%);
}
&--bottom {
bottom: 0;
transform: translateY(60vh) translateX(-50%);
padding: 1rem 2rem;
&.open {
transform: translateY(8vh) translateX(-50%);
}
}
}
<script type="module" src="https://unpkg.com/#ionic/core#latest/dist/ionic/ionic.esm.js"></script>
<script nomodule="" src="https://unpkg.com/#ionic/core#latest/dist/ionic/ionic.js"></script>
<link href="https://unpkg.com/#ionic/core#latest/css/ionic.bundle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Actor&display=swap" rel="stylesheet" />
<!-- This is the main body - every thing will go in here! -->
<div class="main">
<div class="jp__header">
<div class="jp__header__textrel">
<div class="jp__header__textabs">
<h1>Journey Planner</h1>
</div>
<div class="jp__header__weatherabs">
<canvas id="icon2"></canvas>
</div>
<div class="jp__header__underline"></div>
</div>
</div>
<div class="drawer drawer__container drawer__container--top">
</div>
<div id="map"></div>
<div class="drawer__container drawer__container--bottom">
<div class="drawer__search__wrapper">
<ion-toolbar class="drawer__search__toolbar" no-shadow="">
<ion-searchbar animated="" class="drawer__search__searchbar" mode="ios"
placeholder="Enter a bus stop number..."></ion-searchbar>
</ion-toolbar>
</div>
</div>
</div>
I've tried
- wrapping this in windo.addEventListener("load", () etc)
as well as using this 'ready' function:
function ready(callback){
// in case the document is already rendered
if (document.readyState!='loading') callback();
// modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') callback();
});
}
using document.addEventListener("DOMContentLoaded")
Also there are no floats anywhere but I have tried adding overflow: hidden.
I'm packaging with webpack, but the bundle is being put just before the closing body tag. I see no reason why a height of 500px isn't being returned...hope you can help.
EDIT: I'm using Django and templates too - could that be affecting it?
SECOND EDIT:
There seems to be a tiny delay in the styles being applied, as detected by #Thomas below. Applying a set timeout seems to get things working so I'm going to go with that... pretty baffling.

Foudn the answer to this: Many thanks to #Tibrogargan, #Thomas and #Diego for helping identify it.
The issue was the ionic import:
<link href="https://unpkg.com/#ionic/core#latest/css/ionic.bundle.css" rel="stylesheet" />
The scripts are not loading in until that css file has been sourced. I've solved it by adding a setTimeout of 2ms to the document load handler, but am also going to look into how to either source the css locally or find another solution.

Animation (toggle class possibly) not working

So I'm making a website where I have several divs that should slide either from right, left, or top when user clicks on specific button or nav items. However, none of those are working. None of the divs will slide over when I click on the button that are supposed to make them slide. I'm using pure javascript to perform those actions. So far, I've tried several actions. First, I thought it was because I didn't have window.onload, but after adding it, nothing changed. Then I though maybe the links were still carrying the default actions, so I tried to add e.preventDefault in hopes that was the problem, it also didn't work. Then I found out something weird that made think maybe it is my computer that is not interpreting javascript correctly(weird thought, I know. But I was just considering anything since I was running out of solutions).But actually, it turns out that my computer or the editor is not reading "document" or window in javascript. It says both of them are not defined, which is weird since I have linked the javascript file correctly at the end of the body. So I decided to run it on JSFiddle to check whether it was really just my computer. However, even in JSFiddle the divs still won't slide when I click the button to make them slide.
I'm out of ideas. Since the project I'm doing is big, I extracted the part of divs that are not sliding to make things easier. The div you guys will see, is supposed to slide from the left when we click on the same div.
Here is the html code:
<!DOCTYPE>
<html>
<head>
<title>Emanuel Inacio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="home-page">
<div id="nav-bar"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Here is the css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
.active {
transform: translateX(50%);
}
Finally, this is the javascript part:
var nav = document.getElementById("nav-bar");
window.onload = function () {
nav.addEventListener("click", function () {
nav.classList.toggle("active");
});
}
Every other div that is not working has pretty much the same code base as this one. Hence I decided to post only this div. Thanks in advance!

It's a specificity issue, ID is more specific than class so your style will never be applied. You need to adjust CSS like this:
var nav = document.getElementById("nav-bar");
window.onload = function() {
nav.addEventListener("click", function() {
nav.classList.toggle("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
#nav-bar.active {
transform: translateX(50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="home-page">
<div id="nav-bar"></div>
</div>

using a javascript file as a background in css

I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!

I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.

Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:

Creating a status bar that can move constantly in javascript

What I want to do is create a status bar, that when you click on it the bar will go up. I am also not using jquery. I was going to have multiple images, that represented each point of the status bar, then display them as an image, which would work but I do not know if it is possible to link js variables into html. I also found I could use something like this
HTML
<div class="skill_bar" style="position:absolute; top:100px; left:50px; z-index:2">
<div class="skill_bar_progress skill_one"></div>
</div>
CSS
.skill_bar {
width:20px;
height:50px;
background:#c0c0c0;
margin-bottom:5px;
}
.skill_bar_progress {
width:100%;
height:100%;
background:#00f;
}
But that did not work so well because it only worked once and I could not find a way to change it.
Thanks in advance

You need to add an event listener to the click event on the status bar. That function is going to move the status bar up.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#statusBar {
background-color: orange;
width: 200px;
height: 100px;
position: absolute;
top: 100px;
}
</style>
<script>
addEventListener("DOMContentLoaded", function () {
var statusBar = document.querySelector("#statusBar");
var top = parseFloat(getComputedStyle(statusBar).top);
statusBar.addEventListener("click", function () {
top = top - 10;
statusBar.style.top = top + "px";
});
});
</script>
</head>
<body>
<div id="statusBar">Status</div>
</body>
</html>

Change Background when part of it is hovered

i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.

This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});

Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/

Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover

Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up