How would I go about sanitizing nested lists away once a user submits some HTML markup.
The list is created with execCommand('insertUnorderedList',false,null)
For some reason, firefox will nest lists when this is used on a line within a li while other browsers simply remove the list (Which is what I want).
I would like to remove the nesting to prevent browser inconsistencies with the submitted html.
example:
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
I would like to remove the inner ul to get
<ul>
<li>
</li>
</ul>
EDIT: This is user input I need to sanitize.
$(function(){
$('li ul').remove();
})
Related
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
I have a list
<ul>
<li> first article </li>
<li> second article</li>
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
<li> third article</li>
<ul>
<li> reply to third</li>
<ul>
<li> reply to the reply</li>
</ul>
</ul>
</ul>
Which begets something like
first article
second article
replies to second
different reply to second
third article
reply to third
reply3
reply3
reply to the reply
What i'm trying to achieve is basically make every inner level it's own row:
[first article]
[second article]
[rep2] [difrep2]
[third article]
[reply3] [reply3] [reply3]
[^3reply to the reply]
The problem is: when I put a box around list elements, the box contains the parent and all the descendent/inner elements. I want a box around the list element, and I would like the children to appear on a new "row"
Is there any way to "kick" the inner list elements out of their parent's css box so that they appear on a new "row" ?
https://jsfiddle.net/qjf6tsf8/1/
^Update: please check out this fiddle.
In the fiddle "yet another child" has children elements, and I'd like to put them in a new row below "yet another child" instead of recursively boxing them up.
For reference: https://jsfiddle.net/qjf6tsf8/ (js fiddle showing the tree structure with just li and ul elements, and then the upper link I've changed them to divs)
First off, according to W3C HTML Validator, any <ul> cannot be the direct child of a <ul>.
So this structure
<ul>
<li> first article </li>
<li> second article</li>
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
...
Should actually be
<ul>
<li> first article </li>
<li> second article
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
</li>
...
This actually makes your issue less difficult to resolve.
See https://jsfiddle.net/tae2e7ea/.
The important part is below. Use display: block to put the child <ul> on its own line, then display: inline-block for the <li> children.
/* <ul> that are children of <li> should be on their own line */
li > ul {
display: block;
}
/* And the children of those <ul> should be all on one line */
li > ul > li {
display: inline-block;
}
Edit for additional info: See the fiddle for some additional styles you may need to set on the <li> (like vertical-align: center) or <ul> (like padding-left: 0)
Edit after clarifications from asker: Since 100% width is desired and this control is being handled with JavaScript (AngularJS), I recommend organizing by levels in the tree instead of maintaining the tree-like structure you started with. See this Fiddle for that update. JavaScript can then be used to show/hide the necessary levels. Or rather, AngularJS should be used to only render the lists for the "chosen" level.
i think this will work
ul > ul
{
display : inline-flex ;
}
I think you have not decided to display items correctly yet. Because you have think of levels differently in a way that can not be common for all levels. For clarity pay attention to item replies to second. What if it had some children?! You can add a class name like .same-row to every item you want to be displayed in a same row and add fallowing style to your page:
.same-row{
display: inline;
}
So long story short, for ages, ive been using some CSS reset on my projects.
i was trying to make a regular sitemap page(you know with links in an unordered list) and when i do this (code below)
<div id="smap">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Products
<ul>
<li>Cantaloupes</li>
<li>Watermelons</li>
<li>HoneyDews</li>
</ul>
</li>
<li>Sales Team</li>
<li>Contact / Directions</li>
<li>Growers</li>
<li>Packers</li>
<li>Shippers</li>
<li>Importers</li>
<li>Distributors</li>
</ul>
</div>
The list comes out but the products sub-items are not indented.
In the CSS reset, the line that's doing this is
vertical-align: baseline;
When i removed it,although it restored the indentation on my sitemap list, it messed up my menus throughout the site.
i want to target that lists specifically so, choosing that lists parent div which is "smap"
What im wondering is, by default, what is a lists vertical alignment value??
like for example, if i do this
#smap ul, li {vertical-alignment: SOMETHING; }
what is the default value for a list to be indented?
Thanks in advanced.
If you want to revert to the default value for any property after a reset, then you should use the value initial - you might want to read this article for more on it.
However, the ul indentation is given by the padding-left of the ul - see http://dabblet.com/gist/3144582. I think vertical-align shouldn't influence that.
w3 html validator will tell me that this is wrong:
<a href="http://www.bla.com>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</a>
in order to get a validated as HTML 4 strict (or just for writing things correctly)
What is the better way to write it:
no div's and ul's - just span's with classes that I need to design:
<a href="http://www.bla.com>
<span class="div">something</span>
<span class="ul">
<span class="li">first</span>
<span class="li">second</span>
</span>
</a>
without <a>
<div id="actAsLink" onclick="javascript:window.open('http://www.bla.com')>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
=========================
sorry that the code doesn't look at its best - I had troubles handling the "code sampler" on this website.
I vote for option 1: Anchor + descriptive class names:
The link will work, even when JavaScript or pop-ups are disabled. (this is the most important feature to me.)
The class attributes describe their role, as a substitute for the <ul>, <li> elements. These elements can be styled using CSS.
Your structure looks a bit odd though: Why do you want to nest a list in an anchor?
Really you should have <a> tags inside each of the div, ul and li tags:
<div></div>
<ul>
<li>first</li>
<li>second</li>
</ul>
This is valid markup, but obviously with the downside that you have three links instead of one. I'm not sure why you want to have a list inside a link though - it's more common to see a list of links.
I need to divide into groups several <li> elements in a list, is it possible?
(I know I an give each element different class names/separate into different <ul>)
Have you considered nested UL's? I believe this would validate:
<UL>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
</UL>
Your CSS trick was my first guess; too bad you can't use that.
According to the XHTML schema (or one the schema anyway), the only thing you put inside a <ul> is a <li>, as described at http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules.html#s_listmodule
You might tweak the appearance of the list items using CSS, by assigning different class values to the <li> elements.
<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...
Have you considered using multiple-inheritance of CSS classes? This can be a bit messy to maintain, but it will solve the case of the same entry in multiple groups. The HTML looks something like this:
<ul class="pizza-toppings">
<li class="meat">pepperoni</li>
<li class="meat">bacon</li>
<li class="vegetarian">cheese</li>
<li class="vegetarian vegan">mushrooms</li>
<li class="vegetarian vegan">onions</li>
</ul>
Here we have three groups (meat, vegetarian and vegan) and some toppings, like mushrooms and onions, are part of more that one group.
I believe your only options are the ones you've already identified, multiple lists or via classes, since for an li to be in the list defined by a ul or an ol, it must be the immediate child of that ul/ol (reference).
If you need to separate into different groups items from one unordered list than they should belong to different lists isn't it OR should be grouped in an ordered list (many ULs in one OL).
If this is for presentation needs (to display one list on many columns) and you can solve a few constraints, the second technique in https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5810687.html or explained also here : http://www.communitymx.com/content/article.cfm?page=2&cid=27F87
Such groups exist for select (optgroup) but obviously you can't separate the option elements because you must select only one of them so they should belong to the same element.