We Keep Coding

How to add width to an element using jquery each function?

I want to build a loading bar effect using two seperate divs inside each other. I got it all positioned and all that but how can I make one of them increase its width from %1 to %100 with transition? I want it to be filled in 10 sec.
Thanks.
<div class="loading-container">
<div class="outside-loading"></div>
<div class="inside-loading"></div>
</div>

Fairly simple with jQuery animate() which you can customize for step or easing and also use callbacks for start or complete as needed
$('.outside-loading').animate({width: '100%'}, 3000);// using 3 sec for demo
.outside-loading {
background: blue;
width: 0;
height: .5em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading-container">
<div class="outside-loading"></div>
<div class="inside-loading"></div>
</div>

Vanilla Javascript
Create a function and increase the width with your set interval function. Add a conditional that checks if the width is 100% and if it is, then clear the interval. I also moved the divs within each other and set the display of the inner span tag to inline-block...
You can also target the elements textContent and display the widths progress in percent as well...
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementsByClassName("inside-loading");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem[0].style.width = width + "%";
elem[0].textContent = width + "%";
}
}
}
}
move();
.outside-loading {
width: 100%;
height: 30px;
background-color: grey;
}
.inside-loading {
display: inline-block;
width: 1%;
height: 100%;
background-color: red;
text-align: right;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
<br><br><br>
<div class="loading-container">
<div class="outside-loading">
<span class="inside-loading">
</span>
</div>
</div>

My script is not showing whats truly visible element wise

I found posts and online articles on how to do something like this but most examples are not in plain JavaScript. So this script works almost perfectly if all the sections are the same height for example 220px. So I thought I was getting closer in having this script working how I want it to work like overtime but then I realize
it had flaws when I decided to change the sections height and play around with the code more to see if it had any flaws that I was unaware of so basically this script is designed to output the name
of the sections that are visible but it is not showing the correct output for example if section 1 is the only one that is visible in the div it will say section-1 if multiple sections are visible it will say for example section-1,section-2 etc. Basically it should work like this regardless of the sections height
I know I have to change the code or altered it but I'm getting more confused the more I play around with it so how can I pull this off so I can always have the correct output? If I have to change my code completely to be able to do this then I don't mind.
This is my code
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);
function whichSectionsAreInSight(){
var building= document.querySelector('#building');
var top = building.scrollTop;
var bottom = top+building.offsetHeight;
var arr = [];
Array.prototype.forEach.call(
building.querySelectorAll('#building .sections'),
function(sections){
if ((sections.offsetTop < top && top <sections.offsetTop+sections.offsetHeight) || (sections.offsetTop < bottom && bottom < sections.offsetTop+sections.offsetHeight)){
arr.push(sections.id);
}
}
);
document.querySelector('#status').innerHTML = arr.join(',')
}
whichSectionsAreInSight();
});
h1{
margin: 0;
text-align: center;
}
#building{
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
}
.sections{
height: 80px;
width: 100%;
}
#section-1{
background-color: dodgerblue;
}
#section-2{
background-color: gold;
}
#section-3{
background-color: red;
}
#section-4{
background-color: gray;
height: 220px;
}
<p id='status'></p>
<div id='building'>
<div id='section-1' class='sections'><h1>Section 1</h1></div>
<div id='section-2' class='sections'><h1>Section 2</h1></div>
<div id='section-3' class='sections'><h1>Section 3</h1></div>
<div id='section-4' class='sections'><h1>Section 4</h1></div>
</div>

You were pretty close!
First off, you need to set the parent element to position:relative otherwise the parent that is being measured against is the document.
Also, the algorithm is simpler than what you had. Just make sure that the top of the element is less than the bottom of the parent, and the bottom of the element is greater than the top of the parent.
In your case this is offsetTop < bottom and offsetTop + offsetHeight > top
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#building').addEventListener('scroll', whichSectionsAreInSight);
function whichSectionsAreInSight() {
var building = document.querySelector('#building');
var top = building.scrollTop;
var bottom = top + building.offsetHeight;
var arr = [];
Array.prototype.forEach.call(
building.querySelectorAll('#building .sections'),
function(section) {
if (section.offsetTop < bottom && section.offsetTop + section.offsetHeight > top) {
arr.push(section.id);
}
}
);
document.querySelector('#status').innerHTML = arr.join(',')
}
whichSectionsAreInSight();
});
h1 {
margin: 0;
text-align: center;
}
#building {
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
position: relative;
}
.sections {
height: 80px;
width: 100%;
}
#section-1 {
background-color: dodgerblue;
}
#section-2 {
background-color: gold;
}
#section-3 {
background-color: red;
}
#section-4 {
background-color: gray;
height: 220px;
}
<p id='status'></p>
<div id='building'>
<div id='section-1' class='sections'>
<h1>Section 1</h1>
</div>
<div id='section-2' class='sections'>
<h1>Section 2</h1>
</div>
<div id='section-3' class='sections'>
<h1>Section 3</h1>
</div>
<div id='section-4' class='sections'>
<h1>Section 4</h1>
</div>
</div>

