Multiple div height columns on row using JQuery

Multiple div height columns on row using JQuery - javascript

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);
});
});

Related

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

Angular JS: How to get a dynamic input value into ngclick function

I have an html template with a input that has a dynamic id.
The value from this input element is used to determine how much of an item should be added to my cart. My issue is that I cannot figure out how to access this input element using ngclick.
<div>
<div ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height:30em;">
<div class="container-fluid h-100" >
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
//This is the input that I need the value from.
<input id="{{'input-'+item.itemNo}}" class="addAmount" type="number"/>
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
//this is where the ng-click function is
<input class="addToCartButton btn btn-success" ng-click="addItem(item,{{item.itemNo}})" type="button"value="Add to Cart"/>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You'll need to use the ngModel directive, like this:
<input id="input-{{item.itemNo}}" class="addAmount" type="number" ng-model="item.itemNo" />
The Add to Cart button must be calling to addItem function in this way:
<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
See in this example:
(function() {
var app = angular.module("app", []);
app.controller("Controller", ["$scope", function($scope) {
$scope.$ctrl = {
items: [{
itemType: "floor",
itemName: "itemName 1",
itemDesc: "itemDesc 1",
itemNo: 1
}, {
itemType: "floor",
itemName: "itemName 2",
itemDesc: "itemDesc 2",
itemNo: 2
}]
};
$scope.addItem = function(item, itemNo) {
console.log(item, itemNo);
};
}]);
}());
.item {
border: #ccc solid 1px;
border-radius: 5px 5px;
height: 10em;
margin: 0.5em;
padding: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Controller">
<div class="item" ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height: 10em;">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
// This is the input that I need the value from.
<input id="input-{{item.itemNo}}" class="addAmount" type="number" ng-model="item.itemNo" />
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
// This is where the ng-click function is
<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Update: If you need to get the input number value you could use: document.getElementById(input-${itemNo}).
See in this example:
(function() {
var app = angular.module("app", []);
app.controller("Controller", ["$scope", function($scope) {
$scope.$ctrl = {
items: [{
itemType: "floor",
itemName: "itemName 1",
itemDesc: "itemDesc 1",
itemNo: 1
}, {
itemType: "floor",
itemName: "itemName 2",
itemDesc: "itemDesc 2",
itemNo: 2
}]
};
$scope.addItem = function(item, itemNo) {
let input = document.getElementById(`input-${itemNo}`);
if (input) {
console.log(input.value);
}
};
}]);
}());
.item {
border: #ccc solid 1px;
border-radius: 5px 5px;
height: 10em;
margin: 0.5em;
padding: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Controller">
<div class="item" ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height: 10em;">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
// This is the input that I need the value from.
<input id="input-{{item.itemNo}}" class="addAmount" type="number" />
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
// This is where the ng-click function is
<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

how to display selected div and hide others sibling div?

I want that all unselected div will disappear and will show me only the selected card. i have different card which ids are dynamic (default++) using loop and also i added affect that when use select div it chose red border over div.
I tried different method when i click on the selected div that selected div will remain the rest div will be disappeared.
//Showing border on the selected card
$('.selects').click(function() {
if ($('.selects.choice').length > 0) {
$('.choice').removeClass('choice');
$(this).addClass('choice');
} else {
$(this).addClass('choice');
}
});
.card{
margin:5px;
width:140px;
display: flex !important;
justify-content: center;
align-items:center;
}
#operatorImage >img {
width:100px;
height:50px;
}
.choice {
border: 3px #CA0B00 solid;
text-decoration: none;
}
.operator-card{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="default-0" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
<div id="default-3" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Nigira</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">MTN</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>

You can just toggle between siblings something like this:
$('.card-body').click(function() {
$('.card-body').not(this).hide();
});
.card {
margin: 5px;
width: 140px;
display: flex !important;
justify-content: center;
align-items: center;
}
#operatorImage>img {
width: 100px;
height: 50px;
}
.choice {
border: 3px #CA0B00 solid;
text-decoration: none;
}
.operator-card {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="default-0" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 ">
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 ">
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
</div>
</div>
</div>
</div>

Something like this?
var $selects = $('.selects');
$selects.click(function() {
$selects.not(this).removeClass('choice').hide();
$(this).addClass('choice');
});
just tested and it works... but you will have to remove this important in css:
display: flex !important;

The JS code fails to execute (or do anything) when I click the submit button

I'm just learning Javascript, and this is my first attempt to make something for myself, so forgive me if the solution is very simple. I'm trying to automate score keeping for a card game. When I click the submit button, nothing happens.
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne">
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber">
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="golf.js"></script>
And the javascript:
var round = 0;
var scoreShayne = 0;
var scoreAmber = 0;
function tallyScore() {
round += 1;
document.getElementById(round).innerHTML = "Round: " + round;
scoreShayne += document.getElementById("inputShayne").value;
scoreAmber += document.getElementById("inputAmber").value;
document.getElementById(shayne).innerHTML = scoreShayne;
document.getElementById(amber).innerHTML = scoreAmber;
}

some recommandations in this code, just to see ;)
// global values
var round = 0
, scoreShayne = 0
, scoreAmber = 0
;
// use constants to prevent the JS interpreter from recalculating each call
const hmi_round = document.getElementById('round')
, hmi_shayne = document.getElementById('shayne')
, hmi_amber = document.getElementById('amber')
, hmi_inputShayne = document.getElementById('inputShayne')
, hmi_inputAmber = document.getElementById('inputAmber')
;
function tallyScore()
{
hmi_round.textContent = "Round: " + ++round; // ++round is a direct increment (different from round++ )
hmi_shayne.textContent = scoreShayne += hmi_inputShayne.valueAsNumber; // HTML5 as valueAsNumber
hmi_amber.textContent = scoreAmber += hmi_inputAmber.valueAsNumber; // instead of parseInt(hmi_inputAmber.value)
hmi_inputShayne.value = "0"; // reset values for the next round
hmi_inputAmber.value = "0";
}
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne" type="number"min="0" value="0"> <!-- don't forget to set the type -->
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber" type="number" min="0" value="0"> <!-- don't forget to set the type -->
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>

Script for tabs with progress bar

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>

Develop Reference

JavaScript is the programming language of the Web.

Multiple div height columns on row using JQuery - javascript

Related

Get text content of all parent divs

Angular JS: How to get a dynamic input value into ngclick function

how to display selected div and hide others sibling div?

The JS code fails to execute (or do anything) when I click the submit button

Script for tabs with progress bar

Categories

Resources