I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.
Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.
$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.
Related
I have a div that is serving as a chat, and depending on the users actions I append messages. I want it so, after each message is appended, the div will scroll down. However, it's not working 100%.
Here is the fiddle to check out: https://jsfiddle.net/mfj1ub8c/
I'm pretty sure it has something to do with the delays/fadein/hide methods on each append, but they need to be there to give a certain effect that is needed.
Any ideas on how to solve this?
The problem is scrollDown is being called before the element is actually shown (display: block) by fadeIn, so the scroll height hasn't changed yet. If you call scrollDown after fadeIn is complete, you'd miss the animation when the new content is off-screen. What you want to do is scroll when the element is displayed, but still transparent (opacity: 0). If you are on jQuery 1.8+ you can use the start option.
Here is a working fiddle https://jsfiddle.net/mfj1ub8c/2/
Also you are overshooting your scrollTop, which won't cause you problems here, but it should be the whole height minus the visible height.
$('#chat').prop("scrollHeight") - $('#chat').height()
Call scrollDown only when fadeIn is complete. You can use the complete callback parameter of fadeIn.
e.g.
.fadeIn(500, scrollDown))
Fixed fiddle: https://jsfiddle.net/mfj1ub8c/1/
I have an html5 page with a dropdown menu using mootools. It's working if I use the hide() and show() functions. But, I want the menu's to slide in and out, like this:
var m = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");
if (e.hasClass('active')) {
m.hide();
e.removeClass('active');
} else {
m.show();
e.addClass('active');
}
Instead of hide and show I want slideIn and slideOut:
var m = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {
m.slideOut();
e.removeClass('active');
} else {
m.slideIn();
e.addClass('active');
}
Working example: http://jsfiddle.net/wzzeZ/
Not working: http://jsfiddle.net/37V53/1/
It's not throwing errors; where do I look to fix it?
There are a few things going on here.
First of all, you're not seeing any errors because there are none. If you litter the code with console.log() calls, they all run.
It's a style issue that's preventing the menus from displaying.
The FX.Slide Class in Mootools doesn't seem to explicitly set the 'display' property of the element you're sliding to block. You still need to call .show() for it to work.
Next, if you check out the docs for FX.Slide, you'll notice that it creates a wrapper element to do the slide effect (the container is needed for the height animation, overflow: hidden, etc.)
Unfortunately that seems to be messing with the positioning of the menu, which is positioned relatively to its containing element - but the containing element has height and overflow: hidden styles which then hide the menu (not to mention, even if you could see it, it's in the right place).
To see what I'm talking about check out this updated Fiddle here: http://jsfiddle.net/37V53/2/
If you run that in Firefox with Firebug, and you hover your cursor over the element that's logged to the console, you'll see Firebug's blue hilight appearing where your element actually is being displayed - in the middle of the window, and hidden from view.
This is a combination of assumptions made in the MooTools Classes you're using working against each other; You'll probably be better off writing your own (simple) slide-out script using FX.Tween rather than FX.Slide.
I created a sample of how to do this based on the original Fiddle (that works) - http://jsfiddle.net/LkLgk/
Trick is to show the element to the browser but not the user (by setting visibility: hidden before display: block, grab the height, set height to 1px, visibility back to visible, then tween the height to the previously detected value.
Hope that points you in the right direction; remember, when in doubt, console.log everything!
I'm having an unexpected effect and some other bugs when trying to use show/hide with mouseover and mouseout.
What I was trying to do is have a box (div) and when you would mouse over it, another box would appear and slide to the right.
Here's the fiddle for it
http://jsfiddle.net/XtXGR/
Now there's two problems with it. One is the flickering and the other is that it appears by growing from the top-left corner and what I want it to do is appear from the left.
Any help would be greatly be appreciated. Thanks
I think I know what causes the flickering from the similar questions but I still need help with the other issue. Thanks!
Oh also just so you know the context in which this will be used is on a page with a table of items and each item would be the object in the fiddle link I posted above.
The main issue is that moving over a different child element of the container will trigger a mouseout and mouseover combination, which is why you see the element expanding and collapsing. IE circumvented this with the mouseenter and mouseleave events, which act exactly like the CSS :hover.
Speaking of which, the jQuery hover function has this feature too. You should use that instead of mouseover and mouseout.
According to the show API, you should use the slide effect to get what you want.
Your final code should look like this: http://jsfiddle.net/XtXGR/28/
A couple things:
If you want to do a fadein/out this would be better:
$(document).ready(function(){
$("div.item_container").hover(function() {
$("div.item_body").fadeIn(500);
}, function() {
$("div.item_body").fadeOut(500);
});
});
Also, you should probably float the div .item_body to the left..
Demo: http://jsfiddle.net/lucuma/XtXGR/33/
How about using CSS3 transitions instead?
See this: http://jsfiddle.net/EVDj6/2/
Something like this? Using slide will give you the slide from default left effect.
$(document).ready(function(){
$("div.item_container").on('hover',function(){
$("div.item_body").toggle('slide',500);
});
});
http://jsfiddle.net/XtXGR/25/
There were many issues in your code. The href's were invalid and the floating of the elements was not 100% correct. One of the main issues was that you had display:none in your CSS. Bring that dispay:none out and of the CSS and put it inline on the item you want to show/hide. When its default state is "hide" then you need to bring the display:none inline.
Look at this fiddle to get a better idea of how to go about this with a bit more valid syntax:
http://jsfiddle.net/fH3EC/1/
I made something fast, you can go crazy with it :) The animation is pretty smooth, I hope it's useful for you.
http://jsfiddle.net/XtXGR/50/
I have a button that, when hovered over, shows a <span> that is otherwise hidden. What I'm trying to figure out is how to transition the button's expansion on :hover so it's more smooth. I tried using CSS3 transitions but couldn't quite get it down. Plus I don't know if that's the best solution anyway.
EDIT: I added some jQuery but must have something wrong. Here's the script I used, after reading a previous answer here (which I'll reference if I can find it again):
$('a:has(span)').hover(
function() { $('span', this).fadeIn(); },
function() { $('span', this).fadeOut(); },
);
I've created a Fiddle: http://jsfiddle.net/UYexr/. Can anyone help me out?
If I were you I would avoid using CSS3 simply because of its lack of support; given that I would probably stick to JS animation.
The best way I would see to do this is to make the span have display:inline-block; with a defined width. Then you can use a javascript animation library to animate the span's display.
Personally, I would go about using jQuery's animate method. Although there are plenty of js animation libraries...
Live Demo with visible code; http://jsfiddle.net/3eEgb/4/
The demo should be fairly self explanatory; I'm finding the length of a sentence inside a wrapper with the overflow hidden, and if it's wider than the wrapper I'm running an animation function that slides it along, revealing the remaining text.
However I'm having problems with the mouseout part of the hover() function. When the user mouses out I'd like the text to snap back to it's starting position.
According to the documentation (http://api.jquery.com/stop/) I should be able to .stop() the animation on the object - but I must be missing some detail because I can't get it to work as documented. If I could get .stop() to function I presume I can chain it with .css() to set margin:0 to move the text back to it's original position.
$(this).stop().css("color", "red"); //This isn't working ARR!
is the source of my frustrations. I've tried all the various ways I could think of to no avail.
Thanks!
You're animating the .width element, but stopping the .track-version element.
Change the mouseleave handler to $(e).find(".width").stop().