I'm looking for a way to loop through all containers with a given class (.war) and being able to perform the comparation between two child elements and adding a different class to each one of them (winner / loser).
Optimizing the DOM, being able to remove .score a / .score b and leave it all with .score will be awesome if possible.
I tried iterating with child elements with javascript and jquery, with no results.
var scoreA = document.getElementsByClassName("score a")[0];
var scoreB = document.getElementsByClassName("score b")[0];
if (scoreA > scoreB) {
scoreA.classList.add("win");
scoreB.classList.add("lose");
} else {
scoreA.classList.add("lose");
scoreB.classList.add("win");
}
.team { padding: 8px 10px; display: inline-block;}.team:nth-child(1) .score { text-align: right; display: block;}.team:nth-child(2) { text-align: right;}.team:nth-child(2) .score { text-align: left; display: block;}.war { display: inline-block; background-color: #F4F5F7; border-radius: 4px; position: relative; margin: 2px 0;}.score { border-radius: 4px; padding: 1px 5px;}.score.lose { background-color: rgba(255, 0, 0, .1);}.score.win { background-color: rgba(0, 255, 0, .15);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
<div class="team">
<span class="score a">4</span>
</div>
<div class="team">
<span class="score b">2</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">8</span>
</div>
<div class="team">
<span class="score b">5</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">2</span>
</div>
<div class="team">
<span class="score b">3</span>
</div>
</div>
To achieve this you need to select all the .war elements, which you can achieve with querySelectorAll(), then loop through them and compare the scores of the child elements.
Also note that you need to convert the string scores to integers, otherwise 2 would be considered higher than 12. Try this:
document.querySelectorAll('.war').forEach(function(war) {
var scoreA = war.getElementsByClassName("score a")[0];
var scoreB = war.getElementsByClassName("score b")[0];
if (parseInt(scoreA.innerText, 10) > parseInt(scoreB.innerText, 10)) {
scoreA.classList.add("win");
scoreB.classList.add("lose");
} else {
scoreA.classList.add("lose");
scoreB.classList.add("win");
}
});
.team {
padding: 8px 10px;
display: inline-block;
}
.team:nth-child(1) .score {
text-align: right;
display: block;
}
.team:nth-child(2) {
text-align: right;
}
.team:nth-child(2) .score {
text-align: left;
display: block;
}
.war {
display: inline-block;
background-color: #F4F5F7;
border-radius: 4px;
position: relative;
margin: 2px 0;
}
.score {
border-radius: 4px;
padding: 1px 5px;
}
.score.lose {
background-color: rgba(255, 0, 0, .1);
}
.score.win {
background-color: rgba(0, 255, 0, .15);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
<div class="team">
<span class="score a">12</span>
</div>
<div class="team">
<span class="score b">2</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">8</span>
</div>
<div class="team">
<span class="score b">5</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">2</span>
</div>
<div class="team">
<span class="score b">3</span>
</div>
</div>
If you'd prefer to do this without explicitly referencing the .score.a and .score.b elements, then you could use reduce to get the index of the highest score and then apply the classes based on that index:
document.querySelectorAll('.war').forEach(function(war) {
var scores = Array.from(war.getElementsByClassName("score"));
var winIndex = scores.reduce((iMax, x, i, arr) => parseInt(x.innerText, 10) > parseInt(arr[iMax].innerText, 10) ? i : iMax, 0);
scores.forEach((score, i) => score.classList.add(winIndex == i ? 'win' : 'lose'));
});
.team {
padding: 8px 10px;
display: inline-block;
}
.team:nth-child(1) .score {
text-align: right;
display: block;
}
.team:nth-child(2) {
text-align: right;
}
.team:nth-child(2) .score {
text-align: left;
display: block;
}
.war {
display: inline-block;
background-color: #F4F5F7;
border-radius: 4px;
position: relative;
margin: 2px 0;
}
.score {
border-radius: 4px;
padding: 1px 5px;
}
.score.lose {
background-color: rgba(255, 0, 0, .1);
}
.score.win {
background-color: rgba(0, 255, 0, .15);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
<div class="team">
<span class="score a">4</span>
</div>
<div class="team">
<span class="score b">2</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">8</span>
</div>
<div class="team">
<span class="score b">5</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">2</span>
</div>
<div class="team">
<span class="score b">3</span>
</div>
</div>
Related
I have accordions which on click, grow in height and also changes the image to what is relevant to that section (this is done based on data-id).
Here are the requirements that I'm trying to achieve:
Each accordion group is contained within .accordionRepeater__wrapper and for each instance of that class, I'm trying to get the first .accordionCard. to have the open state.
Only have the first .accordionCard in each accordionRepeater__wrapper open on page load, so the user can see some content by default.
Only have one .accordionCard in each accordionRepeater__wrapper open at a time (user cannot have two or more accordionCard open in a accordionRepeater__wrapper at one time).
Currently results:
The first .accordionCard in the first .accordionRepeater__wrapper has the class of .accordionCard--open on page load, but doesn't show the content for it.
The first instance of .accordionCard in the second .accordionRepeater__wrapper doesn't have the class of .accordionCard--open and doesn't show the image. Only when I click on it does the image and content show.
See my attempt here:
$(function() {
const card = $(".accordionCard");
const expand_icon = $(".accordionCard__expand");
// open first accordion in each .accordionRepeater__wrapper by default
$(".accordionCard:first accordionCard__expand").addClass("expanded");
$(".accordionCard:first").addClass("accordionCard--open");
$(".accordionRepeater__image:first").addClass("d-block");
card.click(function() {
var hidden = $(this).children(".accordionCard__body--hidden");
// only have one card open at a time
expand_icon.removeClass("expanded");
card.removeClass("accordionCard--open");
/* CLOSE CARD */
if ($(this).hasClass("accordionCard--open")) {
TweenMax.to(hidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut
});
$(this).removeClass("accordionCard--open");
$(this).find(expand_icon).removeClass("expanded");
}
/* OPEN CARD */
else {
TweenMax.set(hidden, {
height: "auto"
});
TweenMax.from(hidden, 1, {
height: 0,
immediateRender: false,
ease: Back.easeOut
});
$(this).addClass("accordionCard--open");
$(this).find(expand_icon).addClass("expanded");
// show correct image
var id = $(this).attr('data-item');
$(".accordionRepeater__image").removeClass("d-block");
$(".accordionRepeater__image[data-item='" + id + "']").addClass("d-block");
}
/* END */
});
});
:root {
--green: #089F84;
--white-2: #F7F7F7;
--black-2: #2C3645;
}
.accordionRepeater {
padding: 130px 0 156px 0;
}
.accordionRepeater__wrapper {
padding-bottom: 140px;
}
.accordionRepeater__wrapper:last-child {
padding-bottom: 0;
}
.accordionRepeater__row--even {
flex-direction: row-reverse;
}
.accordionRepeater .accordionCard {
margin: 13px 0;
cursor: pointer;
padding-left: 26px;
}
.accordionRepeater .accordionCard:hover .accordionCard__body-label {
color: var(--green);
}
.accordionRepeater .accordionCard--open {
background-color: var(--white-2);
padding: 36px 48px 45px 26px;
border-radius: 10px;
}
.accordionRepeater .accordionCard__expand {
position: absolute;
}
.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translate(0px, 10px);
right: 0;
margin: 0 0 -8px;
background-color: var(--green);
border-radius: 5px;
}
.accordionRepeater .accordionCard__expand:before {
right: 8px;
width: 3px;
height: 16px;
transition: all 0.5s ease;
margin-top: -7.5px;
}
.accordionRepeater .accordionCard__expand:after {
right: 1px;
width: 16px;
height: 3px;
margin-top: -1.5px;
}
.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
background-color: var(--black-2);
}
.accordionRepeater .accordionCard__expand.expanded:before {
height: 0;
margin-top: 0;
}
.accordionRepeater .accordionCard__body {
margin-left: 20px;
}
.accordionRepeater .accordionCard__body--visible {
width: 100%;
}
.accordionRepeater .accordionCard__body--hidden {
overflow: hidden;
height: 0;
}
.accordionRepeater .accordionCard__body-label {
transition: all 0.5s ease;
margin-left: 20px;
}
.accordionRepeater .accordionCard__body-copy {
padding: 24px 0 17px 0;
}
.accordionRepeater .accordionCard__body-link {
transition: none;
}
.accordionRepeater__image {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="accordionRepeater">
<div class="container">
<!-----------
-- FIRST SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD 2 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="2">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum 2</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum 2</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
<img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3">
</div>
</div>
</div>
</div>
<!-----------
-- FIRST SET END
-------------->
<!-----------
-- SECOND SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
</div>
</div>
</div>
</div>
<!-----------
-- SECOND SET END
-------------->
</div>
</div>
You are not expanding the accordions at the start. You are doing it only on click.
Also the method needs to handle expansion and close at set level. And not globally.
It can be done like this:
$(function() {
const card = $('.accordionCard');
const expand_icon = $('.accordionCard__expand');
$('.accordionCard:first-child').each((i, a) => toggleAc(a));
card.click(function() {
toggleAc(this);
});
// expand/close given accordions
function toggleAc(acdn) {
var hidden = $(acdn).children('.accordionCard__body--hidden');
const isOpen = $(acdn).hasClass('accordionCard--open');
/* CLOSE CARD */
if (isOpen) {
return; // this ensures that at least one will remain open all the time
/*TweenMax.to(hidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut,
});
$(acdn).removeClass('accordionCard--open');
$(acdn).find(expand_icon).removeClass('expanded');
*/
} else {
// close previous card in the same set
const parent = $(acdn).parent();
const expandedCard = parent.find('.accordionCard--open');
const expandedIcon = parent.find('.expanded');
const expandedCardHidden = expandedCard.children('.accordionCard__body--hidden');
TweenMax.to(expandedCardHidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut,
});
expandedIcon.removeClass('expanded');
expandedCard.removeClass('accordionCard--open');
/* OPEN CARD */
TweenMax.set(hidden, {
height: 'auto',
});
TweenMax.from(hidden, 1, {
height: 0,
immediateRender: false,
ease: Back.easeOut,
});
$(acdn).addClass('accordionCard--open');
$(acdn).find(expand_icon).addClass('expanded');
// show correct image
var id = $(acdn).attr('data-item');
const grandParent = parent.parent().parent().parent();
grandParent.find('.accordionRepeater__image').removeClass('d-block');
grandParent
.find(".accordionRepeater__image[data-item='" + id + "']")
.addClass('d-block');
}
/* END */
}
});
:root {
--green: #089f84;
--white-2: #f7f7f7;
--black-2: #2c3645;
}
.accordionRepeater {
padding: 130px 0 156px 0;
}
.accordionRepeater__wrapper {
padding-bottom: 140px;
}
.accordionRepeater__wrapper:last-child {
padding-bottom: 0;
}
.accordionRepeater__row--even {
flex-direction: row-reverse;
}
.accordionRepeater .accordionCard {
margin: 13px 0;
cursor: pointer;
padding-left: 26px;
}
.accordionRepeater .accordionCard:hover .accordionCard__body-label {
color: var(--green);
}
.accordionRepeater .accordionCard--open {
background-color: var(--white-2);
padding: 36px 48px 45px 26px;
border-radius: 10px;
}
.accordionRepeater .accordionCard__expand {
position: absolute;
}
.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
content: '';
display: block;
position: absolute;
top: 50%;
transform: translate(0px, 10px);
right: 0;
margin: 0 0 -8px;
background-color: var(--green);
border-radius: 5px;
}
.accordionRepeater .accordionCard__expand:before {
right: 8px;
width: 3px;
height: 16px;
transition: all 0.5s ease;
margin-top: -7.5px;
}
.accordionRepeater .accordionCard__expand:after {
right: 1px;
width: 16px;
height: 3px;
margin-top: -1.5px;
}
.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
background-color: var(--black-2);
}
.accordionRepeater .accordionCard__expand.expanded:before {
height: 0;
margin-top: 0;
}
.accordionRepeater .accordionCard__body {
margin-left: 20px;
}
.accordionRepeater .accordionCard__body--visible {
width: 100%;
}
.accordionRepeater .accordionCard__body--hidden {
overflow: hidden;
height: 0;
}
.accordionRepeater .accordionCard__body-label {
transition: all 0.5s ease;
margin-left: 20px;
}
.accordionRepeater .accordionCard__body-copy {
padding: 24px 0 17px 0;
}
.accordionRepeater .accordionCard__body-link {
transition: none;
}
.accordionRepeater__image {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<div class="accordionRepeater">
<div class="container">
<!-----------
-- FIRST SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD 2 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="2">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum 2</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum 2</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
<img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2" />
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3" />
</div>
</div>
</div>
</div>
<!-----------
-- FIRST SET END
-------------->
<!-----------
-- SECOND SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
</div>
</div>
</div>
</div>
<!-----------
-- SECOND SET END
-------------->
</div>
</div>
Change this line:
if ($(this).hasClass("accordionCard--open")) {
To:
if ($(this).hasClass("accordionCard--open") == true) {
Otherwise, it doesn't really do anything. I Hope this is what you needed!
I have a primary menu with two sub-menus nested inside. the sub menus are revealed on a hover, and have a dynamically changing width based on the content inside. I need the sub menus position relative to the main menu to be: the left border of the sub menu is touching the right border of the main menu and they are not overlapping. Common functionality of a sub menu on hover reveal I suppose.
So I believe the math for the css right positioning is something like:
right: -elements current width in px
I don't believe theres a way in css to insert the elements current width value into the right position so I have tried with JS
let subMenuBounds = subMenuOne.getBoundingClientRect()
let subMenuTwoBounds = subMenuOne.getBoundingClientRect()
subMenuOne.style.right = `-${subMenuBounds}px`
subMenuTwo.style.right = `-${subMenuTwoBounds}px`
the problem with this is the subMenus have no bounds until I hover over the menu, because the display is set to: none.
any solution to this?
let subMenuBounds = subMenuOne.getBoundingClientRect()
let subMenuTwoBounds = subMenuOne.getBoundingClientRect()
subMenuOne.style.right = `-${subMenuBounds}px`;
subMenuTwo.style.right = `-${subMenuTwoBounds}px`;
.sub-menu-one,
.sub-menu-two {
height: auto;
width: auto;
min-width: 12rem;
position: absolute;
top: 0;
right: ??;
border-radius: 5px;
display: none;
opacity: 0;
transition: all 350ms;
border: 1px solid #e4e4e4;
background-color: #2e1a04;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 3;
}
.menu-row:nth-child(2):hover > .sub-menu-one,
.menu-row:nth-child(3):hover > .sub-menu-two {
opacity: 1;
transition-delay: 350ms;
display: block;
}
<div class="menu">
<div class="menu-container">
<div class="menu-row">
<i class="fa-solid fa-book"></i>
<h2>Syno • Checker</h2>
<span id="menu-close-btn">X</span>
</div>
<div class="menu-row">
<p>Definition</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-one'>
<div>
<blockquote>
<p id="selected-word"></p>
</blockquote>
</div>
<div class="definition"></div>
</div>
</div>
<div class="menu-row">
<p>Synonyms</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-two'>
<div>
<blockquote>
<p id="selected-word-two"></p>
</blockquote>
</div>
<div class="options"></div>
</div>
</div>
</div>
</div>
You should be able to do this without JavaScript. Here I set the .menu-row to display: flex. The result is that all child nodes will be aligned in a row, one after the other. So, now the sub menu shows up right to the menu text.
p {
margin: 0;
}
.menu-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.sub-menu-one,
.sub-menu-two {
min-width: 12rem;
border-radius: 5px;
display: none;
opacity: 0;
transition: all 350ms;
border: 1px solid #e4e4e4;
background-color: #2e1a04;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 3;
}
.menu-row:nth-child(2):hover>.sub-menu-one,
.menu-row:nth-child(3):hover>.sub-menu-two {
opacity: 1;
transition-delay: 350ms;
display: block;
}
<div class="menu">
<div class="menu-container">
<div class="menu-row">
<i class="fa-solid fa-book"></i>
<h2>Syno • Checker</h2>
<span id="menu-close-btn">X</span>
</div>
<div class="menu-row">
<p>Definition</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-one'>
<div>
<blockquote>
<p id="selected-word"></p>
</blockquote>
</div>
<div class="definition"></div>
</div>
</div>
<div class="menu-row">
<p>Synonyms</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-two'>
<div>
<blockquote>
<p id="selected-word-two"></p>
</blockquote>
</div>
<div class="options"></div>
</div>
</div>
</div>
</div>
My problem/question is actually related to two problems that I could not find a solution.
This is the div on the "normal" state (without hover or selected). When the user select this div, it change to a purple border. My problem is: How do I change the class of the icon (that blue icon) when the parent gets selected?
Normal State:
Hover State (Icon) / Selected State (Parent Div)
Another problem: All the divs with the icon is the same class. I tried one code and it worked, but all .icon divs is also selected (there is 4 divs, when I select one, it selects all the divs)
This is the full code: https://jsfiddle.net/905hut4v/ (the results tab will not work, since I have to copy and paste all the code from the project and I think I cannot [becase a NDA]). I'm using Foundation 6, that's why there is include error on the SCSS.
JS
$(function() {
$('form[name="form-jeitos"] .block-jeito').on('click', function() {
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
});
$('.image-icon').on('click', function() {
$(this).siblings().toggleClass('selected');
});
$('form[name="form-jeitos"]').on('submit', function(e) {
e.preventDefault();
$(this).addClass("hide");
$('#jeito-title').addClass("hide");
var checked = $('input:checked', $(this));
$('#'+checked.val()).siblings().removeClass("is-active");
$('#'+checked.val()).addClass("is-active");
});
$('#jeito-opcoes a.back').on('click', function(e) {
e.preventDefault();
$('#jeito-opcoes .is-active').removeClass("is-active");
$('form[name="form-jeitos"]').removeClass("hide");
$('#jeito-title').removeClass("hide");
});
});
SCSS
.block-jeito {
border: 2px solid rgba(1, 33, 105, 0.1);
border-radius: 8px;
padding: 30px 38px 30px 38px;
opacity: 1;
filter: alpha(opacity=1);
transition: all 0.3s ease-in-out;
margin-bottom: 60px;
cursor: pointer;
.image-icon {
position: relative;
.img {
#include breakpoint(medium) {
margin-left: -10px;
}
}
}
.icon {
position: absolute;
top: 35%;
background-color: #1155CC;
padding: 20px;
left: 45%;
border-radius: 50%;
max-height: 75px;
transition: all 0.3s ease-in-out;
&:hover,
&.selected {
background-color: #00C7B1;
}
#include breakpoint(xsmall) {
padding: 20px;
left: 45%;
top: 35%;
}
#include breakpoint(xxsmall) {
padding: 20px;
left: 45%;
top: 35%;
}
#include breakpoint(medium) {
padding: 20px;
left: 25%;
top: 45%;
}
#include breakpoint(xmedium) {
padding: 15px;
left: 55%;
top: 45%;
}
#include breakpoint(large) {
padding: 10px;
left: 65%;
top: 45%;
}
#include breakpoint(xlarge) {
top: 45%;
left: 55%;
padding: 15px;
}
}
&:hover,
&.selected {
border: 2px solid #5F249F;
}
&.hide {
opacity: 0;
filter: alpha(opacity=0);
transition: opacity 0.3s ease-in-out;
}
p {
font-size: 16px;
line-height: 24px;
font-weight: 400;
#include breakpoint(medium) {
font-size: 24px;
line-height: 36px;
}
strong {
font-weight: 700;
}
}
img {
margin-bottom: 50px;
#include breakpoint(medium) {
margin-bottom: 0px;
}
}
}
HTML
<form name="form-jeitos">
<div class="grid-x grid-margin-x">
<label id="codigo-block"
class="cell labl small-12 medium-6 block-jeito align-middle">
<div class="grid-x grid-margin-x">
<div class="cell small-12 large-4 image-icon">
<img src="../assets/img/foto-codigo.png" class="img"
alt="Imagem de código e programação, representando a Nordware">
<div class="icon">
<img src="../assets/img/icon-codigo.png" alt="">
</div>
</div>
<div class="cell small-12 large-8">
<input type="radio" name="opcoes" value="teste-nordware"
checked="checked"/>
<p><strong>Código e programação</strong> é comigo mesmo!</p>
</div>
</div>
</label>
<label id="estrategia-block"
class="cell labl small-12 medium-6 block-jeito align-middle">
<div class="grid-x grid-margin-x">
<div class="image-icon" class="cell small-12 large-4">
<img src="../assets/img/foto-estrategia.png" class="img"
alt="Adoro trabalhar com estratégias, pessoas e processos.">
<div class="icon">
<img src="../assets/img/icon-estrategia.png" alt="">
</div>
</div>
<div class="cell small-12 large-8">
<input type="radio" name="opcoes" value="teste-proxys"/>
<p>Adoro trabalhar com <strong>estratégias, pessoas e
processos.</strong></p>
</div>
</div>
</label>
<label id="tecnologia-block"
class="cell labl small-12 medium-6 block-jeito align-middle">
<div class="grid-x grid-margin-x">
<div class="image-icon" class="cell small-12 large-4">
<img src="../assets/img/foto-tecnologia.png" class="img"
alt="Imagem de tecnologia e notebooks, representando a BringII">
<div class="icon">
<img src="../assets/img/icon-tecnologia.png" alt="">
</div>
</div>
<div class="cell small-12 large-8">
<input type="radio" name="opcoes" value="teste-bringit"/>
<p>Gosto de novidades, do mundo de <strong>tecnologia e
notebooks.</strong></p>
</div>
</div>
</label>
<label id="mobilidade-block"
class="cell labl small-12 medium-6 block-jeito align-middle">
<div class="grid-x grid-margin-x">
<div class="image-icon" class="cell small-12 large-4">
<img src="../assets/img/foto-mobilidade.png" class="img"
alt="Imagem de tecnologia e notebooks, representando a BringII">
<div class="icon">
<img src="../assets/img/icon-mobilidade.png" alt="">
</div>
</div>
<div class="cell small-12 large-8">
<input type="radio" name="opcoes" value="teste-mobiz"/>
<p>Seja carro, moto ou bike, eu curto é <strong>mobilidade.</strong>
</p>
</div>
</div>
</label>
<div class="cell small-12">
<button type="submit" class="button">Conferir Resultados</button>
</div>
</form>
By the way, if you are wondering why there is another two functions on the javascript: When the user select a div and click the submit button, we 'redirect' the user to another page (we actually just unhide a div).
You can accomplish the switching of icon images upon parent div focus with CSS selectors, no need to use JavaScript.
A minimal example:
.outer {
width: 50vw;
padding: 2rem;
border: 2px solid gray;
}
.outer .nofocus {
display: inline;
}
.outer .focus {
display: none;
}
.outer:focus .nofocus {
display: none;
}
.outer:focus .focus {
display: inline;
}
<p>Click inside the box:</p>
<div class="outer" tabindex="0">
<div class="icon">
<img class="nofocus" src="https://i.picsum.photos/id/841/60/60.jpg?hmac=O4KlxA1-OGoNAFLLbula_vD6LrmU4H-l-yD5kkXpmLI">
<img class="focus" src="https://i.picsum.photos/id/453/60/60.jpg?hmac=prDxZwonQi-meeXg_btjnTrjJKw5Crr85tpKIiCP_6E">
</div>
</div>
I did not solve this myself, I actually got help from a senior front-end.
What he said it was: the JS was putting the selected in both divs (in the main div and also in the child div).
So the problem was not really JS, but CSS!
This is how we solved:
&:hover,
&.selected {
border: 2px solid #5F249F;
.icon {
background-color: #00C7B1;
}
}
I tried the following JavaScript/jQuery code to change the border thickness.
But this is not working. Please help me.
//$("span").css({"border":"4px solid green"});
document.getElementById("192.168.42.151:8984_solr").getElementsByClassName("trees_shard1_replica_n1").find("span").style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
Mirror: https://jsfiddle.net/amitkushwaha1710/asdxfc94/44/
Problem in your id attribute, id="192.168.42.151:8984_solr
id attribute must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods (".").
change it and it will work.
you can do something like
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
$('.card-body').find(".trees_shard1_replica_n1").find("span").css({'color':'red'});
Your code is wrong, Basically It's a mix between jquery and javascript.
Try this: (No jquery required)
document.getElementsByClassName("trees_shard1_replica_n1")[0].querySelector('span').style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
You can not find an element by find() in javascript so you can go the following way
//$("span").css({"border":"4px solid green"});
var solrId = document.getElementById("192.168.42.151:8984_solr").getElementsByClassName('trees_shard1_replica_n1')[0];
solrId.getElementsByTagName("span")[0].style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
Hope This will help.
var replicaNodeName="192.168.42.151:8984_solr";
$(document.getElementById(replicaNodeName)).find(".trees_shard1_replica_n1").find("span").css({'border':'4px solid green'});
I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!