for a website I'm creating, I want to insert list items with different kind of numberings (many are custom) I have to reproduce the same style of the picture below::
so I was thinking that the best solution it is to manually create the left part where you insert the numbering, I want to use list items, manually inserting the numbering but I want to keep the effect that forces the text in line out from underneath the number, like there is when using the 'numbered list' option in Word. What is the most simple solution to do so? Consider that I need to do that sticking to this schema (since I'm using a javascript that enables text to expand/collapse items)
ul,
#myUL {
list-style-type: none;
}
#myUL {
margin: 0;
padding: 0;
}
.caret {
cursor: pointer;
user-select: none;
font-size: 16px;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.baret {
cursor: pointer;
user-select: none;
}
.baret::before {
margin-top: 10px;
content: "\1F4DA";
color: black;
display: inline-block;
margin-right: 6px;
}
.bested {
display: none;
margin-left: -40px;
}
.active {
display: block;
}
.spacing {
margin-bottom: 10px;
}
.spacing2 {
margin-left: 20px;
}
<ul class="nested">
<div class="spacing"></div>
<li>(1) Something has a cause.</li>
<li>(2) There are no causal loops.</li>
<li>(3) Nothing has an infinite causal history.
<div class="tooltip">ⓘ<span class="tooltiptext">This is causal finitism. Note that causal finitism is consistent with there being actual infinities.</span></div>
</li>
<li>(4) So, there is an uncaused cause (1-3).
<div class="tooltip">ⓘ<span class="tooltiptext">Suppose x causes y, and that everything has a cause. So, y has a cause, z. Since (2) implies all causes are distinct, z must also have a cause, ad infinitum. I.e., x must have an infinite causal history,contra (3). QED.</span></div>
</li>
<li>(5) If there is an uncaused cause, God exists.</li>
<li>(6) Therefore, God exists.</li>
<li><span class="baret"> </span>
<ul class="bested">
<li>Alexander Pruss, <i>Infinity, Causation, and Paradox</i> (Oxford, 2018). Alexander Pruss, “Paradoxes of Infinity and the First Cause,” in Rasmussen and Vallier (eds.), <i>A New Theist Response to the New Atheists</i> (Routledge, 2020), ch. 1.</li>
</ul>
</ul>
</li>
</ul>
The easiest way is to use list-style: none and x:before {contents: xyz }
.foo {
list-style: none;
}
.foo li:nth-of-type(1):before {
content: "> ";
}
<ul class="foo">
<li>Element One</li>
<li>Element Two</li>
<li>Element Three</li>
</ul>
Related
On my user interface I have a breadcrumb of which shows on the top bar. Upon the device width being below a defined width, it'll drop below the top bar and be it's own bar, however what I do not know how to do is add a trailing ellipsis upon the breadcrumb length being larger than the device width.
Example Breadcrumb:
<nav>
<ul>
<li>Home</li>
<li>>></li>
<li>User</li>
<li>>></li>
<li>Inbox</li>
<li>>></li>
<li>Mail_ID</li>
</ul>
</nav>
Note: >> represents a FontAwesome icon in an i tag
Upon the breadcrumb being larger than the device width, the best I can describe what I would like to happen is demonstrated below:
Home >> User >> Inbox >> Mail_ID
... User >> Inbox >> Mail_ID
... Inbox >> Mail_ID
... Mail_ID
This is still a partial code but might help you.
Idea
On load, call a function that checks for with of ul and its parent container.
If ul has greater width, hide first 2 visible li. Also add an li for ellipsis and make it hidden initially and make it visible only if any of other divs are hidden.
Repeat this process recursively and you will get what you are looking for.
Sample
$(function() {
$(".content").resizable();
$(".content").on("resize", function() {
var ul = $(this).find('ul');
if (ul.width() > $(this).width()) {
var lis = ul.find('li:not(.hide):not(.ellipsis)');
for (var i = 0; i < 2; i++) {
$(lis[i]).addClass("hide");
}
if ($(".ellipsis").not(":visible"))
$(".ellipsis").removeClass("hide")
}
})
});
.content {
text-align: left;
border: 1px solid gray;
width: 300px;
height: 40px;
max-height: 40px;
}
.content ul {
padding: 0px;
position: fixed;
overflow: hidden;
white-space: nowrap;
}
.content ul li {
display: inline-block;
text-decoration: none;
}
.hide {
display: none!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="content">
<ul>
<li class="hide ellipsis">...</li>
<li>Home</li>
<li>>></li>
<li>User</li>
<li>>></li>
<li>Inbox</li>
<li>>></li>
<li>Mail_ID</li>
</ul>
</div>
You can try to use the CSS-only ellipsis, but I don't know if it also works with <ul><li>. For sure it works with simple strings:
Use this HTML:
<ul class="ellipsis">
And this CSS:
ul.ellipsis
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I've seen a lot of questions on this wesite about closing a drop-down menu by clicking anywhere on the page.
My question is a little bit different though. I don't want the dropdown-menu to close by clicking outside of it. The moment I click on the button that shows me the menu, I want the menu to stay like that (drop-downed) untill the user clicks on that same button again. Also, the moment when the menu is shown, I want it to push the other elements direcly beneath it down. These elements could be for example other buttons. You guys might have seen this concept on some websites and I like the idea. I want to create the same thing, but I don't how.
This will probably be made with Javascript since this is easier, but I don't know how to do it. Do you guys have any ideas or tips?
I would be very grateful. Thanks in advance.
Edit: Here's an example of what I ment: Link to jsfiddle ->https://jsfiddle.net/Cerebrl/uhykY/
I want to push down button 2 and 3 the moment the first menu is drop downed, so it can create it's own space to display. And secondly, the menu should only close the moment I push the button, not by clicking outside of it.
Your can use toggleSlide method in two lines like
$(function(){
$('button').click(function(){
$('ul').slideToggle();
});
});
ul {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button data-toggle="#menu-main" title="Click to toggle">Toggle Menu</button>
</p>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
If you want the menu to push the content below, than put it in normal flow. What you need is a simple jQuery's slideToggle method and to hide the menu by default:
$('[data-toggle]').on('click', function(e){
e.preventDefault;
var thisLink = $(this);
var toToggle = $( thisLink.data('toggle') );
toToggle.slideToggle(200);
})
* {
font-family: sans-serif;
}
.toggle-menu a {
display: block;
float: right;
padding: 5px 20px;
text-align: center;
background: none #F1B475;
cursor: pointer;
}
#menu-main {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
#menu-main a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
#menu-main a:hover,
#menu-main a:focus {
background: none #D0812D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-menu">
<p>
HALLO
<a data-toggle="#menu-main" title="Click to toggle">+</a>
</p>
</div>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
<p>
Other content
</p>
Since the menu has no absolute or fixed position, it will push the content below it. JSFiddle playground
I have tried to combine a span element and a list that uses in-block formatting. There seems to be so misalignment of the elements.
Also, would anyone know how to wrap the elements within a fixed width?
Her's a link
<http://jsfiddle.net/joewaldronrit/3nhdnbL8/#&togetherjs=97QmIzvPKD>?
CSS:
.word-sugg-hint{
position:absolute;
top: 50px;
text-align: left;
font-size: 12px;
padding-right: 0px;
color:rgb(32,106,138);
}
.sugg-details{
display:inline-block;
text-align:left;
}
ul.suggestion-list li{
display: inline-block;
font-size: 14px;
height:0px;
}
ul.suggestion-list{
display: inline-block;
font-size: 12px;
margin-left: 0px;
padding-bottom:3px;
}
ul.suggestion-list li:hover{
color:rgb(105, 131, 73);
cursor:pointer;
text-decoration: underline;
}
ul.suggs.suggestion-list li{
/*
width:180px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
*/
float: left;
height: 20px;
color:#0000FF;
font-size:14px;
display:inline-block;
padding:0px;
}
Javascript:
var crateItems = ["apples", "bananas", "grapefruit"];
var suggList = document.getElementById("suggestion-list");
for (var i = 0; i < suggList.children.length; i++) {
if (crateItems.length === i) break;
suggList.children[i].innerHTML = crateItems[i] + (i < crateItems.length - 1 ? "," : "");
}
HTML
<div class="word-sugg-hint" id ="sugg-div">
<h class="sugg-details"> Did you mean? </h>
<ul id="suggestion-list" class="suggestion-list suggs">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
This answer assumes that instead of an <h> element, you mean <span>.
The main reason your elements were misaligned was your float:left was clashing with your display: inline-block. That solved your first problem. Your second question, how to wrap elements within a fixed width. If you see my jsFiddle, I simply wrapped the span and ul with a div that had a class called 'wrap'. I gave that element a fixed width. I also gave it a background color so you can easily see the width of each div. Because div's are block elements, I had to make it display as inline-block. You will see the text is aligned, and the widths are the same. Take away the background color, and I think it renders the way you wish: http://jsfiddle.net/3nhdnbL8/2/
As a greater take away, may I suggest, when working with CSS to get the desired look, too often we keep adding stuff. It is important to remember that when you add something, that may clash with something that already exists. Each time you want to add something, I would first ask if there is anything you should take out. It is a good idea to plan our CSS the same way we plan our JavaScript. Too much CSS causes a great deal of conflicts, and can become very difficult to debug.
Good luck.
I'm unable to make the popups 'redItem', 'blueItem' and 'greenItem' below visible again after setting their display to 'none'. I'm using a CSS selector to get them visible again when the mouse hovers over a node higher up in the nested list to no avail.
Here's the code:
<ul class="popups" style="vertical-align: bottom; padding: 0px; margin: 0px;">
<li style="width: 165px"><a id="topmostBox" href="#">One_high-up_item</a>
<ul class="popups">
<li>First-lower-item
<ul class="popups">
<li name="redItem" >Red</li>
<li name="blueItem">Blue</li>
<li name="greenItem">Green</li>
</ul>
</li>
</ul>
</li>
</ul>
.popups:hover > li {
display: block;
}
.popups {
background-color: white;
font-family: sans-serif;
font-size: 13.5px;
list-style: none;
position: relative;
border: 1px solid lightgray;
border-width: .05em;
border-top-color: rgb(165,165,165);
line-height: 1.2em;
display: inline-table;
}
function setTopColorAndVis(theNestedPopupAnchor)
{
var theColorName = theNestedPopupAnchor.innerHTML;
var topMenuBox = document.getElementById('topmostBox');
topMenuBox.innerHTML = theColorName ;
theNestedPopupAnchor.parentNode.style.display = "none";
}
What happens is this:
1) I select the color 'Red' (the 1st list item)
2) my call to setTopColorAndVis(this) makes the popup disappear (because the user selected an item, the color "Red", and now the popup is not needed for now)
3) but when I later hover the mouse over the "First-lower-item" list item, the child li that has the ul containing 'redItem', 'greenItem', 'blueItem' does not appear.
So my experience here is that I'm successfully able to hide the list items named 'redItem', 'blueItem' and 'greenItem' -- but when I hover over the "First-lower-item", despite my CSS code:
.popups:hover > li {
display: block;
}
The 'redItem', 'greenItem' and 'blueItem' do NOT reappear.
What am I missing here?
The inline style overrides you style in your css code. you should use onmouseover event and onmouseout instead.
Try
<li name="redItem" >Red</li>
function show(elem){
elem.parentNode.style.display = "block";
}
function hide(elem){
elem.parentNode.style.display = "none";
}
You cannot :hover over an element with display:none as it has no size...
instead of working with display, you can work with visibility - which will leave an area to hover over.
like so:
theNestedPopupAnchor.parentNode.style.visibility = 'hidden'
.popups:hover > li {
visibility: visible;
}
http://www.w3schools.com/cssref/pr_class_visibility.asp
I am making a to-do checklist webapp and I am using Raphael SVG icons as the checkmarks and status icons next to the list items.
As far as I know, this means that I can't use the standard unordered list bullet-point deal.
Here is what I am using for the list items:
<li class='list-item'><span class='item-status'></span> <span class='item'>List Item 2</span></li>
I insert the checkmark icon inside the item-status class span with Javascript (Raphael).
and here is my CSS
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
padding-left: 14px;
}
span.item-status {
display: inline-block;
vertical-align: top;
margin-top: -5px;
cursor: pointer;
}
span.item {
vertical-align: top;
}
That's fine if the "list item" is less than one line, but if it is more than one line it makes it look like this:
and I want it to look more like this (mockup):
TL;DR: I want it to look like that second picture, not the first.
this looks like something along those lines to me:
<style>
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
padding-left: 14px;
}
span.item { width: 7em; }
span.item-status, span.item {
display: inline-block;
vertical-align: top;
margin-top: -5px;
cursor: pointer;
}
</style>
<ul>
<li class='list-item'><span class='item-status'>*</span>
<span class='item'>List Item 2 List Item 2 List Item 2 List Item 2 </span></li>
<li class='list-item'><span class='item-status'>*</span>
<span class='item'>List Item 3 List Item 3 List Item 3 List Item 3 </span></li>
</ul>
Since this is structurally tabular data, a table element is the most natural solution. It is also the most robust, since it works even when CSS is disabled:
<table>
<caption>List Title</caption>
<tr valign=top><td>✓<td>List Item Lorem Ipsum Dolor Sit Amet This is a
pretty long to do people really shouldn’t make
them this long
<tr valign=top><td>✓<td>List Item 2
</table>
You can use CSS to make the list title appear in large size and bold
For simplicity, I have used the CHECK MARK character. Replacing it by the use of an icon font trick does not affect the problem presented. (But I would use a simple image rather than such a trick.)