So i am really confused on this one.
As you can see in developer tools on mobile everything looks fine with the layout but when i deploy a live version the stars overlap. I firstly thought this could be a safari based issue or device issue of some sort. But it is the same in chrome and on any mobile device. On desktops it is fine. I thought this could also be how the stars are being dynamically loaded onto the page so i changed the positioning of the script tags to place them at the end of the body but to still no avail.
Here is the output once live
MARKUP:
#* Brands *#
<section class="container container12 mb-5" id="indexBrands">
<div class="row">
<div class="col-12 text-center my-3">
<p class="h2">Featured Brands</p>
</div>
</div>
<div class="row p-xs-2">
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="/info/korniche"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/korniche.jpg" alt="Korniche flat glass lanterns" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Sleek and elegant glass roof lanterns ideal for elevating your flat roof extensions.</p>
</div>
<div class="col d-flex justify-content-center align-items-end">
<div class="korniche-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/korniche" id="signaturetCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/eco-plus-flat-roof-lights"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/eco-plus.jpg" alt="ECO+ Flat Glass Rooflights" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Eco friendly pitched and flat roof windows designed for adding natural light with minimum fuss.</p>
</div>
<div class="col d-flex justify-content-center align-items-end">
<div class="eco-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/eco-plus-flat-roof-lights" id="ecoCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down-->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/signature"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/signature.jpg" alt="Signature rooflights" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Fully certified, UK-manufactured rooflights. The number one choice for bespoke flat roof glazing solutions.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="signature-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/signature" id="signaturetCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-sm-block"></div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/velux"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/velux.jpg" alt="VELUX Pitched and flat roof windows" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">World renowned pitched roof windows built for creating a brighter and healthier indoor climate.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="velux-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/velux" id="veluxCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/rooflite"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/rooflite.jpg" alt="Rooflight roof windows" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Pitched roof windows guaranteed to brighten up your loft conversion without breaking the bank.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="rooflight-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/rooflite" id="rooflightCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/lightway"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/lightway.jpg" alt="Lightway sun tunnels" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Precision engineered Crystal sun tunnels perfect for introducing daylight into the darker areas of a property.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="lightway-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/lightway" id="lightwayCount"></a>
</div>
</div>
</div>
</div>
</section>
<script src="~/Content/JS/getStarRating.js"></script>
<script src="~/Content/JS/insertStars.js"></script>
getStarRating.js:
$(document).ready(function () {
$.get("/api/feefo/132",
function (data) {
kornicheRating(data.Rating);
});
$.get("/api/feefo/10",
function (data) {
ecoRating(data.Rating);
});
$.get("/api/feefo/108",
function (data) {
signatureRating(4.0);
});
$.get("/api/feefo/7",
function (data) {
veluxRating(data.Rating);
});
$.get("/api/feefo/5",
function (data) {
rooflightRating(data.Rating);
});
$.get("/api/feefo/74",
function (data) {
lightwayRating(data.Rating);
});
});
insertStars.js:
function kornicheRating(rating) {
$(".korniche-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function ecoRating(rating) {
$(".eco-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function signatureRating(rating) {
$(".signature-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function veluxRating(rating) {
$(".velux-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function rooflightRating(rating) {
$(".rooflight-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function lightwayRating(rating) {
$(".lightway-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
Related
I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.
My web-app is about forecasting on sports games.
My page shows all the matches and the points you can get out of each outcome from a match (Madrid = 12 points VS Barcelone = 15 points).
So a user check a box from a match and select for him the right outcome.
I would like each time the user check a box, to show him the number of boxes he checked.
Here is my Javascript to count the box checked :
const updateCount = function() {
var x = document.querySelectorAll(".square:checked").length;
document.querySelector(".plus").innerHTML = x;
};
Here is the HTML where the number of box checked will be displayed
<div class=" d-flex pt-2">
<h3 class="typos">Matchs pronostiqués</h3>
<h3 class="typos pts" style="font-weight: bold; padding-left: 5px;"><%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50</h3>
<span class="plus"></span>
</div>
Here is my Javascript in order to know which game the user forecasted and which outcome he selected :
const selectOutcome = () => {
const selects = document.querySelectorAll(".square");
selects.forEach((outcome)=>{
outcome.addEventListener("click",(event) => {
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
const result = event.currentTarget.dataset.outcome;
console.log(result);
const id = event.currentTarget.parentNode.dataset.id;
console.log(id);
const box = event.currentTarget.checked;
console.log(box);
const url = 'store_outcome?result='+result+'&match='+id+'&box='+box
fetch(url)
.then(response => response.json())
.then((data) => {
console.log(data);
});
});
});
}
const validePanier = () => {
const panier = document.getElementById('panier');
panier.addEventListener("click", (event) =>{
console.log("click")
const player = document.getElementById('season_player').value;
fetch('confirm_pending?player='+player)
.then(response => response.json())
.then((data) => {
console.log(data);
});
})
}
Here is my HTML, for each match I have in my database, a match is going to appear in front in this way.
<% #matches.each do |match| %>
<% if Time.parse(match.kick_off) > Time.now && current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? && match.points_home.present? %>
<% if match.sport == "football" %>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo"><%= match.league %></h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit"><%= DateTime.parse(match.kick_off).to_date%></h3><h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2"><%= match.kick_off.to_s.gsub("T", " ").split[1].gsub("+", " ").split[0]%></h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="<%= match.id %>">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo"><%= image_tag "#{match.team_home_logo_url}", width: 50 %></h3>
</div>
<div class="row text-align-center">
<h3 class="tit"><%= match.team_home %></h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="<%= match.id %>">
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="1"></input>
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL"></input>
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="2"></input>
</div>
</div>
</div>
There is a data-id. The purpose is when a user check a box, I can get the id of the match, in order to create the right forecast for the right game.
I would delegate instead of having inline event handlers
Here I COUNT the checkboxes - why do you not want the VALUE of a checked RADIO?
Note I wrapped all matches in <div id="matches">...</div>
document.getElementById("matches").addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.classList.contains("square")) {
const parent = tgt.closest(".displaysquares");
var x = parent.querySelectorAll(".square:checked").length;
document.querySelector(".plus").innerHTML += parent.dataset.id + ": " + x +"<br/>" ;
}
})
<span class="plus"></span>
<div id="matches">
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 1</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 1">
<input type="checkbox" class="square" data-outcome="1">
<input type="checkbox" class="square" data-outcome="NULL">
<input type="checkbox" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 2</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 2">
<input type="checkbox" class="square" data-outcome="1">
<input type="checkbox" class="square" data-outcome="NULL">
<input type="checkbox" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
</div>
Using Radios instead
const matches = document.getElementById("matches")
matches.addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.classList.contains("square")) {
var x = [...matches.querySelectorAll(".square:checked")].map(chk => chk.closest(".displaysquares").dataset.id + ": "+chk.dataset.outcome)
document.querySelector(".plus").innerHTML = x.join("<br/>");
}
})
<span class="plus"></span>
<div id="matches">
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 1</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 1">
<input type="radio" name="outcome1" class="square" data-outcome="1">
<input type="radio" name="outcome1" class="square" data-outcome="NULL">
<input type="radio" name="outcome1" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 2</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 2">
<input type="radio" name="outcome2" class="square" data-outcome="1">
<input type="radio" name="outcome2" class="square" data-outcome="NULL">
<input type="radio" name="outcome2" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
</div>
I'm using JavaScript to change the price value of the div based on the selected div, the price is already defined in the div, if I click on any div it should updated the value in the another div as well. so far I have try below code but it doesn't work, it changes the value of only first div. if I click on another div it repeats the same price value.
Here's the code I have tried so far!
let pricebox = document.getElementById('pricingdata');
const totalprice = document.querySelector("#totalprice");
pricebox.addEventListener('click', function(e) {
let mainprice = document.getElementById("pricecad").innerHTML;
console.log(mainprice);
totalprice.innerHTML = '$' + mainprice;
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
This code should work. Click Run code snippet and check the result.
const totalprice = document.querySelector("#totalprice");
const priceboxes = document.querySelectorAll('.pricing-box-cad');
for (var i = 0; i < priceboxes.length; i++) {
priceboxes[i].onclick = (e) => {
const mainprice = e.currentTarget.querySelector('.pricecad').innerText;
totalprice.innerText = '$' + mainprice;
}
}
<div class="row text-center pricing-box">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
remove all id="pricecad" as polyglot wrote, ids must be unique
you are looking for event delegation, replace your code by:
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
if (!e.target.matches('span.display-5')) return // ignore clicks else where
totalprice.textContent = '$' + e.target.textContent;
});
for click on every .pricing-box-cad' elements do
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
let pricingBox = e.target
while (!pricingBox.matches('div.pricing-box-cad'))
{
if (!pricingBox.parentElement) break
pricingBox = pricingBox.parentElement
}
if (!pricingBox.matches('div.pricing-box-cad')) return // ignore clicks else where
totalprice.textContent = '$' + pricingBox.querySelector('span.display-5').textContent
});
Again using bubbling/delgation, this method uses closest to find the ".pricing-box-cad" ancestor of the element clicked then gets the element with the price. Note the duplicate IDs have been moved to class.
Also note if you need to support IE (for a start I'm sorry about that!) you will need to use a pollyfill (mentioned in the link above).
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Find closest pricing box ancestor
let priceBox = e.target.closest(".pricing-box-cad")
if(priceBox) {
let price = priceBox.querySelector(".pricecad").innerText;
//console.log(price)
totalprice.textContent = "$" + price;
}
//Alert if clicked outside a pricing box
else {alert("clicked outside area") }
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
Now just for fun, I wanted to see how much I could do in CSS alone with minimal JS. So I came up with the below. This is for demonstration purposes only and is really just to show what you can achieve with minimal JS.
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Get value from radio button
let value = this.querySelector("[name=price]:checked").value;
//UPdate Attribute on price CSS will take care of the rest
totalprice.dataset.total = "$" + value;
});
#pricingdata label {
display:block;
}
#pricingdata :checked + label {
background-color:#CCC;
}
#pricingdata input[type=radio] {
display:none;
}
#totalprice:before {
content : attr(data-total)
}
<div class="row text-center pricing-box" id="pricingdata">
<input type="radio" value="30" id="rdoPrice1" name="price">
<label for="rdoPrice1" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="31" id="rdoPrice2" name="price">
<label for="rdoPrice2" class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice3" name="price">
<label for="rdoPrice3" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice4" name="price">
<label for="rdoPrice4" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="69" id="rdoPrice5" name="price" checked>
<label for="rdoPrice5" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice" data-total="$69"></strong></div>
</div>
I have added toggler on them. now all i want is when one is clicked other two hide their corresponding div's? Here is the code:
$(document).ready(function(){
$('.btn').click(function(){
var scl = this.className.split(/\s+/)[1];
console.log(scl);
$('#' + scl).toggle('slow');
// document.getElementById('applied').style.display = 'none';
// document.getElementById('shortlisted').style.display = 'none';
});
});
and here are the buttons i'm using to toggle.
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
these are the divisions i'm toggling
<div class="container" id="openings"></div>
<div class="container" id="applied"></div>
<div class="container" id="shortlisted"></div>
You can hide all the container initially. Then on click first hide them and toggle the respective container matching the id attribute:
$(document).ready(function(){
$('.btn').click(function(){
// you can set some style on the seleced button
$('.btn').css({'background-color': '', color: ''});
$(this).css({'background-color': 'green', color: '#fff'});
//
var scl = this.className.split(/\s+/)[1];
$('.container').hide('slow');
$('#' + scl).toggle('slow');
});
});
.container{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
<div class="container" id="openings">Openings</div>
<div class="container" id="applied">Applied</div>
<div class="container" id="shortlisted">Shortlisted</div>
Filterout the current button on click and find their parent "div"s and hide them.
$(document).ready(function(){
$('.btn').click(function(){
$('.btn').not(this).each( function(btn) {
$(this).parents("div").hide("slow");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
<div class="container" id="openings"></div>
<div class="container" id="applied"></div>
<div class="container" id="shortlisted"></div>
I have a section on my site container-fluid,row, with two equal col-md-4 sections. the right section has image, the left has header and paragraph on the next row it switches image on the left and header/paragraph on right and so on for six sections. I am trying to re order for mobile where the image is above the header / P on every section. I have tried using order-sm-1 and order-sm-2 on the divs but not having luck. it is just changing the order on all breakpoints. here is first section.....
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="col-md-4">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="col-md-4 mr-5 text-center"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
I don't think there is a order-sm-* class similar to how col-sm-* has been changed to col-* so I believe the answer would be to do:
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="order-2 order-md-1 col-md-4">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="order-1 order-md-2 col-md-4 mr-5 text-center"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="col-md-4 order-2 order-md-0">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="col-md-4 mr-5 text-center order-1 order-md-0"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
Anything smaller than medium (xs & sm) will have image at top as its order is set to 1 and the other div has order 2. In med+ the orders are 0, they are small value so will be order normally.