Here's the code:
var HoverMenuOptions = {
show: function() {
$("#UserHoverMenu").css({"display": "block"});
},
hide: function() {
$("#UserHoverMenu").delay(2000).fadeOut(function() {
$(this).css({"display": "none"});
});
}
};
I want the div #UserHoverMenu to fadeOut if mouse leaves either the link triggering show() or #UserHoverMenu.
I have tried with:
$('#UserProfileName a').click(function() {
HoverMenuOptions.show();
});
$('#UserProfileName a, #UserHoverMenu').mouseleave(function() {
HoverMenuOptions.hide();
});
But hide is still triggered if mouse leaves #UserProfileName a and then into another div called #UserHoverMenu... How can I break the triggered fadeOut() when I enter #UserHoverMenu with the cursor?
$('#UserHoverMenu').mouseenter(function(e){
$(this).stop(true,true).css({"display": "block"});
});
Related
I have a clickable div that opens as you can see here
http://jsfiddle.net/Sj575/277/
My problem is that when the div's open content that is clickable appears on top of it (kind of like a gridder).
But when I click on the things on top, it does registers the image animation abut the div closes.
JQUERY (div)
$(function() {
$(".ext").click(function() {
$(".int").toggleClass("hidden");
$(".ext").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pe").toggleClass("show");
});
$(".int").click(function() {
$(".ext").toggleClass("hidden");
$(".int").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pi").toggleClass("show");
});
});
JQUERY(gridder)
jQuery(document).ready(function ($) {
// Call Gridder
$(".gridder").gridderExpander({
scrollOffset: 60,
scrollTo: "panel", // "panel" or "listitem"
animationSpeed: 400,
animationEasing: "easeInOutExpo",
onStart: function () {
console.log("Gridder Inititialized");
},
onExpanded: function (object) {
console.log("Gridder Expanded");
$(".carousel").carousel();
},
onChanged: function (object) {
console.log("Gridder Changed");
},
onClosed: function () {
console.log("Gridder Closed");
}
});
});
If you want a click event to only fire on the parent div, and not its descendants, try using the following comparison in your $(".ext") and $(".int") div click handlers:
if (e.target !== this)
return;
Working example whereby I've added a child button that won't cause the grow/hide animation on click: http://jsfiddle.net/zxagqwvq/
So you'd have something like:
$(function() {
$(".ext").click(function(e) {
if (e.target !== this)
return;
$(".int").toggleClass("hidden");
$(".ext").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pe").toggleClass("show");
});
$(".int").click(function(e) {
if (e.target !== this)
return;
$(".ext").toggleClass("hidden");
$(".int").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pi").toggleClass("show");
});
});
p {
overflow:hidden;
}
I updated the answer, hope this helps.
You can prevent a click-event from going any further, by using this:
$(".ext").click(function(event) {
...
event.stopPropagation(); //Event tree stops here. No parent elements will be notified of the event
});
I'm having a tricky time with this code.
First, I have a series of images, each within an anchor.
a > img
a > img
a > img
The functionality I want is, when you roll your mouse over the image it dynamically adds 2 share buttons to the anchor:
a > .fb + .twitter + img
When you roll off they get removed.
The problem is, I also have a lightbox which binds to the a. That means when you click one of the share divs, it shows the share box properly, but it also triggers the lightbox.
I have tried everything to stop this... preventDefault(), stopPropagation() and return false. None of them stop the div click from bubbling to the anchor and triggering the lightbox.
First is my code for the rollovers. App.postImages is just a cached collection of jQuery image anchors. I use .add() to also add embedded video containers.
rolloverShares: {
divs: $('<div class="image-rollover rollover-facebook">Facebook</div><div class="image-rollover rollover-twitter">Twitter</div>'),
init: function() {
var _this = this;
App.postImages.add('.embed-container', '#content-wrapper').hover(
function() {
_this.divs.prependTo($(this)).show();
},
function() {
$('div', this).remove();
}
);
$(document).on('click', '.rollover-facebook', function() {
Social.facebook.popup();
return false;
});
$(document).on('click', '.rollover-twitter', function() {
Social.twitter.popup();
return false;
});
}
},
Here is my lightbox code. Nothing fancy. If it matters, the .on() in the block below makes it so you can click anywhere on the lightbox to close it, not just the image.
lightbox: function() {
if (isDesktop) {
App.postImages.nivoLightbox({
effect: 'fade',
theme: 'default',
keyboardNav: false,
clickOverlayToClose: true,
errorMessage: 'The requested image cannot be loaded. Please try again later.'
});
$(document).on('click', '.nivo-lightbox-image img', function() {
$(this).closest('.nivo-lightbox-overlay').find('.nivo-lightbox-close').click();
});
} else {
App.postImages.click(function(e) {
e.preventDefault();
});
}
},
Also I suppose i should put what's in App.postImages. It's just this:
$('a img', '#content-wrapper').not('.share-button img').parent().addClass('post-image')
I am trying to stop a propagation of a animate function for one div, right now the opacity animation effects everything (html) and that is fine, but i want it to "skipp" one div. My code look like this!
jQuery:
var HTML = document.getElementsByTagName('html')[0];
$('.day-number').each(function() {
this.addEventListener('click', function(e) {
$('html').animate({opacity:0.5}, function() {
$(this).find('.input_info_cal').fadeIn(500);
});
e.stopPropagation();
});
});
$('.input_info_cal').each(function() {
this.addEventListener('click', function(e) {
e.stopPropagation();
});
});
HTML.addEventListener('click', function() {
$('html').animate({opacity:1}, function() {
$(this).find('.input_info_cal').fadeOut(500);
});
});
The div called ".input_info_cal" is the one that should not get opacity on it, but I just cant get it to work..
All help is thanked for!
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');
});
});
The idea is to move a div downwards slightly when hovered and when clicked to move further down to reveal content. The problem is that when you have clicked the div and it moves down you are no longer hovering on it so it performs the 'close when not hovered function.
$(function () {
$('.more').hover(function () { //Open on hover
$('#pull_down_content').animate({
'top': '-360px'
}, 1000);
}, function () { //Close when not hovered
$('#pull_down_content').animate({
'top': '-380px'
}, 1000);
});
});
$('.more').click(function () { //Move down when clicked
$('#pull_down_content').animate({
'top': '0px'
}, 1000);
});
Put a class on the element to signify that it has been clicked, and do not close it if it has that class:
$(function() {
$('.more').hover(function(){ //Open on hover
$('#pull_down_content').animate({'top':'-360px'},1000);
},
function(){ //Close when not hovered
if (!$('#pull_down_content').hasClass("expanded"))
$('#pull_down_content').animate({'top':'-380px'},1000);
});
});
$('.more').click(function(){ //Move down when clicked
$('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
});
Of course you now need another trigger to determine when exactly to undo the hover animation after the item has been clicked; how to do that exactly depends on the effect you want to achieve.
The problem is that when you have clicked the div and it moves down
you are no longer hovering on it so it performs the 'close when not
hovered function.
I'm not sure I get it? You do know that the element with the bound events is not the same as the one that you are animating ?
Anyway, something like this maybe:
$(function() {
$('.more').on('mouseenter mouseleave click', function(e) {
if (!$(this).data('clicked')) {
var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
$('#pull_down_content').stop().animate({'top': Top}, 1000);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
}
}
});
});
FIDDLE