So I have a menu, I want it to display information accordingly, for example:
<ul id="menu-list">
<li id="about-me">About Me</li>
<li id="skills">Skills</li>
<li id="experience">Experience</li>
<li id="education">Education</li>
<li id="projects">Projects</l>
<li id="contacts">Contacts</li>
</ul>
and on my JS file I did this in order to access "li" elements:
let navMenu = document.getElementById("menu-list");
let menuList = navMenu.getElementsByTagName("li");
let skillsButton = document.getElementById("skills");
let skillsEvent = document.getElementById('main-section-skills').hidden = true;
(text that will display on click is pre-set to hidden = true)
The goal is to iterate through "li" items to find which one of those has ".hidden = false" value and change it to ".hidden = true" so that when you click on different menu buttons, each button will so only relevant info and others that are not relevant will bi hidden.
Thanks for your help.
You can get the array of children using element.children
https://developer.mozilla.org/en-US/docs/Web/API/Element/children
for (let child of navMenu.children) {
your logic here
}
For checking the class you can use element.hasClass or even:
element.style.display = 'none'
element.style.display = 'block'
Related
I would like to display creating product in admin section sub categories in tree only when selected else closed in woocommerce product categoreis. How can I achieve this ? Presently it appears like this. Tried css but didn't work.
<li id="tire_sizes-52"><label class="radiall"><input value="52" type="checkbox" name="tax_input[tire_sizes][]" id="in-tire_sizes-52"> 145</label><ul class="children">
<li id="tire_sizes-62"><label class="radiall"><input value="62" type="checkbox" name="tax_input[tire_sizes][]" id="in-tire_sizes-62"> 65</label> <ul class="children">
<li id="tire_sizes-87"><label class="radiall"><input value="87" type="checkbox" name="tax_input[tire_sizes][]" id="in-tire_sizes-87"> 15</label></li>
</ul>
</li>
</ul>
</li>
I want it closed and open only if selected
// if a checkbox has a child, add a css class="has-children"
// select them
const parents = document.querySelectorAll('.has-children')
const caches = parents.map(() => ([]))
function clear(parent) {
const id = parent.getAttribute('id');
const ul = parent.querySelector('.children');
ul.css.display = 'none'; // hide from the DOM
// you may also need to remove it from the DOM
/*
children = [];
while (parent.firstChild) {
const firstChild = parent.firstChild
parent.removeChild(firstChild)
caches[id].push(firstChild);
}*/
}
// inital setup
parents.forEach(function (parent) {
const id = parent.getAttribute('id');
clear(parent);
// setup listen for changes to parents
parent.addEventListener('change', function() {
let child;
if (child = parent.querySelector('children')) {
if (child.css.display === 'block') {
clear(parent)
} else {
//caches[this.getAttribute('id')].forEach(c =>
// this.appendChild(c)
delete caches[this.getAttribute('id')]
const ul = parent.querySelector('.children');
ul.css.display = 'block'; // show from bom
}
});
})
something like this. Checkout jquery it may be easier
If this is right, please give me points, i'm a nooob
I haven't executed this code , so it will need your attentions. but that is the essance of it. As I say. look into jquery. This can be accomplished in 3 lines of code.
This is my html code. How can I keep a menu-item (link to another page) selected when I'am browsing ? I'd like to do it with javascript. Thank you in advance.
<ul class="header-menu" id="nav">
<li class="menu-item">HOME</li>
<li class="menu-item">NEWS</li>
<li class="menu-item">TOUR DATES</li>
<li class="menu-item">GALLERY</li>
<li class="menu-item">ABOUT</li>
</ul>
There are multiple ways to achieve that effect. Let's first state that you have an "active" class that you can use on the menu items that will make them pop out, how would you go about applying that class?
First of all, I would assign a specific class or id to all the menu items, to make them easy to reference within the css (or javascript).
Let's say that now your situation is like this:
<ul class="header-menu" id="nav">
<li class="menu-item home-item">HOME</li>
<li class="menu-item news-item">NEWS</li>
<li class="menu-item tour-item">TOUR DATES</li>
<li class="menu-item gallery-item">GALLERY</li>
<li class="menu-item about-item">ABOUT</li>
</ul>
Now, with javascript, you could do it like this:
// Get the page name
let pathArray = location.pathname.split("/");
let page = pathArray[pathArray.length-1];
// Get all menu items and convert them to an Array
let menuItems = document.querySelectorAll(".header-menu .menu-item");
menuItems = new Array(...menuItems);
let lookFor = "";
// Based on the page, set the variable lookFor as the identifying class
switch (page) {
case "home.html":
lookFor = "home-item";
break;
case "news.html":
lookFor = "news-item";
break;
// ...
}
// Get the element that contains the class
let item = menuItems.filter( (item) => item.classList.contains(lookFor) )[0];
// Set the "active" class on the element
item.classList.add("active");
Here you can check out a codesandbox with the working code.
I need a way to check on click of an item how many <li> inside a <ul> has the class active.
For example: I have a list of items and every time I click on one of the items I add an active class. I then need to loop through all the items on every click and see how many of the items have the active class and then log that in an alert.
This is what I currently have:
let selectList = $('ul');
let selectItems = $('ul li');
let count = $(selectList).children('li.active').length;
$(selectItems).on('click', function() {
$(selectItems).each(function() {
console.log(count);
});
});
This seems to be logging all the <li> inside the <ul> and not the amount of with <li class="active">
You need to count when the click happens, while you are calculating it beforehand and displaying the same count value,
$(selectItems).on('click', function() {
console.log( $(this).closest( "ul" ).children('li.active').length; );
});
Is it possible to change a certain on hover over another certain item.
For example:
<li>
test
</li>
JS
var list = document.getElementById('li');
var link = document.getElementById('a');
list.onmouseover = function() {
link.style.color = "#8080ff";
}
If i hover over the li item I want the text inside the a tag to change, but this code is not working.
I cant use css or jquery library.
http://jsfiddle.net/Nt8Pq/40/
Your code looks for elements with ids and you have not ids. You would need to select them by the tag name and loop over the collection. And than you would need to find the anchor that is inside of the collection.
var menu = document.getElementById("menu");
var lis = menu.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.addEventListener("mouseover", function() {
this.getElementsByTagName("a")[0].style.color = "#8080ff";
});
li.addEventListener("mouseout", function() {
this.getElementsByTagName("a")[0].style.color = "#000000";
});
}
<ul id="menu">
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>
In the end this is a lot of code to implement
ul li:hover a {
color : "#8080ff";
}
SO you could just inject a CSS rule if you are not able to actually add styles to the page...
var sheet = window.document.styleSheets[0];
sheet.insertRule('#menu li:hover a { color: #8080ff; }', sheet.cssRules.length);
<ul id="menu">
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>
This can be done with some simple HTML event attributes and JavaScript.
<li>
test
</li>
HTML Event Attributes
If you want to do it with JS, here is the answer. But like said before, you shouldn't do it this way:
<li id="list">
<a id="link" href="#">test</a>
</li>
var list = document.getElementById('list');
var link = document.getElementById('link');
http://jsfiddle.net/Nt8Pq/45/
Assuming you can not modify the CSS or the source of the web page, and you are stuck only with a single javascript file in which you wish to modify some features of a web page, then this approach will work:
One caveat is you have to use of an index in document.getElementsByTagName('li') which returns an array. If you always need the first element for example, you can hard code this index as zero. Otherwise, you need to iterate over the collection looking for the one you wish to change.
Finally, you can modify the style of the firstChildElement after you find the list item you want.
var li = document.getElementsByTagName('li')[0];
li.onmouseover = function() {
li.firstElementChild.style.color = "#F00"; // red
}
li.onmouseout = function() {
li.firstElementChild.style.color = "#000"; // black
};
<li>
Mouse over me.
</li>
var nodesArray = document.getElementById('myID').getElementsByTagName('a');
for (var i = 0; i < nodesArray.length; i++) {
nodesArray[i].style.color = 'red';
}
May be you will find your solution in this link:-https://ubuntuforums.org/showthread.php?t=1692280
I have a menu that contains 3 items. How can I change that the text to what it's selected from the menu?
HTML
<div id="dropdown-container">
<div id="index-tab" onclick="toggleMenu()">1</div>
<ul id="dropdown">
<li ><span class="current-browse">1</span>
<ul class="dropdown-items">
<li class="dropdown-item">2</li>
<li class="dropdown-item"">3</li>
</ul>
</li>
</ul>
</div>
JavaScript
function toggleMenu() {
var dropDown = document.getElementById('dropdown');
if(dropdown.style.display == "block") {
dropdown.style.display = "none";
} else {
dropdown.style.display = "block";
}
}
For example the menu currently showing:
1
1
2
3
If selected 2, it will show:
2
2
1
3
If selected 3 it will show :
3
3
1
2
Are you wanting to set the text of index-tab or the text of the current-browse span? Either way you need some click handlers on the li items that gets the element with the id or class of whichever one you want to set (Will need to get the anchor child of the index-tab div if it is used). Then replace the text element of the anchor or span. jQuery will make it a bit easier, but can be done either way. The jQuery example given will need to get the anchor child to then set text, and doing it when showing the menu is not what you want since no item is clicked yet.
Added toggleSelection() function:
event.preventDefault(); used to prevent links default action which is jumping to a location.
selectedItem references event.target (i.e. the element that was actually clicked), which is either the one of the .dropdown-items.
There's multiple exchanges between elements based on the .textContent of the selectedItem. At this point, #current-browse, and #index-tab a (the link in #index-tab) have a new .textContent and selectedItem has the previous item number.
All of that will not happen until #dropdown is clicked on and the event.target is determined. this is possible by the eventListener:
dropDown.addEventListener('click', toggleSelection, false);
SNIPPET
function toggleMenu() {
var dropDown = document.getElementById('dropdown');
if (dropDown.style.display == "block") {
dropDown.style.display = "none";
} else {
dropDown.style.display = "block";
}
}
function toggleSelection(event) {
event.preventDefault();
var selectedItem = event.target;
var targetItem = selectedItem.textContent;
var currentItem = document.getElementById('current-browse');
var prevItem = currentItem.textContent;
var extLink = document.querySelector('#index-tab a');
currentItem.textContent = targetItem;
extLink.textContent = targetItem;
selectedItem.textContent = prevItem;
}
var dropDown = document.getElementById('dropdown');
dropDown.addEventListener('click', toggleSelection, false);
<div id="dropdown-container">
<div id="index-tab" onclick="toggleMenu()">1
</div>
<ul id="dropdown">
<li><span id="current-browse">1</span>
<ul class="dropdown-items">
<li class="dropdown-item">2
</li>
<li class="dropdown-item">3
</li>
</ul>
</li>
</ul>
</div>
REFERENCE
addEventListener vs. onclick
'this' and EventHandlers
you need to write the toggleMenu() in a way that it changes the text of index-tab based on the value of dropdown:
$("#index-tab").text($(".dropdown-item option:selected").text())