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.

Popup window on landing page

I made a landing page with goods.
Every good has a description and a price.
When you click open a "popup window" should open, with the picture and description.
The question is, what if i have a lot of goods so with html and some framework popup, I will need to do all the description in html, can I somehow make a template of popup window, and provide description of goods in popup window through javascript ?

Basically you need a code which displays a modal window and the same code should also display full product details in it.
Normally, if you have a category page which displays product summary you would need to populate the modal window (which some call popup) with complete product details taken in via Ajax (the website should be able to output product data in JSON format if you got to an URL like mystore.com/ajax/p/10101 where 10101 is the product id. It depends on the website creator.
Anyways, an example JS code with modal window and which displays the product info from the page you are on is below.
$(".view").click(function(){
$(".overlay").show();
var pName = $(this).parent().children(".itemName").text();
var pPrice = $(this).parent().children(".itemPrice").text();
var pDescription = $(this).parent().children(".itemDescription").text();
$(".productName").text(pName);
$(".productPrice").text(pPrice);
$(".productDescription").text(pDescription);
});
$(".close").click(function(e){
e.preventDefault();
$(".overlay").hide();
});
.content {
display: block;
width: 100%;
position: relative;
}
.products {
width: 100%;
float: left;
display: block;
position: relative;
}
.item {
position: relative;
width: 45%;
float: left;
display: block;
margin-right: 10px;
border: solid 1px #ccc;
padding: 4px;
height: 150px;
box-sizing: border-box;
}
.itemImage {
width: 50%;
float: left;
height: 138px;
border: solid 1px green;
margin-right: 10px;
}
.itemName {
font: 500 20px/25px Arial;
}
.itemPrice {
font-weight: bolder;
}
.itemDescription {
font: 300 16px/18px Arial;
}
.view {
font: 100 9px/10px Arial;
}
.view:hover {
cursor: pointer;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 300px;
background: rgba(0,0,0,0.4);
}
.popup {
display: block;
position: absolute;
top: 50px;
left: 200px;
width: 300px;
height: 150px;
background: #fff;
}
.close {
position: absolute;
top: 10px;
right: 10px;
}
.product {
position: absolute;
top: 30px;
left: 20px;
}
.productImage {
width: 100px;;
display: block;
float: left;
margin-right: 10px;
position: relative;
height: 100px;
border: solid 1px red;
}
.productName {
font: 500 15px/16px Arial;
float: left;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="products">
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 1</div>
<div class="itemPrice"> $100 </div>
<div class="itemDescription"> Description 1 in here.</div>
<span class="view">View popup</span>
</div>
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 2</div>
<div class="itemPrice"> $300 </div>
<div class="itemDescription"> Description 2 in here.</div>
<span class="view">View popup</span>
</div>
</div>
<div class="overlay">
<div class="popup">
Close X
<div class="product">
<div class="productImage"><img src="" /></div>
<div class="productName"> xxxxxx</div>
<div class="productPrice"> uuuuuuuu </div>
<div class="productDescription"> tttttttt </div>
</div>
</div>
</div>
</div>

How to :hover one div on two other divs and make it dynamic with JS/JQuery?

I need to hover this div on 2 more divs, and this div additionally should go on its position dynamically maybe playing with the $(document).width();
So, an example is the following:
<div id="store">
<div id="storeText">Store</div>
</div>
<div id="score">
<div id="money">Money earned: 0</div>
<div id="times">Bulbs charged: 0</div>
</div>
CSS
#score {
background-color: #aaaaaa;
width: 96%;
margin: 0;
padding: 10px 2% 10px 2%; }
#store {
float:right;
background-color: #c0c0c0;
width: 10%;
height: 200px;
margin: 0;
padding: 19px 2% 19px 2%; }
#storeText {
text-align: center; }
That's what I should do, but you need to consider I have one more div in the bottom and this is what happens:
JSFiddle
So my question is, how can I position that div '#store' dynamically on that position (right) noting that it should hover all the divs and not make them go away as it actually does right now.
If you didn't get how the result should be, this link will help you understand it carefully.

