On my website, I have a closed accordion menu (menu-1). If the user doesn't click on the menu for the first 5 seconds of being on the site, the menu drops down automatically using this js code:
setTimeout(function () {
$('#menu-1').trigger('click');
}, 5000);
My problem is when the user doesn't wait 5 seconds, and clicks on the menu before the trigger, the trigger still goes off and ends up closing the menu. How do make it so that the trigger is canceled if the user clicks on the menu before its triggered?
You need to store the timeout ID in a variable, so you can later cancel it if the user clicks on the menu. Like this...
var timeout_id = setTimeout(function () {
$('#menu-1').trigger('click');
}, 5000);
$('#menu-1').click(function() {
if (timeout_id) {
clearTimeout(timeout_id);
timeout_id = 0;
}
});
Related
How to trigger a mouse click on the element (slider "next" button) each X seconds?
I have built a website in Adobe Muse, but the slider widget doesn’t have an auto play function, and I’m trying to make the next button click each 5 seconds to simulate autoplay. I’ve found the class for the button
<div class="fp-controlArrow fp-next"></div>
maybe there is even a chance to trigger clicking it somehow? Thanks
I had to specify both classes to trigger the button and use a bit more difficult command. This worked:
var interval = setInterval(function() {
document.querySelector('.fp-controlArrow.fp-next').click();
}, 5000);
Now I have additional question: is it possible to stop clicking after user will click either back or next button with a mouse?
As a half-measure I’ve set it to stop at about a time it returns to the first slide but it would be much better to stop it after user clicks any of the button...
var interval = setInterval(function() {
document.querySelector('.fp-controlArrow.fp-next').click();
}, 7000);
setTimeout(function( ) { clearInterval( interval ); }, 44000);
Thanks
Use setInterval():
setInterval(() => {
element.click()
}, 5000)
where element is a reference to your DOM element.
you can store your interval on a variable and stop it whenever you want
var interval = setInterval(function() {
button.click();
// [button] here is the element you found with the specified class
// if you're using jQuery
// you can get you button and trigger the event
// beware of other buttons using the same class
jQuery(".fp-next").trigger("click");
}, 5000);
//if you want to stop it
clearInterval(interval);
I have 3 div's.
Has a next button
Has a back and a next button
Has a back and submit button
jQuery
$('.next').click(function() {
//hide parent and show next
$(this).parent().hide().next().show();
});
$('.back').click(function() {
//hide parent and show previous
$(this).parent().hide().prev().show();
});
The 2nd page just appears for a few milliseconds and then goes back to the first one.. is it deprecated?
You could be submitting the page try preventing the event.
$('.next').click(function(e){
e.preventDefault();
$(this).parent().hide().next().show();
//hide parent and show next
});
//your othe codes
I want to dismiss bootstrap modal if no action in browser screen for 10-15 seconds.
I have tried settimeout() function but this will not check the action in the browser.
setTimeout(function() {$('#form').modal('hide');}, 10000);
So, Is there any way to hide modal box if no action in the browser?
The snippet below with set the flag actionAppeared if there a keypress in the keyboard or 'mousemove' in the mouse.
var actionAppeared = false;
jQuery(document).mousemove(function (e) { actionAppeared = true; });
jQuery(document).keypress(function (e) { actionAppeared = true; });
setTimeout(function() {
if(!actionAppeared) {
$('#form').modal('hide');}
}
, 10000);
Here is a working demo. Open the console to see the mousemove and keypress events.
The mousemove events is triggered really easy so to test it open the modal and quickly move the cursor away from the keyboard.
I'm trying to make a submenu which appears after some time. If it's already open I'd like other menus to pop up instantly on hover. However, on mouse leave it should stay open for a short time because the user could have moved the mouse accidentally outside the child-div.
Well, the problem is that it even opens (after the set time) if you hover it accidentally. This shouldn't happen.
Here's my code:
var timer = false;
$('li.mega-menu-dropdown').hover(function(e){
var el = this;
if ($("li.mega-menu-dropdown.open").length == 0)
{
setTimeout(function() {
openMenu(el);
}, 1000);
} else {
clearTimeout(timer);
openMenu(el);
}
},
function(){
timer = setTimeout(function(){
$('li.mega-menu-dropdown').removeClass('open');
},300);
});
function openMenu(el) {
$('li.mega-menu-dropdown').removeClass('open');
$(el).toggleClass("open");
}
Here's my jsfiddle: http://jsfiddle.net/bsnubner/
Edit:
Just hover it, stay there with the mouse and it'll work as expected. But then try to move the mouse over the "Hover Menu"-Link and instantly away of it. You'll see that it automatically opens the submenu even if you aren't in the menu anymore. Even worse: You have to go inside and outside the menu again to close it.
The problem will be, that on hover it sets the timeout with the function call. This will execute the function after the set time - even if you aren't in the menu anymore. But how could I prevent it?
I'd be very thankful if you could lead me on the right track.
Okay, my solution is as follows if you haven't a better one:
I have simply added:
var startTimer = false;
And kill the timer if the user accidentally hovered a menu link.
http://www.jsfiddle.net/bsnubner/4
If a user hovers "Hover Menu" it'll pop up after the timeout. If he then hovers "Hover Menu 2" and the other submenu is still opened, it'll open the second submenu instantly without delay.
If the user accidentally hovers one menu link only for a short time it won't open it's submenu.
Onmouseleave it closes as expected after some time :)
I'm struggling with this javascript at the moment.
$(document).ready(function () {
var visible = false;
var body = false;
$("body").mouseup(function () {
if (visible) {
$(this).parent().find("ul.subnav").slideUp('slow');
visible = false;
$(this).removeClass("clicked-background");
body = true;
}
});
$("ul.topnav li a").click(function () { //When trigger is clicked...
var menu = $(this).parent().find('ul.subnav');
if (!visible && !body) {
$(this).parent().find("ul.subnav").slideDown('fast').show();
visible = true;
$(this).addClass("clicked-background");
}
// else if (visible)
//{
// $(this).parent().find("ul.subnav").slideUp('slow');
// visible = false;
// $(this).removeClass("clicked-background");
// }
body = false;
});
});
I wanted to add the feature, so if you clicked outside the menu/navigation the dropdown would hide.
The current problem with this code is, that if you click the menu and then click outside the menu - you have to double click the menu again to get it showen. This is caused by the body variable is set too 'True' ofc.
I made the body variable trying to fix the problem if you clicked the menu - and then clicked the same link again. The menu would first open correctly, and then close and open again.
Soo main problem is. My navigation open -> closes -> open
Don't use global variables. Check if the actual element is visible by checking
.is(':visible');
You can use that on the various selectors you have now.
I would be tempted to use onmouseout of the 'now visible' menu as the event of choice..
I dont think that running events off of the body tag is the good way to go.
the flow should be..
click (menu button or link)
show menu
set onmouseout for button and menu on click
onmouseout, remove onmouseout events