Nested Lists Hover Issue - javascript

I am using nested lists in my page.
Example -
- Parent1
- Child1
- GrandChild1
- Grandchild2
- Grandchild3
- Child2
- Grandchild4
- Grandchild5
I want to use li:hover { color:blue; } for each family member individually. However when I bring the mouse cursor to any of the family member, color of all family members changes to blue. How to avoid that? Kindly help.

ok i got my mistake. I need bit more R and D but i made some of this js It is not perfect as you can see in my fiddle but works once
$(function(){
$('li').hover(function(){
$(this).css({'color':'#00f'});
$(this).parents().css({'color':'#000'});
$(this).children().css({'color':'#000'});
},function(){
$(this).css({'color':'#000'});
});
});
fiddle

Try simply giving the ul a class and hooking into that, for example:
ul.mylist li:hover {color:blue;}
You can then also do
ul.mylist li ul li:hover {color:blue;}
You can also use the nth child/first-child/last-child.
ul li:first-child:hover {color:blue;}
The possibilities are endless, but by simply doing
li:hover {color:blue;}
You are referencing every li regardless of the markup previous to it.

Some usefull information here here
ul:nth-child(2)
{
background:#ff0000;
}
ul:nth-child(3n)
{
background:#990099;
}
li:nth-child(4)
{
background:#00FF00;
}
A jsFiddle here
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
n can be a number, a keyword, or a formula.

Related

UL tag inside gridster widget

