I'm trying to create a contenteditable editor where everything is a list. However if I simply give a ul tag contenteditable="true", the top list item can be deleted. How do I make it so that every new line is a list, and the top line li cannot be deleted. Thanks
Here's what I've got :
<ul style="height: 300px;" contenteditable="true">
<li>Type text here. Try deleting this list item.</li>
</ul>
The most trivial way of solving your problem would be insert an empty non-editable <span> into the first <li> element.
This is also not absolutely fool-proof, but will protect the first <li> element against most edit attempts.
<ul contenteditable="true">
<li><span contenteditable="false"></span>Type text here. Try deleting this list item.</li>
<li>editable!</li>
</ul>
Related
I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.
The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.
The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?
The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?
Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/
If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!
HTML:
<div id="background"></div>
<header id="header">
<div id="nav">
<ul>
<li id="projects" onclick="displayDropdown()">
PROJECTS
<ul>
<a href="/one" class="blocklink" target="_self">
<li id="one">ONE</li>
</a>
</ul>
</li>
</ul>
</div>
</header>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="connect" onclick="displayDropup()">
CONNECT
<ul>
<a href="https://www.instagram.com/" target="_blank" class="blocklink">
<li id="instagram">
INSTAGRAM
</li>
</a>
<a href="https://twitter.com/" target="_blank" class="blocklink">
<li id="twitter">
TWITTER
</li>
</a>
<a href="mailto:mail#mail.com" class="blocklink">
<li id="email">
EMAIL
</li>
</a>
</ul>
</li>
</ul>
</div>
</footer>
JS and CSS are seen in the JSFiddle.
Thank you so much!
UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!
For the second problem, have you tried the :active selector? For example, using part of your CSS code:
#one:focused, #one:visited, #one:hover, #one:active {
background-color: black;
color: white;
}
It looks like there are some issues in your markup. Normally we don't nest ul>a. We normally do ul>li>a.
For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.
Let me know if that works. You might also want to use touch events for mobile (even thought click might work).
I am trying to get sortable to work.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
</li>
</ul>
I can't seem to grab and drag anything. The important part of this question is the 3 div's in the li
I admit, I don't understand what this line in the docs means: "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)."
And I am able to get it to work with a table.
Any insights?
Yes, the docs do say "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)." which makes it hard to have 3 divs in the li. However, there is a solution.
You can use tg-dynamic-directive (at https://github.com/thgreasi/tg-dynamic-directive) to solve this. Don't forget to include it, and put 'tg.dynamicDirective' in your dependencies. Basically you take out the middle part in between the li tags, in this case the 3 divs, and you put it in another file and link to it.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
</li>
</ul>
Then in another file put the innards, like innards.html:
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
And replace the innards with:
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<tg-dynamic-directive ng-model="c" tg-dynamic-directive-view="getView">
</tg-dynamic-directive>
</li>
</ul>
And in your controller put something like:
$scope.getView = function(item) {
if item {
return 'innards.html';
return null;
};
Anyways the docs go over it pretty well. I realize this question is pretty old but I just ran into this myself and got it working so hopefully it helps someone else.
I have a dropdown <ul> inside a <span>. The reason is because I want the dropdown list to be as wide as the <span> text using width: 100%, and not hard px values, since the text varies in length on different pages.
Using an <ul> inside a <span> works but is not valid. What is valid is <u>, <small>, <b>, <strong> etc. but they have effects/style on the text which I don't want.
What I need is a dummy element like span, with no effects on the text that I can add my own classes to (for highlight). But it has to be a valid container for an <ul>.
Or some other good idea.
Currently:
<span class="hightlight"> My highlighted text
<ul class="dropdown">
<li> .. </li>
<li> .. </li>
<li> .. </li>
</ul>
</span>
The block-level counterpart of span is div. Neither of them has any impact on default rendering except that span is an inline element, div is a block element.
It is not clear why you need a container, since there is presumably some styling that causes some problem that you try to fix with a container. By default, ul is full-width, i.e. its width is the available width, i.e. width: 100%. And you can assign a class and properties directly on the ul element.
Regarding the other approaches considered in the question, u, small etc. cannot contain ul any more than span can, as per the specs. They have the same content model.
A <div> would be the equal. The <span> element is basically in inline <div> element.
You can use a DIV and display it as inline to not disrupt your current flow.
HTML:
<div class="hightlight"> My highlighted text
<ul class="dropdown">
<li> .. </li>
<li> .. </li>
<li> .. </li>
</ul>
</div>
CSS:
.highlight {
display: inline;
}
you can use strong if you want, and in css specify that .highlight { font-weight: normal } so it won't be bold anymore.
I've got a code you see below:
<div class="categories-list">
Description One
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
What I want to do is to select the text "Description one" which has no tag around it and wrap it with the tag (specifically h2) using jQuery, so the final code would look like:
<div class="categories-list">
<h2>Description One</h2>
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
I know that I can use wrap() function to get the second thing done. The selecting part is the one I've got the problem with.
Simple wrap can't do the job until you walk over the contents of the element:
$(".categories-list").contents().first().wrap("<h2 />");
DEMO: http://jsfiddle.net/MDhvY/
Okey so I got a List that's beeing created depending on the information from a database. the end result looks something like this:
<ul id="menu">
<li onclick="testFunction(1, "text")">Title1</li>
<li onclick="testFunction(2, "text")">Title2
<ul class="sub">
<li onclick="testFunction(3, "text")">Title3</li>
</ul>
</li>
<li onclick="testFunction(4, "text")">Title4</li>
</ul>
Now, I want to send the id and the text to the function "testFunction". This works great with the primaty li elements, but when I click a li element from the "sub" class, the function is first run on the pressed li element and then on the li element above. So in this case, if i press Title3, the function will first be ran with id 3 and then with id 2 witch is the parent element. I am thinking it's somehow accessing the whole li tree somehow but can't really understand why. any thoughts?