I have a HTTP request set up than after all promises are met will return the scope. In this case its a list of products.
My goal is to set these products to have an opacity of 0 initially, and then with the foreach add a class which will give them an opacity of 1.
What I currently have works with the ul element, but I cannot get it to with the child elements.
This is currently in my promise:
angular.forEach(angular.element(document.querySelector('.product-list')), function(value, key){
var a = angular.element(value);
a.addClass("loaded");
});
But no amount of playing with .product-list li etc will work.
Any ideas?
Example of the HTML is:
<ul class="product-list">
<li>item 1</li>
<li>Item 2</li>
<li>item 1</li>
<li>Item 2</li>
</ul>
And CSS:
.product-list {
li {
opacity: 0;
&.loaded {
opacity: 1;
}
}
}
And I will put a timeout in the foreach.
I think your css (SASS? LESS?) should be:
.product-list {
li {
opacity: 0;
}
&.loaded {
li {
opacity: 1;
}
}
}
as it looks like you are adding the loaded class to the ul element.
Related
I have an unordered list used as a menu to play sections of a video. The list item (video portion) that's playing highlights when clicked by adding a class to it and removing the class from any other list item. I've been asked by the client to change this so that if you click on an item, the previous list items are selected also. Namely if you click on Vid 2, then Vid 1 and Start are given the 'selected' class as well as Vid 2. Clicking on Vid 3, would highlight Vid 3, Vid 2, Vid 1, Start and so on.
I would also like to remove the selected class from any list item that's ahead of the clicked item. For instance if Vid 4 is selected and the user clicks on Vid 2, then the selected class is removed from Vid 4 and Vid 2, Vid 1 and Start have the class selected. Sorry if any of this makes little sense and thanks in advance.
$("#select li a").click(function() {
$(this).parent().addClass('selected').siblings().removeClass('selected');
});
#video-controls ul li {
cursor: pointer;
}
#video-controls ul li a {
color: #5f6a72;
text-decoration: none;
display: block;
}
#video-controls ul li.selected,
#video-controls ul li.selected a {
color: #00aad2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<nav id="video-controls">
<ul id="select">
<li id="start">Start</li>
<li id="vid-1">Vid 1</li>
<li id="vid-2">Vid 2</li>
<li id="vid-3">Vid 3</li>
<li id="vid-4">Vid 4</li>
</ul>
</nav>
You can
1) traverse and get all previous elements.
2) use .andSelf() to add clicked object parent
3) add class selected to all elements returned above.
4) find remaining siblings other than returned element in step 2
5) remove class selected
$("#select li a").click(function() {
$(this).parent().prevAll().andSelf().addClass('selected').filter(':last').nextAll().removeClass('selected');
});
#video-controls ul li {
cursor: pointer;
}
#video-controls ul li a {
color: #5f6a72;
text-decoration: none;
display: block;
}
#video-controls ul li.selected,
#video-controls ul li.selected a {
color: #00aad2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<nav id="video-controls">
<ul id="select">
<li id="start">Start</li>
<li id="vid-1">Vid 1</li>
<li id="vid-2">Vid 2</li>
<li id="vid-3">Vid 3</li>
<li id="vid-4">Vid 4</li>
</ul>
</nav>
I have 20 templates that are set out like the code below. The text gets added in via a database so can't change the style of the ul/li in there. I want to write 1 function that will change it in all.
Is it possible to only change the bullet list color (not the actual text) in a external js file?
<div id="container">
<h1 id="head1">Header</h1>
<p id="p1">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</p>
Any help would be appreciated.
You can use css to do it.
You can create a class with the code below and then use javascript to apply that class to the bullet points you need.
This example was propose by Evan Mulwaski in a question similar to yours.
ul
{
list-style-type: square;
}
ul > li
{
color: green;
}
ul > li > span
{
color: black;
}
This is the link to the original question:
how to set ul/li bullet point color?
To change the bullet:
use
list-style-type: "\1F44D"; // thumbs up sign
li{
list-style-type: "\1F44D"; /* thumbs up sign */
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li></li>
<li>Item 4</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
And yes, its CSS
To change the color of the bullet use CSS "content":
li {
list-style: none;
position: relative;
}
li::before {
color: #ff2211; /*bullet color*/
content: "\2022"; /* bullet char */
position:absolute;
left:-1.2em; /* indent of the bullet to the text */
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li></li>
<li>Item 4</li>
</ul>
The short answer is no, not in a pure JavaScript way can you manipulate lists like that. You would need to add a class to the HTML and change that via JS, or have span tags with •that you would style with CSS. There is a bit of a hack, but make sure you adjust the margin of the list items as this will throw it off a bit, also the bullets are a bit smaller so eh. Your call, but here's a take on it:
var addRule = function(selector, styles, sheet) {
styles = (function(styles) {
if(typeof styles === 'string') {
return(styles);
}
var clone = '';
for(var p in styles) {
if(styles.hasOwnProperty(p)) {
var val = styles[p];
p = p.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case
clone += p + ":" + (p === "content" ? '"' + val + '"' : val) + "; ";
}
}
return(clone);
}(styles));
sheet = sheet || document.styleSheets[document.styleSheets.length - 1];
if(sheet.insertRule) {
sheet.insertRule(selector + ' {' + styles + '}', sheet.cssRules.length);
} else if(sheet.addRule) {
sheet.addRule(selector, styles);
}
};
var uls = document.querySelectorAll('ul'), ul = null;
for(var i = 0, len = uls.length; i < len; i++) {
ul = uls[i];
ul.style.listStyle = 'none';
}
addRule('li:before', {
'content': '• ',
'color': 'red'
});
Using the addRule function I found over here, you first strip all the ul elements of the list-style property and use li:before pseudo selection to mimic a bullet point.
Using the li:before selector
Edit list style attribute list-style:none at css of list. And add cutom item inside li.
<li>
<span style = "color :red">
◉ item 1
</span>
</li>
So basically, I have an un-ordered list with around 12 list items. I would like to apply a style to them when the mouse is over any of them, and a different style when the mouse is over none of them.
For example, the following is my current code that only has a style when li's are being hovered.
HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
jQuery:
$('li').bind('mouseenter',function(){
$(this).animate({'opacity': '1'},100,'easeOutBack');
});
$('li').bind('mouseleave',function(){
$(this).animate({'opacity': '0.7'},600,'easeOutBack');
});
DEMO
I would like to style all the li to have opacity:1 when no li is being hovered over.
How can I achieve this?
You can do this with CSS only, if I understand correctly, you want to have all items at full opacity when none is hovered, and have full opacity on the one that's hovered and less opacity on the rest. Here's an example with just CSS:
li {
opacity: 1;
}
li:hover {
opacity: 1 !important;
transition: opacity .3s ease-in-out;
}
ul:hover li {
opacity: .5;
transition: opacity .3s ease-in-out;
}
Demo: http://jsfiddle.net/Sbgn8/2/
Is this what you want?
$('li').bind('mouseenter',function(){
$(this).animate({'opacity': '1'},100,'easeOutBack');
});
$('li').bind('mouseleave',function(){
$(this).animate({'opacity': '0.7'},600,'easeOutBack');
});
$("ul").bind('mouseenter',function(){
$("li").animate({'opacity': '0.7'},200,'easeOutBack');
})
$("ul").bind('mouseleave',function(){
$("li").animate({'opacity': '1'},200,'easeOutBack');
})
You can create a new class for the ul element that will cause all lis to be 100% opaque. Then, upon hovering a li, remove that class from the ul (its parent).
I'll give you a code if I sounded confusing.
Note that I've added a CSS transition, I suggest you do all of them using CSS (that way you won't have to deal with inline rules overriding all others).
$('li').bind('mouseenter',function(){
$(this).animate({'opacity': '1'},100);
$(this).parent().removeClass('full');
});
$('li').bind('mouseleave',function(){
$(this).animate({'opacity': '0.7'},600, function(){
$(this).css('opacity', '')
});
$(this).parent().addClass('full');
});
Here's what I had on my mind: http://jsfiddle.net/fqVT8/1/
Can't you just change the selector inside the handler function? Changing this...
$(this).animate({'opacity': '1'},100,'easeOutBack');
to this....
$('li').animate({'opacity': '1'},100,'easeOutBack');
I am struggling with one of my dropdowns.
Currently it is set up to be triggered by an i tag to drop down the sub menu.
$('nav li i').click(function() {
I want to change it to (nav li a) so it is not the icon that has to be pressed
I also have the code:
var child = $(this).index('nav ul li i');
but i am not sure what to change this to?
You can see all the code in jsfiddle.
http://jsfiddle.net/susannalarsen/VNYAx/
Since I do not see the <a> element anywhere, I have changed the <i> to <a> for demonstration purposes. You can see the example on http://jsfiddle.net/VNYAx/3/
Basically I changed
$('nav li i').click(function() {
to
$('nav li a').click(function() {
And also
var child = $(this).index('nav ul li i');
to
var child = $(this).index('nav ul li a');
Is this what you need?
Instead of using the index of the icon as a way to identify which dropdown you want to slide down, you can save a reference to that dropdown by searching for '.dropdown' within the element clicked.
$('nav li').click(function () {
var $childDropdown = $(this).find('.dropdown');
if ($childDropdown.is(':visible')) {
$('.dropdown').slideUp(300);
} else {
$('.dropdown').slideUp(300);
$childDropdown.slideDown(300);
}
});
http://jsfiddle.net/9Fk7j/2/
Just an alternative approach to this problem using .slideToggle(). If you need anything explaining please comment and I will edit the answer. I have commented the JavaScript below. I also removed the extra <div> in the markup as the nested <ul> is a perfectly good container.
Demo
HTML
<nav id="moo">
<ul>
<li>Item A
<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li>Item B
<ul>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</li>
</ul>
</nav>
CSS
ul {
padding: 0;
margin: 0;
}
li {
display: inline;
}
nav li {
position: relative;
}
ul ul {
display: none;
position: absolute;
border:1px solid #ccc;
padding: 10px;
}
ul ul li {
display: block;
}
JavaScript
var $allSubMenus = $('ul ul'); // handle to all submenus
$('nav li a').click(function (e) {
var $li = $(this).closest('li'); // get parent <li> of the <a> clicked on
var $subMenu = $li.find('ul'); // get our submenu
$allSubMenus.not($subMenu).slideUp(300); // hide all other submenus
$subMenu.slideToggle(300); // show our submenu
e.stopPropagation(); // stop event bubbling further
});
$(document).click(function () {
$allSubMenus.hide(); // no need to reselect, just use handle
});
I have a couple of lists like this:
<ul>
<li class="list-header">Header</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
By some rules I hide and show <li> items so sometimes the list has visible <li> and sometimes it has no visible <li> elements at all except the one with list-header class, so <li class="list-header"> is still there. I want to hide that header if there are no <li> visible elements in it under header. Though I want the <ul> still to be visible.
How do I do that?
What you could do (demo):
$('ul').each(function() {
$ul = $(this);
$ul.find('.list-header').toggle($ul.has('li:not(.list-header):visible').length != 0);
});
Basically, what the above does is toggling the .list-header (I've wrapped it in the .each() in order to demo different lists) depending on whether the list .has() :visible li elements that are :not(.list-header).
UPDATE
Now it works. Sorry.
You could use the :visible and :not selectors to see if there are any elements present when you change the visibility. This example toggles the visibility when clicking the elements, and hides the header if there are no elements present:
$('li:not(".list-header")').click(function(){
$(this).toggle(10,function(){
var l = $(this).parent().children('li:visible:not(".list-header")').length
if (l>0) $(this).parent().children('li.list-header').show();
else $(this).parent().children('li.list-header').hide();
});
});
working example: http://jsfiddle.net/LDG4J/4/
There is no lh element in HTML. References: HTML5, HTML4.01, HTML 3.2. (You've removed the lh from the question.)
Instead, use an li with a class you style as you see fit (or if you're targeting recent-enough browses, no class required; just style li:nth-child(1) or li:first-child), and just don't hide that li (which will keep the ul visible):
<ul>
<li class='header'>Header</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Update: I may have misunderstood. If you want to hide the header but keep the ul visible in some way:
A ul with no visible li elements will typically be invisible because it won't have any dimensions. You can override that with CSS, styling the ul to have a specific size (live example):
CSS:
ul.foo {
width: 5em;
height: 5em;
background-color: #eee;
border: 1px solid #aaa;
}
HTML:
<p><code>ul</code> with no visible children:</p>
<ul class='foo'>
<li style="display: none">This is hidden</li>
</ul>
<p><code>ul</code> with a visible child:</p>
<ul class='foo'>
<li>Visible child, note that it wraps</li>
</ul>
And of course you can apply that via jQuery rather than with a static CSS rule:
$("ul.foo").css({
width: "5em",
height: "5em",
backgroundColor: "#eee",
border: "1px solid #aaa"
});
...so you could do that when you're hiding all of the ul's elements, and undo it when showing at least one of them. After making a change:
var ul = $(/*...selector for the relevant list...*/);
if (ul.find('li:visible')[0]) {
// There's at least one visible `li` child
ul.css({/*...styles for when the list is not empty...*/});
}
else {
// There are no visible `li` children
ul.css({/*...styles for when the list is empty...*/});
}
...or better yet, add/remove a class.
try this:
$("ul li:not('.list-header')").each(function(index, val) {
if ($(this).text() == '') {
$(this).hide();
}
});
if (! ($('ul').has("li:visible:not('.list-header')").length)) {
$('li.list-header').hide();
}