I'm trying to use ul tag inside gridster widget but for some reason list is not working correctly.
Please see fiddle below
http://jsfiddle.net/h9f63/237/
This is because you've enabled gridster inside of gridster.
On line 5 of your JavaScript, you select all ul tags inside your gridster and turn them into sub-gridsters. You can change that to only select the outer ul element by using a greater-than sign, like this:
gridster = $(".gridster > ul").gridster({ //...
The addition of this > sign makes the selector target only the one ul that is the direct descendant of .gridster, not all the uls contained within.
Likewise, your CSS needs the same fix:
.gridster > ul {
list-style: none;
background-color: gray;
}
.gridster > ul li {
background-color: white;
}
Try it with those changes, it should work much better.

JQuery addClass() that has a space in it?

How can I use JQuery's addClass method to add a class that has a space in it? For example:
.list {
padding-left: 0px;
margin-left: 20px;
}
.list li:hover {
background-color: AliceBlue;
}
I am trying to update/replace the inner html of a list inside an event handler, but when I do that all the CSS formatting goes away. I just need a way of putting it back, so I was going to use something like $('#my_list').addClass('list list li') but I don't know how to get it to recognize the li part. I've tried escaping the space, but no luck; passing it 'list list\ li' doesn't do the trick, either.
You only need to add the class list to the #my_list and rest of the code it just css. once you add the list class to the ul element, it will automatically apply the :hover style for the child li elements
jQuery,
$('#my_list').addClass('list');
css,
.list {
padding-left: 0px;
margin-left: 20px;
}
.list li:hover {
background-color: AliceBlue;
}
For more clear, in your code list is the only class you has. and li is not a class it is a li element inside the ul tag. and li:hover means hover effect of the li element
.list li is not specifying a class with a space in it. That is selecting an li element that is somewhere in the structure underneath any element with the list class in it. It's hard to say exactly what you need to do without seeing how your HTML is structured and how much you're replacing. If you just replace the lis inside of your .list element then it will still work fine. If you're replacing the whole thing then just make sure you add the list class to the parent element that contains the lis.
The CSS selector .list li matches the following:
Any <li> element that's a descendent of an element with the class list
It does not match an element with a class called "list li". If you want to use some kind of spacer character in your classes use a hyphen:
.list-li:hover {
}
To add this class:
$(this).addClass('list-li')

Keep submenu open on mouse out

A navigation menu I'm working on has a default CSS behavior (for those rare people who have JavaScript disabled). By default, the submenu is not displayed:
.main-navigation ul ul {
display:none;
}
On hover, the submenu is revealed:
.main-navigation ul li:hover > ul {
display:block;
}
For the JavaScript-minded majority, the menu is juiced up with the following jQuery snippet:
jQuery(document).ready(function($) {
/* cancel the default CSS hover behavior */
$('.main-navigation ul li').on('mouseover',function(){
$('.main-navigation ul li:hover > ul').css('display', 'none');
$(this).css('cursor', 'pointer');
});
/* toggle submenu display (if the submenu actually exists) */
$('.main-navigation ul li a').click(function() {
var li = $(this).closest('li');
if(li.has('ul')) li.find('ul').slideToggle(100);
});
});
This toggling works great, except it only works as long as the mouse cursor stays over the parent link. If the submenu is open, and the user happens to move the mouse away from the parent link, the submenu snaps shut.
Question: How do I keep the submenu open on mouse out, if it's been already open?
I tried adding something like this to my jQuery snippet:
$('.main-navigation ul li').on('mouseout',function(){
if ($('.main-navigation ul li ul').css('display') = 'none') {
$('.main-navigation ul li ul').css('display', 'none');
} else if ($('.main-navigation ul li ul').css('display') = 'block') {
$('.main-navigation ul li ul').css('display', 'block');
}
});
Not only it's mediocre coding, but it also actually doesn't work. ;-(
How should I fix this issue?
Thank you in advance for your suggestions!
i'm not sure the click issue yet (looking at it), but you don't need JavaScript to "disable" the CSS. Simply use <noscript> tags, like so:
<noscript>
<style type="text/css">
.exampleclass:hover { display: block; }
</style>
</noscript>
Or you could simply add a no-js class to you main menu element, then remove that class if JS is enabled at the very start of your JavaScript. Then write your "no-js css" to use .no-js + whatever children instead of the main class.
UPDATE
The problem is simple, when you use mouseover to cancel your "non-js" css, the menu is still being hidden everytime the user hovers over that submenu. In other words, you're not just removing the "no js" css, you're hiding it on every mouseover of .main-navigation ul li!
Simply follow something in my first suggestion, then remove the mouseover function completely and viola! problem solved!
I wrote a jsFiddle using your code to show how I might approach it.
jsFiddle
Code
$(function() {
// See in css where i changed `.main-navigation ul li:hover > ul` to `.main-navigation.no-js ul li:hover > ul`
// See Also in HTML where i added class `no-js` to `#site-navigation`
$(".no-js").removeClass("no-js");
$('.main-navigation ul li a').on("click", function(e) {
// first hide sibling sub-menus!
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
// no need for the if statement you had.
// jQuery is "smart", if it doesn't exist,
// then this function simply won't do anything!
$(this).closest('li').find('ul').slideToggle(100);
})
// and just to add a little for ya,
// the following will slideUp our submenu if user hovers away from MAIN MENU
.closest("ul").on("mouseleave", function(e) {
$(this).find("ul:visible").slideUp("slow");
});
})
Step-by-Step
Where you have manual script at between <script type="text/javascript"> tags, just before that noscript tage you threw in(which you can remove), replace all your JS with the following:
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery(".no-js").removeClass("no-js");
jQuery('.main-navigation ul li a').on("click", function(e) {
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
jQuery(this).closest('li').find('ul').slideToggle(100);
})
// If you find the menu hiding to fast, simply remove or comment out the next 3 lines
jQuery('.main-navigation ul').on("mouseleave", function(e) {
jQuery(this).find("ul:visible").slideUp("slow");
});
});
</script>
Remove the NOSCRIPT TAGS
In your CSS Code:
/* Find the area that was written as */
.main-navigation ul li:hover > ul {
display:block;
}
/* And replace it with the following */
.main-navigation.no-js ul li:hover > ul {
display:block;
}
Finally, look in your HTML, find the line written as <nav id="site-navigation" class="main-navigation" role="navigation"> and replace it with:
<nav id="site-navigation" class="main-navigation no-js" role="navigation">
so here is where IE did something neat, and jquery makes it browser agnostic so it's usable. mouseleave is 'mouseout' for the selected element and any of its subelements in IE, and jquery makes it work for the other browsers.
The mouseleave JavaScript event is proprietary to Internet Explorer.
Because of the event's general utility, jQuery simulates this event so
that it can be used regardless of browser. This event is sent to an
element when the mouse pointer leaves the element. Any HTML element
can receive this event.
mouseover - when someone mouses over the 'parent' ul li you want to show any sub uls
click - when someone clicks the parent ul li you want to hide or show any sub uls
mouseleave - IE specific that jquery makes browser agnostic for you.
leave the menus in a working state using <noscript> tags, and intend the javascript to go from there if it is available.
fiddle -- this fiddle is just to give you a start, as i didn't put in any of your css.
$(function () {
$("ul").on({"mouseover":function(event){
$(this).find("ul").show("slow");
}},"li.menu-item",null).on({"click":function(event){
$(this).find("ul").toggle("slow");
}},null,null).on({"mouseleave":function(event){
$(this).find("ul").hide("slow");
}},null,null);
});

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;
}

not statement in CSS? Or way around? (superfish)

I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)
You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!
CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.

Categories

Resources