We Keep Coding

How to automatically scroll only inside <div> tag in Vue.js

I am creating frontend using vue 2.
There I have a chat inside tag and have done auto-scroll to the end of chat on updated().
Unfortunately, it scrolls not only inside chat box but also the whole page to this moment. How to override it? (show the whole code for you to recognise that it's impossible to have a ref on last message but not div - loaded_messages is an array from API and dialogs - from WebSocket)
<template>
<div class="box col-md-8" >
<div id="chat-messages" class="chat__order" style="
border: 1px solid grey; overflow-y: scroll;">
<ol class="chat">
<div v-for="m in loaded_messages[0]"
direction="column"
justify-content="start"
align-items="end"
margin-left=2px
:key="m.id">
<li class="self" v-if="m.username == user">
<b-avatar :src="m.get_message_info.get_thumbnail"></b-avatar>
<div class="msg">
<p>{{m.content}} </p>
<time>{{m.get_datetime}}</time>
</div>
</li>
<li class="other" v-else>
<b-avatar :src="m.get_message_info.get_thumbnail"></b-avatar>
<div class="msg">
<p>{{m.content}}</p>
<time>{{m.get_datetime}}</time>
</div>
</li>
</div>
<div v-for="dialog in dialogs"
direction="column"
justify-content="start"
align-items="end"
:key="dialog.id">
<li class="self" v-if="dialog.username == user">
<b-avatar></b-avatar>
<div class="msg">
<p>{{dialog.message}} </p>
<time>{{dialog.datetime}}</time>
</div>
</li>
<li v-else>
<b-avatar></b-avatar>
<div class="msg">
<p> {{dialog.message}} </p>
</div>
</li>
</div>
<div ref="lastMessage"></div>
</ol>
</div>
</div>
</template>
<script>
methods: {
// scroll to the last message
scrollToElement() {
const [el] = this.$refs.lastMessage;
if (el) {
el.scrollIntoView({ behavior: "smooth" });
}
},
},
updated() {
this.scrollToElement();
},
</script>

scrollIntoView method doesn't support scrolling inside a container, it only works with the document viewport, you need to calculate the X distance to the top of the element.
You can use this method.
function scrollParentToChild(parent, child) {
// Where is the parent on page
var parentRect = parent.getBoundingClientRect();
// What can you see?
var parentViewableArea = {
height: parent.clientHeight,
width: parent.clientWidth
};
// Where is the child
var childRect = child.getBoundingClientRect();
// Is the child viewable?
var isViewable = (childRect.top >= parentRect.top) && (childRect.bottom <= parentRect.top + parentViewableArea.height);
// if you can't see the child try to scroll parent
if (!isViewable) {
// Should we scroll using top or bottom? Find the smaller ABS adjustment
const scrollTop = childRect.top - parentRect.top;
const scrollBot = childRect.bottom - parentRect.bottom;
if (Math.abs(scrollTop) < Math.abs(scrollBot)) {
// we're near the top of the list
parent.scrollTop += scrollTop;
} else {
// we're near the bottom of the list
parent.scrollTop += scrollBot;
}
}
}

jQuery show hide next previous page items

I have the following HTML code and I'm really struggling to come up with a solution for the following: (pseudo code, javascript or jquery answers please, but would prefer jquery)
When the page loads, hide all of the list items except for the first
5 (display only the first five, select by unique id)
Two buttons on
the bottom of the list, one for "older" one for "newer".
When older btn is
pressed, show the next 5 on the list (might just be one list-item if
there is 6 altogether)
When "newer" is pressed, show the 5 in front of the current list-items
Hide newer button if already on the first page 5
code:
<div class="container">
<div class="list-item" id="13">
<p>First Item</p>
</div>
<div class="list-item" id="12">
<p>Second Item</p>
</div>
<div class="list-item" id="11">
<p>Third Item</p>
</div>
<div class="list-item" id="10">
<p>Fourth Item</p>
</div>
<div class="list-item" id="9">
<p>Fifth Item</p>
</div>
<div class="list-item" id="8">
<p>Sixth Item</p>
</div>
… ( more list-items)
</div>
<button onclick="showOlder()">Older</button>
<button onclick="showNewer()">Newer</button>

After further research and trial and error I Was able to come up with a solution. I thought I'd post it if anyone else is looking for something similar. Please note I'm not an expert in jQuery and this code can probably be done in a more optimised way.
$(document).ready(function () {
btnNewer.hide();
for (i = numOfItems; i >= 1; i--) {
if (i == numOfItems - (5 * page)) {
page++;
}
$("#" + i).addClass("Page-" + page);
}
for (i = 0; i <= numOfPages; i++) {
if (i != 1) {
hidePage(i);
}
}
});
var numOfItems = $('div.list-item').length;
var numOfPages = Math.ceil(numOfItems / 5);
var page = 1;
var currentPage = 1;
var btnOlder = $("#showOlder")
var btnNewer = $("#showNewer")
function hidePage(pageNum) {
$('.Page-' + pageNum).hide();
}
function showPage(pageNum) {
$('.Page-' + pageNum).show();
}
btnOlder.on("click", function () {
hidePage(currentPage);
currentPage++;
showPage(currentPage);
CheckIfOnLastPage();
CheckIfOnFirstPage();
})
btnNewer.on("click", function () {
hidePage(currentPage);
currentPage--;
showPage(currentPage);
CheckIfOnFirstPage();
CheckIfOnLastPage();
})
function CheckIfOnFirstPage() {
if (currentPage == 1) {
btnNewer.hide();
} else {
btnNewer.show();
}
}
function CheckIfOnLastPage() {
if (currentPage == numOfPages) {
btnOlder.hide();
} else {
btnOlder.show();
}
}

How can I make my Slideshow Indicators change their style with my current code?

I have had an issue with placing slideshows in my website. I require more than one slideshow on the same page which has led to multiple problems with the scrolling and such. I finally came across a solution which works almost perfectly however, the indicators do not change color to reflect the current slide.
var w3 = {};
w3.slideshow = function (sel, ms, func) {
var i, ss, x = w3.getElements(sel), l = x.length;
ss = {};
ss.current = 1;
ss.x = x;
ss.ondisplaychange = func;
if (!isNaN(ms) || ms == 0) {
ss.milliseconds = ms;
} else {
ss.milliseconds = 1000;
}
ss.start = function() {
ss.display(ss.current)
if (ss.ondisplaychange) {ss.ondisplaychange();}
if (ss.milliseconds > 0) {
window.clearTimeout(ss.timeout);
ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
}
};
ss.next = function() {
ss.current += 1;
if (ss.current > ss.x.length) {ss.current = 1;}
ss.start();
};
ss.previous = function() {
ss.current -= 1;
if (ss.current < 1) {ss.current = ss.x.length;}
ss.start();
};
ss.display = function (n) {
w3.styleElements(ss.x, "display", "none");
w3.styleElement(ss.x[n - 1], "display", "block");
}
ss.start();
return ss;
};
<html>
<script src="w3.js"></script>
<body>
<div id="2" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-content w3-display-container w3-center">
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Second slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Third slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Fourth slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<div class="w3-center w3-container w3-section w3-large w3-text-grey" style="width:100%">
<span class="w3-left w3-hover-text-blue fa fa-arrow-left" onclick="myShow2 .previous()"></span>
<span class="w3-right w3-hover-text-blue fa fa-arrow-right" onclick="myShow2 .next()"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(1)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(2)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(3)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(4)"></span>
</div>
</div>
</div>
<script> myShow2 = w3.slideshow(".Slide2", 0); </script>
</div>
</body>
</html>
So the code works well and does what I want except I'm not sure how to make the circle indicators change to blue to reflect the current slide. I have tried completely different approaches except this is the only one that allows multiple slideshows on the same page. Could some please explain to me how I would go about making the circles stay blue when clicked and revert when another is clicked?

I have found a solution to my problem. First I added an extra variable to call a function <script> myShow4 = w3.slideshow(".Slide4", 0, "demo4"); </script>
the "demo4" will be used to find the indicator dots. <span class="fa fa-circle demo4 w3-hover-text-blue w3-transparent" onclick="myShow4 .display(4)"></span>each indicator has the specific class.
`ss.display = function (n) {
ss.current = n;
w3.styleElements(ss.x, "display", "none");
w3.styleElement(ss.x[n - 1], "display", "block");
ss.indicator(demo);
}
ss.indicator = function(n) {
var dots = document.getElementsByClassName(n);
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-text-blue", "");
}
x[ss.current-1].style.display = "block";
dots[ss.current-1].className += " w3-text-blue";
}`
This is the new code in the JS file. on click the display function is called and I edited the function to also call the indicator function which changes the current slide relevant dot to blue while changing the rest to nothing or how they were before. This solution worked for me, adding another function within the called function.

iterating through childs of div with class insides :nth-child in jQuery

i am trying to iterate through the children of the div with class insides.
so far it has been a failure.
here is the html:
<div class="insides">
<div class="pen" style="background-image:url('images/video.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
fullscreen-centered-blurred-video-background
</div>
<div class="desc">
Quick video covers fullscreen with blur effect and grayscale (looping) with working input fields
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/QpyrMb">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/form.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
Loading-form
</div>
<div class="desc">
Simple and fast loading form that is displayed after loading is finished
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/PpZExY">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/horizontal.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
align-vertically
</div>
<div class="desc">
Very easy javascript that aligns children vertically within its parents because css had weak support.
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/aJNEvB">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/navbar.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
navbar-animations
</div>
<div class="desc">
navigation bar with 3 different animations. One more will be coming soon.
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/dvMpyV">
View On CodePen
</a>
</div>
</div>
</div>
.pen has opacity: 0
and when the user scrolls down a little bit i want them to show 1 by 1.
here is the javascript:
$(document).ready(function(){
window.addEventListener('scroll',function(){
var scroll = $(this).scrollTop();
$('.content').css('transform', 'translateY( '+ scroll / 2 +'px )' );
if(scroll > 120){
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','1');
}, 700*x);
}
}else{
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','0');
}, 700*x);
}
}
});
var scroll = $(this).scrollTop();
if(scroll > 120){
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','1');
}, 700*x);
}
}else{
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','0');
}, 700*x);
}
}
});
i honestly have no idea why it is not working. it just doesn't show
here is a jsfiddle: https://jsfiddle.net/f176ch6r/
it doesn't look perfect in the fiddle but it does the job

