Develop Reference

I want to add delay to my menu when pictures are changing. How is it possible?

These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
<!-- header --
<nav class="nav">
<ul>
<li>
<a href="" data-index="1">
Home
</a>
</li>
<li>
<a href="" data-index="2">
About Us
</a>
</li>
<li>
<a href="" data-index="3">
Services
</a>
</li>
<li>
<a href="" data-index="4">
Shop
</a>
</li>
<li>
<a href="" data-index="5">
Our Teams
</a>
</li>
<li>
<a href="" data-index="6">
Blog
</a>
</li>
<li>
<a href="" data-index="7">
Contact Us
</a>
</li>
</ul>
</nav>
These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
jQuery
// menu toggler click event
$(".menu-toggler").click(function() {
$(this).toggleClass("menu-toggler-close");
$(".nav").fadeToggle();
});
$(".nav").click(function() {
$(".menu-toggler").removeClass("menu-toggler-close");
$(".nav").fadeOut();
});
$(".nav > ul").click(function(e) {
e.stopPropagation();
});
$(".nav > ul > li > a").hover(
function() {
var dataIndex = $(this).data("index");
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
},
function() {
$(".nav").css("background", "rgba(0, 0, 0, 0.8)");
},

You can use setTimeout() method to delay your code.
setTimeout(function()
{
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
}, 1000);

Loop through list and create a <li> elements

I have a <ul> list in html as follows:
<ul data-role="listview" data-filter="true" data-input="#element">
<li><a href="">
<div class="item">
<h3>getting up</h3>
<div>
<h6>from bed</h6>
<h6>09:00</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>brushing</h3>
<div>
<h6>with brush</h6>
<h6>09:30</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>COFFEE </h3>
<div>
<h6>nescafe</h6>
<h6>10:30</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>office</h3>
<div>
<h6>work</h6>
<h6>4hours</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>LUNCH</h3>
<div>
<h6>canteen</h6>
<h6>1hour</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>office</h3>
<div>
<h6>work</h6>
<h6>4hours</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>dinner</h3>
<div>
<h6>home</h6>
<h6>11hours</h6>
</div>
</div>
</a></li>
</ul>
I want to do the following:
Create <ul> element, the append to <li> section
Loop through the list, and append created <li> to <ul> element?
(creating array and converting to string is good choice but unable to implement)
Can anyone help me through this?

Try something like this:
Add id "list-test" to the list:
<ul id="list-test" data-role="listview" data-filter="true" data-input="#element">
Add a button to test:
<button id="anchor-test" href="#">Add Element</button>
And try this script (with comments) to start off with:
$("#anchor-test").on("click", function (event) {
event.preventDefault();
// Create li element, with class
var liTag = $("<li>", { "class": "test-class" });
// Create anchor element, with blank href
var aTag = $("<a>", { "href": "" });
// Create div element, with class "item"
var itemTag = $("<div>", { "class": "item" });
// Define some text
var txt_one = "rest test";
var txt_two = "play test";
// Insert html, including defined text, into div element
itemTag.html("<h3>office test</h3><div><h6>" + txt_one + "</h6><h6>" + txt_two + "</h6></div>");
// Add div (with html) to anchor, and anchor to li element
liTag.append(aTag.append(itemTag));
// Add whole li element to the list
$("#list-test").append(liTag);
});
Clicking the button will add the defined li element. Hope it helps.

i tried this things
var sessionsList = "<div>emptylist</div>";
var myElement = document.getElementById("#mysessioname");
var view = $(sessionsList );
view.empty();
$(noSessionsCachedMsg).appendTo(view);
var sessionsListSelector = $("#myElement").append('<ul data-role="listview" data-filter="true" data-input="#element"></ul>').find('ul');
for (var i = 0; i < 10; i++)
{
// enter code here
sessionsListSelector.append('<li>something</li>');
}

Slide show add and remove class for change image and button

I want make slide show.
its my code:
java script =>
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
var activeIMG = document.querySelector('.active_slider');
activeIMG.classList.remove('active_slider');
if (activeIMG.nextElementSibling ) {
activeIMG.nextElementSibling .classList.add('active_slider');
} else {
activeIMG.parentElement.firstElementChild.classList.add('active_slider')
}
}, 5000);
.active_slider{
display: inline;
}
.current{
color: red;
}
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem active_slider">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
buttons was active and changed after 5 sec but image doesn't change
active_slider = active slider
current = active button
how can i make auto change for slider
i want add class for active and remove class for hide
if cant with class i can active with style { display: inline; }

Try something like this, it will run every 3 second and set the class active to the next element.
setInterval(function(){
var slider = $(".slider");
var active = slider.find(".active");
var sliderCount = slider.find("li").length;
var index = active.index();
active.removeClass("active");
if (index < sliderCount - 1){
active.next().addClass("active")
} else {
slider.find("li:first").addClass("active")
}
}, 3000);
.active{
color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<li class="slide1">
<img src"image.png" alt="1">
</li>
<li class="slide2 active">
<img src"image.png" alt="2">
</li>
<li class="slide3">
<img src"image.png" alt="3">
</li>
</div>

Your html is invalid, there is = missing after class, should be class="slide1 active". To invoke function after some time you can use setInterval() adn to modify classes you can modify classList
property:
var x = 1000;
setInterval(function () {
var activeLi = document.querySelector('li.active');
activeLi.classList.remove('active');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('active');
} else {
activeLi.parentElement.firstElementChild.classList.add('active')
}
}, x);
.active {
color:red
}
<div class="slider">
<li class="slide1 active">
<img src"image.png">
</li>
<li class="slide2">
<img src"image.png">
</li>
<li class="slide3">
<img src"image.png">
</li>
</div>
On every interval it removes class active from element and checks if element has sibling element (by checking nextElementSibling existence). Depending on it, active class is attached to either sibling or first element (parentElement.firstElementChild).

