Wrapping slider in div decreasing height

Wrapping slider in div decreasing height - javascript

Im using this slider .
Here is demo link
http://www.idangero.us/sliders/swiper/demos/main-demos/17-responsive.html
but I want to wrap this slider in a div but when i do it decreases the height to 125px from 100%
original code
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide pink-slide">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 6</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 7</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 8</div>
</div>
</div>
<div class="pagination"></div>
</div>
my code:
<div class="bodycontent">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide pink-slide">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 6</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 7</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 8</div>
</div>
</div>
<div class="pagination"></div>
</div>
</div>

Just add this CSS:
.bodycontent {
height: 100%
}

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>

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 layout using bootstrap grid with polygonal shape

I am trying to create a layout using bootstrap grid in polygonal shape but somehow the layout height is not matching, I tried to match height using JS but cant get it, may be if somebody have idea of doing it in other way, please help!
Here is the example how I am trying to achieve, please note that every column would have hover effect as well and in the same shape as its showing by default:
Here is JSfiddle demo
CSS
<style>
.main-wrapper{float:left; width:100%; background:#cccccc;}
.col-md-3{border: 1px solid black;}
.overflowH{overflow: hidden;}
</style>
HTML
<div class="container-fluid">
<div class="row fullH overflowH">
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
</div>
</div>
</div>
jQuery
//Resize div height to viewport size
function setHeight() {
windowHeight = $(window).innerHeight();
$('.fullH').css('height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
//Rotated box
$('.col-md-3').height( Math.round( $('.col-md-3').width() ) * Math.tan(0.523599) );
$('.col-md-3').css('transform', 'skewY(-30deg)');

As mentioned above by #Brett Gregson rotating row instead of column should be good idea, check the code below, I have created custom col instead of bootstrap so you just need to write media query for that to make it work in responsive.
Here is the code:
CSS
.col-md-25{border: 1px solid black; width:20%; float:left;}
HTML
<div class="container-fluid">
<div class="row" style="margin-top:-465px;">
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
</div>
jQuery
$('.col-md-25').height( Math.round( $('.col-md-25').width() ) * Math.tan(0.523599) );
$('.row').css('transform', 'skewY(-25deg)');

How to add div with class every second item

Please help..
How to add div with class every second item.
I have a list item:
<div class="col-sm-3">
<div class="product rotation">
<div>data 1</div>
</div>
<div class="product rotation">
<div>data 2</div>
</div>
<div class="product rotation">
<div>data 3</div>
</div>
<div class="product rotation">
<div>data 4</div>
</div>
</div>
I want to add div with class every second item:
<div class="col-sm-12">
<div class="col-sm-3 col-md-3 double-product">
<div class="product rotation">
<div>data 1</div>
</div>
<div class="product rotation">
<div>data 2</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-3 col-md-3 double-product">
<div class="product rotation">
<div>data 3</div>
</div>
<div class="product rotation">
<div>data 4</div>
</div>
</div>
</div>
How to add div with class every second item.
Thank you.

In order to achieve the output provided in your code, use the following.
This uses wrapAll() in a loop.
products = $('.product');
for(var i = 0; i < products.length; i+=2) {
products.slice(i, i+2).wrapAll('<div class="col-sm-12"><div class="col-sm-3 col-md-3 double-product"></div></div>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-sm-3">
<div class="product rotation">
<div>data 1</div>
</div>
<div class="product rotation">
<div>data 2</div>
</div>
<div class="product rotation">
<div>data 3</div>
</div>
<div class="product rotation">
<div>data 4</div>
</div>
</div>

Remove elements in DOM

can some one show how to work with few elements in DOM and move them from one block to another, I need use jQuery, for example I have this structure
<div class="block">
<div class="block_left">
<div class="title">title 1</div>
<div class="image">image 1 for title 1</div>
</div>
<div class="block_right">
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 2</div>
<div class="image">image 2 for title 2</div>
</div>
<div class="block_right">
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 3</div>
<div class="image">image 3 for title 3</div>
</div>
<div class="block_right">
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 4</div>
<div class="image">image 4 for title 4</div>
</div>
<div class="block_right">
</div>
</div>
I was trying to use jQuery .each() but not that I need. In result I need this:
<div class="block">
<div class="block_left">
<div class="title">title 1</div>
</div>
<div class="block_right">
<div class="image">image 1 for title 1</div>
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 2</div>
</div>
<div class="block_right">
<div class="image">image 2 for title 2</div>
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 3</div>
</div>
<div class="block_right">
<div class="image">image 3 for title 3</div>
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 4</div>
</div>
<div class="block_right">
<div class="image">image 4 for title 4</div>
</div>
</div>
How do I remove elements? Thanks

To append the .image elements to the next .block_right elements you can do
$('.block_right').append(function() {
return $(this).prev().find('.image');
});
FIDDLE

$(".image").each(function() {
$(this).parent().parent().find(".block_right").append($(this));
});
Try that code, should work!
Goodluck.

One possible solution with .each():
$('.block .image').each(function() {
$(this).closest('.block').find('.block_right').append(this);
});
DEMO: http://jsfiddle.net/6afBy/

Try to use appendTo() here:
$('.block_left .image').each(function() {
$(this).appendTo($(this).parent().next());
});
Fiddle Demo

Develop Reference

JavaScript is the programming language of the Web.

Wrapping slider in div decreasing height - javascript

Just add this CSS: .bodycontent { height: 100% }

Related

Showing more card using slice() JS not working

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

Creating a layout using bootstrap grid with polygonal shape

How to add div with class every second item

Remove elements in DOM

Categories

Resources