You can use event.target for this: JS: // IE does not know about the target attribute. It looks for srcElement // This function will get the event target in a browser-compatible way function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } var ul = document.getElementById(‘test’); ul.onclick = function(event) { var target … Read more
You need CSS counters: #customlist { /* delete default counter */ list-style-type: none; /* create custom counter and set it to 0 */ counter-reset: elementcounter; } #customlist>li:before { /* print out “Element ” followed by the current counter value */ content: “Element ” counter(elementcounter) “: “; /* increment counter */ counter-increment: elementcounter; } <ol id=”customlist”> … Read more
Here is one using DomDocument The basic idea is the contents of each directory is represented by a <ul> and each element in the directory by a <li> If element is a non-empty directory it will contain a <ul> to represent its contens and so on. $path = $_SERVER[‘DOCUMENT_ROOT’].’/test’; $objects = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path), RecursiveIteratorIterator::SELF_FIRST); … Read more
It can be done using CSS3 but not 100% cross browser (namely IE7). using the pseudo :before element and counter-reset and counter-increment you can hide the list-style and create your own. here is an article outlining how: Styling ordered list numbers and here is a demo built from that article. Also in case of the … Read more
Update 3/20/2012 – Fixed in IE10 This regression has been fixed in Internet Explorer 10 (all document modes). Microsoft has deleted the Connect entry, so you cannot review its status. Since Microsoft now pushes IE10 down automatically, it should be working for all your regular customers. This is a known IE9 regression, which has been … Read more
You mean altering the size of the bullet, I assume? I believe this is tied to the font-size of the li tag. Thus, you can blow up the font-size for the LI, then reduce it for an element contained inside. Kind of sucks to add the extra markup – but something like: li {font-size:omgHuge;} li … Read more
You can do this using CSS counters, in conjunction with the :before pseudo element: ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; } <ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol>
CSS Lists and Counters Module Level 3 introduces the ::marker pseudo-element. From what I’ve understood it would allow such a thing. Unfortunately, no browser seems to support it. The following solution works with any type of icon font. But FontAwesome apparently provides its own way to accomplish this (I was unaware of it before writing … Read more
The only pure CSS way is with counters: ol { counter-reset: item; list-style-type: none; } ol li:before { content: ‘Q’ counter(item, decimal) ‘. ‘; counter-increment: item; } You cannot achieve this besides using CSS counters (which were designed specifically for such use cases!) or JavaScript. By the way, it’s decimal, not numbered.
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> … Read more