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;
});
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.
Issue: generated button isn't registered on click ~1/20 times.
I'm generating a button :
var thebutton = document.createElement("BUTTON");
thebutton.setAttribute("id", "mybutton");
thebutton.setAttribute("class", "mybuttonclass");
thebutton.setAttribute("onclick","function()");
thebutton.innerHTML = '<i class="icon info"></i>';
document.getElementById("row").appendChild(thebutton);
Which is appended on top an existing button element as a second z-index layer:
.mybuttonclass {
z-index:9999;
}
I am also using
focusMethod = function getFocus() {
document.getElementById("mybutton").focus();
}
focusMethod();
In order to shift the browser selection from the trigger of the generating code (also a button) to #mybutton which works as it is highlighted.
Still for some reason, arbitrarily, every few times the button is created, any clicks will not registered to the created button, and in order to fix it and be able to trigger it, i need to right click the page -- after which the button starts to work.
Is there any way to have the browser rescan the page for elements after I generate the button? Or is there some other issue causing this that I'm missing?
Seems to happen in chrome more often, bootstrap is also run on CSS for the page.
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 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 using jQuery Roundabout (http://fredhq.com/projects/roundabout/) to rotate through 3 images. I am not aware of how I can add "Next" and "Prev" buttons to help the user rotate through the images. Currently I have it set to auto rotate or slide to next image if the user clicks on the image itself. However, I would like to also add the ability of these buttons as a secondary means of navigation. Is there something in the existing code that needs to be changed in order to make this work or does it require separate code?
get a button, give it a class of next then in your roundabout, set to option to the next button.
<script>
$(document).ready(function() {
$('ul').roundabout({
btnNext: ".next"
});
});
</script>
same for btnPrev
http://fredhq.com/projects/roundabout/#/api