We Keep Coding

How to do an "ellipsis" like effect for non string elements and restrict rows up to 2?

The goal is to do this:
The problem is that at the end of the row 2 I need to add two "harcoded" things:
The "# more" button (only when is needed)
The "face-plus" button (always)
This is the "ellipsis" effect I am asking about.
I have tried the following:
// HTML
<div class="container">
<div class="children">
Hola1
</div>
<div class="children">
Hola2
</div>
<div class="children">
Hola3
</div>
<div class="children">
Hola4
</div>
<div class="children">
Hola5
</div>
<div class="children">
Hola6
</div>
</div>
// css
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
width: 150px;
border: 1px solid black;
padding: 5px;
height: 80px; // this makes the trick of having 2 rows
overflow: hidden; // this makes the trick of having 2 rows
}
.children {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
and I get this result:
but I am not being able to add the "fixed" elements at the end of the line 2 because I have more hidden elements on the list.
Some key points:
width of elements is dynamic
I want a maximum of 2 rows.
at the end of the row 2 I need to have the "# more" button (only when needed) and the face icon.
Thanks in advance

To avoid having to do fiddly bits of arithmetic you could clear the container, and add the elements one at a time, seeing if the one you have just added (plus its associated 'more' element and icon) go outside the bottom of the container.
If it has gone outside the bottom then go back one, so the more statement is correct.
I do not know whether you intended to put the more statement and icon into the DOM (or whether perhaps through a pseudo element having left space for them). This snippet has them in the DOM so you can click on the more element and do whatever you want to do then.
And you will have to run this code on each load and resize.
const container = document.querySelector('.container');
container.style.visibility = 'hidden'; //just in case there's a little flash as we add the elements
const cbottom = container.getBoundingClientRect().bottom;
const children = document.querySelectorAll('.children');
const num = children.length;
container.innerHTML = '<div class="moreEl"><span class="remainder">xxx</span> MORE</div><img src="youricon.jpg" style="width: 20px; aspect-ratio: 1 / 1;">';
const moreEl = container.querySelector('.moreEl');
const remainder = moreEl.querySelector('span');
// now add each child one at a time, with either the 'nn more' plus icon or just the icon in front of it until the child is outside the container when step back one
let i = 0;
for (i; i < children.length; i++) {
remainder.innerHTML = num - i - 1;
container.insertBefore(children[i], moreEl);
if ((children[i].getBoundingClientRect().top > cbottom) || (moreEl.getBoundingClientRect().top >= cbottom)) {
// can't get this element in, let alone with any associated more element, so go back one
children[i].parentElement.removeChild(children[i]);
remainder.innerHTML = num - i;
break;
}
}
if (i >= (num - 1)) {
moreEl.parentElement.removeChild(moreEl);
} else {
for (let j = i; j < num; j++) {
container.append(children[j]);
}
}
container.style.visibility = 'visible';
* {
box-sizing: border-box;
}
.container {
visibility: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
width: 150px;
border: 1px solid black;
padding: 5px;
height: 80px;
/* this makes the trick of having 2 rows */
overflow: hidden;
/* this makes the trick of having 2 rows */
}
.children {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.moreEl {
padding: 10px;
}
<div class="container">
<div class="children">
Hola1
</div>
<div class="children">
Hola2
</div>
<div class="children">
Hola3
</div>
<div class="children">
Hola4
</div>
<div class="children">
Hola5
</div>
<div class="children">
Hola6
</div>
<div class="children">
Hola7
</div>
<div class="children">
Hola8
</div>
<div class="children">
Hola9
</div>
<div class="children">
Hola10
</div>
</div>
Note: this snippet has more 'Hola' elements so it's easier to test out different container widths.

Sorting an array by using a button Sort

So I am trying to sort an array of numbers when a user clicks on the button sort or reverse and my buttons names are #sort-cards and #reverse-cards. I feel like this is something very simple I am missing but I just cannot figure out what exactly.
(function () {
var cardElements, cardValues; // Do not declare more variables here.
// WRITE CODE HERE TO MAKE THE #cards ELEMENT WORK
//Get an array of all div elements inside the #cards element.
cardElements = Array.from(document.querySelectorAll('#cards div'));
//Initialize the cardValues variable as an empty array.
cardValues = [];
//Use a forEach loop to iterate through each of the div elements (the cards) one by one.
cardElements.forEach(function (cardElements) {
//Generate a card value, a random integer between 1 and 99.
cardElements.textContent = Math.floor(Math.random() * 99) + 1;
//Push it onto the end of the cardValues array and put it in the current div element.
cardValues.push(cardElements);
//Create an event handler that moves the card to the right end whenever it is clicked, leaving the other cards in the same order, and outputs all the new card values to the card divs.
//cardElements.addEventListener('click', function() {
//}
//Do things when the sort button is clicked
document.querySelector('#sort-cards').addEventListener('click', function () {
cardElements.sort(function (a, b){
return a - b;
});
});
//Do things when the reverse button is clicked.
document.querySelector('#reverse-cards').addEventListener('click', function () {
cardElements.reverse();
});
});
}());

You are shadowing cardElements variable in the forEach callback. Also, add the event listeners once, not for every card.
document.querySelectorAll('#cards div') returns a NodeList. If you want to change the DOM, you need to manipulate it, not the JS Array you made out of it.
You can iterate over NodeLists with for ... of.
In order to be DRY, I've added the renderCards function that mutates the DOM.
(function () {
var cardElements, cardValues;
cardElements = document.querySelectorAll('#cards div');
cardValues = [];
function renderCards(newCards) {
for (let i = 0, max = cardElements.length; i < max; i++ ) {
cardElements[i].textContent = newCards[i]
}
}
for (let cardElement of cardElements){
cardElement.textContent = Math.floor(Math.random() * 99) + 1;
cardValues.push(cardElement.textContent);
};
document.querySelector('#sort-cards').addEventListener('click', function () {
cardValues.sort(function (a, b){
return a - b;
});
renderCards(cardValues);
});
document.querySelector('#reverse-cards').addEventListener('click', function () {
cardValues.reverse();
renderCards(cardValues);
});
}());
#cards {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.card {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin: 1em;
padding: 1em;
border: 1px solid #ccc;
width: 2em;
height: 2em;
}
#btns {
margin: 1.6em;
}
.btn {
cursor: pointer;
background-color: lightgreen;
padding: 1em;
margin: 0 1.6em;
}
<div id="btns">
<a class="btn" role="btn" id="sort-cards">Sort cards</a>
<a class="btn" role="btn" id="reverse-cards">Reverse cards</a>
</div>
<div id="cards">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
</div>

