I'm currently trying to alternate the colors of my bullet notes using some images.
However, I encountered several problems:
If I press backspace to delete one of the bullets, there's a blue line from contenteditable that appears - try backspacing everything in the fiddle link I gave and you'll see what I mean. There's probably an easy fix for this by making the border 0px, but I'm not sure of the correct syntax
The main problem is that I want it written in a way so that when the user presses enter, the next color bullet, or image in this case, will show up. I don't want it to show up all at once, but I'm not sure how to implement it. I'm assuming either CSS classes or Javascript is involved - I'm kind of new to these languages.
This is a snippet from the whole code that needs fixing:
<body>
<div contenteditable>
<div id = "notes"
<ul>
<li style = "list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
<li style = "list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
<li style = "list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
</ul>
<style>
#notes {
position: absolute;
</style>
</div>
</div
</body
And here's the fiddle.js link: http://jsfiddle.net/95Wvv/
It would be nice if you gave a solution in fiddle as well. Thank you!
edited to fit OP requirements
Move your contenteditable on <ul>
Add outline: 0 to your <li>
HTML :
<div>
<div id="notes">
<ul contenteditable>
<li style="list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
<li style="list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
<li style="list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
</ul>
</div>
</div>
CSS :
#notes {
position: absolute;
}
[contenteditable] {
outline: none;
}
Updated JSFiddle
EDIT
To alternate colors, use this code :
HTML
<div>
<div id="notes">
<ul contenteditable>
<li>Click here to edit</li>
<li>Click here </li>
<li>Click here </li>
</ul>
</div>
</div>
CSS
#notes {
position: absolute;
}
[contenteditable] {
outline: none;
}
li {
list-style-image: url('http://i61.tinypic.com/2nb9jxs.png');
}
li:nth-child(3n+1) {
list-style-image: url('http://i61.tinypic.com/2m5xb1f.png');
}
li:nth-child(3n+2) {
list-style-image: url('http://i61.tinypic.com/2qb5342.png');
}
Another JSFiddle !
To fix part one, add outline: 0; to the Element that has contenteditable on it (http://jsfiddle.net/95Wvv/)
Related
Let's say I have a list of items in a container with some padding around them. When I hover over one of the items in that list, I want a "delete" icon to appear in the padding/margin to the right of the item. The problem is, if this the hover event is on the item itself, the delete icon will disappear as soon as you try to click it because you will have stopped hovering on the item. How can I design this so I will not lose the icon when moving the mouse to click on it?
EDIT: My code is in React, so I've provided a simple hypothetical example here:
<div class="container">
<div class="item">
</div>
<i class="icon" />
<div class="item">
</div>
<i class="icon" />
<div class="item">
</div>
<i class="icon" />
</div>
.container {
display: flex;
padding: 24px;
}
.icon {
display: none;
}
.item:hover~.icon {
display: block;
}
EDIT2: I made sure the icon was inside the container, but now it's getting cut off:
If the hover is set in CSS, make sure the icon is inside the element that the hover is set on:
// HTML
<div class="container">
<div class="item">
<img src="delete.png"/>
</div>
</div>
// CSS
.item:not(:hover) img {
display: none;
}
It sounds like you have the :hover rule on the wrong element. You need to define the style so it shows the button when it hovers the common parent of the item and the button. That way you can move the cursor to the button without it being hidden.
(I also recommend using visibility: hidden; instead of display: none; so the layout doesn't change when you hover.)
<ul>
<li>Item <button>Delete</button></li>
<li>Item <button>Delete</button></li>
<li>Item <button>Delete</button></li>
</ul>
li:not(:hover) > button {
visibility: hidden;
}
Codepen: https://codepen.io/arnemahl/pen/bGEzoVz
I'm trying to get the closest DIV inside a li item, to apply a new class:
<ul id="menu">
<li class="here">
<img src="image">
<div class="border selected"></div>
</li>
<li class="here">
<img src="image">
<div class="border"></div>
</li>
.....
I wanted to be able to click inside the li tag and apply the class 'selected' to the div that already has class border.
I was trying to use .closest and .find but I couldn't get the good result.
Is there any recommendation? Thanks!
EDIT: https://jsfiddle.net/a8pm1aj7/
Please look at this jsfiddle.
The relevant code is:
$("#menu li").on("click", function(){
$("#menu li div.border").removeClass("selected");
$(this).find("div.border").addClass("selected");
});
This code removes the .selected class from all previously selected elements.
If I understand your question correctly, this should work for you.
.children() seems to work fine.... You may have more of an issue with CSS hierarchy. Make certain the selected class is defined after the border class in the CSS.
$(document).ready(function() {
$( '.here' ).on('click', function() {
var theDiv = $(this).children('.border');
$('.border').not(theDiv).removeClass('selected');
$( theDiv ).toggleClass('selected');
});
});
li { display: block; margin: 10px; width: 80%; }
.border { height: 20px; background: #eee; }
.selected { background: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li class="here">
Text/image
<div class="border"></div>
</li>
<li class="here">
Text/image
<div class="border"></div>
</li>
</ul>
Updated your fiddle and fixed issues with it.
- You had the div positioned absolute and set at 100% width and 100% height. S0 basically, it was the size of the window. Actually linked the jQuery library to the fiddle.
I have created a <ul> element and what I am trying to do is to highlight the list elements from a certain child and all the way up. However, because of the nested children, when I highlight a parent also all its children are highlighted (while I want to highlight only the text of the parents).
https://jsfiddle.net/zcfvuh6h/3/
In this example, I should get the nodes Four12, Four1 and Four highlighted.
Any suggestions? Thank you.
EDIT:
Okay, so after understanding what the actual problem you are trying to solve is, it took a bit of work, but I got a working solution.
Working DEMO
A few things to note
1. All of your text in your <li>need to be in a container of some sort, a <span> is fine. You had some in spans and some not, so I put them all in spans for you.
2. This cannot be done with background-color on the <li> or <ul> because it spans multiple lines if it has children. You have to use a css pseudo-element in order to get the desired effect.
3. The demo I have posted also dynamically sets the background of the element and parents based on which element you click on. You must click on a list item in order for the backgrounds colors to show up.
4. Your d3 code that you included is all obsolete at this point. It can be done with 7 toal lines of jQuery.
5. Enjoy!
HTML
...
<li id="i6"><span class="listItem">Four</span>
<ul>
<li id="i7" class="listItem"><span class="listItem">Four1</span>
<ul>
<li id="i71" class="listItem"><span class="listItem">Four11</span>
<ul>
<li id="i4111" class="listItem"><span class="listItem">Four111</span></li>
<li id="i4112" class="listItem"><span class="listItem">Four112</span></li>
</ul>
</li>
<li id="i12" class="listItem"><span class="listItem">Four12</span></li>
</ul>
<li class="listItem"><span class="listItem">Five</span></li>
</ul>
</li>
...
Javascript
$(function () {
$(".listItem:not(li)").on("click", function () {
var parentListItem = $(this).parent();
$("#menu1 .highlight").removeClass("highlight");
parentListItem.addClass("highlight").parents("li").addClass("highlight");
});
});
CSS
.highlight {
position: relative;
}
.highlight > * {
position: relative;
z-index: 100;
}
.highlight::before {
content: ' ';
background-color: cyan;
width: 100%;
height: 15px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
Been made aware you cant swap classes unless its a sibling. so instead of putting the class in a new div im trying to put it into the same list but give it a class to hide, then be visible when another li is hovered.
http://jsfiddle.net/e79g4p1p/13/
<div class="bodyfooter_block bbshadowb">
<p class="typotitle_sml"><?php echo $var_furtherinfotitle; ?></p>
<p class="typosubtitle_sml"><?php echo $var_furtherinfoheading; ?></p>
<p class="typotext" style="padding-top:16px;">
<ul class="blocklist">
<li>text hidden</li>
<li>text</li>
<li>yugiugugu</li>
<li>ugiugguiug</li>
<li>ygguiguig</li>
<li>uihoihoihoih</li>
<li>uhgiuhiuhuh</li>
<p>po</p>
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
</p>
</div>
css
.hover_text1 {
}
.bodyfooter_text1 {
list-style-type: none;
visibility: hidden;
}
.hover_text1:hover > #bodyfooter_text1 {
list-style-type: none;
width:260px;
height:102px;
background: #222222;
color: #CCCCCC;
padding:12px;
padding-top:6px;
border-radius: 6px;
visibility: visible;
}
Tried with js but doesnt work:
$("#hover_text1").hover(function() {
$(".bodyfooter_text1").addClass("bodyfooter_text1_hover");
});
http://jsfiddle.net/e79g4p1p/23/
I strongly suggest you go over the basics of CSS once again.
The problem you face can be overcome using pure CSS - we need a selector called the General Sibling Combinator:
CSS
.hover_text1:hover ~ #bodyfooter_text1 {
display: block;
}
This, however, requires you to restructure your markup by a marginal amount, so the "preceded by element" rule works correctly - the selector we use requires both the preceding and the targeted element to share the same parent:
HTML
<ul class="blocklist">
<li class="hover_text1">text hidden</li>
<li>text</li>
<!-- ... -->
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
Working example on JSFiddle.
The fiddle I've linked is a very simplified version of your code, modified only to highlight the selectors working and nothing else.
I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <li> elements , so that they don't exceed one line.
The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .
The plugins that I've tried have not been useful to me .
My code looks like this:
<div class="row">
<div class="col-md-12 column">
<ul class="nav nav-pills center-pills text-center">
<li class="active">
<a href="#">
<span class="text-center badge pull-right span-list">1</span>
1 Mars
</a>
</li>
<li class="">2 Mars</li>
<li class="">3 Mars</li>
<li class="">4 Mars</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
</ul>
</div>
</div>
The code fiddle .
Your suggestions will be very welcome .
Are you having a problem with styling? If so...
I've set the row height to fixed, and made overflow hidden, so that you get just one row of buttons.
.row{overflow:hidden;height:42px;}
I've added a prev and next button, and made them float left and right respectively. I hope this doesn't violate your pagination framework. Please let me know if you want an example of how to programmatically add these elements.
HTML
<li class="next">Next</li>
<li class="prev">Previous</li>
CSS
li.next{float:right;}
li.prev{float:left;}
I believe this gives the desired result... please let me know if I've missed your intention.
Disclaimer: I've only tested this in Opera 19.0. I don't have access to Firefox/Chrome/IE at the moment.
Example: http://jsfiddle.net/nickg1/5ELfQ/2/
Updated: Updated to remove horizontal scrollbar. - http://jsfiddle.net/nickg1/5ELfQ/3/
I have had success with Bootstrap pagination. If you are generating too many elements to fit in your desired space, you need to either figure out a way to generate less or use css to limit the size of your pagination space and "cut off" the overflowing elements.
What you can do is .prepend() a left li and .append() a right li:
$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});
Although there has little browser compatibility and styling issues in this solution. But I hope this will give you an idea to start.
My CSS:
.nav.nav-pills {
width:auto;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
position: relative;
padding-right: 38px;
display: inline-block;
}
.nav-pills > li {
display: inline-block !important;
float: none !important;
}
.nav-pills > li.last {
position: absolute;
right: 0;
}
As display:inline; is applied to .nav, so for centering use text-center class in wrapping div. i.e.
<div class="col-md-12 column text-center">
Apply jQuery for previous/next buttons and resizing issues.
$(document).ready(function () {
$('.nav').prepend('<li>«</li>');
$('.nav').append('<li class="last">»</li>');
var ulWidth = $('.nav').width();
var screenWidth = document.body.clientWidth;
if (screenWidth < ulWidth ){
$('.nav').css('width', '100%');
}
$(window).resize(function(){
screenWidth = document.body.clientWidth;
screenWidth < ulWidth == true ?
$('.nav').css('width', '100%') :
$('.nav').css('width', 'auto');
});
});