Develop Reference

Enforcing order of jQuery UI transitions

I'm working on a site using Twitter bootstrap and the Ace Admin template.
Dropdown menus are implemented using unordered lists in which each list item is an element in the dropdown.
My user requirement is that the dropdown list show a list of notifications and when a notification is clicked, the list of notifications will slide away and the details of the clicked notification will slide into place. I implement all the content as list items and use jquery-ui's hide and show functions to animate the transitions.
The basic flow is supposed to be:
User Clicks notification -> list of notifications is hidden -> Notification detail is shown.
User Clicks "back on detail -> notification detail is hidden -> Notification List is shown.
For some reason, the first scenario above works fine, but in the second, the notification list starts to show before the details are done being hidden, which results in the parent container getting temporarily taller as both are visible.
Here is how I have the code:
$(".notification-item").click(function (e) {
e.stopPropagation();
var guid = $(e.target).closest("li").attr("data-guid");
$(".notification-item").hide("slide", { direction: "left" }, 250, function () {
// This is called when hiding is complete
// show the back button and detail for the correct notification
$("#notificationsBack").add("li#" + guid).show("slide", { direction: "right" }, 250);
});
});
$("#notificationsBack").click(function (e) {
e.stopPropagation();
$(".notification-detail").hide("slide", { direction: "right" }, 250, function () {
// this functions should run after the hide is complete, but appears to start immediately
$(".notification-item").show("slide", { direction: "left" }, 250);
});
});
I've posted a video of how this looks (with the animation slowed down for better visibility).
Any idea why in the second transition the hide actions doesn't complete before the show action starts?

You need to force the .show() event to happen after the other one. The easiest way to do this is with:
$("#notificationsBack").click(function (e) {
e.stopPropagation();
$(".notification-detail").hide("slide", { direction: "right" }, 250);
setTimeout(function(){
$(".notification-item").show("slide", { direction: "left" }, 250);
}, 250);
});
a setTimeout() call.

Apply a 2-Second delay on the menu drop-drop bar

I'm trying to achieve a two seconds delay on my magento dropdown submenu items only when i hover parent item. But i figure some issues.
Here I have a jQuery for 1st menu item. So when I will hover the item, its submenu will be shown after two seconds. My jQuery is:
jQuery(".level0.nav-1").mouseover(function() {
setTimeout(function() {
jQuery(".level0.nav-1 .dropdown-container.left").show();
}, 2000);
});
jQuery(".level0.nav-1").mouseout(function() {
setTimeout(function() {
jQuery(".level0.nav-1 .dropdown-container.left").hide();
}, 0);
});
The problem is that the submenu don't dissapear instantly after I make a mouse out action. Only If I re mouse over the item and mouse out. Can someone help me with this problem? I will be glad to learn a new method, another than my method.(Which is actually not so good I guess).

Couldn't you just add the same "mouseout" event to the 2nd-level tier as well but without the 2-second delay?
For example:
jQuery(".level0.nav-1 .dropdown-container.left").mouseout(function() {
$(this).hide();
});

Can you use "blur" ?
$( ".level0.nav-1" ).blur(function() {})
http://api.jquery.com/blur/

jQuery/JS setTimeout/clearTimeout

I'm not super proficient at this, but I have a navigation item where on hover, a div with a search form slides down. Currently, when you mouseover, then mouseout, the div stays open until you click the close button.
I'm trying to make it so that when you mouseout the div slides backup after a few seconds, unless the user is on the div or nav link still (i.e., they're filling out the search form).
Here's what I have so far:
$("#services_link").mouseover(function() {
$("#services_link").css('background-position','left -73px');
$("#vendors_dropdown").slideDown(function() {
setTimeout(HideMe, 4000);
});
});
function HideMe() {
$("#services_link").css('background-position','left 0');
$("#vendors_dropdown").slideUp();
}
That gets me as var as the div sliding down on hover of the link, and sliding up after 4 seconds (regardless of where the mouse cursor is). So I just need the div to stay open if the mouse cursor is on the link or div.
I've looked at 3 or 4 other similar questions (and answers) and none really quite do the trick. setTimeout (and clearTimeout) is kinda new to me, so please excuse the noob question. :)