how to iterate over an h1 element and make each word fade in with jquery?

I would like to know how to iterate over the h1 element, and get each word to fade in one after the other.
I got it done, but the code is not dry. Can someone please show and explain how to do this with a loop?
$('document').ready(function() {
$('#H').fadeIn(3000).removeClass("hidden").addClass("hColor1");
$('#e').fadeIn(5000).removeClass("hidden").addClass("hColor2");
$('#l').fadeIn(6000).removeClass("hidden").addClass("hColor3");
$('#secondL').fadeIn(7000).removeClass("hidden").addClass("hColor4");
$('#o').fadeIn(7300).removeClass("hidden").addClass("hColor5");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<h1 class="hidden"><span id="H">Hello</span> <span id="e">everyone</span> <span id="l">lets</span> <span id="secondL">learn</span> <span id="o">javascript</span></h1>
</div>

I wouldn't hide the < h1 > but the spans inside, then use setTimeout() to delay each fadeIn()
$('document').ready(function(){
var spans = $("h1").find("span"); // Get all spans inside <h1>
spans.hide(); // hide spans
var show_time = 1000; // set time for first span
$.each(spans, function(i, item){ // item = every span
setTimeout(function(){ // setTimeout delays events
$(item).fadeIn('slow') // fadeIn to show each item (span)
}, show_time); // showtime after function inside setTimeout
show_time = show_time + 1000; // increase 1 sec for every span
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="">
<span id="H">Hello</span>
<span id="e">everyone</span>
<span id="l">lets</span>
<span id="secondL">learn</span>
<span id="o">javascript</span>
</h1>
</div>

The code below does the following:
Gets the words from the h1 element and splits them by whitespace into an array.
Using the array of words, it creates an html string with span elements surrounding each word.
Inserts the html back into the h1 element.
Hides all the span elements.
Shows the h1 element (but nothing will show at this point because all the span children are hidden).
Fades in the span elements one after another.
The last step is accomplished by passing a function as the second parameter to the .fadeIn() function. That function is called after the element is finished fading in.
The fading is done in a function named fadeInNext(). That function is called initially for the first child element, but it calls itself for the next element when the fading is finished. That will continue until all child elements have been faded in.
$(function() {
var $header = $('#hdr');
$header.html($.map($header.text().split(/\s+/), function(word) {
return '<span>' + word + '</span>';
}).join(' ')).children().hide().end().show();
(function fadeInNext($element) {
$element.fadeIn('slow', function() {
fadeInNext($element.next());
});
})($header.children(':first'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="hdr" style="display: none;">Hello everyone lets learn javascript</h1>
jsfiddle showing the code in re-usable functions.
jsfiddle fading in letters, instead of words.

// get your text string
var hello = $('.hello').text();
// empty text container so we can refill it later
$('.hello').empty();
// split string by each word and save to array
var helloArray = hello.split(' ');
// adjust these values to customize how slow/fast your words appear
var delays = [400, 500, 1500, 1600, 1900];
// for each word in the array..
$(helloArray).each(function(i) {
// cant use this inside the setTimeout function so we save this as a variable
var pseudoThis = this;
// begin the setTimeout function to stagger/delay the word appearance
setTimeout(function() {
// the html to wrap each word with for customizing css
wordAndWrapper = '<span class="hColor n'+i+'">'+pseudoThis+'</span> ';
// append html with variables inserted to text container
$('.hello').append(wordAndWrapper);
// i is used here to get the position in the delays array
}, delays[i]);
// if its the last word (or any word you want to emphasize as we've done with 'javascript' here)
if (i === 4) {
setTimeout(function() {
// custom css styling for last word using a class
$('.n4').addClass('grow');
// had to make the delay 50ms more than delay of appearance so that transition in css applies
}, 1950);
};
})
html, body {
margin: 0;
background-color: hsla(0, 0%, 90%, 1);
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.hello {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
margin: 0;
text-align: center;
font-size: 4vw;
font-weight: bold;
}
.hColor {
display: flex;
justify-content: center;
width: 25%;
padding: 0 30px;
box-sizing: border-box;
transition: all 0.2s linear;
}
.hColor.n0 { color: hsl(0, 51.2%, 49.8%); }
.hColor.n1 { color: hsl(190.7, 93.7%, 43.5%); }
.hColor.n2 { color: hsl(36, 70.9%, 51.6%); }
.hColor.n3 { color: hsl(286, 71.8%, 44.5%); }
.hColor.n4 { width: 100%; font-variant: small-caps; color: hsl(107.9, 83.6%, 45.5%); }
.hColor.n4.grow { font-size: 11vw; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1 class="hello">Hello Everyone Let's Learn javascript</h1>
</div>
fiddle
https://jsfiddle.net/Hastig/vorj57gs/
credit
Get text, put each word into an array .split
Using setTimeout in the .each loop

you can do by .each()
$('document').ready(function() {
$('.hidden *').each(function(index) {
$(this).fadeIn((index + 1) * 1000).addClass('hColor' + (index + 1));
});
})
.hColor1 {
background: pink;
}
.hColor2 {
background: lightblue;
}
.hColor3 {
background: lightgreen;
}
.hColor4 {
background: lightgrey;
}
.hColor5 {
background: lightyellow;
}
h1.hidden * {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="hidden">
<span id="H">
Hello
</span>
<span id="e">
everyone
</span>
<span id="l">
lets
</span>
<span id="secondL">
learn
</span>
<span id="o">
javascript
</span>
</h1>
</div>

How to cycle through DIVs

I want my page to show 3 divs at a time, and when I click next I would like it to show the next 3 divs. Then when I click previous, I would like to display the previous 3.
$("#container .result").slice(0, 3).show();
$("#right").click(function () {
var items = $('#container .result:visible').hide().last();
var nextItems = items.nextAll().slice(0, 3);
if (nextItems.length === 0) {
nextItems = $("#container .result").slice(0, 3);
}
nextItems.show();
});
$("#left").click(function () {
var items = $('#container .result:visible').hide().last();
var nextItems = items.prevAll().slice(0, 3);
if (nextItems.length === 0) {
nextItems = $("#container .result").slice(0, 3);
}
nextItems.show();
});
The problem is that when I click previous, and it comes to last 3 divs and when I click again it shows 2 than 1. How can i fix that? I want it to stop when it comes to first 3.

You were very much on the right track, I was impressed by the ingenuity of your code.
Your main problem is solved with a very simple fix; in the #left click-handler, replace .last() with .first():
var items = $('#container .result:visible').hide().first();
And to loop around to the last 3 when you click previous on the first 3, change this line to the next:
nextItems = $("#container .result").slice(0, 3);
nextItems = $("#container .result").slice($("#container .result").length-3, $("#container .result").length);
But I thought the situation might occur, now or in the future, that the number of .results aren't a multitude of 3, let's say 7 or 11 for example.
I created a script that will handle that, and also loop around in both directions:
$("#container .result").first().show(); //initialize divs at pageload
$(".nav").click(function() {
var start=0, step=3;
var currentItems = $("#container .result:visible").hide();
var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last());
var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll());
if (nextItems.length === 0) { //if the last set of divs has been reached, loop around
var itemsLength = $("#container .result").length;
if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around
nextItems = $("#container .result").slice(start,step); //loop around
} else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible
if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible
currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array
} else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set
nextItems.show(); //show the next set
}).click(); //initialize divs at pageload
In HTML, I gave the two buttons both a class "nav" (see code snippet below), so that I could combine their click-handlers into one.
I changed your first line to this: $("#container .result").first().show();. That line - in combination with the .click() chained to the click-handler - replaces your line: $("#container .result").slice(0, 3).show(); (at the top of your script).
This gives you much more flexibility to change the amount of divs you want to show on the page at once. At the start of the click-handler I declare var step=3;, which is the only place that number is hard-coded, so if you ever want to change the amount you only have to change that number (and maybe adjust some styling).
The rest of the explanation is in the comments in the code.
See the code snippet below for a demo:
$("#container .result").first().show(); //initialize divs at pageload
$(".nav").click(function() {
var start=0, step=3;
var currentItems = $("#container .result:visible").hide();
var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last());
var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll());
if (nextItems.length === 0) { //if the last set of divs has been reached, loop around
var itemsLength = $("#container .result").length;
if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around
nextItems = $("#container .result").slice(start,step); //loop around
} else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible
if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible
currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array
} else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set
nextItems.show(); //show the next set
}).click(); //initialize divs at pageload
html,body {width:98%; height:90%;}
#container {width:100%; height:90%; background:lightgrey;}
#container .result {display:none; float:left; width:30%; height:100%; margin:0 1.66%; background:lightgreen;}
#container .result > div {display:table; width:100%; height:100%;}
#container .result > div > div {display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; font:bolder 2em sans-serif;}
.nav {margin-top:2%; cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="result"><div><div>1</div></div></div>
<div class="result"><div><div>2</div></div></div>
<div class="result"><div><div>3</div></div></div>
<div class="result"><div><div>4</div></div></div>
<div class="result"><div><div>5</div></div></div>
<div class="result"><div><div>6</div></div></div>
<div class="result"><div><div>7</div></div></div>
</div>
<button type="button" class="nav" id="prev">PREVIOUS</button>
<button type="button" class="nav" id="next">NEXT</button>
codepen: https://codepen.io/anon/pen/YQoJzd?editors=1010
jsfiddle: https://jsfiddle.net/k8ysj6gq/1/
You can ignore the CSS and HTML (except for the class="nav" on the buttons), that's all just so we can see it. All the relevant code is in the JS.

Basically you can do something like below.
On Next or Previous click set margin-left of container to position or loop through all div.
$(document).ready(function() {
$('.next-button').on('click', function() {
if (parseInt($('.carousel-item').css("margin-left").slice(0, -2)) < -2000) {
$('.carousel-item').animate({
"margin-left": "0px"
}, 200)
} else {
$('.carousel-item').animate({
"margin-left": "-=600px"
}, 200);
}
});
$('.prev-button').on('click', function() {
if (parseInt($('.carousel-item').css("margin-left").slice(0, -2)) > 0) {
$('.carousel-item').animate({
"margin-left": "-2000px"
}, 200)
} else {
$('.carousel-item').animate({
"margin-left": "+=600px"
}, 200);
}
});
});
.carousel-container {
height: 500px;
display: flex;
margin: 40px 20px;
position: relative;
overflow: hidden;
width: 720px;
padding: 0;
border: 1px solid red;
align-items: center;
}
.carousel-item {
height: 100%;
margin: 5px;
margin-left: 60px;
padding: 0;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
box-orient: horizontal;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
display: -o-box;
display: box;
list-style-type: none;
}
.item {
border: solid 1px #333;
margin-right: 10px;
width: 200px;
display: flex;
align-items: center;
}
.item>a {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.prev-button,
.next-button {
border: 1px solid green;
background-color: gray;
}
.navigation {
width: 60px;
margin: 0;
position: absolute;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.next-button:hover,
.prev-button:hover {
background-color: red;
}
.navigation:active {
color: white;
}
.next-button {
right: 0;
}
.prev-button {
left: 0;
}
/* .carousel-item li:nth-child(1) {
background-image: url('http://urbanphenomena.net/imgs/cover/bq2.jpg');
background-size: cover;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-container">
<a class="prev-button navigation" href="#">
<</a>
<div class="carousel-item">
<li class="item"> 1 </li>
<li class="item"> 2 </li>
<li class="item"> 3 </li>
<li class="item"> 4 </li>
<li class="item"> 5 </li>
<li class="item"> 6 </li>
<li class="item"> 7 </li>
<li class="item"> 8 </li>
<li class="item"> 9 </li>
<li class="item">
</li>
</div>
<a class="next-button navigation" href="#">></a>
</div>
Run co

Ok so your first mistake was that when trying to code back 3 you were getting the previous 3 items from the first of the 3 not the last. So i changed .last() to .first(). Then to loop back when previous = 0 all you did was slice from the current 3, instead of slicing at the end of the entire array of elements.
Here's a link to a codepen that has the working code(you'll obviously have to change the variables to fit your project): https://codepen.io/anon/pen/qjzxee?editors=1010
changed var items = $('#container .result:visible').hide().last(); to var items = $('#container .result:visible').hide().first();
and
if (nextItems.length === 0) {
nextItems = $("#container .result").slice(0, 3);
}
to
if (nextItems.length === 0) {
var allItems = $("#container .result");
nextItems = $("li").slice(allItems.length - 3,allItems.length);
}
this also only works if the number elements is a multiple of the number you are skipping each time, but i can fix that if you'd like

Scrollable div to stick to bottom, when outer div changes in size

Here is an example chat app ->
The idea here is to have the .messages-container take up as much of the screen as it can. Within .messages-container, .scroll holds the list of messages, and in case there are more messages then the size of the screen, scrolls.
Now, consider this case:
The user scrolls to the bottom of the conversation
The .text-input, dynamically gets bigger
Now, instead of the user staying scrolled to the bottom of the conversation, the text-input increases, and they no longer see the bottom.
One way to fix it, if we are using react, calculate the height of text-input, and if anything changes, let .messages-container know
componentDidUpdate() {
window.setTimeout(_ => {
const newHeight = this.calcHeight();
if (newHeight !== this._oldHeight) {
this.props.onResize();
}
this._oldHeight = newHeight;
});
}
But, this causes visible performance issues, and it's sad to be passing messages around like this.
Is there a better way? Could I use css in such a way, to express that when .text-input-increases, I want to essentially shift up all of .messages-container

2:nd revision of this answer
Your friend here is flex-direction: column-reverse; which does all you ask while align the messages at the bottom of the message container, just like for example Skype and many other chat apps do.
.chat-window{
display:flex;
flex-direction:column;
height:100%;
}
.chat-messages{
flex: 1;
height:100%;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }
The downside with flex-direction: column-reverse; is a bug in IE/Edge/Firefox, where the scrollbar doesn't show, which your can read more about here: Flexbox column-reverse and overflow in Firefox/IE
The upside is you have ~ 90% browser support on mobile/tablets and ~ 65% for desktop, and counting as the bug gets fixed, ...and there is a workaround.
// scroll to bottom
function updateScroll(el){
el.scrollTop = el.scrollHeight;
}
// only shift-up if at bottom
function scrollAtBottom(el){
return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}
In the below code snippet I've added the 2 functions from above, to make IE/Edge/Firefox behave in the same way flex-direction: column-reverse; does.
function addContent () {
var msgdiv = document.getElementById('messages');
var msgtxt = document.getElementById('inputs');
var atbottom = scrollAtBottom(msgdiv);
if (msgtxt.value.length > 0) {
msgdiv.innerHTML += msgtxt.value + '<br/>';
msgtxt.value = "";
} else {
msgdiv.innerHTML += 'Long long content ' + (tempCounter++) + '!<br/>';
}
/* if at bottom and is IE/Edge/Firefox */
if (atbottom && (!isWebkit || isEdge)) {
updateScroll(msgdiv);
}
}
function resizeInput () {
var msgdiv = document.getElementById('messages');
var msgtxt = document.getElementById('inputs');
var atbottom = scrollAtBottom(msgdiv);
if (msgtxt.style.height == '120px') {
msgtxt.style.height = 'auto';
} else {
msgtxt.style.height = '120px';
}
/* if at bottom and is IE/Edge/Firefox */
if (atbottom && (!isWebkit || isEdge)) {
updateScroll(msgdiv);
}
}
/* fix for IE/Edge/Firefox */
var isWebkit = ('WebkitAppearance' in document.documentElement.style);
var isEdge = ('-ms-accelerator' in document.documentElement.style);
var tempCounter = 6;
function updateScroll(el){
el.scrollTop = el.scrollHeight;
}
function scrollAtBottom(el){
return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}
html, body { height:100%; margin:0; padding:0; }
.chat-window{
display:flex;
flex-direction:column;
height:100%;
}
.chat-messages{
flex: 1;
height:100%;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }
/* temp. buttons for demo */
button { width: 12%; height: 44px; margin-left: 5%; vertical-align: top; }
/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text{ overflow: auto; }
#media screen and (-webkit-min-device-pixel-ratio:0) {
.chat-messages-text{ overflow: visible; }
/* reset Edge as it identifies itself as webkit */
#supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }
}
/* hide resize FF */
#-moz-document url-prefix() { .chat-input-text { resize: none } }
/* end - fix for hidden scrollbar in IE/Edge/Firefox */
<div class="chat-window">
<div class="chat-messages">
<div class="chat-messages-text" id="messages">
Long long content 1!<br/>
Long long content 2!<br/>
Long long content 3!<br/>
Long long content 4!<br/>
Long long content 5!<br/>
</div>
</div>
<div class="chat-input">
<textarea class="chat-input-text" placeholder="Type your message here..." id="inputs"></textarea>
<button onclick="addContent();">Add msg</button>
<button onclick="resizeInput();">Resize input</button>
</div>
</div>
Side note 1: The detection method is not fully tested, but it should work on newer browsers.
Side note 2: Attach a resize event handler for the chat-input might be more efficient then calling the updateScroll function.
Note: Credits to HaZardouS for reusing his html structure

You just need one CSS rule set:
.messages-container, .scroll {transform: scale(1,-1);}
That's it, you're done!
How it works: First, it vertically flips the container element so that the top becomes the bottom (giving us the desired scroll orientation), then it flips the content element so that the messages won't be upside down.
This approach works in all modern browsers. It does have a strange side effect, though: when you use a mouse wheel in the message box, the scroll direction is reversed. This can be fixed with a few lines of JavaScript, as shown below.
Here's a demo and a fiddle to play with:
//Reverse wheel direction
document.querySelector('.messages-container').addEventListener('wheel', function(e) {
if(e.deltaY) {
e.preventDefault();
e.currentTarget.scrollTop -= e.deltaY;
}
});
//The rest of the JS just handles the test buttons and is not part of the solution
send = function() {
var inp = document.querySelector('.text-input');
document.querySelector('.scroll').insertAdjacentHTML('beforeend', '<p>' + inp.value);
inp.value = '';
inp.focus();
}
resize = function() {
var inp = document.querySelector('.text-input');
inp.style.height = inp.style.height === '50%' ? null : '50%';
}
html,body {height: 100%;margin: 0;}
.conversation {
display: flex;
flex-direction: column;
height: 100%;
}
.messages-container {
flex-shrink: 10;
height: 100%;
overflow: auto;
}
.messages-container, .scroll {transform: scale(1,-1);}
.text-input {resize: vertical;}
<div class="conversation">
<div class="messages-container">
<div class="scroll">
<p>Message 1<p>Message 2<p>Message 3<p>Message 4<p>Message 5
<p>Message 6<p>Message 7<p>Message 8<p>Message 9<p>Message 10<p>Message 11<p>Message 12<p>Message 13<p>Message 14<p>Message 15<p>Message 16<p>Message 17<p>Message 18<p>Message 19<p>Message 20
</div>
</div>
<textarea class="text-input" autofocus>Your message</textarea>
<div>
<button id="send" onclick="send();">Send input</button>
<button id="resize" onclick="resize();">Resize input box</button>
</div>
</div>
Edit: thanks to #SomeoneSpecial for suggesting a simplification to the scroll code!

Please try the following fiddle - https://jsfiddle.net/Hazardous/bypxg25c/. Although the fiddle is currently using jQuery to grow/resize the text area, the crux is in the flex related styles used for the messages-container and input-container classes -
.messages-container{
order:1;
flex:0.9 1 auto;
overflow-y:auto;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:stretch;
align-content:stretch;
}
.input-container{
order:2;
flex:0.1 0 auto;
}
The flex-shrink value is set to 1 for .messages-container and 0 for .input-container. This ensures that messages-container shrinks when there is a reallocation of size.

I've moved text-input within messages, absolute positioned it to the bottom of the container and given messages enough bottom padding to space accordingly.
Run some code to add a class to conversation, which changes the height of text-input and bottom padding of messages using a nice CSS transition animation.
The JavaScript runs a "scrollTo" function at the same time as the CSS transition is running to keep the scroll at the bottom.
When the scroll comes off the bottom again, we remove the class from conversation
Hope this helps.
https://jsfiddle.net/cnvzLfso/5/
var doScollCheck = true;
var objConv = document.querySelector('.conversation');
var objMessages = document.querySelector('.messages');
var objInput = document.querySelector('.text-input');
function scrollTo(element, to, duration) {
if (duration <= 0) {
doScollCheck = true;
return;
}
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
doScollCheck = true;
return;
}
scrollTo(element, to, duration - 10);
}, 10);
}
function resizeInput(atBottom) {
var className = 'bigger',
hasClass;
if (objConv.classList) {
hasClass = objConv.classList.contains(className);
} else {
hasClass = new RegExp('(^| )' + className + '( |$)', 'gi').test(objConv.className);
}
if (atBottom) {
if (!hasClass) {
doScollCheck = false;
if (objConv.classList) {
objConv.classList.add(className);
} else {
objConv.className += ' ' + className;
}
scrollTo(objMessages, (objMessages.scrollHeight - objMessages.offsetHeight) + 50, 500);
}
} else {
if (hasClass) {
if (objConv.classList) {
objConv.classList.remove(className);
} else {
objConv.className = objConv.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}
}
objMessages.addEventListener('scroll', function() {
if (doScollCheck) {
var isBottom = ((this.scrollHeight - this.offsetHeight) === this.scrollTop);
resizeInput(isBottom);
}
});
html,
body {
height: 100%;
width: 100%;
background: white;
}
body {
margin: 0;
padding: 0;
}
.conversation {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
position: relative;
}
.messages {
overflow-y: scroll;
padding: 10px 10px 60px 10px;
-webkit-transition: padding .5s;
-moz-transition: padding .5s;
transition: padding .5s;
}
.text-input {
padding: 10px;
-webkit-transition: height .5s;
-moz-transition: height .5s;
transition: height .5s;
position: absolute;
bottom: 0;
height: 50px;
background: white;
}
.conversation.bigger .messages {
padding-bottom: 110px;
}
.conversation.bigger .text-input {
height: 100px;
}
.text-input input {
height: 100%;
}
<div class="conversation">
<div class="messages">
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is a message content
</p>
<p>
This is the last message
</p>
<div class="text-input">
<input type="text" />
</div>
</div>
</div>

You write;
Now, consider this case:
The user scrolls to the bottom of the conversation
The .text-input, dynamically gets bigger
Wouldn't the method that dynamically sets the .text-input be the logical place to fire this.props.onResize().

To whom it may concern,
The answers above did not suffice my question.
The solution I found was to make my innerWidth and innerHeight variable constant - as the innerWidth of the browser changes on scroll to adapt for the scrollbar.
var innerWidth = window.innerWidth
var innerHeight = window.innerHeight
OR FOR REACT
this.setState({width: window.innerWidth, height: window.innerHeight})
In other words, to ignore it, you must make everything constant as if it were never scrolling. Do remember to update these on Resize / Orientation Change !

IMHO current answer is not a correct one:
1/ flex-direction: column-reverse; reverses the order of messages - I didn't want that.
2/ javascript there is also a bit hacky and obsolete
If you want to make it like a PRO use spacer-box which has properties:
flex-grow: 1;
flex-basis: 0;
and is located above messages. It pushes them down to the chat input.
When user is typing new messages and input height is growing the scrollbar moves up, but when the message is sent (input is cleared) scrollbar is back at bottom.
Check my snippet:
body {
background: #ccc;
}
.chat {
display: flex;
flex-direction: column;
width: 300px;
max-height: 300px;
max-width: 90%;
background: #fff;
}
.spacer-box {
flex-basis: 0;
flex-grow: 1;
}
.messages {
display: flex;
flex-direction: column;
overflow-y: auto;
flex-grow: 1;
padding: 24px 24px 4px;
}
.footer {
padding: 4px 24px 24px;
}
#chat-input {
width: 100%;
max-height: 100px;
overflow-y: auto;
border: 1px solid pink;
outline: none;
user-select: text;
white-space: pre-wrap;
overflow-wrap: break-word;
}
<div class="chat">
<div class="messages">
<div class="spacer-box"></div>
<div class="message">1</div>
<div class="message">2</div>
<div class="message">3</div>
<div class="message">4</div>
<div class="message">5</div>
<div class="message">6</div>
<div class="message">7</div>
<div class="message">8</div>
<div class="message">9</div>
<div class="message">10</div>
<div class="message">11</div>
<div class="message">12</div>
<div class="message">13</div>
<div class="message">14</div>
<div class="message">15</div>
<div class="message">16</div>
<div class="message">17</div>
<div class="message">18</div>
</div>
<div class="footer">
<div contenteditable role="textbox" id="chat-input"></div>
</div>
<div>
Hope I could help :)
Cheers