We Keep Coding

How can I add a CSS class to the button that is clicked among multiple buttons using jQuery?

My motive is when someone will click on a particular button then will show the particular cards and will add a class named category_btn_active that clicked. Suppose Services will be clicked then the service cards will be shown. Here the filtering is working well, the problem is here $(this).addClass('category_btn_active').siblings().removeClass('category_btn_active'). The category_btn_active class adds when clicked but when I clicked another button it stays in both buttons. I want the class will be added to just the last clicked button. Where is the problem? give a relevant solution...
index.html:
<li>Services</li>
<li>Static Website</li>
<div class="Services service_itembox">
<img src="Assets/pic-1.jpg" alt="service image">
</div>
<div class="Static service_itembox">
<img src="Assets/pic-2.jpg" alt="service image">
</div>
index.js:
$(function () {
$(".category_btn").click(function () {
$(this).addClass('category_btn_active').siblings().removeClass('category_btn_active')
const value = $(this).attr('data-filter');
if(value == "Services"){
$('.service_itembox').show('slow');
}else{
$('.service_itembox').not('.'+value).hide('slow');
$('.service_itembox').filter('.'+value).show('slow');
}
});
});
style.css:
.category_btn_active{
color: white;
border-color:gray;
border-style:solid ;
border-width:0px 0px 1px 0px;
background-color: #019587;
padding: 8px;
font-size: 14px;
text-transform: uppercase;
}

This is not the most elegant way to do this, but it illustrates use of parent() and sibling(), which you were struggling with:
https://jsfiddle.net/v5fg3qwh/2/
$(function () {
$(".category_btn").click(function () {
$(this).addClass('category_btn_active').parent().siblings().find("a.category_btn").removeClass('category_btn_active')
const value = $(this).attr('data-filter');
$(`.${value}.service_itembox`).show('slow');
$(`.service_itembox`).not('.'+value).hide('slow');
$(`.service_itembox`).filter('.'+value).show('slow');
});
});
Note that I removed your if/else because you don't need it. Your classes and JS logic are defined in such a way that you can specify your intent w/out those conditionals.
I also defaulted one of your images to be hidden at initialization, which I assume is what you'd want:
div.Static.service_itembox {
display: none;
}

Adding and removing classes on mouse enter and leave on canvas shape

I'm trying to add a class to a element when mouse hovers over it and then remove it when mouse leaves. It works currently only with giving it direct style in js.
As shown below I tried various ways to do this, all had some problems. Only the direct style change worked. On mouse leave I do the same but remove the class. The mouse over and leave checks canvas element.
poly.on('mouseover', function () {
this.opacity(1);
layer.draw();
$('.' + this.name()).css({ backgroundColor: "#ffcc00" });
//$('.' + this.name()).classList.add("textboxhighlight");
//$('.' + this.name()).className += " textboxhighlight";
//$('.' + this.name()).addClass("textboxhighlight");
//$('.' + this.name()).setAttribute("class", "textboxhighlight");
});
I'm not sure what the problem is as I tired various methods in adding class all of them with different problems. Using just this.addClass wont work as it needs to start with $('.' + this.name()) or nothing works in the code not even forcing the style part. $('.' + this.name()) refers to a class name in element with the same name as poly.
In css:
.textboxhighlight {
background-color: #ffcc00;
}
Thanks for any help.

May be you have to use in your css class background-color: #red !important. See working example here

It would be easier if you provided more code to work with. The example below will illustrate on how to add a class on hover and remove a class on leaving the element.
$('#element').hover(function(e) {
$(this).addClass('selected');
}, function(a) {
$(this).removeClass('selected');
});
.selected {
background-color: green;
}
<div id='element'>
element
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Hard to say what is wrong with your code when you don't show the mouseenter/leave parts of your code. But here is an example with classes:
https://codepen.io/andeersg/pen/MOGqPQ
$('.el').mouseenter(function() {
$(this).addClass('el-hover');
});
$('.el').mouseleave(function() {
$(this).removeClass('el-hover');
});

