Develop Reference

Perform multiple clicks as long as user is hovering over an element in jQuery

I have the following jQuery. What it does is that once you hover over the next or previous arrows, it clicks on them, making the slider move. I need to modify this code, so it keeps clicking as long as you are hovering, right now, it only does it once.
$( "#slider .next, #slider .prev" ).hover(
function() {
$(this).click();
},
function() {}
);
The slider uses a jQuery plugin called Tiny Carousel
Thanks

This will trigger a click on the elements every second:
var clr;
$(".next, .prev").hover(function (e) {
clr = setInterval(function () {
$(e.target).click();
}, 1000)
}, function () {
clearInterval(clr);
});
jsFiddle example

var handle=null;
$( "#slider .next, #slider .prev" ).hover(
function() {
var self=$(this);
if(handle!=null)
clearInterval(handle);
handle = setInterval(function(){
$(this).click();
},100);
},
function() {}
);

Bootstrap3 dropdown menu toggle collapse div

I am trying to get the Bootstrap3 nav dropdown to trigger a collapsible div at the same time it displays the dropdown - basically to 'simulate' a fullwidth subnav bar:
$('.dropdown').on('show.bs.dropdown', function () {
$('#collapseExample').slideDown('normal');
});
$('.dropdown').on('hidden.bs.dropdown', function () {
if (!$('div.dropdown').hasClass('open')) {
$('#collapseExample').slideUp('normal');
}
});
http://codepen.io/anon/pen/myRgbQ
I have 'almost got it working but it behaves strangely when there is already one subnav open...
I'm sure it would be a quick fix, but I'm stumped! Any help would be greatly appreciated!

Try this code:
$('#collapseExample').collapse(true);
$('.dropdown').on('show.bs.dropdown', function () {
$('#collapseExample').slideDown('normal');
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hidden.bs.dropdown', function () {
if (!$('div.dropdown').hasClass('open')) {
$('#collapseExample').slideUp('normal');
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
}
});

When you hover over the sub-navs in sequence, the previous sub-navs remain, making it impossible to click on any of them

I have added setTimeout for 3 seconds in this hover functionality as per requirement now i am facing below issue while hovering over sub-navs:
-> When you hover over the sub-navs in sequence, the previous sub-navs remain, making it
impossible to click on any of them.
Is there any way to remove this overlapping of sub-navs when you hover over new main navs? But still i want 3 second stopage when we remove mouse from main nav so that i can get time to select subnavs?
Example: http://design1.advisorproducts.com/home
Below is ths JQuery code:
$(function () {
$("ul.dropdown li").hover(function () {
var timeout = $(this).data("timeout");
if(timeout) clearTimeout(timeout);
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
}, function () {
$(this).data("timeout", setTimeout($.proxy(function() {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
}, this), 600));
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

jQuery sliding menu error

I'm doing animated menu with jQuery (3 levels). I'm using efects slideDown and slideUp. Sometimes (but no always), when I open submenu of first main item, submenu of second main item won't work until I refresh the page. It works OK with efects fadeIn and fadeOut, but I want to use slide.
Here is my code: http://jsfiddle.net/mcCAx/

The problem was the styling on your <ul class="SubStage"> element was being overridden. So, fight fire with fire by re-overwriting the styling in a callback. Your side menu shows up every time. :)
$(document).ready(function()
{
$('li.MainStage').hover(
function()
{
$(this).find('ul.SubStage').slideDown('slow',function(){
$(this).parent().find('ul.SubStage').css({overflow:"visible"});
});
},
function()
{
$(this).find('ul.SubStage').stop().slideUp('slow');
});
$('li.SubStage').hover(
function()
{
$(this).find('ul.Sub2Stage').slideDown('slow');
},
function()
{
$(this).find('ul.Sub2Stage').stop().slideUp('slow');
});
});​
Check it out here.

This fixed it for me Here
$(document).ready(function()
{
$('li.MainStage').hover( function()
{
$(this).stop();
$(this).find('ul.SubStage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.SubStage').slideUp('slow');
});
$('li.SubStage').hover( function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideUp('slow');
});
});

Adding timeout to a dropdown menu not working

I am working on a website and want to modify the current code for a dropdown menu item. Here is the current code:
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(300);
},
function () {
//hide its submenu
$('ul', this).slideUp(300);
}
);
});
I tried changing the code to add a timeout with the intention of setting the timeout when the user took their mouse off of the menu so the menu didn't toggle the slide up effect right away. The desired effect that I want is that if the user takes their mouse off the menu for like 200 ms but then moves it back to the menu it doesn't do anything. So the menu waits like 300-400 ms to toggle the slide up function. Here is the code that I wrote that didn't work. Part of it was because of the this in $('ul', this).slideUp(250); Anyways, here is the code that I tried to implement that didn't work:
$(document).ready(function () {
var timeoutID;
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(250);
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout(SlideUp, 350);
},
);
function SlideUp() {
//hide its submenu
$('ul', this).slideUp(250);
}
});
What is the best way to have the program wait to toggle the slideup function? Any ideas are appreciated. Thanks.

This is what you wanted to do.
$(document).ready(function () {
var timeout;
$('#nav li').hover(function () {
//show its submenu
clearTimeout(timeout);
$('ul', this).slideDown(300);
}, function () {
//hide its submenu
var self = this;
timeout = setTimeout(function(){
$('ul', self).slideUp(300);
}, 300);
});
});​

jQuery.Deferred(), introduced in version 1.5, is a chainable utility
object that can register multiple callbacks into callback queues,
invoke callback queues, and relay the success or failure state of any
synchronous or asynchronous function.
Take a look at this.

Not an answer to your specific question, but I would use transition-delay if possible, fiddle.