There's an issue with select dropdown box, cause when i scroll down through the items, each item got grey background color (which is normal), but once I removed the mouse from the item to the outside of the dropdown, the last item stayed colored in grey, which is abnormal.
Is there a way to fix this issue, using one of the parameters onmouseleave or onmouseout ?
i tried to use other tags but still not working !!!
Related
I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.
Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;
I'm working on a Joomla template, I've changed the top level menu colors to match our logo but I'm having trouble locating where the change in color is coming from when you mouse over the dropdown menu. I set the top level menu item to hover using firebug so it stays open though when I inspect the drop down elements I cannot see from where the color change is coming from. I've set hover states on each subsequent div and li and that did not trigger the change in color so I'm baffled as to where the color change comes from. This is the webpage I'm working on http://www.webchild.com.au/search-results
I think it your case menu backgroud color is an image located here:
http://www.webchild.com.au/templates/yoo_mellow_July2012_Wider/css/variations/../../images/variations/bluegrey/menu_level1_item.png
You have a Javascript updating the color for the class hover-box1, check that...
After searching the net for several hours, I decided to write my own code for a horizontal dropdown menu that allows html content in the dropdowns instead of the standard 'list' items everyone uses. I have very little code compared to most of the dropdowns I found. I have two issues that are driving me crazy.
Issue #1:
When you mouse over the Category, the 'dropdown' div appears as it should, but when you go to mouseover the 'dropdown' div it disappears. But if you mouseover another category the 'dropdown' div disappears and the new one appears as they both should. What am I missing?
Issue #2:
If you stop the cursor right over where the underline link of the Category appears and leave it there, the 'dropdown' div appears to blink by popping up twice. Can't figure that out either?
I have posted my code here: http://jsfiddle.net/UXxL8/
Thanks so much and I know it's probably something simple I'm overlooking. But you know how it is after you stare at the same code for too long...
Right now you're attaching your behaviors directly to the anchors. When you mouse down to the newly exposed contents you've gone beyond your anchor area and mouseout is triggered. If you place both your anchor and your dropdown inside the same container and then attach your events to that container you'll get the expected behavior.
I would also recommend using mouseenter and mouseleave rather than mouseover and mouseout since you will have child elements with your menu. This question is a good description of why that's advisable.
I set up an updated fiddle here. The Category 3 menu item has been updated.
You also need to bind the mouseover/mouseout to the dropdowns. And the reason why the dropdown is blinking is because animation functions get queued - fadeIn starts after the fadeOut has finished, so you need to stop the current animation before adding another.
Here's the improved code.
I've got a jQuery sortable accordion. When I hover my mouse over each of the accordion headers, they all appropriately switch to the highlighted/selected color state. When I click on a header to open that portion of the accordion and then click it again to close that portion of the accordion, the highlighted/selected color state remains.
So if I've got 10 sections to the accordion, then I open and close 3 of them, those 3 are colored differently than the rest of the accordion. That provides a bad UI. Anyone know why this is happening and how to fix it?
EDIT:
Sorry about not providing an example to start, I'm working under an NDA so I can't provide them directly. I put together an sharable example of what is happening though.
You can see it happen here: http://inadaydevelopment.com/StackOverflow/AccordionStateProblem/jqueryexample.html
If you hover over them, they change to orange (correct). If you click on one to open it up, it remains orange (correct). If you close it and no longer hover, it still remains orange instead of going back to blue (wrong).
Following will clear the "ui-state-focus" class that is causing the issue:
$('.ui-accordion .group > h3').mouseleave(function(){
$(this).removeClass('ui-state-focus')
})
This was tested in browser console against the demo.
EDIT: selector could simply be narrowed down to:
$('.ui-accordion-header')
Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking.
Why does my Navigation menu disappear when I hover over it, and how do I fix it?
My site with the error
You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.
It's not covering the Links menu so that one does not have any problems.
If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.
Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.
I would recommend nesting the submenu items inside the main menu item's container.
I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.