Bind both mouseenter and mouseleave. You'll want to do the timeout on the mouseleave, but then reset it when/if the mouseenter happens again.
Try looking at just the selected answer here to see how to do what I'm talking about.
Something like this:
var timeout;
$("#services_link, #vendors_dropdown").mouseenter(function() {
window.clearTimeout(timeout);
$("#services_link").css('background-position','left -73px');
$("#vendors_dropdown").slideDown();
}).mouseleave(function(){
timeout = window.setTimeout(HideMe, 4000);
});
function HideMe() {
$("#services_link").css('background-position','left 0');
$("#vendors_dropdown").slideUp();
}

check for ('div')mouseenter on ('a')mouseleave

my problem is following:
I got a trigger(a) and a popup(div). The div doesn't lie nested inside the anchor.
When I hover over a, I want the div to show up.
When I go from a to the div, I want it to stay visible.
When I leave the div, I want it to close.
When I hover over a and leave without entering the div, I want the div to close.
I got most of that figured out, but now I'm struggeling with requierement no. 2.
When checking for mouseleave on a, I check if there is a mouseenter on the div. If it is, I want to abort the mouseleave. If not, I want to close the div.
What am I doing wrong? Is this even the right way to do this?
Here's the markup:
<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>
Here's the jQuery:
$('.popup_toggle').mouseenter(function() {
var element = $(this).next('.popup_div');
$.data(this, 'timer', setTimeout(function() {
element.show(100);
}, 500));
});
$('.popup_toggle').mouseleave(function() {
clearTimeout($.data(this, 'timer'));
if($('.popup_div').mouseenter==true)
{
return false;
}
else
{
$('.popup_div').hide(100)
};
});

What you're trying to do is fairly simple. When entering the trigger, identify the panel (layer, popup, whatever), save reference to each other using .data() and have the event handlers check if the related targets are either the trigger (from the panel view) or the panel (from the trigger view). I threw something together. Have a look at the console log to see how this works… http://jsfiddle.net/rodneyrehm/X5uRD/

That will most likely not work...no. I would suggest that you add a mouseenter and mouseleave callback to you <div> element as well and have them set a global variable that tells your other callbacks how to handle their events, i.e. "if global variable is true, don't hide the popup on mouseleave, otherwise hide popup" or something like this.
The other approach would be to check whether the mouse is inside the popup when the mouseleave callback tries to hide the popup. That might be much more work than it is worth though.

I believe the problem with your implementation is that the mouseenter on the div will fire shortly after the mouseleave from the a.
This would give you something like:
$('.popup_toggle').mouseenter(function() {
// Clear any pending "hide" timer
// Set a show timer
});
$('.popup_toggle').mouseleave(function() {
// Clear any pending "show" timer
// Set a hide timer
});
$('.popup_div').mouseenter(function() {
// Clear any pending "hide" timer
});
Note that you'll have to make sure that you access the same timer from both the .popup_toggle event and the .popup_div event. You may want to consider using Ben Alman's doTimeout plugin to help with this. It (usually) results in much clearer code than manually working with setTimeout/clearTimeout.

Jquery drop down

Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/
Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit of animation so it doesn't appear instantly.
I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.

You can see a working demo of the following here.
I prefer mouseenter[DOCS] and mouseleaveDOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:
<div class="mask-layer">
<a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
<div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>
I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp[DOCS] and slideDown[DOCS] as follows:
$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
$('.slidedown').slideDown(600);
}).mouseleave(function() {
setTimeout(function() {
$('.slidedown').slideUp(600);
}, 200);
});

You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
$(document).ready(function() {
$('.slidedown').hide();
var timeout = 500;
var closetimer = 0;
$('a.top-link-cart, .slidedown').mouseover( function(){
cancel_timer();
$('.slidedown').slideDown(1000);
});
$('a.top-link-cart, .slidedown').mouseout( function(){
closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
});
function cancel_timer(){
if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;
}
}
});
http://jsfiddle.net/P567S/7/

if you are looking for a click action dropdown menu here it is
//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();
});
//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});
hope it works for you..... !!