How to get the innerHTML/innerText from a related node of a clicked element?

I would like to get a certain innerText from a clicked element in a HTML document that I clicked.
The corresponding HTML looks something like this:
!DOCTYPE html>
<html>
<head>
<title>Some title</title>
</head>
<body>
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
</body>
</html>
A Javascript function should return either "First" or "Second" depending on the clicked link.
My basic idea is to add an event listener and use the returned event to get the content of the span element:
function(){
document.addEventListener('click', function(e) {
e = e || window.event;
var spanText= e.path[i].innerText; //Don't know how to assign i correctly
return spanText;
}, false);
}
My problem is that I don't know how to define i or if there is something more suitable than .path[i] to work with. Depending on whether I click the image or the text.

Add the click events to the list items
in the handler, retrieve the 'span' child and get its text
var lis = document.querySelectorAll('.categories li');
lis.forEach(function(el) {
el.addEventListener('click', onClick, false);
})
function onClick(e) {
var li = e.currentTarget;
var span = li.querySelector('span');
console.log(span.innerText);
}
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

function init(){
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if(!link)return;
e.preventDefault();
var text = link.textContent;
alert(text);
return spanText;
});
}
init();

You can check what concrete element was clicked and then return its text. if you want to have some additional information - use data- attributes and read target.dataset to read it.
document.addEventListener('click', function(e) {
var target = e.target;
if(target.tagName === 'SPAN') {
console.log(target.innerText);
return target.innerText;
}
}, false);
<ul class="categories">
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

If the structure is consistent, then there will always be the same number of <span> elements as <a> elements.
Consequently, if you know the user just clicked on the second <a>, you'll know the <span> you need to return is the second <span>.
Working Example:
var links = document.querySelectorAll('li a');
var spans = document.querySelectorAll('li div span');
function getTextContent(e) {
e.preventDefault();
var linksArray = Array.prototype.slice.call(links);
var index = linksArray.indexOf(this);
console.log(spans[index].textContent);
}
links.forEach(function(link){
link.addEventListener('click', getTextContent, false);
});
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

Sorry for my bad language..
I'm late to reply.
Maybe it will help someone else;
window.addEventListener("click", (event) => { //dblclick
let div = event.target.innerText; // <-- the code you want
window.onClick(div);
});
And..
function onClick(div) {
console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}
the code you want : let div = event.target.innerText;

Count the number of displayed elements in a HTML list

I have a list of list items which are display: none by default. I programmatically change a certain number of them to list-items.
I've been trying to use querySelectorAll but when I try:
document.querySelectorAll("#ulname style[display*='list-item']")
it returns an empty array (I know it is at least one).
Ideas on how to modify my selectors or another approach? I would like to know after the fact how many items are displayed.

var liList = document.getElementById("myul").getElementsByTagName("li");
var largo = liList.length
alert(largo);
WHERE "myul" is the id of the list and largo is number of li items
<ul id="myul">
<li>hello</li>
<li>world</li>
</ul>
the alert would be 2
<ul id="myul">
<li>hello</li>
<li>world
<ul>
<li>here we are</li>
<ul>
</li>
</ul>
the alert would be 3

var ul = document.getElementById("myul");
var liNodes = [];
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
totalLis = liNodes.length;
Adding text to your ul tag
var txt = document.createTextNode("gsdgds");
ul.appendChild(txt);
Adding li tag to your ul tag
var txt = "<li>dsgdsgs</li>";
ul.innerHTML(txt);

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<p>Maybe this answer can help. I improvise for this after a few days of testing. This is what I got. Hope it helps you.</p>
<li class="sidenav-item open active">
<a href="#" class="sidenav-link sidenav-toggle" ></i>
<div class="text-white">Hi, There!
<div class="badge badge-primary" id="ul-me"></div></div>
</a>
<ul class="sidenav-menu" id="ul1">
<li class="sidenav-item active">
<a href="#" class="sidenav-link" >
<div class="text-white" >Home</div>
</a>
</li>
<li class="sidenav-item" id="ul2">
<a href="#" class="sidenav-link" >
<div class="text-white" >Blog</div>
</a>
</li>
<li class="sidenav-item" id="ul3">
<a href="#" class="sidenav-link" >
<div class="text-white" >Downloads</div>
</a>
</li>
<li class="sidenav-item" id="ul4">
<a href="#" class="sidenav-link" >
<div class="text-white" >Contact</div>
</a>
</li>
<li class="sidenav-item" id="ul5">
<a href="#" class="sidenav-link" >
<div class="text-white" >About</div>
</a>
</li>
</ul>
</li>
'''
<!-- Count Item (li) in <ul> -->
<script>
function myFunction() {
var mylist = [document.getElementById("ul1"), ("ul2"), ("ul3"), ("ul4"), ("ul5")];
document.getElementById("ul-me").innerHTML = mylist.length;
}
</script>
</body>
</html>