Bugs on highlighted menu - javascript

First, I apologize to not post my code right here.
I'm not sure this is a good idea since this is a kind of full project.
You can find an online-version here
My menu is stick to the top.
When users scroll, or chosse a section, the correct section will be highlighted in the menu. But if you click to a section, then scroll down / up, 2 menu secions will be highlighted.
So I would like to understand where is the problem, and so, how can i fix it .

This is happen because of 2 reason 1 is css issue and other on is js
CSS issue happen because of :focus Pseudo class styles you used. You apply :hover, :focus, :active and .active class same style. In your code I found this
a, a:hover, a:focus, a:active, a.active {
color: #f5c845;
outline: 0 none;}
To solve this used following style after the above code snippets
.navbar-default .navbar-nav > li > a:focus{
color: #777;
border-bottom: none;}
To check your js issue can you please share your related js part for the one page scroll.

Related

How to target list item hover state inside a div

This is kind of tricky. I'm using this js effect that changes my navigation color as you scroll through different sections. So when you scroll past the section with the class "green" it changes the hover border color of my nav. This is usually how it's done
.midnightHeader.green a:hover {
border: 3px solid #2b5999;
}
the problem is, I have other links in my header which I don't want to apply this to. So I only want to style the links inside the unordered list items, but the following code doesn't work.
.midnightHeader.green nav ul li a:hover {
border: 3px solid #2b5999;
}
Basically would I style the "nav ul li a:hover" inside ".midnightHeader.green"
Please have a look at midnight.js it explains how this works
Can anyone help me work this one? Thanks

Javascript tabs not working

When I click a tab on my navbar it will go to the tab, but once I move the mouse away from it will no longer show that it's selected but it will keep it's text color.
Here is the full code:
Html: https://codetidy.com/8744/
CSS: https://codetidy.com/8745/
So that I can better explain my problem here is an example:
Loads the website
Hovers over the about tab to click it
Then after tab has been clicked mouse has moved away but the tab didn't stay red
Try adding a more specific CSS selector to your custom CSS:
.nav > li > a:focus, .nav > li > a:hover {
background-color: red;
}
Working example of your code (after adding the class above)
As what I can see on your html code, why do you have a onClick function for tabs. There is already a documentation for bootstrap tabs. You just need to clear up your css also to get the desired output. You can do something like this as css but it is much better if you put an id for you navbar.
default:
.nav > li {
//enter code here
}
hover:
.nav > li:hover {
//enter code here
}
selected:
.nav > li.active {
//enter code here
}

href not loading link every time part of the li is clicked. Using javascript to make the whole li clickable

http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work
Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.
The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...

Remove bootstrap dropdown caret

I'm working on my personal portfolio with bootstrap and the navigation dropdown has a caret as you can see at http://portfolio.tomvervoort.net.
The caret next to portfolio is ok but when you click on portfolio the dropdown also has a white caret on top. Does anyone knows how to remove this one?
Your caret is inside .dropdown-menu:after. So, write like this:
.navbar .dropdown-menu:after{
display:none;
}
Had the same problem in Rails (with twitter bootstrap rails gem), and the fix was slightly different.
.navbar .nav > li > .dropdown-menu::after,
.navbar .nav > li > .dropdown-menu::before {
display:none;
}
In the current version of TBS (v2.2.1), you also need to target the :before pseudo-selector like so:
.navbar .dropdown-menu:after, .navbar .dropdown-menu:before {
display:none;
}
Try doing this:
.navbar .nav > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu:after {
display:none;
}
works fine for me. :-)
from git hub post
now we can directly use noCaret prop. this post is basically from DropDownButton but it works for NAvButton as well
After trying a few solutions and trying to follow the right class references, a quick fix, but nest it if you can so it doesn't affect other global a tags:
a::after {
content: none !important;
}

Certain navigation elements show hover when on page, others dont?

A client of mine is having a strange problem with their sites navigation.. on certain pages their hover class appears to show what page you're currently viewing. But on others it doesn't?
I didn't design this site, but I'm helping them work on it, so I'm a tad bit lost.
http://www.hycroft.com/
The suites and policies don't show when you're currently on them, but the rest do.. if anyone has any insight I'd appreciate it.
The hover image is set in your menu css here,
#nav li:hover, #nav li.sfhover,
body.index #nav li.index,
body.amenities #nav li.amenities,
body.concierge #nav li.concierge,
body.suites #nav li.suites,
body.specials #nav li.specials,
body.reservations #nav li.reservations,
body.location #nav li.location,
body.contact #nav li.contact {
background-position: 0 -63px
}
So when you are on the home page, the body tag has a index class added to it. It seems a different name is applied for pages where it does not show.
It looks like the style for the current page navigation item are controlled by a class on the body element. Adding the "suites" class to the body causes the pointer to show for it. The "reservations" class gets the policies menu item to do it.
Those classes aren't being applied to the body element for those pages. (Different classes are being applied, actually)
On the Suites page:
#nav li:hover, #nav li.sfhover, body.index #nav li.index, body.amenities #nav li.amenities, body.concierge #nav li.concierge, body.suites #nav li.suites, body.specials #nav li.specials, body.reservations #nav li.reservations, body.location #nav li.location, body.contact #nav li.contact {
background-position: 0 -63px;
}
Clearly the body class determines the highlighted menu, but on the suites page,
<body class="monaco">

Categories

Resources