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>
What approach can I take when I want to include multiple classes within a JQuery same height script?
I currently have four different divs classed as '.row-16' and it works perfectly, but how can I add more groups to this specific script?
I want to include .row-1 .row-2 etc..
Sorry for the confusion, but this is ultimately what I'm trying to achieve.
.row-1 has four columns that will all be the same height size depending on highest.
.row-2 will be separate from row-1 and will have it's own equal height columns.
Updated JSFiddle: http://jsfiddle.net/fLr9th4y/3/ - Working example on Row-11
Here is the code:
$(document).ready(function(){
$('.container').each(function(){
var highestBox = 0;
$(this).find('.row-16').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
})
$(this).find('.row-16').height(highestBox);
});
});
The above script currently aligns all four of my columns with the correct height, I just want to add more class groups.
Why not adding a new class, specifically for the elements that should have their height changed and target that? BTW, here is a similar script that I used a couple of years ago for such occasions.
(function ($, window, document, undefined) {
/**
* Equalize the height of the given items.
* #type {*|jQuery}
* #return mixed
* #param options
* Example: $('.item1, .item2').equalHeight({ container: '.container' });
*/
$.fn.equalHeight = function (options) {
var items, settings;
items = this;
settings = $.extend({
container: ''
}, options);
if (settings.container) {
// If a container is set, apply setHeight() for all containers.
$(settings.container).each(function () {
var thisC = $(this),
getItems = [];
$.each(items, function (index, value) {
getItems.push(thisC.find(value));
});
return setHeight(getItems);
});
} else {
// Otherwise we assume that the items exist only once in a page
// and we apply setHeight() to their first (and unique) instance.
return setHeight(this);
}
// Set the height of all items equal to the highest item.
function setHeight(getItems) {
var itemsH = [];
$(getItems).each(function () {
itemsH.push($(this).outerHeight());
});
var maxH = Math.max.apply(Math, itemsH);
$(getItems).each(function () {
return $(this).css('height', maxH);
});
}
}
})(jQuery, window, document);
(Demo)
Of course, I don't need it anymore, thanks to flexbox.
This should select each class that starts with "row", then get each unique one and then get the max height for each class and set all those to the max of the largest.
Per the question update, using the question and fiddle for possible answer using a given "row-" begins with, which does not seem to be in the fiddle but is in the question.
var myselector = 'row-';
function getRowMax(row) {
var heights = $(row).map(function() {
return $(this).height();
}).get();
var maxHeight = Math.max.apply(null, heights);
return maxHeight;
}
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function getrow(value, index, self) {
return value.startsWith(myselector);
}
$(function() {
var rows = $('.container').find("[class^='" + myselector + "']");
var classListAll = [];
rows.each(function(item) {
var classes = item.attr('class').split(/\s+/);
classListAll.concat(classes);
});
// var classListAll = rows.attr('class').split(/\s+/);
var classList = classListAll.filter(onlyUnique).filter(getrow);
$.each(classList, function(index, item) {
var sel = '.' + item;
var m = getRowMax(sel);
$(sel).height(m);
});
});
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4,
h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}
.row>.col-md-12>span {
font-size: smaller;
}
.col-md-4>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev,
.slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
/* ----- */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
});
});
</script>
</body>
Easy:
$(document).ready(function() {
$('.container').each(function() {
var highestBox16 = 0;
var highestBox1 = 0;
var highestBox2 = 0;
var highestBox3 = 0;
//var highestBox..
$(this).find('.row-16,.row-1,.row-2,.row-3').each(function() {
if($(this).hasClass('row-16')){
if ($(this).height() > highestBox16) {
highestBox16 = $(this).height();
}
}
if($(this).hasClass('row-1')){
if ($(this).height() > highestBox1) {
highestBox1 = $(this).height();
}
}
if($(this).hasClass('row-2')){
if ($(this).height() > highestBox2) {
highestBox2 = $(this).height();
}
}
if($(this).hasClass('row-3')){
if ($(this).height() > highestBox3) {
highestBox3 = $(this).height();
}
}
})
$('.row-16,.row-1,.row-2,.row-3').height(highestBox);
});
});
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>
I wrote some script for fancy tabs with progress bar.
It is works but I got a problem: I use delay to make progress bar running and when you click to 1 then 3, 4 or any other tab and the back to 1 - got problems: progress bar breaks and leaves coloured parts.
var numberold = -1;
function check(number) {
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0);
.year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}
<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can try this
Now I am tired and dont know how to fix this.
I need a idea how to change algorithm or find unique solution for this.
Can somebody help?
You need to prevent any animation until the previous animation is done.
I added two vars finished1 & finished2 which will be true only when all animations are done
And if the function check(number) is activated while they are false .. the function must wait till they become true
Just like a traffic signal ;)
See the edited JavaScript
var numberold = -1;
var finished1 = true;
var finished2 = true;
function check(number) {
if(!finished1 || !finished2) {
window.setTimeout(function(){ check(number) }, 100);
return;
}
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
finished1 = false;
finished2 = false;
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
} else {
finished1 = true;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
} else {
finished2 = true;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
} else {
finished1 = true;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
} else {
finished2 = true;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0);
.year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}
<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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%
}