I have a list of buttons on my page. I'm trying to make a feature so that when you click a button it becomes selected (I will change its color), and the last clicked button will come back to normal.
The only idea that I could come up for this (based on my newbish skills) is to make a javascript function, which will iterate through all the buttons from the page, and change the color for each of them to the default color, then change color for the clicked button.
This way doesn't seem optimum, as I iterate through the entire list of buttons when I only need to change two. How can I do it in a better way?
I'm not looking for code, just an idea.
Use jQuery.
$('.btn').on("click", function() {
$('.active').removeClass("active");
$(this).addClass("active");
});
Give all the buttons you want this functionality the "btn" css class and then make another css class called active.
you can add a class to changed button
$('#someid').addClass('someclass');
and then check if the button has class
$('#someid').hasClass(className);
UPD
this should work as well
$('.classForAllButtons').css(/*css here*/);
$('clicked element').css(/*css here*/);
this will add style to all buttons and then immediately add css to the clicked button
Related
EDIT: for a general solution, this worked for me. Event binding on dynamically created elements?
So I have a interface that kind of looks like this:
User can toggle to show or hide the sublists. I used jquery to select the toggle buttons for them to work:
$(".dropdownBtn").click(function(){
//rotate the button
$(this).parent().toggleClass("caret-down");
//hide the sublist
$(this).closest("li").find(".active").toggleClass("nested");
})
They can also add new sub_elements to each element. For example, like this:
$(".fa-plus-square").click(function(){
//if there's no new list, create a new unordered list
if ($(this).closest("li").find("ul").length == 0){
$(this).parents("li").append(newUL);
//and add a toggle button
$(this).parent().prepend(toggleBtn);
}
//add the element
$(this).closest("li").find("ul").append("<li>newElement</li>")
})
But then the newly added toggle button under element 3 wouldn't respond. I believe that I need to "bind" the newly added button. But I'm not sure what's the best practice to do so.
Hi I am trying to dynamically create a selector for jQuery instead of using a static one. The problem is, it is not working predictably/consistently.
I created a fiddle here: http://jsfiddle.net/Cc92f/
If you click run and click in each of the top radio buttons once, they work, but you cannot use the same buttons a second time.
If you click a top button, and then a bottom button, you can no longer click any of the buttons.
You may have to reload it a couple of times to see how different uses break it in different ways.
Thanks you for any and all help!
$(".concattest").click(function(event)
{
var radioid=event.target.id.split("_");
$('#r_2_'+radioid[2]).attr('checked', 'checked');
event.preventDefault();
});
Use .prop('checked',true) instead of .attr('checked','checked').
http://jsfiddle.net/5LWEk/
If you want to:
When changing selection in the top row, change value of bottom row
accordingly
When changing selection in the bottom row, select the last option in
the top row
Then use change event and prop() function, here is the demo
I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.
I've got a cool interface to build.
There's a horizontal scrolling div containing "tiles" of images, and a radio button under each. A user will scroll and decide on an image, then click it. The radio button checks, and jQuery shows another horiz scrolling div below, "now select subcategory"... The user can then further refine the selection by choosing another "tile". That's the process complete.
The problem is I'm not sure how to hide all the elements in the 2nd tier of selection if they don't have a class that matches that of the first selection. Sounds confusing maybe. Here's some simplified HTML, I've posted it on jsfiddle to save space here. http://jsfiddle.net/RTGC3/
So in summary, you'll see from the HTML what needs to happen. A user will see categories, when they click a category, subcategories without the same id as the clicked parent category will be hidden. All others will remain visible ready for the containing div to "show".
I hope I've explained the problem well enough. Thanks for any help offered.
Mike.
Try with this Code:
$(document).ready(function() {
$('input[type=radio][name="type"]').live('change', function() {
var className = $(this).parent().attr("class");
var clsID = className.split('_')[2];
var subID = "in_cat_" + clsID;
$("div[class*=in_cat]").hide();
$("div." + subID).toggle("slow");
});
});
This is the JSFiddle Link:
http://jsfiddle.net/RTGC3/3/
Easiest if you name both container divs with id 1 for example to the same thing, so you would have TWO class="cat_id_1".
Then something liek this:
$('#cat-container div input').on('change', function() {
var id = $(this).parent().attr('class');
$('#des-container div.'+id).fadeToggle();
});
and in CSS you have display:none; on all divs in #des-container (for starters). This will listen for the radio button when it changes, first change it will call .fadeToggle() on div with matching class in your second row and show it, and second change will hide it again.
Was this what you wanted?
Actually I assuem you want all items in the second row to be displayed, but when checking a radio box you want to hide everything besides the one matching the id of the radiobutton? Then you could do like this:
$('#des-container div'+id).addClass('show');
$('#des-container div').not('div.show').fadeToggle();
So basically you add a class to the objects you decide to show, and hide everything that doesn't have that class. Ofcourse for this to work the other way (if you uncheck a radio-box) you would need to add a if-statement seeing the radio button that was changed was changed to checked or unchecked, if unchecked you just remove the class "show" from the element.
I have a context menu with 4 option, I want to hide or disable 1 option after clicking it. these are my script fragments. After I click the save option, whenever I right click again on the div I want only the Move option available in the context menu. drag is the div class. is it possible?
var menu = [
{'Move':function(menuItem,menuObject){
$(this).css({'backgroundColor':'red'});
return true;
}
},
{'Save':function(menuItem,menuObject){
$(this).css({'backgroundColor':'blue'});
return true;
}
}
];
$(function() {
$('.drag').contextMenu(menu,{
showSpeed:500,
hideSpeed:500,
showTransition:'fadeIn',
hideTransition:'fadeOut'
});
});
Thanks in advance
First of all the class drag is the class of the parent element.
So you have to find the class of the "save" element. Lets suppose the class is .save, then on click remove it. This is done with this code:
$(".save").click(function{
$(this).remove();
})
If you right click again, the element will be created again and the above function loses its purpose. So as I can see it, this is your problem.
But why do you need to hide the save button after something is "saved"? Maybe the user wants to save again.
It would be helpful if we could see a demo in order to understand the app you are trying to implement.
If you try to apply a rule only on changed (dragged) element you have to flag the changed ones in the class or in your db which holds the positions of the elements.
Then you can manipulate only the flagged (changed) through the jquery selector.
if ((.drag).hasClass('.changed')){
$(".save").css({"visibility: visible"});
}
Dont forget to hide by default the element in css
.save{visibility: none}