jQuery custom menu - adding and removing classes onClick - javascript

If someone can think of a better title for this question, please feel free to alter it. This is the issue: in a navigation menu, clicking an item should mark it red (default is orange). Both orange and red styles (class names bmark and bmark_active respectively) were generated using the CSS Button Generator application. This is the jQuery code which should do the job:
$(function () {
$('.bmark').click(function(){
$('.bmark_active').addClass('bmark');
$('.bmark_active').removeClass('bmark_active');
$(this).addClass('bmark_active');
$(this).removeClass('bmark');
});
})
It works fine for all buttons, except the default one ('All' in the fiddle example). So if you click 'Russia', for example, the red focus will move onto that button (by removing orange class and adding red class), but then when you click 'All' again, it doesn't switch to red. Why is that and how do I fix it?
JS Fiddle

You're not applying the click() event to the parent element, only applying it to the child elements:
$(function () {
$('.bmark, .bmark_active').click(function(){
$('.bmark_active').toggleClass('bmark').removeClass('bmark_active');
$(this).addClass('bmark_active').removeClass('bmark');
});
})
jsFiddle here.

Updated your fiddle do it that way. More simplified. The other answers here work fine but this is the least verbose way of handling it.
$(function () {
$('.bmark').click(function(){
$('.bmark').removeClass('active');
$(this).addClass('active');
});
})
http://jsfiddle.net/chazelton/52esG/2/

You're not binding on the '.bmark_active' element.
You can do this :
$(function () {
$(document).on('click', '.bmark_active,.bmark', function() {
$('.bmark_active').addClass('bmark').removeClass('bmark_active');
$(this).removeClass('bmark').addClass('bmark_active');
});
})
Demonstration
But most often I'd prefer to give the same class to all elements, and to only add or remove a class on the active elements, so that the event handling code would be
$('.bmark').removeClass('active');
$(this).addClass('active');
It also lets the CSS be cleaner as your two classes are, for now, mostly identical and it's better to have just the few changes between the two modes isolated in the 'active' class.

Related

click then unclick jquery button not working

I'm trying to make a button which on one click it changes it's color, and on another click it returns to it's original form.
something like clicked and unclicked.
I added a JSfiddle for you to look at it.
https://jsfiddle.net/dw5y5xLx/3/
$('.genM').click(function() {
$('.genM').removeClass('selected');
$(this).addClass('selected');
});
thanks!
also, is there a way doing that by only using CSS HTML?
Thanks.
$('.genM').click(function() {
$(this).toggleClass('selected');
});
I have updated the js fiddle for you, please check (https://jsfiddle.net/dw5y5xLx/15/)!
jQuery hasClass function can be helpful
$('.genM').click(function() {
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}
});
IDEA:
Is there a way doing that by only using CSS HTML?
Yes, there is a way how u could achieve that just by pure CSS and HTML. But, if you dont want to use js, you must have an HTML element that is able to keep the "pressed" or "unpressed" state all by itself, without js.
However, there is no such an HTML element, so you have to use something simmilar: Checkbox
<input type="checkbox"> have "checked" and "unchecked" state and it is practicaly the same as "pressed" or "unpressed".
SOLUTION:
The trick is to stylize the ckeckbox with CSS so it visually appears as a pressed or unpressed button. Here is an example how checkbox can be stylised - you need to modify the CSS in order to appear it like a button, not a toggle switch!
You will want to use CSS selectors like this (as shown in example):
input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },

JQuery toggle two classes at once

Here is the code: http://jsfiddle.net/celiostat/NCPv9/
the 2 Jquery plugin enables to change (and set):
- background color of div to gray
- text color to red.
Problem is I have to exactly point the mouse exactly ON the text so that text changes color too.
I would like to change background Div color AND text by clicking -- anywhere -- in the div
Tried various combination from other post..but nothing worked.
(ideally I would also like to change picture at the same time !)
$(".item_unselected").on("click", function() {
$(this).toggleClass("gray_cliked_box");
$(".item_unselected").not(this).removeClass("gray_cliked_box");
});
$(".item_text_in_menubar").on("click", function() {
$(this).toggleClass("blue_cliked_text");
$(".item_text_in_menubar").not(this).removeClass("blue_cliked_text");
});
You're fairly close, but the reason you have to click on the text is because you're only setting the class for the text once you click on it - you never set it from when you click on the div. Thankfully, you can optimize (and fix) your code by only having one event. If you click on a div, you simply set both items.
You can do this using the find method in jQuery to find the span that you want to modify when clicking on the div. The updated JS is as follows:
$(".item_unselected").on("click", function () {
$(".item_unselected").removeClass("gray_cliked_box");
$(".item_text_in_menubar").removeClass("blue_cliked_text");
var $this = $(this);
$this.addClass("gray_cliked_box");
$this.find(".item_text_in_menubar").addClass("blue_cliked_text");
});
Updated Fiddle: http://jsfiddle.net/NCPv9/3/
What this actually does, is remove the class from all the objects, and then just simply add the classes back to the ones you want. You also don't have to use toggleClass. You know you're adding it so just use addClass.
This is a CSS problem, not a jquery problem. I updated your last CSS selector to:
.gray_cliked_box .item_text_in_menubar { /*for jquery*/
color: red;
}
and the text changes to red when clicked.
The added selector says that children of .gray_clicked_box with a class .item_text_in_menubar should be red. This supercedes other definitions of .item_text_in_menubar because it's a more specific selector.
http://jsfiddle.net/NCPv9/4/

