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.
Related
I have searched the internet for help on creating links that work like radio buttons as shown here:
http://jsfiddle.net/CXrgm/6/
However after trying many different attempts, I just don't get why it doesn't work. All that happens is that my active link stays active and none of the other links change to active class.
$('.account_links li a').click(function() {
$('.account_links li a').removeClass('active');
$(this).addClass('active');
});
.account_links {
list-style-type: none;
margin-top: 20px;
margin-left: 30px;
margin-right: 50px;
font-family: 'Raleway', sans-serif;
font-size: 20px;
display: block;
}
.account_links a {
color: #08c;
text-decoration: none;
}
.account_links li {
padding-bottom: 30px;
}
.account_links a:hover {
text-decoration: underline;
}
.account_links .active {
color: #08c08c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='account_links'>
<li>Home</li>
<li><a href='#'>Shop</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
I know I could set each link to active for each webpage, but I am doing something with JavaScript 'onclicks' and I don't think it will work but what the jsfiddle shows is exactly what I need.
If your trying to implement the li's dynamically use .on for binding its events.
eg.$("selector").on("event", function(){}) . This makes sure that the events will be binded to the element once it is created in DOM. However your scenario seems to static html ul li's.
In simple words here is what your code $('.account_links li a').click(function() {
$('.account_links li a').removeClass('active');
$(this).addClass('active');
}); is doing:
jQuery selector works from right to left. There are exceptions though, for example when the first operand is an ID. Then the search will operate in the context of the element with this ID.
It will have all the a tags and look up for ancestor li and then elements with class .account_links.
It will target the clicked element.
It will remove all the active classes from anchor tag.
Adds the active class to the clicked element, ref by (this) context.
Your working fiddle : Jsfiddle
Make sure you have included JQuery Library properly.
I have a script for a responsive menu to toggle the height:
jQuery(function() {
var pull = jQuery('#pull');
menu = jQuery('nav ul');
menuHeight = menu.height();
jQuery(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
jQuery(window).resize(function(){
var w = jQuery(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
The problem is that the nested unordered list's height is not taken into account and it just "pops" in and ruins the effect. The HTML markup would be:
<ul>
<li></li>
<li>
<ul>
</ul>
</li>
</ul>
You can see it live at http://www.windycitydigital.net/iconvert. Anyone have any idea how I could prevent that nested UL from ruining the toggle animation and making it all one fluid transition?
A couple things could be useful here:
With the selector you've got there for menu it's going to select both the top level ul as well as any subnav ul...
Try changing that selector to this:
menu = jQuery('nav > ul')
This selector will select only direct child ul's of the nav element, and prevent the slideToggle function from firing on your subnav ul, which looks to include a display block on it in your CSS, styled by the following selector:
#navigation ul ul
Slidetoggle is going to toggle that to display: none with the selector you're currently using.
I'd also strongly consider changing your selectors to be a little cleaner, and more precise:
#navigation > ul
This will select only direct children of the navigation element. Using this selector instead of #navigation ul allows you to use less CSS since you don't have to override styles you've applied for your subnav elements by using the more general #navigation ul selector (which, as you've seen, affects every ul within #navigation).
Since you've applied a class to your sub-nav ul, you can style it directly using:
#navigation .sub-menu
Hopefully this helps steer you in the right direction!
!! Edit (after comment below) !!
Try this JavaScript:
jQuery(function() {
var pull = jQuery('#pull'),
menu = jQuery('.menu', '#navigation');
pull.on('click', function(e) {
e.preventDefault();
menu.slideToggle('medium');
});
});
Oh, and make sure you change the #navigation ul { display: none } to #navigation > ul { display: none }, otherwise the problem mentioned above where the subnav hides will persist...
I've created a four-layer menu using CSS (ul and li) combined with PHP which pulls the options out of a database. It's not for navigation but to allow the user to filter up to a certain level of detail
Example: http://jsfiddle.net/7LFT5/
If you take the path "part of building" > "exterior" > "garage / car port" > "garage door", you'll see that the user would easily get confused about what path they've taken.
I'd like to highlight the path they took in a different colour. It would be ideal to do this in CSS - which feels like it should be possible, since the path is generating the visibility of menu items. I've been playing around with the css below, hoping :hover or :active would work - but no luck yet.
nav.filter li ul li ul li:hover ul {
display: block;
width: 150px;
padding: 0px;
left: 170px;
top: 0px;
/* margin: 0px; */
z-index: 3;
}
Has anyone done this before?
You need to change this selector:
nav.filter ul li a:hover {
Because you need to keep the highlight on the a tag when hover the entire content of the li
To this:
nav.filter ul li:hover > a {
Check this Demo http://jsfiddle.net/7LFT5/1/
Now combining the two selectors you can have one color for the active and one on the hover item like this :
http://jsfiddle.net/7LFT5/3/
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.
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')