We Keep Coding

How do I edit the text of a button when the content is displayed/actively showing?

Using this example:
$('[data-switch]').on('click', function(e)
{
var
$page = $('#page-2')
, blockToShow = e.currentTarget.getAttribute('data-switch')
;
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when requested. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
How would one go about changing the font color and weight of the button text when the content is being displayed (not based on when the button is clicked)?
I have tried to find posts with a similar request, but I am greatly struggling. Any direction would be appreciated.

There is many ways to do that, like this one :
const
btns_Switch = document.querySelectorAll('[data-switch]')
, page2_parent = document.querySelector('#page-2')
;
btns_Switch.forEach( btn =>
{
btn.onclick = e =>
{
page2_parent.dataset.switch = btn.dataset.switch;
setButtonActive();
}
})
setButtonActive(); // init on page load...
function setButtonActive()
{
let activBtn = page2_parent.dataset.switch;
btns_Switch.forEach( btn =>
btn.classList.toggle('active', activBtn === btn.dataset.switch ))
}
#page-2[data-switch="about_me"] > div:not(#about_me) ,
#page-2[data-switch="education"] > div:not(#education) ,
#page-2[data-switch="about_name_bravitus"] > div:not(#about_name_bravitus)
{
display : none;
}
button.active
{
background : yellow;
font-weight : bold;
}
<button data-switch="about_me">Click to read about me</button>
<button data-switch="education">Click to show my education</button>
<button data-switch="about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2" data-switch="education" > <!-- set initial ID value -->
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<div id="education" class="container" >
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" >
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>

How to close modal when click outside Javascript

I am trying to close the modal when it's clicked outside. I have tried to loop through modals but can't get them to set its display to none.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my code to open modals.
const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
for (var i = 0; i < coffeeGrounds.length; i++) {
coffeeGrounds[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
var a = document.getElementById(x);
a.setAttribute('style','display:block');
});
}
Here is my code, when clicked outside to close the modal:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Over here by setting the modal display to none. It's holding back to display the modal also.
Please any help would be appreciated.
Codepen: https://codepen.io/zaidik/pen/bGwpzbE

When you click outside of the modal window you should not have the modal window in you event propagation array
In other words take advantage of event.path property
Working example (based on the provided fiddle)
window.addEventListener('click', function(e) {
const allModals = document.querySelectorAll('.project-card');
if (!e.path.some(x => x.className && x.className.includes('project-card'))) {
allModals.forEach(x => x.style.display = 'none');
}
}, true)
Working fiddle example: https://jsfiddle.net/7pzs1042/

Displaying elements based on search

I would like the .box elements to show/hide based on the words the user searches for, so for example if a user types in 'Title2 Title1' because those words exists inside box one and two they will remain visible with the renaming .box elements hiding. All the text within the .box elements needs to be searchable not just that in the .title element.
Below is how far I've got. It's almost there but it's not quite working as hoped.
Any help would be great.
Many thanks.
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>
<script>
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')')) {
$(this).show();
} else {
$(this).hide();
}
});
});
} else {
$(".box").show();
}
});
</script>

You need to use a different search method. :contains does not work as you expect. Consider the following example.
$(function() {
function filter(e) {
var term = $(e.target).val();
if (term.length < 3) {
$(".box").show();
return;
}
$(".box").each(function(i, el) {
if ($(".content", el).text().indexOf(term) >= 0) {
$(el).show();
} else {
$(el).hide();
}
});
}
$("#search").keyup(filter);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">Box title one content</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">Box title two content</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">Box title three content</div>
</div>
So for example if on is entered, no filtering is performed. If one is entered, the script will look inside the content class of each box and if one is found in the text, it will be shown otherwise, it is hidden. If the User clears their search out, all items are shown.

Hide all box before iterate, then only show when match any words:
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
// Hide all .box
$(".box").each(function () {
$(this).hide();
})
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')') ) {
$(this).show();
}
});
});
} else {
$(".box").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>

Loop through all .boxs and using regex pattern matching, check either the title or content matches the search query. Show all matched boxes and hide all others
I have also fiddled it here
$("#search").on("input", function () {
var searchables=$('.box');
console.log(searchables)
var query=$(this).val();
searchables.each(function(i,item){
var title=$(item).find('.title').text();
var content=$(item).find('.content').text();
var rgx=new RegExp(query,'gi');
if(rgx.test(title) || rgx.test(content))
{
$(item).show();
}
else
{
$(item).hide();
}
})
})

Javascript function to rotate some div elements on page

I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>

Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.

Set CSS property with js click event handler

I am trying to create an onclick event which will show/hide elements of an array however I am struggling with the showSubTabGroup() function below.
Sidenote: Eventually I would like to make this onmouseenter and onmouseleave, rather than 'click' as you see below.
I would like to be able to click on a div and show subsequent div's below as you might expect from a navigation feature.
The console is not returning any errors, however the 'click' function seems alert("CLICKED") properly.
Any help would be greatly appreciated.
Problem:
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
alert("CLICKED");//Testing 'click' call
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
function Tab (subTabGroup) {
this.tab = document.getElementsByClassName("tab");
this.subTab = document.getElementsByClassName("sub-tab");
this.subTabGroup = subTabGroup;
}
Tab.prototype.hideSubTabs = function () {
for (var i = 0; i < this.subTab.length; i++) {
this.subTab[i].style.display = "none";
}
}
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
var tab = new Tab(3);
tab.hideSubTabs();
tab.showSubTabGroup(0,0);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Nav</title>
</head>
<body>
<!-- JQuery CDN -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
</div>
<script type="text/javascript" src="tab.js"></script>
<script type="text/javascript" src="tabEvents.js"></script>
</body>
</html>

The problem of what is this inside the click. It is not your tab code, it is the reference to the element that you clicked on. You need to change that by using bind
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', (function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
}).bind(this));
}

As I read your post, I assume hideSubTabs() is working properly. In that case I will suggest to use in showSubTabGroup():
this.subTab[i].style.display = "initial";
instead of
this.subTab[i].style.display = "";
"initial" will set to its default e.g. as "block" for div and "inline" for span
I see that you also have included jQuery. If I may ask why don't jQuery functions which will do the same with less code:
$('.tab').on('click',function() {
$(this).closest('.container').find('.sub-tab').toggle()
})
$('.tab').click();
$('.tab')[0].click();