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>
Related
I have an ordered list like
content1
content2
content3
As it is for a road trip route, I want it to be:
Day 1 : content1
Day 2 : content2
Day 3 : content3
I can of course write it down as text, but i prefer having it as a list.
Is this possible?
ol {
position:relative;
padding-left: 50px;
}
ol li:before {
content:"Day";
position:absolute;
left:0;
}
<ol>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ol>
check this
You can do it without positioning the list items - resetting the list and letting pseudo elements to do the rest:
Reset the list style using list-style-type:none and padding:0
Now use an increment counter to get the required list numbering
See demo below:
ul {
list-style-type: none;
padding: 0;
counter-reset: list;
}
ul li:before {
content: 'Day ' counter(list) ' : ';
counter-increment: list;
}
<ul>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
You can achieve this by defining it as unordered list.
Then in css define ul list-style as none.
Then use css before for every li as
li:nth-of-type(1) selector with content Day 1:, li:nth-of-type(2) selector with content Day 2: and position it appropriately.
var routes = {}
//add to a list
routes.Day1 = 'Going Here!';
routes.Day2 = 'Resting';
//and keep adding so on
//to print/list the routes
console.log(routes);
//give it the tag and data
function add2html(tag, data) {
var element = document.getElementById(tag);
element.replaceWith(data);
};
// to add to day1
add2html('day1', routes.Day1)
Not sure what you're using so defaulting to javascript.
Then in html.
<!-- using <li></li> will give you numbers before -->
<ul id="day1"></ul>
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.
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 am making a CSS based menu, with submenu items that pop up when the root element is hovered. the problem I have is that I want the CSS menu to close when I click an item in the list, but at that point I am still technically hovering over the top element, so I figured I had to use javascript to hide the menu. But when I set the display property, I set it forever and it overrides the hover selector of the parent node. And so the submenu doesn't show up anymore.
This must be pretty common, but I can't find any answers...
Any help much appreciated!
html:
<ul class="level1">
<li>one
<ul class="level2">
<li id="test">two</li>
<li>three</li>
</ul>
</li>
</ul>
css:
.level1 li:hover > ul {
display: inline;
}
.level2 {
display: none;
}
js:
document
.getElementById('test')
.addEventListener('click',function () {
this.parentNode.style.display = 'none';
// After this the menu doesn't open anymore
// because the style is overriden
});
Here's the jsfiddle
You can try this.
<ul class="level1">
<li class="hoverMe">one
<ul class="level2">
<li id="test">two</li>
<li>three</li>
</ul>
</li>
</ul>
.hoverMe:hover > ul {
display: inline;
}
var test = document.getElementById('test');
test.onclick = function () {
this.parentNode.parentNode.className = "";
};
var level1 = document.getElementsByClassName('level1')[0];
level1.getElementsByTagName("li")[0].onmouseover = function () {
if (this.className != "hoverMe") {
this.className = "hoverMe";
}
};
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();
}