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')
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'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.
I need to insert an image before an element I am trying to find in this code (also I am trying to add the class in the same function).
The js:
insertSearchIcon: function(){
$(document).find('jstree-icon').prepend('<div class="oob-dropdown">test</div>');
}
And the css class I am trying to insert.
.oob-dropdown {
background-image: url("/apps/cdpe/img/search_444444.png");
background-color: transparent;
background-repeat: no-repeat;
height: 25px;
width: 25px;
border: none;
padding-top: 1cm;
position: relative;
}
Hopefully what I am trying to do is possible, but thanks for any help!
you probably missed the . in your selector find('jstree-icon') and secondly prepend() adds another item before the first child element of the matched selector.
To add another element right before another you might be interested in before:
$('.jstree-icon').before('<div class="oob-dropdown">test</div>');
Btw: $(document).find() is probably not best practice, rather use the selector directly!
.prepend() inserts an element as the first child of another; it sounds like you need .before(). Your selector also needs a dot (assuming jstree-icon is a class).
$('.jstree-icon').before('<div class="oob-dropdown">test</div>');
Here is a simple example of some markup I have:
HTML:
<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
<li>Hi</li>
<li>Bye</li>
</ul>
The checkboxes are used as filters to remove <li>s with certain tags. This all works fine. My issue is that when the checkbox is checked and the filter logic runs, it uses a display:none to remove the specific <li>s but the css I use to format doesn't get applied correctly after the fact. For example, let's say clicking the first checkbox removes the first <li> and the 'bye' <li> is the only one left. That will work fine, but the border I have defined in the css persists even though the selector shouldn't match it anymore. This is the selector I used:
CSS:
#columns .calendar td ul.reveal li + li {
border-top: 1px dotted #999;
}
This style is applied correctly at first, but after the display:none is applied and the 'bye' li is the only li left it will still have the dotted border.
I've used the browser developer console to check and this is indeed the only style rule that is being applied to create the border.
I've read something along the lines of display:none not repainting the DOM, and to access a variable that forces the browser to repaint (something like $('whatever')[0].offsetHeight) but this does not seem to fix my problem.
jQuery Based Solution
CSS rules by themselves will not work since the DOM is being manipulated by JavaScript.
What you could do is use JavaScript to identify the first li element left in the list.
For example:
$('ul.reveal li').filter(':first').addClass('first-child');
where the CSS rules are:
ul.reveal li {
border-top: 1px dotted #999;
}
ul.reveal .first-child {
border-top: none;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BXMaB/
The jQuery action picks out the first li element in each ul list and then applies a CSS rule to know out the top border that appears on all li elements by default.
You would need to apply this jQuery action when ever a check box (event) is checked, in addition to binding it to the document load event.
The CSS selector you have chosen is interested in the structure of the DOM rather than what is and isn't painted. Selector S + S will still apply to S2 even when S1 is being removed, which is why it's still getting a top border.
Given that you are able to manipulate the DOM I would suggest either removing and re-adding the element itself or writing a selector that will respect a class added to S1 (which also applies display:none to it).
For instance:
selector:not(.hidden) + selector { [Only works in IE9+] }
or
selector.active + selector.active { [Works in IE7+] }
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.