jquery accordion remains selected after closing - javascript

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')

Related

Dropdown menu of a select element is changing the background of the page (JS, MUI)

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;

CSS Menu Hover Issue

I have an issue specially in Chrome. In IE it works fine. When I hover on any menu link its background becomes black that's fine after that when I hover on some other link then the previous remains black. Similarly, when I highlight some text portion on the page it remains black forever instead of normal blue color until page is reloaded.
Here is the sample image:
In this image you see I hover 'contact Us' then 'Our Gym' then 'Success Stories' and all remains with black background forever. Also there is black rectangle appears below 'Contact Us' menu.
Can any one help me regarding this?
without link no one can help in anyway
but from your image and your description i can say that you css code is conflicting in some manner so all i can say now is check classes properly
or otherwise provide link
Check your HTML for unclosed elements.
If you work with HTML5: http://html5.validator.nu/
HTML4: http://validator.w3.org/
Have a look here StackOverflow css hover question.
Someone suggested setting the a links to display:block

JS conflict with Royal Slider Wordpress

I'm using quicksand to filter categories and Superbox (http://toddmotto.com/labs/superbox/) to show a gallery based off of the premium plugin Royal Slider in a dropdown.
http://bvh.delineamultimedia.com/?page_id=2
There seems to be an issue with the Royal Slider around the _animateTo:function in this file... http://bvh.delineamultimedia.com/wp-content/plugins/new-royalslider/lib/royalslider/jquery.royalslider.js?ver=3.0.93 around line 1825. That is causing the slider to not work properly when inside of the Superbox dropdown feature. When I click the next button on the Royal Slider it doesn't seem to want to go to the next image until I close the Superbox and open it again. Then is when the next image appears.
On this page... http://bvh.delineamultimedia.com/?page_id=13 I don't seem to have an issue with the Royal Slider which is why I believe there is a conflict with the Superbox and Royal Sliders javascript. Also, on this page... http://bvh.delineamultimedia.com/?page_id=12 Superbox works fine with static images perfectly.
I'd like to somehow state "if there is a gallery show it - else show the static image" in the same place.
I also feel like my code that I've altered here. http://bvh.delineamultimedia.com/wp-content/themes/bvh/js/portfolio/superbox.js Isn't the best since I'm guessing a bit here and there to get this to work.
I've been trying to learn how to debug JS but to be honest am a bit lost. The reason I think the issue is happening around _animateTo:funtion is because console isn't firing around _stopAnimation. Could anyone lend a hand on why this is happening and a good way to debug this problem. I feel a bit overwhelmed at the moment.
To see the issue: to go http://bvh.delineamultimedia.com/?page_id=2 and click on the first image, there will be a dropdown where you will see the gallery. If you click the next arrow it does NOT go to the next image. IF you close the Superbox dropdown and reclick on the first image to see the Superbox dropdown, you will see the image move to the next image, but only after you close and re-open superbox after you click the next arrow.
I hope that makes sense. Thanks so much!
I checked out the code in your Superbox.js . The problem is that you were cloning the element instead of appending it. In this case, the Royal Slider. This line is the culprit, it creates two different "sliders". Which only one was working, though it was hidden.
if (sliderData.length > 0) { // show the slider if there is one
superbox.append(sliderData.clone(true));
}
Just remove the .clone() method and it should be fine.
To fix the element from disappearing during the closing callback. Replace this line here:
superbox.find('.royalSlider').remove(); // remove the slider from previous events
to this one:
superbox.find('.royalSlider').appendTo($(this));
So in summary, all this does is move the slider from your list-item element into the Superbox when its triggered, and puts it back when its closed.

Horizontal Dropdown Menu MouseOver Issues

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.

Images on Hover

I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?
Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit
I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.
When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.
Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.

Categories

Resources