How to display row number next to each row on contenteditable div

I have a contenteditable div and I want the site to count each row of text the user has in the div similar to many coding IDEs. (Example image below to show what I mean:)
How would I go about doing this?

You can accomplish this with two container elements and a little bit of scripting:
$(document).ready(function(){
$('#edit').css('min-height', $('#edit').height());
$('#edit').html('');
var currentHeight = $('#edit').height();
var lineHeight = currentHeight;
$('#edit').keyup(function(){
if($(this).height()!=currentHeight){
currentHeight = $(this).height();
var lines = currentHeight/lineHeight;
$('#nums').html('')
for (i = 1; i < lines+1; i++) {
$('#nums').append('<span>'+i+'</span>')
}
}
});
});
#container{
border: 2px solid gray;
display: flex;
width: 200px;
}
#nums{
width: 25px;
background-color: lightgrey;
}
#nums span{
width: 100%;
display: block;
text-align: center;
}
#edit{
display: inline-block;
width: 100%;
}
#editwrapper{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="nums">
<span>1</span>
</div>
<div id="editwrapper">
<div id="edit" contenteditable="true">
filler
</div>
</div>
</div>

That's not so simple, actually. If a user typed in your div and the text wrapped, JavaScript doesn't know that it wrapped; there's no row to count!
This solution is super specific, and I'll leave showing the line numbers to you:
<div contenteditable="true" id="myDiv" style="width:300px;font-family:monospace" onchange="myHandler()"></div>
<script>
const limit = 40 // number of monospace chars to fill a row
let count = 0
function myHandler (e) {
let lines = Math.ceil(e.target.value.length / limit)
if (lines !== count) {
showlines(lines) // your function to display the line #s
count = lines
}
}
</script>
Takeaway: your div should be a fixed width and you should count how many monospace chars fit within that width. Then display those lines.

