live site is here: http://www.mdw-art.com/new/index2.html
Image of my problem is here: http://i.imgur.com/12gc2.jpg
So the problem is when I hover over the navigation bars at the top, those are set to drop down on hover events. However, when you mouse-down too far on the outer divs and hover over the previous/next navigation tabs the menu disappears.
In the image the menus are in the red, yellow, blue, and purple tabs, the navigation tabs are in orange, and the striped areas are where they overlap.
What is the best way I can correct this issue? Am I setting it up incorrectly? Can I drastically alter the z-index on hover events to prevent it from occurring? Something else I'm not thinking of?
Related
On devices with touch screens such as smartphones and tablets on some websites, when you click on different page elements such as links, buttons, checkboxes, etc., an effect is displayed (the background color of the clicked element is an effect Blue fades) which indicates a click on the desired element. But in some websites, this effect is not displayed and if any element that can be clicked or hovering, if this is clicked, this effect will not be displayed and there will be no change in the background color of the clicked element.
For this topic, I have given two examples. The first is the stackoverflow site itself, which by clicking on icons, elements and links, the effect is displayed and the background color of the element changes.
And the second example is related to font pages and Google icons, which does not happen. Clicking on any element that can be clicked or hovering does not show any effect and does not change the background color of that element.
Now my question is how can this effect be disabled so that it is not displayed by clicking on any element and this effect does not appear? What is the solution to disable this effect?
Thankful
Example number one:
Example number two :
Tap color can be disabled by changing the -webkit-tap-highlight-color to transparent
-webkit-tap-highlight-color: transparent;
webkit-tap-highlight-color docs
The color of the icons in the bottom nav always changes when I click another one, am looking for a way to keep the colors
Maybe you can disable active-class in your code.
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.
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.
I am working with jquery UI tabs to make a tabbed navigation. It has active and hover both stages when the background color should be white. I managed to get this ok, but when I'm hovering the element right beside the current element, a small portion of my arrows' background isn't changing to white but staying blue. You'll understand the program when you see the demo that I'm working on here:
http://arbabpolypackltd.com/erdem/ . It is supposed to look like this:
. Please help!! thanks!
The reason that the blue is showing is that the individual nav containers are not extending far enough to the left (to be overlaid with the nav item to their left):