You can use toggleClass on hover event
$(".hoverclass").hover(function () {
$(this).toggleClass("hoverclass_toggle");
});
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.hoverclass_toggle {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1"> <i class="icon"></i>Test</div>
</div>
<div>
Otherwise you can do that type :
$(".hoverclass").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result_hover {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1">
<i class="icon"></i>Test
</div>
</div>
<div>

javascript/Jquery pop up - only open one pop at a time

I have 3 separate scripts for 3 pop ups, Im sure there is a better way to structure these into one script? I also want to be able to only open one pop up at a time, so if .popup-new is active and i click to open .popup-new-b then .popup-new will automatically close. Any help would be much appreciated.
<script>
$(document).ready(function () {
$(".popup-trigger").click(function () {
$(".popup-new").fadeIn(300);
});
$(".popup-new > span, .popup-new").click(function () {
$(".popup-new").fadeOut(300);
});
});
</script>
<script>
$(document).ready(function () {
$(".popup-trigger-b").click(function () {
$(".popup-new-b").fadeIn(300);
});
$(".popup-new-b > span, .popup-new-b").click(function () {
$(".popup-new-b").fadeOut(300);
});
});
</script>
<script>
$(document).ready(function () {
$(".popup-trigger-c").click(function () {
$(".popup-new-c").fadeIn(300);
});
$(".popup-new-c > span, .popup-new-c").click(function () {
$(".popup-new-c").fadeOut(300);
});
});
</script>

Since I cannot see your HTML. I have added some with CSS. I hope this is what you are looking for. Ofcourse I could've asked clarify but I do not have enough reputation to add comment :(
$('button').click(function(){
$('.popup').removeClass('popped');
$('#popup-new'+$(this).attr('class')).addClass('popped');
});
.popup{
position:fixed;
width:70%;
height:70%;
top:50%;
left:50%;
margin-top:-5%;
margin-left:-35%;
background-color:#ccc;
z-index:100;
display:none;
}
.popped{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup-new" class="popup">HI I am POPUP NEW</div>
<div id="popup-new-b" class="popup">HI I am POPUP-NEW-B</div>
<div id="popup-new-c" class="popup">HI I am POPUP-NEW-C</div>
<button class="">Pop up New</button>
<button class="-b">Pop up New B</button>
<button class="-c">Pop up New C</button>

You could do something like this:
popups = ['.popup-new','.popup-new-b','.popup-new,-c']
// Pass an additional parameter to popup_click, which is the index of the popup in the array
$('.popup-trigger').click({popup: 0}, popup_click);
$('.popup-trigger-b').click({popup: 1}, popup_click);
$('.popup-trigger-c').click({popup: 2}, popup_click);
function popup_click(event) {
// Here write the code to open the popup
// You can access the popup through $(popups[event.data.popup])
for (var i in popups) {
if (i != event.data.popup) { // event.data.popup contains the index that we passed
// Here write the code to close each of the other popups
// Access them through $(popups [i])
}
}
}
$('html').click(function() {
for (var i in popups) {
$(popups[i]).hide();
}
});
$('.popup-btn-close').click(function(e) {
for (var i in popups) {
$(popups[i]).hide();
}
});
$('.popup-new').click(stop_propagation);
$('.popup-new-b').click(stop_propagation);
$('.popup-new-c').click(stop_propagation);
function stop_propagation(e) {
e.stopPropagation();
}
It is generally a good idea to use arrays or objects whenever you have repetitive code you want to factor.
Note that passing parameters to an event handler this way only works with jQuery; in raw JavaScript you will have to use closures.
You can even simplify both blocks of three lines by using another array and loop (see below).
Also note that as #404UserNotFound wrote, if all of your popups share a common class, you can simplify these lines:
for (var i in popups) {
$(popups[i]).hide();
}
And turn them into:
$('.yourClassNameHere').hide(); // Will select all the elements of the right class
Which leaves you with this compact code:
popups = ['.popup-new', '.popup-new-b', '.popup-new,-c']
popup_triggers = ['.popup-trigger', '.popup-trigger-b', '.popup-trigger-c']
// Pass an additional parameter to popup_click, which is the index of the popup in the array
for (i in popup_triggers) {
$(popup_triggers[i]).click({popup: i}, popup_click);
}
function popup_click(event) {
// Here write the code to open the popup
// You can access the popup through $(popups[event.data.popup])
for (var i in suffixes) {
if (i != event.data.popup) { // event.data.popup contains the index that we passed
// Here write the code to close each of the other popups
// Access them through $(popups [i])
}
}
}
$('html').click(function() {
$('.yourClassNameHere').hide();
});
$('.popup-btn-close').click(function(e) {
$('.yourClassNameHere').hide();
});
for (i in popups) {
$(popups[i]).click(stop_propagation);
}
function stop_propagation(e) {
e.stopPropagation();
}
And finally, if all of your popups and triggers are always named the same way, with a suffix, you could condense it even further (with a few more tricks to save some space):
suffixes = ['', '-b', '-c']
for (let i in suffixes) {
$('.popup-trigger' + suffixes[i]).click(function(i) {
return function(e) {
hideAllPopups();
$('.popup-new' + suffixes[i]).toggle();
//e.stopPropagation(); // HERE
}
}(i));
}
$('.popup-btn-close').click(hideAllPopups);
//$('html').click(hideAllPopups); // HERE
function hideAllPopups() {
$('.popup').hide();
}
// Uncomment the two lines marked "HERE" to make the popups disappear whenever you click somewhere in the page (except on the buttons)
.popup {
margin: 20px auto;
padding: 20px;
background: #ccc;
width: 30%;
position: relative;
}
.popup-btn-close {
position: absolute;
top: 20px;
right: 30px;
font-weight: bold;
}
.box {
background: rgba(0,0,0,0.2);
padding: 5px;
background-clip: padding-box;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="box popup-trigger">Trigger popup #1</span>
<span class="box popup-trigger-b">Trigger popup #2</span>
<span class="box popup-trigger-c">Trigger popup #3</span>
<hr/>
<div class="popup-new popup" style="display:none">Popup #1 <span class="popup-btn-close">X</span></div>
<div class="popup-new-b popup" style="display:none">Popup #2 <span class="popup-btn-close">X</span></div>
<div class="popup-new-c popup" style="display:none">Popup #3 <span class="popup-btn-close">X</span></div>

When I try to dynamically load a div, all the classes and ids aren't registering, even with .on

EDIT: REQUESTED MORE CODE:
In my index.html tags, it contains two divs:
<div id="index-banner">
blabla
</div>
<div id="java-cheatsheet-placeholder"> </div>
Then my java-cheatsheet.html contains:
<div id="content">
<h1>Java Cheat Sheet </h1>
<input type="button" value="Show Keywords" id="keywordButton">
<p> To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the
important keyword(s). e.g. There are <span class="answer">eight</span> bits in a byte. Disable/Enable all the
hidden words by tapping the button at the top right. </p>
</div>
I then have a bunch of code, that is tested and works properly, if I push on the button(with an id of "keywordButton"), it either reveals or hides ALL the span elements with a class of "answer", but if you click on a specific span, it will hide/show that and only that word. This is fully functional on its own. But if I try using this (in my custom.js file):
$("#javaCheatSheet").click(function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it loads the data, but clicking the button or the spans NO longer works, unless I also add
<script type="text/javascript" src="../js/custom.js"></script>
in my java-cheatsheet.html file at the bottom. I of course don't want to do this, and would rather have .on() working with jquery, but if I try what most people have suggested:
$("#javaCheatSheet").on('click', '#keywordButton, .answer', function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it doesn't even load the html into index.html at all >_>.

Is this what you were looking for?
$("#javaCheatSheet").on("click", "#keywordButton, .answer", function () {
$("#index-banner").load('../java-cheatsheet/javaSummary2.html');
});
Edit:
$("#java-cheatsheet-placeholder").on("click", "#keywordButton, .answer", function () {
// Show/hide answers here
});

You haven't added jquery. With jquery your code works fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
see below.
var toggleColorNotVisible = "rgb(0, 0, 0)";
var toggleColorVisible = "rgb(0, 0, 0)";
var backgroundColorVisible = "rgb(255, 255, 255)";
var showAnswersButton = false;
$(document).on('click', '#keywordButton', function() {
if (showAnswersButton) {
$(".answer").css("color", toggleColorNotVisible);
$(".answer").css("background-color", toggleColorNotVisible);
$(".answer").each(function() {
this.hideAnswers = false;
});
} else {
$(".answer").css("color", toggleColorVisible);
$(".answer").css("background-color", backgroundColorVisible);
$(".answer").each(function() {
this.hideAnswers = true;
});
}
showAnswersButton = !showAnswersButton;
});
$(document).on('click', '.answer', function() {
console.log("LOL")
this.hideAnswers = this.hideAnswers || false;
if (this.hideAnswers) {
$(this).css("color", toggleColorNotVisible);
$(this).css("background-color", toggleColorNotVisible);
} else {
$(this).css("color", toggleColorVisible);
$(this).css("background-color", backgroundColorVisible);
}
this.hideAnswers = !this.hideAnswers;
});
.answer {
font-weight: bold;
color: #000000;
background-color: #000000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#keywordButton {
position: fixed;
top: 10%;
right: 1%;
opacity: 0.9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Show/Hide Keywords" id="keywordButton">
<hr>
<h2> Intro </h2>
<p>Stuff</p>
<hr>
<p>To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the important keyword(s). e.g. There are <span class="answer">eight</span> bits in a<span class="answer"> byte</span>. Disable/enable using button for all!

.replaceWith() to replace content in a div for different link elements

I am trying to load a div with different content based on the link I click...
While it seems to work for the first link when I click it, clicking the other links only replaces the content with the same content for 'encodeMe' , yet I have specified different content that I want to replace for 'htmlize-me'
The first run-through of this I did not use jQuery's .bind() function. I simply used .click() , and both had the same result. Looking through the jQuery API I thought using the .bind() function would bind each function within it to that particular page element, but it seems to apply it to all my links.
I've achieved the same effect using .hide and .show to toggle divs but I want to be more elegant about how I do that, and this was my attempted alternative...
here's the relevant html:
<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
<li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
<li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
<div class="the-content"></div>
<br><button class="close-button">Close</button>
</div>
</div>
here's the script I made to trigger the content change:
$('#encode-me').bind('click' , function() {
$('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').replaceWith('Hi, Im something different');
});
});

Try something like this:
Use html() instead of replaceWith()
$('#encode-me').bind('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').html("Hi, I'm something different");
});
});

replaceWith does exactly what it sounds like, it replaces the div with the h3, so when you click the second link there is no div.
Try setting the innerHTML instead
$('#encode-me').on('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
$('div.the-content').html('Hi, I\'m something different');
});

So I figured out a more clever way to do this! Use the DOM to your advantage - set up a nested list structure and change the content using .find() on parent and child elements the list.
Markup
<span style="font-size:1.4em">Type
<ul class="row">
<li>Blah
<div class="overlay-content">
<p></p>
<p class="changeText">Blah</p>
</div>
</li>
<li>Blah2
<div class="overlay-content">
<p></p>
<p class="changeText">Blah2</p>
</div>
</li>
</ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>
CSS
.close {
border-radius: 10px;
background-image: url(../img/close-overlay.png);
position: absolute;
right:-10px;
top:-15px;
z-index:1002;
height: 35px;
width: 35px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.overlay-content {
position:fixed!important;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
background-color: #f5f5f5;
display:none;
z-index:1002;
padding: 10px;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
Script
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});