remove siblings class from a href

I'm using owl carousel on a menu.
when I scroll to the div the owl carousel auto slide to the right slides.
now when I arrived in the specific div I add class to the slide (active) but for some reason, I can't remove the active class from the other slides (his siblings).
I think it will be best to check the jsfiddle to understand the problem...
<div class="body">
<div class="menu">
<ul class="owl-carousel owl-theme">
Review
a
b
c
d
e
f
</ul>
</div>
JS file
$('.owl-carousel').owlCarousel({
nav: false,
dots: false,
singleItem: true,
})
var owl = $('.owl-carousel');
owl.owlCarousel();
$( window ).scroll(function() {
let scrollbarLocation = $(this).scrollTop();
let scrollLinks = $('.item');
scrollLinks.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollbarLocation){
$(this).siblings().removeClass('active-link');
$(this).addClass('active-link');
let goToSlide = $(this).attr('data-num')
owl.trigger('to.owl.carousel', goToSlide);
}
})
if( scrollbarLocation === 0){
scrollLinks.removeClass('active-link');
owl.trigger('to.owl.carousel', 0);
}
});
check https://jsfiddle.net/jt31h4pr/132/

The problem is that you remove/add active-link class on the same element ( this ). You need to removeClass only on the the element that already has class active-link.
The class active is controlled by the plugin and all the elements that are visible have the active class
See below
$('.owl-carousel').owlCarousel({
nav: false,
dots: false,
singleItem: true,
})
var owl = $('.owl-carousel');
owl.owlCarousel();
$( window ).scroll(function() {
let scrollbarLocation = $(this).scrollTop();
let scrollLinks = $('.item');
scrollLinks.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollbarLocation){
$('.active-link').removeClass('active-link'); // added
$(this).addClass('active-link');
let goToSlide = $(this).attr('data-num')
owl.trigger('to.owl.carousel', goToSlide);
}
})
if( scrollbarLocation === 0){
scrollLinks.removeClass('active-link');
owl.trigger('to.owl.carousel', 0);
}
});
.body {
height: 5000px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.item {
width: 200px;
height: 70px;
background: red;
margin: 0 15px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 4px solid transparent;
}
.active-link {
border-bottom: 4px solid #000;
}
.menu {
position: fixed;
top: 0;
}
section {
width: 100%;
height: 600px;
background: #f8f9fb;
}
#a {
background: lightblue;
margin-top: 200px;
}
#b {
background: lightgreen;
}
#c {
background: tomato;
}
#d {
background: lightpink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<div class="body">
<div class="menu">
<ul class="owl-carousel owl-theme">
Review
a
b
c
d
e
f
</ul>
</div>
<section id="a"></section>
<section id="b"></section>
<section id="c"></section>
<section id="d"></section>
</div>

Look into this fiddle
https://jsfiddle.net/09sLpuwd/1/
What are you doing wrong is trying to remove active class from this and then add active class to the same this, which actualy do nothing.
Insted what I propose is to remove active class from all '.item' emelements and than add it to active one.
As alternative aproach you can store previous item and remove class from it, but I think first way is better.

Hi the problem is with below line
$(this).siblings().removeClass('active-link');
replace it with
$("div.active a").removeClass('active-link');
This was removing and adding class on same time on all so what i did is once i am removing the class from all i am adding it on present elemnt

Auto Animate Scroll to Right of an Element that Overflows its Container?

