How to synchronize a div container displaying other elements when active - javascript

I have a div containing 3 options that can be active, and when one of them is selected(becomes active) the connector/lines associated with that element should trigger and initiate the animation. So far I have it displayed but can't figure out how to fire the animation every time the first option becomes active, and disable it when it isn't active.
CodePen
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment <small></small></h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Intermediate Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1 active"></span>
<span class="demo__hover demo__hover-2 active"></span>
<span class="demo__hover demo__hover-3 active"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Intermediate Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
$('.demo__hover').on('click', function() {
$that = $(this);
if ($('.demo__hover.active').length > 0) {
$('.active').removeClass('active');
}
$($that).addClass('active');
})
})
});


I strongly suggest to refactor my code but I edited your pin, adding a class that block animation by default:
.block-anim {
animation: none !important;
}
and some dirty JS that deal with it
https://codepen.io/ThomasTognacci/pen/POqRJa

Related

How to display only the highest "score" according to the text content inside each div?

I would like to archive the below by using JavaScript (or with jQuery). Here is the HTML structure:
<div class="score-set">
<div class="score-item">A<div id="score">96+</div></div>
<div class="score-item">B<div id="score">99</div></div>
<div class="score-item">C<div id="score">99</div></div>
<div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">86</div></div>
<div class="score-item">B<div id="score">88</div></div>
<div class="score-item">C<div id="score">90</div></div>
<div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
<div class="score-item">B<div id="score">83+</div></div>
<div class="score-item">C<div id="score">76</div></div>
<div class="score-item">D<div id="score">78</div></div>
</div>
The JavaScript will do the modification, and the desired results will be B 99 C90 A 83- , which looks like:
<div class="score-set">
<div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
<div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
</div>
The rules are:
Ignore all non-number in id="score", eg. + and -, and do the ranking.
Show one highest score item.
If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
When writing the result, write the original div item, including + or -.

To be able to do this, it would be best to get each individual score-set and treat one after another.
For each score item, we need to first get the score and transform it (Array#map) into a number with no digits (.replace(\/D+/g, ''))and memorize the score item html object.
Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
We can then sort the remaining ones in descending order and simply take the first one of the list. Can be done with Array#sort and destructuring assignment.
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
Then finally we update the score set html.
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
const scoreSets = document.getElementsByClassName('score-set');
for(const scoreSet of scoreSets){
const [{ scoreItem }] = Array
.from(scoreSet.getElementsByClassName('score-item'), scoreItem => ({
scoreItem,
// it would be better here to access the score using the id
// but `score` is used multiple times which makes getting
// the score element unreliable
score: Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
}))
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
}
<div class="score-set">
<div class="score-item">A
<div id="score">96+</div>
</div>
<div class="score-item">B
<div id="score">99</div>
</div>
<div class="score-item">C
<div id="score">99</div>
</div>
<div class="score-item">D
<div id="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">86</div>
</div>
<div class="score-item">B
<div id="score">88</div>
</div>
<div class="score-item">C
<div id="score">90</div>
</div>
<div class="score-item">D
<div id="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">83-</div>
</div>
<div class="score-item">B
<div id="score">83+</div>
</div>
<div class="score-item">C
<div id="score">76</div>
</div>
<div class="score-item">D
<div id="score">78</div>
</div>
</div>

This can be MUCH simplified
Note I changed the invalid ID to class="score"
If you cannot do that, then change .querySelector(".score") to .querySelector("div")
document.querySelectorAll('.score-set').forEach(scoreSet => {
const scores = [...scoreSet.querySelectorAll(".score-item")];
scores.sort((a,b) => parseInt(b.querySelector(".score").textContent) - parseInt(a.querySelector(".score").textContent))
scoreSet.innerHTML ="";
scoreSet.append(scores[0])
})
<div class="score-set">
<div class="score-item">A
<div class="score">96+</div>
</div>
<div class="score-item">B
<div class="score">99</div>
</div>
<div class="score-item">C
<div class="score">99</div>
</div>
<div class="score-item">D
<div class="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">86</div>
</div>
<div class="score-item">B
<div class="score">88</div>
</div>
<div class="score-item">C
<div class="score">90</div>
</div>
<div class="score-item">D
<div class="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">83-</div>
</div>
<div class="score-item">B
<div class="score">83+</div>
</div>
<div class="score-item">C
<div class="score">76</div>
</div>
<div class="score-item">D
<div class="score">78</div>
</div>
</div>

JS - Can I get the next open div element - Not the sibling

Is it possible using just JS (or possibly with jQuery) to get the next open html element?
In the snippet below, if I click on any div it'll give me the id of that div. I want it to get the next open element id, so e.g.
if I click on page123 it should give me 123efter
if I click on 123efter it should give me 13
I don't want the next sibling within the encapsulating div, which is all I've managed to do so far!
document.addEventListener("click", function(event) {
console.log(event.target.id);
}
);
.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}
<div>
<div id="1">
home
<div id="1efter" class="efter"></div>
<div id="11">
page11
<div id="11efter" class="efter"></div>
</div>
<div id="12">
page12
<div id="12efter" class="efter"></div>
<div id="121">
page121
<div id="121efter" class="efter"></div>
</div>
<div id="122">
page122
<div id="122efter" class="efter"></div>
</div>
<div id="123">
page123
<div id="123efter" class="efter"></div>
</div>
</div>
<div id="13">
page13
<div id="13efter" class="efter"></div>
</div>
</div>
</div>

