I am trying to animate a menu and have things sliding to the right on mouseover. Is there an easy way of undoing everything mouseover did when mouseout?
I have all the menu items (of my vertical menu) slide to right and have an empty news div slide in place of these menu items, which then gets filled with content, once it is in place... i.e. multiple instances of animate().
I think you are looking for something like .stop function: http://api.jquery.com/stop/
And probably you want to do something like this:
$(el).hover(function () {
$(this).stop().animate(...);
}, function () {
$(this).stop().animate(...);
});
Example: http://jsfiddle.net/VjKLe/
Related
I have two DIVs next to each other. If I scroll the first, the second should scroll too. This is working with this JS Code:
$('#firstDiv').on('scroll', function () {
$('#secondDiv').scrollTop($(this).scrollTop());
});
If I want to apply this to the second DIV too, so that the first DIV scrolls by scrolling the second, I tried it this way:
$('#firstDiv').on('scroll', function () {
$('#secondDiv').scrollTop($(this).scrollTop());
});
$('#secondDiv').on('scroll', function () {
$('#firstDiv').scrollTop($(this).scrollTop());
});
The problem now is, that both are scrolling super slow. Like so slow, that it nearly is not visible.
I guess they start to interact with each other or block each other.
How to do this properly?
They definitively slow down, particularly while scrolling with mouse wheel.
I think it's either use a timeout variable so there's not so many events fired when you're scrolling, or use some javascript code to keep them sync'd directly, like this small <1kb plugin does:
http://asvd.github.io/syncscroll/
I've got a menubar that I want to add some CSS or JS to. I want to make it such that when I click on it when in responsive view, the entire object can be targeted (I plan to do some background styling). I've found some stack overflows re: coloring the menu items, the menu itself, but none of those when applied to the overall menubar either A) work at all B) work only for responsive, which is what I want.
I've made a codepen. I just can't figure out if things like :active or :focus or something else would be the right fit. Hopefully the code pen illustrates what I want. I just cannot seem to target the navbar in it's entirety whether thru JS or CSS. I want to achieve a background effect for not just the dropdown but the row the hamburger lives in when clicked.
You can use Bootstrap's collapse events.
$('.navbar-collapse').on('show.bs.collapse', function () {
// Do your stuff
// This event fires immediately when the show instance method is called.
});
$('.navbar-collapse').on('hide.bs.collapse', function () {
// Do your stuff
// This event is fired immediately when the hide method has been called.
});
CODEPEN
If you add this to your navbar-header div:
<div onClick="clickMe()" class="navbar-header page-scroll">
then add this as a function:
function clickMe(){
if(window.innerWidth < 768){
$('.navbar-header').css('background-color', 'red');
}
}
it will work. you can also do an addClass('className'), and specify the class name like so:
.navbar-header.className{
background-color:red;
}
I´m using dots to navigate the owl carousel 2.
I like to change the navigation from click to hover.
So when I hover the second dot, the carousel jumps to the second slide.
Couldn't find something like this in the documentation.
Are there any easy solutions for this?
The easiest solution would be something like this:
$('.own-carousel .dot').hover(function() {
$(this).click();
}, function() {});
This simply triggers the click events on hover. I am not sure about the classes own-carousel and dot, better check those.
I'm trying to create an effect similar to the navigation on this site: http://rogwai.com/. I'm fairly close as you can this in this jsFiddle.
It's working fine if you hover into one li at a time (i.e. from the bottom). If however, you slide horizontally through each list item the 'follower' returns to the active position or slides of the end after each item that's hovered over. Instead it should follow the mouse.
Looking at the code executed on hover out this is completely understandable. What I can't get my head around is how to make it only return to the active position or slide off the end when the mouse completely leaves the menu.
Hopefully that makes sense - you should see the problem straight away from the jsFiddle.
Thanks in advance.
What you can do is add the mouseenter part to the li as you have it, but put the mouseleave part on the entire ul. This way, the leave will only fire when you mouse out of the entire ul.
http://jsfiddle.net/YZr5b/6/
$('nav.block-system-main-menu ul li:not(.follower)').mouseenter(function() {
followerMove($(this));
});
$('nav.block-system-main-menu ul').mouseleave(function(){
followerMove($active);
});
Note, if you are really using jquery 1.2.6 (quite old), you will need to modify this a bit as mouseenter and mouseleave do not exist.
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/