Need help manipulating class with jquery

I need help with this code:
$(document).ready(function() {
$(".fav").click(function() {
$(".fav").removeClass("fav").addClass("fav_");
});
$(".fav_").click(function() {
$(".fav_").removeClass("fav_").addClass("fav");
});
});
On click in .fav div, he transforms to .fav_ and vice-versa. Ok, but the problem is:
If you click one time to .fav class, he transform to .fav_. But if you click one time more, he don't transform again to .fav.
I tried put one var to check. ex:
if clicked one time: fav=true
if clicked two times: fav=false
but it doesn't work.
I understand jQuery, but my usual language is PHP, perhaps thence the difficulty.
You need to keep a reference to the DOM elements in a variable, and use that. This way you don't have to perform the jQuery selector again.
$(document).ready(function() {
var favs = $(".fav");
favs.click(function() {
favs.toggleClass("fav");
favs.toggleClass("fav_");
});
});
You can also use the toggleClass() method to add/remove the classes. If it tests with fav then it should toggle back and forward between fav and fav_. So there is no need for IF statements.
EDIT:
If you want to toggle the showing of the background image, then you don't have to remove the fav CSS class. Just toggle fav_ as it's background will override fav because it's lower in the CSS source.
$(document).ready(function(){
$(".fav").click(function(){
$(this).toggleClass("fav_");
});
});

Swap class on click

I've been trying to figure out how I'm supposed to change a class of an element when you click it.
At the moment i have two classes (cOpen and cClosed). When you open the page the div is set to 'cClosed'.
<div id="camera" class="cClosed" onClick="cameraToggle('weekLoaderWrapper', 'cameraContainer');">Kamera</div></a>
The things within onClick is not relevant to my question btw..
I've also put this script in the code
$('#camera').click(function() {
$(this).toggleClass('cOpen');
$(this).toggleClass('cClosed');
});
What I want it to do is to when you press the "camera"-div the class simply swaps to cClosed instead of cOpen, and vice verse when you click it again. This isn't working atm.
My problem is how i'm supposed to "toggle" the div so it swaps the class of the "camera"-div.
Why are you using two classes? Use one class to identify the open and none to denote closed.
$('#camera').click(function() {
$(this).toggleClass('cOpen');
});
It's as simple as:
$('div').click(
function(){
$(this).toggleClass('cClosed cOpen');
});​​​​​​​​​​​​​​
JS Fiddle demo.
Though I second Starx's suggestion in this; but it's your HTML.
Reference:
toggleClass().

Jquery problem onclick add class and remove class

first time posting here. I'm a beginner in jquery and i ran into some grey area. Hopefully i can find my answer here and learn from it also :)
So i have a let's say 10 different div. All has the same class. And everytime I click on the div it has to add another class (in this case background-color in css). For that I have this:
$(document).ready(function() {
$(".menucardmenu").click(function(){
if($(this).hasClass("menucardmenu")) {
$(this).addClass("backgroundmenucard");
}
else {
alert ("condition false");
}
});
});
But the question now is, how can i make that only one div can have that background-color (in my case backgroundmenucard). Depending one which div the user click, that div will have the background-color, and the previous div (that was clicked) should reset it back to normal. I can do it with this right?:
$(this).removeClass("backgroundmenucard");
does anyone know the answer to this???
Regards,
Andrew
try the following:
$(".menucardmenu").click(function(){
$(".backgroundmenucard").removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
});
Demo: http://jsfiddle.net/r2Sua/
(I remove the if because it's useless in this case)
Remove from all...
$(".menucardmenu").removeClass("backgroundmenucard");
Then add to this
$(function() // shorthand for document ready
{
var $divs = $('div.menucardmenu'), // standard jQuery "cache" idiom
BG_CLASS = 'backgroundmenucard'; // stay DRY, less prone to typos
$divs.live('click', function() // use .live to bind only 1 event listener
{
// remove the class from all divs
$divs.removeClass(BG_CLASS);
// add the class to this div
$(this).addClass(BG_CLASS);
}
});
});
The if($(this).hasClass("menucardmenu")) check is completely unnecessary since you're already selecting elements which have that class. It will always evaluate to true.
$('.menucardmenu').click(function(){
$('.menucardmenu').removeClass('backgroundmenucard');
$(this).addClass('backgroundmenucard');
});
Another option would be:
$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
This way you don't remove and add the class to the specific (this) element

Categories

Resources