I first create a flat array divs with all existing div ids. In the click event handler I then look up the clicked element's successor id.
const divs=[...document.body.querySelectorAll("div")].map(d=>d.id);
document.addEventListener("click", function(event) {
console.log(divs[divs.indexOf(event.target.id)+1]);
}
);
.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}
<div>
<div id="1">
home
<div id="1efter" class="efter"></div>
<div id="11">
page11
<div id="11efter" class="efter"></div>
</div>
<div id="12">
page12
<div id="12efter" class="efter"></div>
<div id="121">
page121
<div id="121efter" class="efter"></div>
</div>
<div id="122">
page122
<div id="122efter" class="efter"></div>
</div>
<div id="123">
page123
<div id="123efter" class="efter"></div>
</div>
</div>
<div id="13">
page13
<div id="13efter" class="efter"></div>
</div>
</div>
</div>

As an alternative, and as tagged jquery, you can use jquery's collection.index(element) overload to get the index within a collection.
As a one liner:
console.log($("div").eq($("div").index(this) + 1))
Updated snippet:
$("div").click(function(evt) {
evt.stopPropagation();
// Get once so it's not run multiple times
var divs = $("div");
var idx = divs.index(this);
var result = divs.eq(idx+1)
// do something to demo
console.log(idx, result.attr("id"));
$(".active").removeClass("active");
result.addClass("active");
});
.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}
.active { background-color:yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div id="1">
home
<div id="1efter" class="efter"></div>
<div id="11">
page11
<div id="11efter" class="efter"></div>
</div>
<div id="12">
page12
<div id="12efter" class="efter"></div>
<div id="121">
page121
<div id="121efter" class="efter"></div>
</div>
<div id="122">
page122
<div id="122efter" class="efter"></div>
</div>
<div id="123">
page123
<div id="123efter" class="efter"></div>
</div>
</div>
<div id="13">
page13
<div id="13efter" class="efter"></div>
</div>
</div>
</div>

How to add class from multiple div with class "abcd+n" to another div with class "qwer+n"

How to add class from multiple div with class "abcd+n" to another div with class "qwer+n"
for example:
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
.........
</div>
and
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
.........
</div>
On click "CLICK" from "secondlistitem-2" add in "firstlistitem-2" class "incorrect" or "correct"

You can try the following way:
$('.secondlist .ad_linkk').click(function(){
var cls = $(this).prev('div').attr('class');
var p = $(this).parent().attr('class').split('-')[1];
$('.firstlist').find(`a[class*=${p}]`).addClass(cls);
});
.incorrect{ color: red }
.correct{ color: green }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">corect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
</div>

You can find the appropriate class to add to the link by seeing if the clicked link has a sibling with class .correct. If not, the class must be incorrect. You can then use the .index in the second list of the parent of the link to indicate which of the elements in the first list to highlight:
$('.ad_link').on('click', function() {
let cc = $(this).siblings('.correct').length ? 'correct' : 'incorrect';
let index = $(this).parent().index();
$('.firstlist').children().eq(index).addClass(cc);
});
.correct { color : green; }
.incorrect { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
</div>

whats the best way to control showing and hiding multiple charts and divs in a page

I am new in javascript,i have a page consist of different Card layouts and each card has its own chart or buttons or grids,some of them should be hidden by default and some of them should be hide or visible by click,since the page is growing by more demands ,controlling these hid/e/show is becoming a nightmare,i would like you tell me whats the best way to do this?for example i have a following div which has a chart:
<section style="width:100%;margin-top:2%;" >
<div id="btnCurrentStatID" class="card ShowHide" style="float:right;width:20%;height:350px;display:none;">
<div class="wrapper">
<div class="containerBtns" style="width:100%;float:right" >
<button type="button" id="btnErrorStat" class="btnsForCrew-Common "></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common "></button>
<button type="button" id="btnService" class="btnsForCrew-Common "></button>
<button type="button" id="btnLinkDn" class="btnsForCrew-Common"></button>
<button type="button" id="btnDataIn" class="btnsForCrew-Common" ></button>
<button type="button" id="btnrepOff" class="btnsForCrew-Common"></button>
</div>
</div>
</div>
<div id="faultStatChartID" class="card ShowHide" >
<div id="chart">
</div>
</div>
<div id="pieChartID" class="card ShowHide">
<div id="pieChart"></div>
</div>
</section>
<section style="width:100%;float:left;margin-top:3%;" id="faultStatSubGroupsSec">
<div id="subcatNameChartSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subcatNameChart"></div>
</div>
</div>
<div id="subcatErrorChartSectionID" class="card" style="width:49%;float:right;display:none">
<div class="container">
<div id="subcatErrorChart"></div>
</div>
</div>
<div id="subCatIdnameSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subCatIdname"></div>
</div>
</div>
<div id="subCatITurNameSectionID" class="card"style="width:49%;float:right;display:none">
<div class="container">
<div id="subCatITurName"></div>
</div>
</div>
<div></div>
<div></div>
</section>
i gave it showhide class,and by default its hidden,when i click on filter button it will be visible,and other divs should be hidden,it this continues,imagine how many time i should do it and manage to control them all,
$(".ShowHide").css("display", "block");
$("#subcatNameChartSectionID").hide();
$("#subcatErrorChartSectionID").hide();
$("#subCatIdnameSectionID").hide();
$("#subCatITurNameSectionID").hide();

A way would be to use a class for hiding.
.hide {
display: none;
}
And a hideable class for accessing every item that should be able to be hidden. The class hide can be added to hide the element.
<div class="hideable">1 hideable</div>
jQuery offers methods for class manipulation:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
Here is the full snippet code:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unique1" class="hideable">
1 hideable
</div>
<div id="unique2" class="hideable">
2 hideable
</div>
<div id="unique3" class="hideable hide">
3 hideable
</div>
<div id="unique4" class="hideable hide">
4 hideable
</div>
<div id="unique5" class="hide">
5 other
</div>

Trying to filter non-hovered elements with jquery

I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});

You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>

Categories