I have a group of elements which fade in and out, (one after another), within a containing div (.info). Some of the elements stay within the container when they appear, while others overflow the container, which is not preferred.
When such a circumstance occurs, I would like for some kind of horizontal/auto-scroll effect to be applied, so it can reveal the beginning to the end of the overflowing text element, while still remaining on a single line. Is there any way to accomplish this with JQuery?
Here is a snippet of the progress I have made so far:
(function() {
var tab = $(".info .tab");
var tabIndex = -1;
function showNextTab() {
++tabIndex;
tab
.eq(tabIndex % tab.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextTab);
}
showNextTab();
})();
.info {
background: skyblue;
display: inline-block;
line-height: 1;
width: 500px;
padding: 20px;
box-sizing: border-box;
}
.info .tab {
display: none;
}
h2.tab {
margin: 0;
padding: 0;
border: 0;
white-space: nowrap;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info">
<h2 class="tab">This is the first line.</h2>
<h2 class="tab">This is the second line.</h2>
<h2 class="tab">This is the third line (which is longer than the first and second line.)</h2>
<h2 class="tab">This is the fourth line (which is longer than the first, second, and third line.)</h2>
</div>
UPDATE: Scroll Effect Added/Still Troubleshooting
Here is an updated snippet, with recent recommendations applied:
var myVar = "";
(function() {
var tab = $(".info .tab");
var tabIndex = -1;
function showNextTab() {
++tabIndex;
myVar = setInterval(myTimer, 1000);
tab
.eq(tabIndex % tab.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextTab);
}
showNextTab();
})();
function myTimer() {
var leftPos = $(".info").scrollLeft();
$(".info").animate({
scrollLeft: leftPos + 200
}, 800);
myStopFunction();
}
function myStopFunction() {
clearInterval(myVar);
}
.info-wrap {
background: skyblue;
display: inline-block;
line-height: 1;
width: 500px;
padding: 20px;
}
.info {
display: inline-block;
line-height: 1;
width: 500px;
overflow: hidden;
}
.info .tab {
display: none;
}
h2.tab {
margin: 0;
padding: 0;
border: 0;
line-height: 1;
white-space: nowrap;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<duv class="info-wrap">
<div class="info">
<h2 class="tab">This is the first line.</h2>
<h2 class="tab">This is the second line.</h2>
<h2 class="tab">This is the third line (which is longer than the first and second line.)</h2>
<h2 class="tab">This is the fourth line (which is longer than the first, second, and third line.)</h2>
</div>
</div>
Question 1: Why is the fourth <h2 class="tab"> element not scrolling from the beginning? It seems to be starting from a halfway point, to the right.
Question 2: How can the speed of the slide-left animation be modified? I am trying to understand what the myVar = setInterval(myTimer, 1000); is targeting, and also scrollLeft: leftPos + 200}, 800);.

EXPLANATION:
Question1 : Because the width of scroll maximum is relative based on how many characters are created to make the width of scroll size. Right when the function is initialed, the variable $('.info').scrollLeft() seems save the previous point. Therefore, I re-initial that code by adding this code:
$(".info").animate({scrollLeft: 0}, 0); //$(.info) point = 0
Question2 : The left side animation can be speed up by increasing the value of leftPos. And this myVar = setInterval(myTimer, 1000); is to determine the start point. It means the function will begin at 1 sec.
Anyway here is the example below
var myVar = "";
(function() {
var tab = $(".info .tab");
var tabIndex = -1;
function showNextTab() {
++tabIndex;
myVar = setInterval(myTimer, 1000);
tab
.eq(tabIndex % tab.length)
.fadeIn(2000)
.delay(1000)
.fadeOut(2000, showNextTab);
$(".info").animate({scrollLeft: 0}, 0);
}
showNextTab();
})();
function myTimer() {
var leftPos = $('.info').scrollLeft();
$(".info").animate({scrollLeft: leftPos + 1500}, 800);
myStopFunction();
}
function myStopFunction() {
clearInterval(myVar);
}
.info {
background: skyblue;
display: inline-block;
line-height: 1;
width: 500px;
padding: 20px;
box-sizing: border-box;
overflow:scroll;
}
.info .tab {
display: none;
}
h2.tab {
margin: 0;
padding: 0;
border: 0;
white-space: nowrap;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info">
<h2 class="tab">This is the first line. testtesttesttesttesttesttttttttttt</h2>
<h2 class="tab">This is the second line.</h2>
<h2 class="tab">This is the third line (which is longer than the first and second line.)</h2>
<h2 class="tab">This is the fourth line (which is longer than the first, second, and third line.)</h2>
</div>