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;
}
Related
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'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/)
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');
});
});
I have a header navigation listed below, and the class added to the li creates an icon.
When scrolling down I want to be able to remove the class completely and when scrolling back to the top of the page I want to be able to tell which class belongs to which item and add that same class back.
I am thinking I probably need to store them into variables. Keep in mind these menu items are dynamic and can change if it's deleted.
HTML
<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
<li id="menu-item-37" class="customicon-shop">Shop</li>
<li id="menu-item-35" class="customicon-contact">Account</li>
<li id="menu-item-36" class="customicon-apps">Apps & Entertainment</li>
</ul>
<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
<li id="menu-item-61" class="customicon-about">About</li>
<li id="menu-item-62" class="customicon-support">Support</li>
<li id="menu-item-63" class="customicon-why">Why?</li>
</ul>
jQuery
var nav = $(".nav");
var pos = nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
nav.css({
'position': 'fixed'
}).addClass("sticky");
} else {
nav.css({
'position': 'relative'
}).removeClass("sticky");
}
});
If you look at the code, the id's will be dynamic but the classes will not be.
Don't combine jquery .css and .addClass when you can do this all within the class rule.
You only need 1 class, and that is .sticky to apply the position: fixed; and top: 0; to the <ul> element.
Use .toggleClass to add .sticky, no need to add any css or classes for position: relative; or when they scroll up the page, just remove the class .sticky
$(window).scroll(function() {
var pos = $(".nav").position();
$(".nav").toggleClass('sticky', $(window).scrollTop() > pos.top);
});
and use CSS for the class of .sticky:
.sticky {
position: fixed;
top: 0;
}
So, with this approach, it will just add the sticky class when the page gets scrolled down, when they scroll up it will remove the class automatically.
It is not clear what $(".nav") represents in your jQuery code above. If you are referring to the HTML 5 <nav> element, than the code above should work, if you remove the . from everywhere it says $(".nav"), so it would become $("nav")
You can store arbitrary data in any element with jQuery's data function
HTML
<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
<li id="menu-item-37" class="customicon-shop" data-icon="customicon-shop">Shop</li>
<li id="menu-item-35" class="customicon-contact" data-icon="customicon-contact">Account</li>
<li id="menu-item-36" class="customicon-apps" data-icon="customicon-apps">Apps & Entertainment</li>
</ul>
JS, when you're scrolling back to top
jQuery('#menu-left-main-nav li, #menu-right-main-nav li').each(function() {
var originalclass = jQuery(this).data('icon');
jQuery(this).addClass(originalclass);
});
You could add a custom data attribute to the li tags that will contain the appropriate class name and then add and remove it as follows.
HTML
<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
<li id="menu-item-37" data-icon-class="customicon-shop">Shop</li>
<li id="menu-item-35" data-icon-class="customicon-contact">Account</li>
<li id="menu-item-36" data-icon-class="customicon-apps">Apps & Entertainment</li>
</ul>
<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
<li id="menu-item-61" data-icon-class="customicon-about">About</li>
<li id="menu-item-62" data-icon-class="customicon-support">Support</li>
<li id="menu-item-63" data-icon-class="customicon-why">Why?</li>
</ul>
JS
var $listItems = $('.nav-bar li'),
itemIconClass = $listItem.attr('data-icon-class');
// add class
$listItem.addClass(itemIconClass);
// remove class
$listItem.removeClass(itemIconClass);
I am messing around with this scroll menu and I want each li to change to different colours instead of the same one.
var colorOver = '#31b8da';
var colorOut = '#1f1f1f';
But this changes the colour of all of them.
The html looks like this:
<div id="sidebar">
<ul id="menu">
<li id="first">blog <span> / 2012</span></li>
<li id="second">me <span> / 2012</span></li>
<li id="third">etc <span> / 2012</span></li>
<li id="fourth">etc <span> / 2012</span></li>
</ul>
</div>
I assume you just tell it an id ...
Hopefully I've given enough info.
Thanks for any help.
link to the demo and download
you could modify your css to set the colorOver and colorOut classes for each li like:
.first.colorOver { background-color: #31b8da; }
.first.colorOut { background-color: #1f1f1f; }
and use Francois Wahl's toggleClass option:
$("#sidebar ul#menu li").on("hover", function(){
$(this).toggleClass("colorOver", "colorOut");
});
then you can set colors for each li easily.