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.
Related
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 a page that "fakes" going to another page by means of conditionally showing/hiding certain elements. When either of the two images that are shown by default are clicked, they are both hidden and, based on which one was clicked, other elements are displayed.
Among the elements then displayed is a "go back" button. When that button is clicked, it hides what is currently being displayed (including itself), and shows the original two images.
It works, except the page, after a brief delay, "blinks" (is refreshed). Why, and how can I avoid this refresh?
Here's the jQuery behind the button click:
$('#backToMain').on( "click", function() {
$('#preTravelImages').addClass('finaff-form-help-hide');
$('#postTravelImages').addClass('finaff-form-help-hide');
$('#preTravel').removeClass('finaff-form-help-hide');
$('#postTravel').removeClass('finaff-form-help-hide');
$('#backToMain').addClass('finaff-form-help-hide');
});
Note: "preTravelImages" is a div that contains several images; the same goes for "postTravelImages". "preTravel" and "postTravel" both contain one image only (clicking the preTravel image makes the images in preTravelImages visible, and likewise clicking the postTravelImage makes the images in postTravelImages visible).
The "hide" class is:
.finaff-form-help-hide {
visibility: hidden;
display: none;
}
Here is the button that is clicked:
<button class="finaff-form-help-hide" id="backToMain" name="backToMain">Back to Form Help</button>
Does the order of these add/remove Class calls matter? Or what do I need to do?
Add a return false to prevent default link action:
$('#backToMain').on("click", function() {
$('#preTravelImages').addClass('finaff-form-help-hide');
$('#postTravelImages').addClass('finaff-form-help-hide');
$('#preTravel').removeClass('finaff-form-help-hide');
$('#postTravel').removeClass('finaff-form-help-hide');
$('#backToMain').addClass('finaff-form-help-hide');
return false;
});
I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.
You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html
You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
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.