I have a mockup of a menu system I'm putting in place:
http://djinnius.com/GFTest/gftest.html (there is also a bin here: http://jsbin.com/orejup/2/edit but the text displayed in the green div doesn't work properly)
The menu slides out when the little arrow in the upper LH corner is clicked on.
I provide a full preview of the menu item in the green div when the menu item is hovered over by the mouse.
I would like the menu to elegantly slide in/out of sight like this:
http://jsbin.com/itogor/5
The thing that is special with the above behavior is that if I don't use the positioning and overflow properties as demonstrated in the jsbin, the menu text squishes down as the menu is closed. This is unsightly and distracting.
I thought I had the above effect working properly but I ran into a problem that seems to indicate otherwise.
I want to change the contents of the green div based on the selection of the slideout menu. However, when you scroll down to the lower items of the menu and click on an item, the contents of the green div are incorrect. It appears that the sliding menu is squeezing the text down and causing a mouseenter and mouseleave event to take place after the click event. This changes the content of the green div to be incorrect.
Any thoughts on how to prevent this behavior?
I attempted to write a bin (http://jsbin.com/orejup/2/edit) but for some reason the green div text isn't changing. You can still see the undesired effect by examining the console and seeing the mouseenter/mouseleave events occurring after the click event.
The $(".i-gf-summary-wrapper").scrollTop(0); was causing the problem.
By moving this bit of code to the slideOut() function instead of the slideIn() function, I still obtain the desired effect while removing the undesired side effect.
Related
When having a button (or any other element, positioned absolute or fixed) on top of an element with a scrolling area which is actively scrolling (i.e. for example it's decelerating) it seems that the button doesn't receive the click event when clicked.
It seems that when clicking (or touching) the scrollable element area, the scrolling is interrupted, but the button on top of it doesn't receive any event.
I've debugged events for the floating element in Chrome and the only thing received is a mousewheel event.
This is particularly annoying if the button is a navigation button, as you have to click twice to exit the page if the content is decelerating (as opposed to once when the content is still).
I browsed many times for a solution but never found a clue about this behaviour and how to avoid it, so any thoughts will be appreciated.
Sample code here: https://codepen.io/djibarian/pen/bGLoYxY
If you scroll the red box and while still scrolling due to inertia try to click the button, you only manage to stop the scrolling in the box, but the button doesn't receive the click event.
I haven't seen your code, but it's worth checking following.
Check if any element overlaps the positioned fixed element.
Make sure the stacking context of the element is correct.
Try adding a higher z-index and see if it's working. If it works then it's worth changing the dom element order for precedence.
I have a simple dropdown submenu that I show when you hover a list element of a horizontal menu.
I position the dropdown submenu by setting relative position to LI parent and absolute position to the container of the submenu.
Then I show the submenu by listening to mouseenter with jquery and I hide it by listening to mouseleave.
At first looks like everything is working fine, but after adding some content to the submenu so that it now has like 100px height I'm starting to have a problem:
The mouseenter runs fine but the mouseleave gets fired a lot before reaching the end of the submenu, it gets fired when I'm half a way to reach the end.
Why is this happening?
I'm answering my own question even if I did not provide code examples, I just want to explain the situation and what was going on.
Looks like the content I had after my main horizontal menu, had a default z-index that caused it to be placed on top of my dropdown.
So what was happening is that when I was going down with my cursor when I reached the content after my horizontal menu, even if I had not reached yet the end of my dropdown, I was somehow with my cursor off my dropdown because of the z-index.
So my solution was to test with some z-index added to the dropdown, such as z-index: 11, and it worked! The z-index you should set in your case could vary depending on what positioning and z-index has other content on your page.
Hope it helps someone!
This answer:
cancelling mouseout event when element is overlaid
Gets somewhere near, but isn't really what I am after as it's sort of reversing my problem.
I am making an image gallery similar to the Facebook image viewer.
An image is loaded into an absolutely positioned div which is centred on screen and floats above the main page with a z-index value.
To the left and right of the image are small div elements with absolute positioning and a z-index 1 higher than the image. These div elements are left and right arrows to click through the gallery.
The arrows are hidden when the image loads, but then when the user moves his mouse over the image, the arrows should fade in, then if they move off again, they fade out... just as the Facebook viewer does.
I am using hoverIntent to achieve this, and it works fine.
BUT... when the user moves his/her mouse into the arrow div, hoverIntent sees this as a mouseleave event on the image which is underneath and hides the arrow...
So... what I need is to be able to have hoverIntent ignore the arrow divs.
The code I am using for hoverIntent is quite straight foward:
function showArrows() {
$('.imgNav').fadeIn(500);
};
function hideArrows() {
$('.imgNav').fadeOut(500);
};
$(img).hoverIntent(showArrows, hideArrows);
Obviously img is the jQuery image object and .imgNav is the classname for the arrows.
EDIT:
I have created a fiddle here: http://jsfiddle.net/jhartnoll/cE6gu/
Using your fiddle example, changing
$('.enlarged').hoverIntent(showArrows, hideArrows);
to
$('.imgViewer').hoverIntent(showArrows, hideArrows);
did the trick for me http://jsfiddle.net/cE6gu/4/
Note, on hoverintent website it says its designed to ignore children (here) so you just need to make sure you call hoverintent on a parent element that contains all these divs.
Hi guys I have put together a simple dropdown menu system that uses hoverIntent to display the submenu and also display a lightbox style 'lights out' dark background.
I've got the menu working, but I'd like to update it so if you move from one item to the next the dark background stays where it is rather than disappearing and reappearing.
I have created a jsFiddle so you can see what I'm talking about:
http://jsfiddle.net/gGd6Y/10/
Try hovering over menu item 1 then moving to item 2.
I would like to be able to see the element the mouse cursor has moved to in the .mouseleave() part of the call to HoverIntent, then if it's another menu item I would prevent the dark background from being switched off.
With the way the HTML is currently setup it can't be done. The shadow covers the other hoverable elements. So when you mouseleave you are hovering over the shadow not the other LIs.
My proposed solution: http://jsfiddle.net/iambriansreed/k98LP/
I made the menu appear above the shadow. I delayed the shadow fade out action and made sure no other menu item was hovered before actually fading out.
See if this helps: http://jsfiddle.net/gGd6Y/11/
I've changed the menu items to stay on top of the overlay.
Edit:
Solution proposed in my last comment:
http://jsfiddle.net/gGd6Y/16/
Simple solution is to add mouseleave listener to container of all items.
More flexible solution is to store boolean values is_element_hovered for each element. When mouseleave event happens, set small delay and after that delay check your boolean values and set background animation properly.
The hover button effects on http://37signals.com/ are beautiful and super quick. How did they do it? It appears to be javascript and css3, but I can't tell, from the source code, what kind of functions they used to achieve the effect.
Thanks!
Azeem
They have a few divs (with classes box hover_container hover_target) that have a hover event attached to it. When the user hovers over a target box, the class hover is added to it. The class hover has a gradient effect which highlights the currently hovered block.
Each of those blocks have a custom arrow image and text associated with it inside the markup. It's simple enough to see which one is being hovered over and display the correct content and arrows