I'm writing a Greasemonkey script and having a problem setting the active states for two buttons I'm adding, each for toggling.
I've added code to assign class. The problem occurs when switching buttons.
For instance, when I press Button A, it becomes active. But then, if I press Button B, Button A remains active. Thereby leaving me with two buttons in an active state.
I know I can remove the active class by pressing my active button again prior going to another button. However I would like to achieve a function whereby, if Button A is active, and I press Button B, then Button A loses its active class, and vice versa.
Here is the code I'm using that's assigning class to my buttons:
$('#ButtonA').toggle(function () {
$("#ButtonA").addClass("active"); }, function () {
$("#ButtonA").removeClass("active");
});
$('#ButtonB').toggle(function () {
$("#ButtonB").addClass("active"); }, function () {
$("#ButtonB").removeClass("active");
});
It's not clear why you are using toggle like that, and avoid CloneAndModifyProgramming as much possible.
Add a class to your buttons, like so:
$("#ButtonA, #ButtonB, #ButtonC").addClass ("MyRadioBtns");
Then use click to handle the active state:
$("button.MyRadioBtns").click ( function (zEvent) {
$("button.MyRadioBtns").removeClass ("active");
var jThis = $(this);
jThis.addClass ("active");
//- DO WHATEVER ELSE IS DESIRED WITH jThis HERE.
} );
See the code in action at jsFiddle.
You simply add one line in your first callback for each button to remove active class from any active button.
$('#ButtonA').toggle(function() {
$('button.active').click(); // Remove active class from any active button.
// you may adapt 'button.active' to select the proper buttons
$('#ButtonA').addClass("active");
}, function() {
$('#ButtonA').removeClass("active");
});
But, use only one block of code for all the buttons, like this;
$('#ButtonA, #ButtonB, #ButtonC').toggle(function() { // this refer to the just clicked button.
$('button.active').click(); // Remove active class from all other buttons.
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
instead of copying and pasting.
See http://jsfiddle.net/fNtPP/1/ for a clean refactored code showing an example with 3 buttons.
Related
I have a simple button which when clicked will add or remove some classes from a HTML element based on a boolean cookie value.
The button and class updating behaves almost exactly as it should, however on the first click it does not. On the first click (when debugging) I can see that the classes are applied correctly and the interface updates, but then the element reverts to its previous state after the function has been completed.
Any suggestions on what might be causing this are welcome.
<button type="button" id="nav_expand"></button>
document.getElementById("nav_expand").addEventListener("click", function (event) {
event.preventDefault()
setExpand(false);
});
function setExpand(init) {
debugger;
if (getCookie('navbar_expand') === true) {
toggleCookie('navbar_expand');
document.body.classList.remove('classOne');
document.body.classList.remove('classTwo');
} else {
toggleCookie('navbar_expand');
document.body.classList.add('classOne');
document.body.classList.add('classTwo');
}
}
My issue was that there was a custom class (that I was unaware existed) which was toggling the same class values which I was trying to manually alter. Resulting in the strange behaviour.
I'm trying to disable the WooCommerce Add to cart button when the user clicks it for two reasons..
To prevent multiple clicks on it
To show the user their click did something
I used this code:
if ($('body').filter('.single-product')) {
var add_cart_button = $('.single_add_to_cart_button');
/* Disable button on add to bag click if button is active */
add_cart_button.on('click', function(e) {
if (!$(this).hasClass('disabled')) {
$(this).prop('disabled', true); // Prevent multi adds
$(this).addClass('disabled');
}
});
}
Whilst this works, it also seems to disable the button even working, the adding of the product doesn't work as the form submit seems to not fire at all.
Why is this happening and what do I need to change here?
Fixed it by doing it with the submit event instead...
Since the form doesn't have a name attribute I had to target it another way:
if ($('body').filter('.single-product')) {
var add_cart_button = $('.single_add_to_cart_button');
add_cart_button.closest('form').on('submit', function(e) {
var cur_atc_button = $(this).find('.single_add_to_cart_button');
if (!cur_atc_button.hasClass('disabled')) {
cur_atc_button.addClass('disabled');
}
});
}
Edit: I removed the below disabling of the button as it seems for some item types it failed to add the item to the cart if you did this:
cur_atc_button.prop('disabled', true); // Prevent multi adds
If anyone knows why please let me know.
I am trying to automatically click present buttons which are visible on a page, than triggering the scroll functionality after we've clicked the visible options.
I've messed around with the following code, however it didn't work in any formation I applied it.
$( ".follow-button" ).trigger( "click" );
And here's the button HTML.
<button class="follow-button btn-simple"><span class="following-txt">Following</span><span class="follow-txt">Follow</span></button>
for the visible buttons, now how you implemented it, checking the class and ignoring with class hidden or whatever is up to you
const buttons = document.getElementsByTagName('button');
Array.from(buttons).forEach(b => {
b.addEventListener('click', function() {
console.log(b.textContent);
})
b.click();
});
<button>asdf</button>
<button>hfdg</button>
<button>sfdf</button>
<button>ggfg</button>
You can use $(".follow-button:visible").click() to click on all visible buttons.
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
I have an autocomplete dropdown that appears when a user starts typing in a textbox (I'm using jquery mobile but I don't think that's important to my problem). I want to be able to hide the whole dropdown list when a user clicks anywhere on the page. However, I don't want to hide the dropdown when a user actually clicks on the dropdown itself.
Is there a way I could catch the click event in order to know what was clicked?
Here's my blur function:
//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
$("#autocomplete-list").hide();
});
I was thinking of somehow putting an if statement in my blur function. Here's my pseudo code:
if( dropdown clicked)
{
run code to take text from dropdown and place in textbox
}
else
{
hide dropdown
}
Would it be possible to know whether my dropdown is clicked or something else is clicked while in my blur function? When I debug my javascript I'm only seeing an event that's related to the textbox doing the blur()
Edit:
Here is a function I'm using to handle when the dropdown is clicked:
$( document).on( "click", "#autocomplete-list li", function() {
var selectedItem = event.target.innerHTML;
$(this).parent().parent().find('input').val(selectedItem);
$('#autocomplete-list').hide();
runSearchQuery();
});
You can listen for any click, not just a blur, and then check what the clicked element was. e.currentTarget gives you what was clicked.
var clickHandler = function(e) {
if ($(e.currentTarget).hasClass('dropdown')) {
// do nothing
} else {
// Make sure you unregister your event every
// time the dropdown is hidden.
$(window).off('click', clickHandler);
// hide
}
}
// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);