We Keep Coding

scrollTop returns 0

I have a fixed div in a vuejs app that i intend to use as a chat box. The div scrolls it's content within itself. I try to scroll to bottom automatically once chat box is open but it never works.
I have tried to assign scrollHeight to scrollTop but scrollTop always returns 0 even after assignment.
I have also emitted an event to the parent component that contains the scrollBar of the chat window to try to scroll but the problem is the same. scrollTop never gets assigned.
let msg = document.querySelector(".messanger .messanger-body");
msg.scrollTop = msg.scrollHeight;
console.log(msg.scrollTop);
console.log(msg.scrollHeight);
My problem is msg.scrollTop never gets assigned what msg.scrollHeight is. It remains 0.
<div class="messanger">
<div class="messanger-header text-center">
<div class="row h-100">
<div class="col-sm-12 my-auto">
<h2 class="ml-2 text-white">Chat</h2>
<div class="float-left">
<base-button size="sm" class="ml-1" type="primary" #click="returnToPrev">←</base-button>
</div>
<div class="float-right">
<base-button size="sm" class="mr-1" type="primary">Send message</base-button>
</div>
</div>
</div>
</div>
<div class="messanger-body">
<div>
<!-- child component -->
<message-thread :user="msgThread.user" #scrolltobtm="scrollViewToBtm"></message-thread>
</div>
</div>
</div>
I have a CSS like so for the parent component
.messanger {
background: white;
position: fixed;
top: 0;
width: 310px;
height: 70vh;
float: right;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 20vh;
border-top-left-radius: 20px;
border: 2px solid red;
}
.messanger .messanger-header {
position: fixed;
height: 60px !important;
width: 310px !important;
background: #25457a;
color: #ffffff;
z-index: 99999;
border-top-left-radius: 20px;
}
.messanger .messanger-body {
margin-top: 65px;
}
For my child component i have
<div class="message-history mt-2">
<div class="message-history-content">
<div class="text-center mb-4">
<span class="badge badge-info">Thread title : {{threadTitle}}</span>
</div>
<div v-for="(eachMessage, index) in messages" :key="index">
<div :class="messagePosition(eachMessage.added_by)[0]">
<!-- classes msg_container and msg_container_send are dynamically added here -->
<span>{{eachMessage.message}}</span>
</div>
</div>
</div>
<div class="message-input">
<form class="form m-1" #submit.prevent="sendMessage">
<textarea v-model="model.message" class="form-control"></textarea>
<div>
<button class="ni ni-send"></button>
</div>
</form>
</div>
</div>
Child component css
.msg_container {
margin-top: auto;
margin-left: 20%;
margin-right: 10px;
border-radius: 15px;
background-color: #82ccdd;
padding: 10px;
position: relative;
}
.msg_container_send {
margin-top: auto;
margin-right: 20%;
margin-left: 10px;
border-radius: 15px;
background-color: #25457a;
padding: 10px;
position: relative;
color: #ffffff;
}
.message-input {
position: fixed;
bottom: calc(100% - 90%);
background: #ffffff;
z-index: 99999;
}
.message-history {
overflow-x: hidden;
overflow-y: scroll;
margin-bottom: 40px;
}
.message-history .message-history-content {
overflow: scroll;
}
form {
display: flex;
width: 300px;
}
form button.ni.ni-send {
margin-top: 3px;
border-radius: 50%;
border: none;
height: 34px;
width: 34px;
background: #25457a;
color: #ffffff;
}
textarea {
flex-grow: 1;
resize: none;
border: 1px solid #25457a;
}
form button:focus {
outline: 0;
}
Thank you for help in advance.
I added overflow property to the .message-history class, it still doesn't work. I believe my mistake resides in my styles. I'm not much of a CSS person.
The chat window scrolls when the mouse is used to scroll though.

msg.scrollTop could stay with 0 value because of at least two things.
First .messanger-body don't have defined overflow property.
Second as it is initial phase content of .messanger-body have not enough content to make scroll appear on the right side of div.
Please check those options.

Set background of container depends on the height of the inner box

I want to implement the effect below:
I try to set the footer part (yellow part in the picture):
<style>
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
</style>
<body>
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>
</body>
but it will cover the inner box (green part in the picture), so how to make the yellow part under the green part. The height of the green part is not fixed.

Add position: relative + z-index: 1 to list-container
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
z-index: 1;
position: relative;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>

Make div overlap horizontally the other 4 divs and stretch across the page(height 100%?)