Please check this code: JSFiddle
What i understand from you i put here, please let me know if you want any more help.
#store {
background-color: #aaaaaa;
width: 96%;
margin: 0;
padding: 10px 2% 10px 2%;
}
#score {
float:right;
background-color: #c0c0c0;
width: 100%;
height: 300px;
margin: 0;
}
#storeText {
text-align: center;
}
#div3 {
float:right;
background-color: red;
width: 100%;
margin: 0;
height: 300px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
opacity: 0.4;
padding: 10px 2% 10px 2%;
}
<div id="store">
<div id="storeText">Store</div>
</div>
<div id="score">
<div id="money">Money earned: 0</div>
<div id="times">Bulbs charged: 0</div>
</div>
<div id="div3"></div>

Unslider sliding image problems

When I add the unslider-arrows to the unslider banner it doesn't slide properly between images. When moving to the next image it resizes the image from small to full size starting at the top of the .banner div.
* Note: It only slides like this without any user input.
You can see this on the link that I have provided.
www.bravodesignbc.com
Since I am not a javascript guru I am not sure how to solve this. I don't think there is a problem with the css but I might be wrong. Here is the html and javascript for the banner and unslider-arrows
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<img src="images/prev.png" />
</div>
<div class="buttonNext">
<img src="images/next.png" />
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>
<ul>
<li><img src="images/knappen.jpg" /></li>
<li><img src="images/closeupChandelier.jpg" /></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
Here is the css
/*********banner********/
#feature{
margin-top: 60px;
margin-bottom: 60px;
position: relative;
height: 400px;
width: 100%;
background-color: #FFF;
}
.banner{
position: relative;
overflow: auto;
margin: 0 auto;
width: 800px;
height: 400px;
padding: 0px;
}
.banner ul{
padding: 0px;
margin: 0px;
list-style: none;
}
.banner li {
padding: 0px;
margin: 0px;
float: left;
height: 400px;
width: 800px;
}
.banner ul li img{
padding: 0px;
margin: 0px;
}
.buttonPrev {
z-index: 1;
position: absolute;
left: 3%;
top:180px;
width: 35px;
height:70px;
}
.buttonNext {
z-index: 1;
position: absolute;
right: 3%;
top:180px;
width: 35px;
height:70px;
}
.bottomBanner {
position:absolute;
z-index: 1;
bottom: 0px;
width: 800px;
height: 100px;
margin:0px;
padding:0px;
background-color: rgba( 255, 255, 255, 0.4);
}
.bottomBanner h2{
font-family: 'rockwell_stdlight', Helvetica, Arial, sans-serif;
font-weight: lighter;
color: #4B4D4E;
font-size: 36px;
padding-left: 170px;
}
.listBg{
background:url(../images/herringbone-pattern.png);
background-repeat: repeat;
}

It looks like your <script> block is improperly nested. I tried out your code and was able to get it to work by moving the javascript instantiating the unslider() out of the "banner" div like so:
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<img src="images/prev.png" />
</div>
<div class="buttonNext">
<img src="images/next.png" />
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<ul>
<li class="listBg"><h3>Slide 1</h3></li>
<li class="listBg"><h3>Slide 2</h3></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
<script type="text/javascript">
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>

IScroll wrapper doesn't get a height

I have the following code:
<div data-role="content" height="100%" data-iscroll>
<div class="homebutton_zeile">
<a id="picture_home" href="#pictures">
<div class="homebutton_all">
<div class="homebutton_name">Picture</div>
<div class="homebutton_picture">
<img src="images/picture.png" alt="image"
style="position: relative;">
</div>
</div>
</a>
</div>
</div>
</div>
My Classes of CSS
.homebutton_zeile{
width: 100%;
height: 30%;
}
.homebutton_all{
width: 30%;
height: 90%;
float:left;
margin-left: 2%;
margin-top:15px;
}
.homebutton_picture{
position: relative;
width: 100%;
height: 85%;
float: left;
background-color: #AAC7BD;
border: 1px solid black;
border-radius: 15px;
box-shadow:8px 8px 8px #666;
}
.homebutton_name{
text-align:center;
position: relative;
top:-10px;
width: 100%;
height: 15%;
margin-left: auto;
text-decoration:none;
color:black;
}
I am using:
iscroll.js
jQuery 1.8.2
jQuery mobile 1.2.0
jQuery mobile iscrollview.
And if its needed to know jstorage.js and fastclick.js
But the div above is not getting a height at the wrapper of iscroll. There is also a login before and this page will be shown automatically after the login after a $.mobile.changePage("#home"); function.
I tried to do it as first page before the function of changePage and it gave me the same effect. If I put a for example after the
<div data-role="content" height="100%" data-iscroll>&nbps;
The wrapper get a height of 15px for the but not for the images inside.