In page I have that code:
<ul>
<li>Name 1</li>
<li>Name 2</li>
<li>Name 3</li>
<li>Name 4</li>
<li id="beforeInsert"></li>
</ul>
And I try to inject some of these code:
<li>Name 5</li>
<li>Name 6</li>
<li>Name 7</li>
before <li id="beforeInsert"></li> element whith that function:
html.inject("beforeInsert", "before");
But this function just add a first <li> element from my second list, in <ul> block. What I do wrong?
The inject function works on mootools dom elements. so you can do something like this:
var el_before = document.id('beforeInsert');
[5,6,7].each(function(num){
var li = new Element('li').set('html','Name ' + num);
li.inject(el_before,'before');
});
jsfiddle
Related
I'd like to create a multi column list like this:
https://jsfiddle.net/37dfwf4u/
No problem when using a different list for each column:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
ul {
display:inline-block;
}
However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically?
E.g. by use of flex layout which I'm not yet familiar with?
Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:
ul {
height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>
Here's another possibility, added half a year later after the comment by #Andrew Koper:
You can also use the colummn-count parameter, which doesn't require a fixed height (and also not flex), but defines a fixed number of columns. So in the example below, even just two list items would be broken into two columns of one list item each:
ul {
column-count: 2;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>
Consider using CSS3 Multi-column Layout for that:
CSS3 Multiple Columns
You can do that using just one list and define the number of columns with CSS. If you check CSS3 Multi-column layout browser support here you can see partial support by most of the browsers, because they do not support break-before, break-after and break-inside properties. But they do support the properties you will need to create a multi column list with a prefix.
.container {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
ul {
margin: 0;
}
<div class="container">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
I've done a few things with css columns and I really like them, but today I stumbled into a problem for which I just won't find a solution:
I have a page with multiple lists. These lists have dynamic contents and open up in small popups. The old behaviour was, that the list contents have been shown in a single column (normal HTML <ul>). The new behaviour should be that they are displayed in up to 4 columns. So I have extended my CSS with ul { column-count: 4; }. This works pretty nice for lists with many entries.
Now to my problem: sometimes there are lists with less then 4 entries. If that's the case, the popups for the lists still span 4 columns, with only 2 columns filled. So the popup for the less-filled list is still as wide as a popup with a full-filled list. For example:
ul {
background-color: lime;
list-style: none;
column-count: 4;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
My question now is: How do I hide those empty columns? I want a popup with a less filled list (no. of entries < 4) to be less wide then a popup with a full-filled list. I'd like to find a CSS-only solution, as I didn't intend to count the entries and add extra classes to decrease the column-count.
The order in which the elements are displayed is important: top-down and then left-right.
I've tried using flexbox, but there I have to set a fixed width for the container, which just results in the popups being too wide as well.
Edit for clarification:
The dotted line should be the right border for the second popup.
The diagonal lines mark the empty space I need to be gone.
Edit further approaches:
Another approach posted by user 'Gobbin' as answer, is to use flex. But as I mentioned, I'd have to set some fixed width. Here it is a max-width for the list itself, so that wrapping works and a fixed width for the list elements. I don't want to have either. Also this approach lists the items from left to right and then from top to bottom, which is also not what I need:
ul {
list-style: none;
display: inline-flex;
flex-wrap: wrap;
max-width: 16em;
float: left;
clear: both;
}
li {
background-color: lime;
width: 4em;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
Maybe this is an option for you, although the columns are spread across the available width.
var maxColumns = 4;
$("ul").each(function() {
var numColumns = $(this).find("li").length;
$(this).css("column-count", numColumns);
$(this).css("width", 25*numColumns + "%");
});
ul {
background-color: lime;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
I think this is your desired layout. Edited my answer as the list items still had margins.
ul {
list-style: none;
display: inline-flex;
float: left;
clear: both;
}
li{
background-color: lime;
width: 100%;
display: inline;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
I'm building a site that get a JSON data and populates the site, so I get an unknown numbers of items, this items are on columns of 3, I would like that after each row to have a a nice looking line.
When it was static content what I did was:
<ul>
<li></li>
<li></li>
<li></li>
<div class="separator"></div>
<li></li>
<li></li>
<li></li>
<div class="separator"></div>
</ul>
but now that i get the dynamic content i dont know how to manage it.
That's not a valid HTML and the browser will not render it as such. You cannot have a <div> as a direct child of <ul>. Not possible. You may try using <li class="separator"></li> instead.
I would just use this small script to add a new <li> after every 3rd child:
$(function () {
$("li:nth-child(3n)").after("<li class='seperator' />");
});
.seperator {
background: #ccf;
padding: 1px;
list-style: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
You can simply use the :nth-child-CSS-selector:
li:nth-child(3n) {
/* replace with whatever style you have for the seperators */
border-bottom:1px solid #999;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
I am searching for a way to have list items have alternating background colors. When there is a nested list the items keep alternating but the child is indented without having the background color of the parent flow down to its nested children.
It is not possible to apply classes. Also the amount of items is variable. Preferably it should work for an infinite amount of nested lists. But if that is not possible a cap on 3 depths (as in picture) should be enough. If it is easier to do by using divs instead of li and ul, that is also possible for me. I prefer pure HTML/CSS.
Because all my experiments did no good I can only supply a JSFiddle with the nested lists.
https://jsfiddle.net/qmdwpzt8/1/
<ul>
<li>Item 1
<ul>
<li>Item 1-1</li>
<li>Item 1-2
<ul>
<li>Item 1-2-1</li>
<li>Item 1-2-2</li>
</ul>
</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2-1
<ul>
<li>Item 2-1-1</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here is one potential solution: https://jsfiddle.net/qmdwpzt8/3/
Not sure if all your requirements will be met by it, but I updated your list with div's:
<ul>
<li><div>Item 1</div>
<ul>
<li><div>Item 1-1</div></li>
<li><div>Item 1-2</div>
<ul>
<li><div>Item 1-2-1</div></li>
<li><div>Item 1-2-2</div></li>
</ul>
</li>
<li><div>Item 1-3</div></li>
</ul>
</li>
<li><div>Item 2</div>
<ul>
<li><div>Item 2-1</div>
<ul>
<li><div>Item 2-1-1</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Item 3</div></li>
<li><div>Item 4</div></li>
</ul>
And then add background colors with jQuery:
$( document ).ready(function() {
var b = true;
$( "div" ).each(function( index ) {
b = !b;
if (b) {
$(this).css("background-color", "#ff0000");
} else {
$(this).css("background-color", "#00ff00");
}
});
});
This does depend on jQuery/Javascript.
I basically have a menu like it shown below in the HTML code, and I want to add "|" before each "li" within the menu to give it the look of (Home | About | Contact). Everything is working, however, I am having a problem of deleting the "|" from the very first "li" in each "ul" within the menu.
So at the moment my menu is shown like: ( | Home | About | Contact), how do I get rid of the "|" that is on the first "li" element?
currnt CSS:
#mainMenu li:before{
content: "|";
color: blue;
}
I have tried to give it a class of "first" and then use li.first {contnet:none} but no hope.
<nav><ul id="mainMenu"><!--Main Menu-->
<li class="first">Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul></li>
<li>Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul></li>
<li>Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul></li>
<li>Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul></li>
<li>Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul></li>
<li>Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul></li>
<li>Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul></li>
</ul></nav>
Change your css to this: (using sibling selector)
#mainMenu ul li ~ li:before {
content: "|";
}
The above style will be applied to the elements which have previous sibling elements (li ~ li). Hence this styling will not be applied to the first li element because it doesn't have any previous sibling elements.
How about:
#mainMenu ul li:first-child:before{
content: '';
}
You can exclude the first element using :not pseduo selector.
#mainMenu li:not(:first-child):before {
content: "|";
color: blue;
}
Js Fiddle Demo
#mainMenu li.first:before{
content: none;
}
I think this should work.