I have a stacked menu dropdown and I want each menu item to increasingly lighten gradually. I have done it manually using the sass lighten() rule, but I would like to know if there's a way to lighten it 5% dinamically for each new list-item increment. I guess some jquery should be combine to achieve this.
fiddle: http://jsfiddle.net/k2fjzro4/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="list-item-1">1</li>
<li class="list-item-2">2</li>
<li class="list-item-3">3</li>
<li class="list-item-4">4</li>
<li class="list-item-5">5</li>
</ul>
You could use the SASS's #for.
ul li {
padding: 10px;
background-color: #333;
}
#for $i from 1 through 10 {
li.list-item-#{$i} {
background-color: lighten(#333, $i*5%);
}
}
If you want it though to happen dynamically for the larger amount of items then JS is probably inevitable.
Edit : #Michał Kostrzyński posted the same answer. Leaving this here for the CodePen.
You can achieve this with a simple sass for expression.
Don't use javascript if you have SCSS enabled.
#for $i from 1 through 5 {
.list-item-#{$i} {
background-color:lighten(#333, 5%*$i)
}
}
See here :
https://codepen.io/Pauloscorps/pen/aVdrpY
for(var i = 1; i < 6;i++)
{
var opacity = 1/6*i ;
$('ul').append('<li class="list-item-'+i+'" style="background-color:rgba(0,0,0,'+opacity+')">'+i+'--'+opacity+'</li>');
}
ul li {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
</ul>
Something like this maybe
Use each and rgba
var opacity = 1;
$("ul > li").each(function(index, element){
$(element).css("background-color", "rgba(51, 51, 51, "+opacity+")");
opacity -= 0.05;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="list-item-1">1</li>
<li class="list-item-2">2</li>
<li class="list-item-3">3</li>
<li class="list-item-4">4</li>
<li class="list-item-5">5</li>
</ul>
Related
I am trying to learn web designing and when trying to add class into it through java script ran into trouble.
html code:
<ul>
<li onclick="switchChannel(channel1)>
#Channel1
</li>
<li onclick="switchChannel(channel2) class="selected">
#Channel2
</li>
<li onclick="switchChannel(channel3)>
#Channel3
</li>
css code:
.selected{
color:blue;
border-left:4px solid blue;
}
javascript:script.js
function switchChannel(channelName) {
}
javascript:channel.js
var channel1={
name:"Channel1",
createdOn:new Date("April 1, 2016"),
starred:false
};
var channel2={
name:"Channel1",
createdOn:new Date("April 1, 2016"),
starred:false
};
I want to be able to click a channel1 from the list and apply .selected class to it but when channel2 is clicked remove .selected from channel1 and apply it to channel2 and so on...
If I have messed up anything else in the code please feel free to comment on it.
There are a lot of answers here but they don't seem to be addressing the actual issue. Here is a quick example using vanilla JavaScript to accomplish what you are asking for.
function switchChannel(el){
// find all the elements in your channel list and loop over them
Array.prototype.slice.call(document.querySelectorAll('ul[data-tag="channelList"] li')).forEach(function(element){
// remove the selected class
element.classList.remove('selected');
});
// add the selected class to the element that was clicked
el.classList.add('selected');
}
.selected{
color:blue;
border-left:4px solid blue;
}
<!-- Add the data-tag attribute to this list so you can find it easily -->
<ul data-tag="channelList">
<li onclick="switchChannel(this)">Channel 1</li>
<li onclick="switchChannel(this)" class="selected">Channel 2</li>
<li onclick="switchChannel(this)">Channel 3</li>
</ul>
You should use getElementsByIdand getElementsbyTagNameto manipulate the DOM:
function selectChannel(channelNumber) {
let listItems = document.getElementById("items").getElementsByTagName("li");
var length = listItems.length;
for (var i = 0; i < length; i++) {
listItems[i].className = i+1 == channelNumber ? "selected" : "";
}
}
.selected {
color: blue;
border-left: 4px solid blue;
}
<ul id="items">
<li onclick="selectChannel(1)">#channel1</li>
<li onclick="selectChannel(2)" class="selected">#channel2</li>
<li onclick="selectChannel(3)">#channel3</li>
</ul>
This solution uses jQuery but I thought this might help you out. A CodePen showing a version of this in action can be seen here.
jQuery(document).ready(function(){
jQuery('li').click(function(event){
//remove all pre-existing active classes
jQuery('.selected').removeClass('selected');
//add the active class to the link we clicked
jQuery(this).addClass('selected');
event.preventDefault();
});
});
I solved it. And I thank you every for your help.
$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');
I have a menu where there are the heading and the submenus. Whenever the user hovers over the heading, submenus show up.
And whenever any of the items in submenus is clicked, the submenu is set to hidden using Javascript. Now, when the user hovers over the menu, the submenus don't show up! Please help me to fix this.
function closesSan() {
document.getElementsByClassName('submenu')[0].style.setProperty('display', 'none', 'important');
}
#main:hover .submenu {
display: block!important;
}
<ul>
<li id="main">
List
<ul class="submenu" style="display: none;">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
I had to write some additional code to get the desired result. Actually, the base problem in your code was important and property {both works same} in sense both get prioritized by code.
So to get rid of I have added an additional class on click and removing that class on every new hover. Hope it will satisfy the needs.
var main = document.getElementById("main");
main.onmouseover = function() {
document.querySelector('.submenu').classList.remove("displayNoneImp");
}
function closesSan() {
document.querySelector('.submenu').classList.add("displayNoneImp");
}
.submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
.displayNoneImp {
display: none !important;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
Since you don't use a pure CSS implementation, use event listeners and avoid using !important whenever possible:
var main = document.querySelector('#main');
var submenu = document.querySelector('.submenu');
var items = document.querySelectorAll('#main li');
main.addEventListener('mouseover', function () {
submenu.style.display = 'block';
});
main.addEventListener('mouseout', function () {
submenu.style.display = 'none';
});
items.forEach(function(item) {
item.addEventListener('click', function () {
console.log('clicked on:', item)
submenu.style.display = 'none';
});
});
.submenu {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li>Bacon</li>
<li>Tuna</li>
<li>Chicken</li>
</ul>
</li>
</ul>
When Using !important is The Right Choice
You can try something simple like this:
function closesSan() {
document.getElementsByClassName('submenu')[0].classList.add("hide");
setTimeout(function() {
document.getElementsByClassName('submenu')[0].classList.remove("hide");
},100)
}
#main .submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
#main .submenu.hide {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu" >
<li onclick="closesSan()" >Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
use visibility instead of display
visibility: hidden;
save those kittens
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;
}
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.
If someone could help me point in the right direction that would be awesome as I have been looking for a solution to this issues for hours.
http://jamessuske.com/will/
I have a menu with 3 menu items on it. if you hover over the last two menu items, a div with items from a different list appear. That part works fine, but if I go to roll over the other menu items from another list, they disappear again.
This is my JavaScript:
<script type="text/javascript">
function showGalleryNav(){
document.getElementById('headerNavGallery').style.display = "";
}
function showInfoNav(){
document.getElementById('headerNavInfo').style.display = "";
}
function hideGalleryNav(){
document.getElementById('headerNavGallery').style.display = "none";
}
function hideInfoNav(){
document.getElementById('headerNavInfo').style.display = "none";
}
</script>
And The HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Info</li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li>William Ruppel</li>
<li>CV</li>
<li>Artist Bio</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div><!--headerNavInfo-->
I've tried different Attributes, but none of them are working, I have also tried switching to jQuery with
$('#headerNavGallery").css("display", "");
also didn't work,
Any ideas would be greatly apperiated.
Actually what you are trying to accomplish is all css-only doable but not with that markup structure. First you need to nest your lists.
<ul class="menu">
<li>item 1</li>
<li>
item 2 with sub
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
... so on ..
</ul>
</li>
</ul>
some css
.menu li {
position: relative;
}
.menu li ul {
position: absolute;
top: 30px; /* the height of the root level item */
display: none;
}
.menu li li {
position: static; /* or you could float these for horizontal menu */
}
.menu li:hover ul {
display: block;
}
These are pretty much the basics. But I strongly suggest you go and study superfish menu as it's jquery drop drop menu but it degrades nicely with js off, so you could just study the css of it. http://users.tpg.com.au/j_birch/plugins/superfish/
Check that typeo, nvm...
Setting the display property should always have a value "none" or "block", empty("") is a bad reset... try this:
<script>
$(".galleryNavToggle").on("mouseenter mouseleave", function(event){
var headNavGal = $("#headerNavGallery");
if(event.type === "mouseenter"){
headNavGal.show();
}else if(event.type ==="mouseleave" &&
((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
$.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
headNavGal.hide();
}
});
$("#headerNavGallery").on("mouseleave", function(event){
var headNavGal = $(this);
if(event.type ==="mouseleave"){
headNavGal.hide();
}
});
</script>
HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
AND CSS
.headerNav{
border:thin solid black;
float:left;
}
.headerNavGallery{
float:left;
border:thin solid black;
margin-left:-1px;
}
1) Gallery
You don't need to specify javascript:. This is redundant.
2) It is working exactly the way you programmied it to work. When you mouse-out, it disappears.
3) You have code for "headerNavInfo" but no matching HTML.