CSS Menu Hover Issue - javascript

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

Related

Responsive navbar with dropdown

I'm in the making of a navbar that uses html, css and javascript. I recently came up on a problem when I was making the navbar responsive and I need help. Here is a link to codepen: https://codepen.io/Linus_Ekman/pen/WMeJvv where I pasted all my code so that you can see better what I mean and try to help me. So everything works well except that when I click on the "hamburger" icon a dropdown should appear under the navbar that stretches over the whole width of the page with the 4 navigation options in a column. Here is an example of what I want it to do when the "hamburger" icon is clicked: https://codepen.io/Linus_Ekman/full/wywjoB/
Tell me if you need any more information
Edit:
The dropdown now works the way it should as you can see in the first codepen link. But there is another problem. If you hover your mouse under the "hamburger" icon when the dropdown is up you can see that the links are there wich means that the navbar is there but just not shown. How can I get them to go away?
I was looking your example and, if you add some rules to your show class (ul.show), you can make it work:
You need to set background-color: #fff and left: 0 and you'll be good to go.
I forked your pen and you can check the code here https://codepen.io/fermijs/pen/aqoGyG

jquery accordion remains selected after closing

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

Javascript Scrollbar Disappears?

Thanks for taking the time to read.
I am having some problems with JScrollPane and image reinitialize with 1 page on my website.
Under the Blog Section, you can scroll down the first default article (Dog Days are Over),
but once you click on any of the Articles with images (Rabbit Heart) .. the scrollbar disappears.
It then reappears if you click on an article with no image or the first article.
The above problem seems to only occur on brand new cache. Any ideas?
I have tried disable Cufon but the same problem remains, its definitely an image problem.
Thanks!
It is possible that the Cufon text is larger than the plain-text that it replaced. If this is the case then it's also possible that the container for the "Rabbit Heart" article is not large enough for a scroll-bar, then Cufon hits the text, making the text too long for the container, but since the JScrollPane code has already run the extra text gets clipped.
It doesn't look like the container div of Rabbit Heart has the class of jScrollPaneScrollable

dropdown menu stops working after page jump

My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!

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