Want to make it so when my menu items transition away, the search bar pops up.
let menuItemsQuerySelector = document.querySelectorAll(".menu-item");
searchElement.addEventListener("click", function() {
console.log("Clicked search");
menuItemsQuerySelector.forEach(function(menuItem) {
console.log("Boom");
menuItem.classList.toggle("hide-item");
});
});
};
this is what i have so far to make the toggle animation work. my claases for the search bar are, search-from, i need to make it active somehow when the menu disappears. The css class is already set up.
You can use the "transitionend" event to execute code after the transition ends.
You would have to add a boolean to check whether the transition was hidden-visible or visible-hidden
let hidden = false;
searchElement.addEventListener("click", function() {
hidden = true;
//your other code
});
//Further down the line when showing your elements again
hidden = false;
However seeing that you have multiple elements that transition at the same time, you could either:
Hook the event only on one of them
menuItemsQuerySelector[0].on('transitionend', () => {
if(hidden)
//your code here
});
or Use a timed function
setTimeout(() => {
if(hidden)
//your code here
}, <delay in millisecods>);
Related
So I've got a page with a search box, a check-mark, and a loading spinner. When the user focuses on the search box, spinner fades in. User un-focuses on search box, spinner fades out. I have a function to toggle the check-mark after the user presses enter in the search box, however, i would like the check-mark to stay visible forever. As of now, when the user presses enter, it toggles the checkmark and shortly fades out because the unfocus function is called automatically.
Toggle checkmark function:
$('#searchText').on('keypress', function (e) {
if (e.which === 13) {
var val = $('#searchText').val();
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
alert(val);
return false;
}
});
Fade in and out function:
$(function () {
$('#searchText').focusin(function () {
$('#check').fadeIn();
}).focusout(function () {
$('#check').fadeOut();
});
});
How can i override the fade in and out function (or rewrite this perhaps) to stop when the user presses enter in the search box?
Thanks in advance.
Use the jQuery .stop method. When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.
https://api.jquery.com/stop/
I would approach this with a boolean to indicate if a search has been performed. See below as an example. Without knowing the structure of your code I made it global but that could be changed to check a particular object instead.
Toggle checkmark function:
var searchPerformed = false;
$('#searchText').on('keypress', function (e) {
if (e.which === 13) {
searchPerformed = true;
var val = $('#searchText').val();
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
alert(val);
return false;
}
});
Fade in and out function:
$(function () {
$('#searchText').focusin(function () {
$('#check').fadeIn();
}).focusout(function () {
if (!searchPerformed)
$('#check').fadeOut();
});
});
Fixed with
$('#searchText').unbind("focusin");
$('#searchText').unbind("focusout");
in the toggle check-mark function.
Thanks for alternate methods as well everyone, will be handy in the future.
I want to delay the trigger of a click after one was recently triggered. Why? Because in my website I can simply click multiple times the "dropdown icon" and it will toggle the slide those multiple times and dont want to... I mean, I want to wait till the dropdown menu was slided and then it can trigger another click in the "dropdown icon"
My website url is: www.ayfshowroom.byethost5.com
I'm new using jquery, this is my code:
function desplegarMenu () { //DESPLIEGA MENU EN RESPONSIVE
$('#dropdown').click(function() {
$('.container-menu ul').slideToggle(500);
$('#dropdown i').toggleClass("fa fa-bars").toggleClass("fa fa-times");
});
}
$(document).ready(function() {
desplegarMenu();
});
Thanks!
You can watch for when the animation finishes, and only react to the click event when it is finished.
// create a new variable to record whether the animation is in progress
var dropdownAnimating = false;
function desplegarMenu () { //DESPLIEGA MENU EN RESPONSIVE
$('#dropdown').click(function() {
// if the animation is in progress, don't do anything
if (dropdownAnimating) return;
// set the flag that the drop down is animating
dropdownAnimating = true;
// use the complete function to reset the flag when the animation is complete
$('.container-menu ul').slideToggle(500, function() { dropdownAnimating = false; });
$('#dropdown i').toggleClass("fa fa-bars").toggleClass("fa fa-times");
});
}
In this way, if the user clicks whilst the animation is in progress, nothing will happen.
You can disable the toogler button when animating...
$('#dropdown').click(function() {
var self = this;
$(self).prop("disabled",true); //disabling the button, to prevent another click
$('.container-menu ul').slideToggle(500, function() {
$(self).prop("disabled",false); //enabling the button after animation
});
$('#dropdown i').toggleClass("fa fa-bars").toggleClass("fa fa-times");
});
I am successfully using the blow code to remove duplicate values from a drop down field
$(document).ready(function () {
var usedNames = {};
$("select > option").each(function () {
if (usedNames[this.value]) {
$(this).remove();
} else {
usedNames[this.value] = this.text;
}
});
});
My problem is that some of my drop downs are conditional, so they are not on the page when the code fires, they are set to display:hidden, and input hidden, then depending on a previous drop down selcect they are shown.
So how can I fire the code when the drop down appears??
If you have no ability to add code where the dropdown is being set to visible, your only solution may be to set a repeating timer to constantly check.
var interval = setInterval(function(){
// Check to see if the thing is still hidden
if(!$("#id_of_option").is(':hidden')){
clearInterval(interval); // stop checking
// Run your other code here to clear out duplicates
}
}, 200); // or some number of milliseconds
I have a strange issue with jQuery.
I have a function, which gets executed on an event of a <a> tag.
link.click(someAction);
In the action, I modify another div-element, where I simply set a few CSS parameters and modify the classes.
This works as expected.
Now, I wanted to expand someAction with a bool parameter.
I figured that I could call the method now as followed:
link.click(function () {
someAction(true);
});
Unfortunately, this does not work. I have no idea why.
The method gets called and everything, but the CSS & classes simply do not change.
Then again by calling exactly the same method with link.click(someAction); it works.
Can anyone tell me why?
Here's some code
var openPopover = function( showOverlay ){
if (typeof showOverlay === "undefined" || showOverlay === null) showOverlay = true;
if (showOverlay) {
// Add transparent overlay
overlay.show();
}
// Select popover next to the clicked item
popover = $(this).next("div.popover");
// It positioned underneath the clicked item, with the spacing above
// Display the popover
popover.show();
// Reset classes
popover.removeClass("hide-animation");
popover.addClass("show-animation");
var animationEnd = function() {
$(overlay).off("webkitTransitionEnd");
$(overlay).off("oTransitionEnd");
$(overlay).off("transitionend");
};
// Add animation did end observer
$(overlay).on("webkitTransitionEnd", animationEnd);
$(overlay).on("oTransitionEnd", animationEnd);
$(overlay).on("transitionend", animationEnd);
// Run animations
popover.addClass("shown");
overlay.addClass("shown");
// If the browser doesn't support css3 animations, we call it manually
if (!supportsCSSAnimations) {
setTimeout(animationEnd, animationDuration);
}
};
selectButton.hover(openPopover); // Opens the popover correctly
selectButton.hover(function () {
openPopover(true); // Doesn't work
});
After your changes:
this in the following line, will point to window:
popover = $(this).next("div.popover");
whereas before, it pointed to selectButton. Try:
selectButton.hover(function () {
openPopover.call(this, true);
});
Make sure to preventDefault on the link once it has been clicked:
link.click(function (e) {
e.preventDefault();
someAction(true);
});
I have a small jQuery script:
$('.field').blur(function() {
$(this).next().children().hide();
});
The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?
This is as close as I have got:
$('.field').blur(function() {
$('*').not('.adress').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// $(this).next('.spacer').children().removeClass("visible");
}
$(this).unbind(e);
});
});
The uncommented line is suppose to refer to the field that is blurred, but it doesn't seem to work. Any suggestions?
You can give it a slight delay, like this:
$('.field').blur(function() {
var kids = $(this).next().children();
setTimeout(function() { kids.hide(); }, 10);
});
This gives you time to click before those child links go away.
This is how I ended up doing it:
var curFocus;
$(document).delegate('*','mousedown', function(){
if ((this != curFocus) && // don't bother if this was the previous active element
($(curFocus).is('.field')) && // if it was a .field that was blurred
!($(this).is('.adress'))
) {
$('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
}
curFocus = this; // log the newly focussed element for the next event
});
I believe you can use .not('a') in this situation:
$('.field').not('a').blur(function() {
$(this).next().children().hide();
});
This isn't tested, so I am not sure if this will work or not.