Dynamically add incrementing class between multiple nth-children(n+) - javascript

I am looking to add an incrementing class between every 4 children.
So, "Item 1 to Item 4" should have the class ".summary-item-1" and then "Item 5 to Item 7" should have the class ".summary-item-2" and so on without stopping.
$(document).ready((function() {
$(".carousel-slides-view-4").each((function() {
$(this).find(".summary-item:nth-child(4n+1)").each((function(n) {
$(this).addClass("summary-item-" + (n + 1))
}))
}))
}));
.summary-item-1 {
color: red;
}
.summary-item-2 {
color: blue;
}
.summary-item-3 {
color: green;
}
.summary-item-4 {
color: yellow;
}
.summary-item-5 {
color: orange;
}
.summary-item-6 {
color: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-slides-view-4">
<div class="summary-item">Item 1</div>
<div class="summary-item">Item 2</div>
<div class="summary-item">Item 3</div>
<div class="summary-item">Item 4</div>
<div class="summary-item">Item 5</div>
<div class="summary-item">Item 6</div>
<div class="summary-item">Item 7</div>
<div class="summary-item">Item 8</div>
<div class="summary-item">Item 9</div>
<div class="summary-item">Item 10</div>
<div class="summary-item">Item 11</div>
<div class="summary-item">Item 12</div>
<div class="summary-item">Item 13</div>
<div class="summary-item">Item 14</div>
<div class="summary-item">Item 15</div>
<div class="summary-item">Item 16</div>
<div class="summary-item">Item 17</div>
</div>


Please try to use this code
document.querySelectorAll('.summary-item').forEach((element,index) => {
const itemIndex = parseInt(index / 4) + 1;
element.classList.add(`summary-item-${itemIndex}`);
});
.summary-item-1 {
color: red;
}
.summary-item-2 {
color: blue;
}
.summary-item-3 {
color: green;
}
.summary-item-4 {
color: yellow;
}
.summary-item-5 {
color: orange;
}
.summary-item-6 {
color: violet;
}
<div class="carousel-slides-view-4">
<div class="summary-item">Item 1</div>
<div class="summary-item">Item 2</div>
<div class="summary-item">Item 3</div>
<div class="summary-item">Item 4</div>
<div class="summary-item">Item 5</div>
<div class="summary-item">Item 6</div>
<div class="summary-item">Item 7</div>
<div class="summary-item">Item 8</div>
<div class="summary-item">Item 9</div>
<div class="summary-item">Item 10</div>
<div class="summary-item">Item 11</div>
<div class="summary-item">Item 12</div>
<div class="summary-item">Item 13</div>
<div class="summary-item">Item 14</div>
<div class="summary-item">Item 15</div>
<div class="summary-item">Item 16</div>
<div class="summary-item">Item 17</div>
</div>

Related

Showing more card using slice() JS not working

I have a section where I'm pulling blog posts and showcasing them all. By default, 13 .resourceCard's are show and then when clicking load more, 9 more should show.
However, when clicking the load more button, it only showcases the next 9, but not anything after that on subsequent click (doens't show cards 23+).
Using hiddenCard.slice(x, 9) doesn't work either as only the console log appears.
Where is my logic falling apart?
Demo
$(function () {
var loadmoreBtn = $('.resourceListing__loadmore');
var hiddenCard = $('.insertCard:hidden');
var x = 13;
loadmoreBtn.on('click', function (e) {
e.preventDefault();
x = x + 9;
console.log("click");
hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");
if(hiddenCard.length == 0){
loadmoreBtn.hide();
}
});
});
:root {
--black: #000000;
--white: #FFFFFF;
--navy: #0E185F;
}
.placeholderCard,
.resourceCard {
padding: 60px;
border: 1px solid var(--black);
margin-bottom: 30px;
width: 100%;
}
.placeholderCard {
background: var(--navy);
color: var(--white);
padding: 20px;
}
.resourceListing {
padding: 80px 0;
}
.resourceListing__loadmore {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0;
cursor: pointer;
}
.resourceListing .insertCard:nth-child(n+16) {
display: none;
}
.insertCard {
display: flex;
}
.insertCard--flex {
display: flex !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<main class="resourceListing">
<div class="container">
<div class="row resourceListing__posts">
<div class="col-4 insertCard">
<div class="resourceCard">Card 1</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 2</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">This card is not part of the slice</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 3</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 4</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">This card is not part of the slice</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 5</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 6</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 7</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 8</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 9</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 10</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 11</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 12</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 13</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 14</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 15</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 16</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 17</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 18</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 19</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 20</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 21</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 22</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 23</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 24</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 25</div>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="resourceListing__loadmore">Load more</a>
</div>
</div>
</div>
</main>

The issue here is that you get list of hidden cards once. Then process 9 items from that list without updating the list. So next time it processes the same 9 cards again.
To fix that you need update the list with:
hiddenCard = hiddenCard.slice(9);
$(function () {
var loadmoreBtn = $('.resourceListing__loadmore');
var hiddenCard = $('.insertCard:hidden');
var x = 13;
loadmoreBtn.on('click', function (e) {
e.preventDefault();
x = x + 9;
console.log("click", hiddenCard.length);
hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex")
//update the list
hiddenCard = hiddenCard.slice(9);
if(hiddenCard.length == 0){
loadmoreBtn.hide();
}
});
});
:root {
--black: #000000;
--white: #FFFFFF;
--navy: #0E185F;
}
.placeholderCard,
.resourceCard {
padding: 60px;
border: 1px solid var(--black);
margin-bottom: 30px;
width: 100%;
}
.placeholderCard {
background: var(--navy);
color: var(--white);
padding: 20px;
}
.resourceListing {
padding: 80px 0;
}
.resourceListing__loadmore {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0;
cursor: pointer;
}
.resourceListing .insertCard:nth-child(n+16) {
display: none;
}
.insertCard {
display: flex;
}
.insertCard--flex {
display: flex !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<main class="resourceListing">
<div class="container">
<div class="row resourceListing__posts">
<div class="col-4 insertCard">
<div class="resourceCard">Card 1</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 2</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">This card is not part of the slice</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 3</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 4</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">This card is not part of the slice</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 5</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 6</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 7</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 8</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 9</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 10</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 11</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 12</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 13</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 14</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 15</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 16</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 17</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 18</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 19</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 20</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 21</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 22</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 23</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 24</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 25</div>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="resourceListing__loadmore">Load more</a>
</div>
</div>
</div>
</main>
Alternatively, you could move var hiddenCard = $('.insertCard:hidden'); into click function
P.S.
You should use const and let instead of var

You can start by removing this line:
var x = 13;
because no need a counter! And then move this line:
var hiddenCard = $('.insertCard:hidden');
to beginning of click event after:
e.preventDefault();
Now with this changes, every time you click on Load More button, you create a new collection of remaining hidden cards and then make a slice of first 9 hidden cards.
Accourding to the jQuery documents:
..., the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument.
Update
After all these changes, to hide the Load Mode button, you need to update your if statement to something like this:
if(hiddenCard.slice(9).length == 0){
loadmoreBtn.hide();
}
Good luck!

After making a codepen of your code, I noticed you are not updating your 'hiddenCard' array after loading more. If you simply update the array, you code will work.
$(function () {
var loadmoreBtn = $('.resourceListing__loadmore');
var x = 13;
loadmoreBtn.on('click', function (e) {
e.preventDefault();
x = x + 9;
var hiddenCard = $('.insertCard:hidden');
hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");
hiddenCard = $('.insertCard:hidden');
if(!hiddenCard.length){
loadmoreBtn.hide();
}
});
});
:root {
--black: #000000;
--white: #FFFFFF;
--navy: #0E185F;
}
.placeholderCard,
.resourceCard {
padding: 30px;
border: 1px solid var(--black);
margin-bottom: 15px;
width: 100%;
}
.placeholderCard {
background: var(--navy);
color: var(--white);
padding: 20px;
}
.resourceListing {
padding: 80px 0;
}
.resourceListing__loadmore {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0;
cursor: pointer;
}
.resourceListing .insertCard:nth-child(n+16) {
display: none;
}
.insertCard {
display: flex;
}
.insertCard--flex {
display: flex !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<main class="resourceListing">
<div class="container">
<div class="row resourceListing__posts">
<div class="col-4 insertCard">
<div class="resourceCard">Card 1</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 2</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">This card is not part of the slice</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 3</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 4</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">This card is not part of the slice</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 5</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 6</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 7</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 8</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 9</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 10</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 11</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 12</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 13</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 14</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 15</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 16</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 17</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 18</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 19</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 20</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 21</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 22</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 23</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 24</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 25</div>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="resourceListing__loadmore">Load more</a>
</div>
</div>
</div>
</main>

<html>
<head><title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<style>
:root {
--black: #000000;
--white: #FFFFFF;
--navy: #0E185F;
}
.placeholderCard,
.resourceCard {
padding: 30px;
border: 1px solid var(--black);
margin-bottom: 15px;
width: 100%;
}
.placeholderCard {
background: var(--navy);
color: var(--white);
padding: 20px;
}
.resourceListing {
padding: 80px 0;
}
.resourceListing__loadmore {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0;
cursor: pointer;
}
.resourceListing .insertCard:nth-child(n+10) {
display: none;
}
.insertCard {
display: flex;
}
.insertCard--flex {
display: flex !important;
}
</style>
</head>
<body>
<main class="resourceListing">
<div class="container">
<div class="row resourceListing__posts">
<div class="col-4 insertCard">
<div class="resourceCard">Card 1</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 2</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">Card 3</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 4</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 5</div>
</div>
<div class="col-4 insertCard">
<div class="placeholderCard">Card 6</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 7</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 8</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 9</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 10</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 11</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 12</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 13</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 14</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 15</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 16</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 17</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 18</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 19</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 20</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 21</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 21</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 22</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 23</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 24</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 25</div>
</div>
<div class="col-4 insertCard">
<div class="resourceCard">Card 26</div>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="resourceListing__loadmore">Load more</a>
</div>
</div>
</div>
</main>
<script>
var x = 9;
$('.resourceListing__loadmore').on('click', function(event){
x = x + 9;
$('.insertCard:hidden').slice(0, 9).addClass("insertCard--flex").show();
if(!$('.insertCard:hidden').length){
$('.resourceListing__loadmore').hide();
}
});
</script>
</body>
</html>

open and close menus

I have 4 menus and with this piece of code, i can show menus and hide them with specific btns .my question is how can i when i open a menu and i don't close it and then I open another one close previous menus? i tried to store the open menu in a variable and check it when i open another one but it didn't work.
<body>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
</div>
</body>
const btns = document.querySelectorAll(".btn");
btns.forEach(btn => {
const menu = btn.parentElement;
const items = menu.querySelector(".items");
const itemsContainer = items.querySelector(".items-container");
const itemsContainerHeight = itemsContainer.getBoundingClientRect().height;
let previousActivebtn = "";
btn.addEventListener("click", (e) => {
// change btn text
if (e.currentTarget.innerHTML == "open") {
e.currentTarget.innerHTML = "close";
} else {
e.currentTarget.innerHTML = "open";
}
//show and hid the menus
if (!items.classList.contains("item-active")) {
items.classList.add("item-active");
items.style.height = itemsContainerHeight + 32 + "px";
} else {
items.classList.remove("item-active");
items.removeAttribute("style");
}
});
});

You overcomplicate it. You could create a CSS rule which would ensure that .items is hidden, unless .menu is opened:
.menu .items:not(.open) {
display: none
}
And you could create a function like this:
function open(item) {
if (!item.classList.contains("open")) {
//Hide whatever was opened
for (let it of document.querySelectorAll(.menu .items.open)) {
it.classList.remove("open")
}
item.classList.add("open");
} else {
item.classList.remove("open");
}
}
Just pass to this function the item having the class of items.

Multiple Auto-scrolling list of items

This is what I have right now
$(document).ready(function () {
var waitingTimeBottom = 2500;
var waitingTimeTop = 5000;
var animFactor = 20;
autoScroll('.qbox1');
autoScroll('.qbox2');
autoScroll('.qbox3');
autoScroll('.qbox4');
function autoScroll(qbx){
$q = $(qbx);
$m = $(qbx + ' .marq');
var mh = $m.height();
var qh = $q.height();
var xpx = mh - qh;
var animationTime = xpx * animFactor;
function scroll() {
$m.animate({'top': -xpx + "px"}, animationTime, "linear", function () {
$m.delay(waitingTimeBottom).animate({'top': '0px'}, animationTime, "linear", function () {
setTimeout(function () {
scroll();
}, waitingTimeTop);
});
});
}
if (mh > qh) {
scroll();
} else {
console.log("too few items");
}
}
});
.qbox1, .qbox2, .qbox3, .qbox4 {
height: 60vh;
width: auto;
box-sizing: border-box;
overflow: hidden;
float:left;
margin-left: 2px;
}
.marq {
position: relative;
box-sizing: border-box;
}
.item {
color: #39739d;
background-color: #E1ECF4;
border-color: #96bdd9;
box-shadow: inset 0 1px 0 #f4f8fb;
box-sizing: border-box;
padding: 5px;
margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox2">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox3">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox4">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
Out of four, a single qbox is supposed to work like
$(document).ready(function() {
var waitingTimeBottom = 2500;
var waitingTimeTop = 5000;
var animFactor = 20;
autoScroll('.qbox1');
function autoScroll(qbx) {
$q = $(qbx);
$m = $(qbx + ' .marq');
var mh = $m.height();
var qh = $q.height();
var xpx = mh - qh;
var animationTime = xpx * animFactor;
function scroll() {
$m.animate({
'top': -xpx + "px"
}, animationTime, "linear", function() {
$m.delay(waitingTimeBottom).animate({
'top': '0px'
}, animationTime, "linear", function() {
setTimeout(function() {
scroll();
}, waitingTimeTop);
});
});
}
if (mh > qh) {
scroll();
} else {
console.log("too few items");
}
}
});
.qbox1,
.qbox2,
.qbox3,
.qbox4 {
height: 60vh;
width: auto;
box-sizing: border-box;
overflow: hidden;
float: left;
margin-left: 2px;
}
.marq {
position: relative;
box-sizing: border-box;
}
.item {
color: #39739d;
background-color: #E1ECF4;
border-color: #96bdd9;
box-shadow: inset 0 1px 0 #f4f8fb;
box-sizing: border-box;
padding: 5px;
margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
Why there is a conflict when multiple qbox are inserted?

Try this...
Change
$q = $(qbx); $m = $(qbx + ' .marq'); to var $q = $(qbx); var $m = $(qbx + ' .marq');
$(document).ready(function () {
var waitingTimeBottom = 2500;
var waitingTimeTop = 5000;
var animFactor = 20;
autoScroll('.qbox1');
autoScroll('.qbox2');
autoScroll('.qbox3');
autoScroll('.qbox4');
function autoScroll(qbx){
var $q = $(qbx);
var $m = $(qbx + ' .marq');
var mh = $m.height();
var qh = $q.height();
var xpx = mh - qh;
var animationTime = xpx * animFactor;
function scroll() {
$m.animate({'top': -xpx + "px"}, animationTime, "linear", function () {
$m.delay(waitingTimeBottom).animate({'top': '0px'}, animationTime, "linear", function () {
setTimeout(function () {
scroll();
}, waitingTimeTop);
});
});
}
if (mh > qh) {
scroll();
} else {
console.log("too few items");
}
}
});
.qbox1, .qbox2, .qbox3, .qbox4 {
height: 60vh;
width: auto;
box-sizing: border-box;
overflow: hidden;
float:left;
margin-left: 2px;
}
.marq {
position: relative;
box-sizing: border-box;
}
.item {
color: #39739d;
background-color: #E1ECF4;
border-color: #96bdd9;
box-shadow: inset 0 1px 0 #f4f8fb;
box-sizing: border-box;
padding: 5px;
margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox2">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox3">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox4">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>

How can I target a box in order to hide it with jQuery?

I'm trying to make a function in order to hide the boxes with their corresponded number, but I have no idea on how to do it. I tried to figure out how to do it, but every method I come up with ends up on an error.
I'm using jQuery library and Bootstrap.
CSS :
.random {
width: 100 px;
height: 100 px;
background - color: lightgreen;
margin: 30 px;
}
HTML :
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>
JavaScript :
$(document).ready(function() {
$(".task_hidden").hide();
var box_1 = $('#box_1');
var box_2 = $('#box_2');
var box_3 = $('#box_3');
var box_4 = $('#box_4');
var box_5 = $('#box_5');
var box_6 = $('#box_6');
var box_7 = $('#box_7');
var box_8 = $('#box_8');
var box_9 = $('#box_9');
var box_10 = $('#box_10');
});
function NumberFunction(random) {
console.log(random);
if (random = 1) { box_1.hide(); }
if (random = 2) { box_2.hide(); }
if (random = 3) { box_3.hide(); }
if (random = 4) { box_4.hide(); }
if (random = 5) { box_5.hide(); }
}

Your code was not working fine because you had declared variables box_1, box_2 inside the ready function which were not able outside it i.e. not available in NumberFunction function. Also, you were assigning variables in if rather than comparing. = is assignment and == or === is for comparison.
You can improve your code to following:
$(document).ready(function() {
$(".task_hidden").hide();
});
function NumberFunction(random) {
$("#box_" + random).hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>

Unlike other answers, with each click, a box will be deleted (this is sure to happen) but in other answers may be a few clicks to remove a box.
$(document).ready(function(){
var listOfRemovedNumbers =[];
var lengthBoxs = $('[id^=box_]').length;
function getRandomNumber(){
do {
var randomNumber = Math.floor(Math.random() * 10) + 1;
} while(listOfRemovedNumbers.includes(randomNumber) );
return randomNumber;
}
$('.btn').click(function(){
var randomNumber = getRandomNumber();
$('#box_'+randomNumber).remove();
listOfRemovedNumbers.push(randomNumber);
if ((listOfRemovedNumbers.length == lengthBoxs ))
$('.btn').attr("disabled", "disabled").html('All Removed');
})
})
$(document).ready(function(){
var listOfRemovedNumbers =[];
var lengthBoxs = $('[id^=box_]').length;
function getRandomNumber(){
do {
var randomNumber = Math.floor(Math.random() * 10) + 1;
} while(listOfRemovedNumbers.includes(randomNumber) );
return randomNumber;
}
$('.btn').click(function(){
var randomNumber = getRandomNumber();
$('#box_'+randomNumber).remove();
listOfRemovedNumbers.push(randomNumber);
if ((listOfRemovedNumbers.length == lengthBoxs ))
$('.btn').attr("disabled", "disabled").html('All Boxs are Removed');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>

.random {
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>
<script>
function NumberFunction(random) {
$("#box_" + random).hide();
}
</script>

Creating a sidebar with javascript and jquery that cycles divs simultaneously

first of all, I'm new to programming and english is my second lanuage so be a little bit more tolerant! Now, I'm trying to create a side bar with html/javascript/jquery with not much success..
the examples are pretty self explanatory.
This is what I've come up with;
html code;
<div id="sidebar">
<ul id="side-rcnt-thumb-post-list">
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
</ul>
</div>
my basic javascript+jquery code;
var divs = $('div[id^="content-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
[This is an example of how it works now;][1]
[1]: https://jsfiddle.net/9020cew0/
And how it SHOULD work;
It should simultaneously AND separately cycle the li's, for example
second 1; it shows "include title 1" 6 times
second 2; it shows "include title 2" 6 times etc... you get the point!
Every time I try something...it just gets messy, I'm confused... thanks in advance..

So I've removed the transitions from this version, simply to remove factors of complication. I'm not messing with a counter, it isn't absolutely necessary. If any div has more elements than another, it will not break -- each LI is treated separately. It's available as a fiddle, or see below:
var divs = $('div[id^="content-"]').hide();
cycle();
function cycle() {
$("li").children(":visible").hide().next().show();
if ($("li").children(":visible").length == 0) {
$("li").children(":first-child").show();
}
setTimeout(cycle, 500);
}
#sidebar{
width: 250px;
margin-left:50%;
}
/*
Style Sidebar Recent Blog Posts with 75x75px Thumbnails
*/
ul#side-rcnt-thumb-post-list {
list-style: none;
margin: 0;
padding: 0;
}
#side-rcnt-thumb-post-list li {
margin-top: 15px;
overflow: hidden;
border-top: 1px solid #CCC;
padding-top: 15px;
position: relative;
min-height: 76px;
}
.srtpl-l {
float: left;
margin-right: 15px;
}
.srtpl-a {
display: block;
outline: 0!important;
font-weight: 400;
}
#side-rcnt-thumb-post-list img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.srtpl-r {
margin-left: 90px;
}
.srtpl-n {
display: block;
color: #343534;
line-height: 1.2;
font-weight: 600;
font-size: 13px;
outline: 0!important;
text-decoration: none;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div id="sidebar">
<ul id="side-rcnt-thumb-post-list">
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-11">include title 1</div>
<div id="content-22">include title 2</div>
<div id="content-33">include title 3</div>
<div id="content-44">include title 4</div>
<div id="content-55">include title 5</div>
<div id="content-66">include title 6</div>
<div id="content-77">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
</ul>
</div>

Categories

Resources