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>
Related
Need to align my odd number list iteam in center. Mean if i have five list iteam like below then last li should align center others should align side by side in mobile device.
<ul>
<li> name1</li>
<li> name2</li>
<li> name3</li>
<li> name4</li>
<li> name5</li>
</ul>
So fist i need to validate li count whether it's ending witj odd number or even number then i need to align last li center of the screen.
As JS just set's the CSS attribs to fit anyway, you might as well check out if a pure css solution fit's your problem.
See: https://stackoverflow.com/a/5080748/1614903
Assuming that the data will not be presented in ascending order, then a JavaScript solution may be required. See my example for a proof of concept. The CSS solutions will be fine when the data is presented in ascending order.
document.addEventListener('DOMContentLoaded', function() {
var list1 = document.querySelector('#list1');
var listItems = list1.querySelectorAll('li');
for (var li of listItems) {
addCenterAlignToListItem(li);
}
});
function addCenterAlignToListItem(li) {
var txt = li.textContent;
// RegEx matches a number at the end of the string.
var num = txt.match(/\d+$/);
if (!num) {
// There was no number at the
// end of the string.
return;
} else {
// Get the string from the
// regex match.
num = num.pop();
}
if (num % 2 === 1) {
// This is odd
li.classList.add('centered');
}
}
.centered {
text-align: center;
}
<!--
The list is intentionally
out of order.
-->
<ul id="list1">
<li>name2</li>
<li>name5</li>
<li>name1</li>
<li>name3</li>
<li>name4</li>
</ul>
Hope this works for you!
.list li {
text-align: inherit;
}
.list li:nth-child(odd) {
text-align: center;
}
.list li:nth-child(even) {
text-align: inherit;
}
<ul class="list">
<li> name1</li>
<li> name2</li>
<li> name3</li>
<li> name4</li>
<li> name5</li>
</ul>
Maybe I'm way off, but here we go.
print '<li '.$class.'><a id="flodet" href="index.php?artikelid='.$rad["id"].'">'.$rad["header"].'</a> </li>';
This line print links to articles from a database. The class flodet just style the link. What I want to do is to create another div inside the class flodet. I have tried to do this with these couple of lines of javascript.
function myFunc() {
var bild = document.createElement("div");
document.getElementById('flodet').appendChild(bild);
}
Am I way off or am I on the right track?
Here is a snippet to play around with.
Few suggestions:
'<li '.$class.'> - this seems to be wrong ; use the attribute class
You could select the li using ul > li if needed and can avoid setting class to each li; You could even decorate the parent ul with a class and select the li's using ul.myList li where myList is the class of ul
function myFunc() {
/* To add a 'div' inside the list item anchor */
/*
var bild = document.createElement("div");
bild.innerHTML = "My new DIV";
document.getElementById('flodet').appendChild(bild);
*/
/* To add a 'div' inside each list item */
var listItems = document.querySelectorAll("ul > li");
for (var i = 0; i < listItems.length; i++) {
var bild = document.createElement("div");
bild.innerHTML = "My Div" + i;
/* Add an attribute, say 'class' */
bild.setAttribute("class", "divClass");
listItems[i].appendChild(bild);
}
}
window.onload = myFunc;
/* To select the list items */
ul > li {
color: #DDD;
}
.divClass {
border: 1px solid #F2F2F2;
}
<ul>
<li>
<a id="flodet" href="">Link 1</a>
</li>
<li>
<a id="flodet2" href="">Link 2</a>
</li>
<li>
<a id="flodet3" href="">Link 3</a>
</li>
</ul>
You are most likely on the right track, but let me suggest one thing about your tiny code-piece:
I you are using styles to brush up the link, you are better of to set the class-attribute on the link rather than the id. ID's should be unique - That might not be the case, if there are more elements of this type generated by your code.
document.getElementById('flodet').insertAdjacentHTML("beforeend", "<div class='inline'> World!</div>");
.inline {
display: inline-block;
}
<div id="flodet">Hello </div>
looks okay, add it inside a document.ready or something simular and you should be good to go.
I would suggest one change though,
Instead of
var bild = document.createElement("div");
document.getElementById('flodet').appendChild(bild);
i would just do
document.getElementById('flodet').insertAdjacentHTML("beforeend", "<div>Hello World!</div>");
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>
I have trouble in writing a script to change the appearance of the clicked tab in a webpage navigation list. In other words, I want to make the clicked tab appear as the selected (in code). I tried to do that by changing its id to selected_link and restoring the id of the previously selected tab.
EDIT: Following jamespaned's suggestion, I replaced element IDs with classes.
My tabs appear like in this picture:
So, when I click to "bio", I want it to appear as "home" and "home" to appear as the other tabs.
As I'm a newbie in JavaScript coding, I didn't managed to accomplish that. Here is what I've done:
The HTML code for the (inline) navigation list:
<nav>
<ul id="navlist">
<li class="selected"> home </li>
<li class=""> bio </li>
<li class=""> publications </li>
<li class=""> software </li>
<li class=""> contact </li>
</ul>
</nav>
its respective CSS:
nav ul {
list-style:none;
padding:0;
margin:0;
}
nav li {
background-color:black;
display:inline;
border:solid;
border-width:1px 1px 0 1px;
margin:0 5px 0 0;
}
nav li a {
color:white;
padding:0 10px;
}
.selected {
background-color:white;
padding-bottom: 1px;
}
.selected_link{
color:blue;
}
and the JavaScript which I've designed to accomplish this task, but it didn't worked:
function changeSelected(clickedId)
{
var ulist = document.getElementById("navlist");
var elems = ulist.getElementsByTagName("class");
for (var i = 0; i < elems.length - 1; i++)
{
var sel = elems[i].getAttribute("class");
if (sel == selected)
{
var selli = elems[i];
break;
}
}
selli.setAttribute("class", "");
selli.lastElementChild.setAttribute("class", "");
var clicked = document.getElementById(clickedId);
clicked.setAttribute("class", "selected_link");
clicked.parentNode.setAttribute("class", "selected");
}
How could I do that using only plain JavaScript?
This Javascript will do what you want:
function changeSelected(clickedId)
{
var selli = document.getElementById("selected");
var sela = document.getElementById("selected_link");
sela.setAttribute("id", "");
selli.setAttribute("id", "");
var clicked = document.getElementById(clickedId);
clicked.setAttribute("id", "selected_link");
clicked.parentNode.setAttribute("id", "selected");
}
That said, here are some ideas that might help your Javascript education:
You are using Javascript to set your IDs, but the Javascript won't work on the next page after you've clicked on one of the links. You'll probably need to do some backend (PHP/Ruby, etc) coding to get your styles to change.
IDs are normally used to refer to a unique element on the page that doesn't change, such as a #header or #sidebar_banner. You might want to use a class instead, such as ".selected_link".
You don't need both #selected_link and #selected. You could do ".selected" and ".selected a" to change the CSS so you only need to change one element.
Hope that helps!
I'm trying to make a stupid horizontal nav bar with a drop-down on some of the items. The way I decided to do it is just by putting the drop-down in a div tag. This is easily changeable, i just don't like to go heavy on the html side.
Basically I just want my drop down to work when you hover over the parent element. Additional css is going to be used to make it pretty and positioned better.
Here's my js:
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(
function () {
dropdown.css('display', 'block');
}
);
Here's my css:
div.nav {
text-align: center;
}
div.nav > ul > li {
margin-top: 15px;
text-align: center;
font-size: 1.25em;
}
div.nav > ul > li {
display: inline-block;
list-style-type: none;
}
div.nav a {
padding: 1em;
}
div.dropdown {
display: none;
background-color: black;
position: absolute;
}
Here's my html:
<div class="nav">
<ul>
<li>Home</li>
<li>
Sample Game
<div class="dropdown">
About it
<br>
Game
</div>
</li>
<li>TP Solutions</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
<div class="clear"></div>
You should not be using "parent" as a variable name, as it's a reserved word.
$(document).ready(function() {
var $dropdown = $('.dropdown'),
$parent = $dropdown.parent();
$parent.on("mouseover",
function () {
$dropdown.css('display', 'block');
}
);
$parent.on("mouseout",
function () {
$dropdown.css('display', 'none');
}
);
});
According to the oreder this has to be done:
add a jQuery plugin first
Then add your script
so the order will be like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>
<script>
$(function(){
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(function () {
dropdown.css('display', 'block');
});
});
</script>
Please try the below code.
$(".nav").on("mouseenter","li",function(){
$(this).find(".dropdown").show();
});
$(".nav").on("mouseleave","li",function(){
$(this).find(".dropdown").hide();
});
In your code " dropdown.parent(); " -> this will refer all the parents which have child dropdown and will show the menu. we need to refer current hover parent. Please check the working example in below link.
http://jsfiddle.net/renjith/wX48f/
There are so many good solutions to use jQuery and CSS to show a drop down menus. So you don't need to reinvent the wheel. Here are some examples that you might be able to find one to fit your need.