Two problems here:
the nth-child selector must be applied on your .pen elements
because of the setTimeout all your $('.insides:nth-child('+ x +')') selectors will have the same x
here is what I would write:
window.addEventListener('scroll', _onScroll);
_onScroll();
function _onScroll(){
var x,
scroll = $(this).scrollTop(),
show = scroll > 120;
$('.content').css('transform', 'translateY( '+ scroll / 2 +'px )' );
for(x = 0; x <= 4 ; x++){
_toggle(x, show);
}
}
function _toggle(index, bShow){
setTimeout(function(){
$('.insides .pen:nth-child('+ (index + 1) +')').css('opacity', bShow ? 1 : 0);
}, 700*index);
}
I also updated your jsfiddle

selecting elements javascript

I'm making a script that will notify you when someone is online on whatsapp web and i have this:
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
},1000);
now the problem is that i'm selecting an element by the class "emojitext ellipsify" th 19th and if someone texts me another element with the class "emojitext ellipsify" will be made and the 19th won't be the status anymore, so i want to know if i can select an element with the same method from css which is : element>element
like this (div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext ellipsify)
or any other possible way.
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
}, 1000);
<header class="pane-header pane-chat-header">
<div class="chat-avatar">
<div class="avatar icon-user-default" style="*somestyle*">
<div class="avatar-body">
<img src="*srcpath*" class="avatar-image is-loaded">
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-main">
<h2 class="chat-title" dir="auto">
<span class="emojitext ellipsify" title="*person'sname*"><!-- react-text: 3216 -->*person'sname*<!-- /react-text --></span>
</h2>
</div>
<div class="chat-status ellipsify">
<span class="emojitext ellipsify" title="typing…"><!-- react-text: 3219 -->*the info that i need to get(typing…)*<!-- /react-text --></span>
</div>
</div>
<div class="pane-chat-controls">
<div class="menu menu-horizontal">
<div class="menu-item">
<button class="icon icon-search-alt" title="Search…"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-clip" title="Attach"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-menu" title="Menu"></button>
<span></span>
</div>
</div>
</div>
</header>

What you are looking for is document.querySelectorAll
With that function, you can select elements with a selector, the same used with css. So, you could do this:
document.querySelectorAll(".emojitext.ellipsify")
Or put a better selector, in order to get the desired elements, and not others.
Your example would be:
document.querySelectorAll("div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext.ellipsify")

You could use JQuery, much simpler
$('parent > child')
https://api.jquery.com/child-selector/