So i have 4 different divs with buttons in them and I'm trying to set up so whenever one of those buttons are being clicked, it will overlap the other divs on the page.
I know it has something to do with z-index and positioning of the divs but I guess it needs to be added to the Jquery rather than the CSS?
I have checked out a previous code, where the divs overlap eachother vertically. Here's that code:
$('#divleft, #divmid, #divright').toggle(function () {
var cfg = {height:'200', width:'100%'};
$(this).css({'z-index':100});
var pct = $(this).css('left').split('p')[0]/$(document).width();
if(pct <= .33 && pct > 0){
cfg.left = '0';
$(this).data('oldLeft', "33%");
} else if(pct <= .66 && pct > .33) {
cfg.left = '0';
$(this).data('oldLeft', "66%");
}
$(this).animate(cfg)
}, function () {
var cfg= {height:'200', width:'33%', 'z-index':1};
if ($(this).data('oldLeft')) {
console.log($(this).data('oldLeft'));
cfg.left = $(this).data('oldLeft');
}
$(this).animate(cfg)
})
#divleft {
width:33.3%;
height:200px;
background:#ccc;
z-index: 1;
margin-top: 10px;
position: absolute;
left:0;
}
#divmid {
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
z-index: 1;
position:absolute;
left:33%;
}
#divright {
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
z-index: 1;
position:absolute;
left:66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>
What this code does is that it overlaps the divs using width 100%, vertically. I was just wondering how you would go about if you were to overlap the divs horizontally.
My code so far is this:
html, body {
width: 80%;
margin: 0 auto;
}
head {
text-align:left;
}
head, img {
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0 auto;
}
button {
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
transition: 0.4s;
margin-top: 2%;
}
.icon {
width: 25px;
height: 25px;
padding-right: 15%;
float: right;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
<div class="container">
<div id="first">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="second">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="third">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="fourth">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="last">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
</div>
Thanks!

I think what you are trying to get it has more to do with relative height and absolute positioning than with the z-index property only.
Once the element div is clicked it has to cover the parent element. To do that you should put the container the position: relative property and the growing element as position: absolute and the height and width to 100% and positioning top and leftcoinciding with the parent (to 0). The button is inside that div (#first, #second, #third, #last) so it has to be also height: 100%
And finally you just set the z-index to ensure that the current button overlaps and cover the other buttons displayed.
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

great solution and thanks for quick response! Just wondering where I would place my jquery code?
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

[EDIT]: You include jquery just before closing the body tag of your html document, and you write your javascript just bellow that. Like the following:
<body>
<!-- Here goes your page content -->
<!-- Here you include the jquery and any js you may need -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Here goes custom jquery code -->
<script>
$('.btn').click( function(){
$(this).parent().addClass("active")
})
</script>
</body>
I suggest you check the Stackoverflow rules:
https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1
Here is the simplified solution to your problem:
$('.btn').click( function(){
$(this).parent().addClass("active")
})
.elements-container {
position: relative;
}
.element {
float: left;
width: 25%;
background-color: grey;
text-align: center;
padding: 50px 0;
}
.element.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container">
<div class="element">
<button class="btn">Button 1</button>
</div>
<div class="element">
<button class="btn">Button 2</button>
</div>
<div class="element">
<button class="btn">Button 3</button>
</div>
<div class="element">
<button class="btn">Button 4</button>
</div>
</div>

Loading screen coverd by the footer

I made a loading screen on my personal website. I found that the footer will cover my loading screen when I go into the website.
I want my loading screen can cover the entire screen when I go into the website. How can I do that?
This is my code, css and js.
<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
<div class="container">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">Powered by User</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
</div>
</footer>
#cfooter {
display: block;
border: 1px solid 000000;
height: 100px;
text-align: center;
background-color: #000000;
color: #fff;
font-size: 15px;
}
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: white;
}
img.load_screen {
z-index: 9999999;
position: fixed;
left: 50%;
top: 50%;
margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
background: white;
}
$(function() {
$("div.load_screen").fadeIn("slow")
setTimeout(function() {
$("div.load_screen").fadeOut("slow")
}, 3000);
})

add z-index: 999; to div.load_screen

Add #cfooter {z-index: 1}
and add top and left 0.
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: red;
top: 0;
left:0;
}
Here is the working example. I have added red background just to test it:
https://jsfiddle.net/o7wd4mfp/4/

Tricky div overlapping

I am trying to use z-index to overlap in this scenario, but I cannot achieve the results I am looking for.
Here is my code: https://jsfiddle.net/mx0zdpvm/.
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -100px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>
This is the result I am trying to achieve:
A CSS solution is preferred.

First change:
#redStripes{
position: relative;
top:60px;
right:280px;
z-index: 2;
}
If you want to overlap elements, divs, you need to specify position absolute or relative to something, otherwise the z-index will not work.
https://jsfiddle.net/scorpio777/mx0zdpvm/3/
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: relative;
top:50px;
right:280px;
z-index: 2;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -150px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>

You cannot overlap elements if you don't set the position to absolute or relative.

This will sort the overlapping out. I set the position to relative and a z-index of 1 to the blue triangle, and 2 to the red strips, then adjusted the positioning with top and right. I will leave you to sort out the rest :)
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: relative;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
right: 0px;
top:-100px;
z-index:1;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
z-index:2;
left: -100px;
}