Develop Reference

How to add ACTIVE class to sub-menu list if primary menu-item is active?

I am struggling to fix this issue. I have created navigation with primary menu items based on a primary menu in which you click on a sub-menu with menu items that should be displayed which holds the data for this menu item.
The Submenu title is changing but I want to switch between sub-menu add active and remove when you switch back and forth.
My JS:
(() => {
const header = document.getElementById('header');
const headerHamburger = header.querySelector('.header__hamburger');
const headerMenu = header.querySelector('.header__menu');
const headerMenuText = headerMenu.querySelector('span');
const navigation = document.querySelector('.navigation');
const navigationSideMenu = navigation.querySelector(
'.navigation__sidemenu'
);
const navigationSideItems = [
...document.querySelectorAll('.navigation__item')
];
const navigationSubList = document.querySelector('.navigation__sublist');
const navigationTitle = document.querySelector('.navigation__title');
const toggleSubMenu = (item, e) => {
e.preventDefault();
const link = item.querySelector('.navigation__link');
const active = document.querySelector('.navigation__link--active');
if (active) {
active.classList.remove('navigation__link--active');
}
e.currentTarget.classList.add('navigation__link--active');
navigationTitle.innerHTML = link.innerText;
};
navigationSideItems.forEach((item, i) => {
item.addEventListener('click', toggleSubMenu.bind(null, item));
});
const toggleMenu = (e) => {
e.preventDefault();
headerHamburger.classList.toggle('active');
if (headerMenu.getAttribute('data-open') === headerMenuText.innerHTML) {
headerMenuText.innerHTML = headerMenu.getAttribute('data-close');
navigation.classList.add('navigation--active');
} else {
headerMenuText.innerHTML = headerMenu.getAttribute('data-open');
navigation.classList.remove('navigation--active');
}
};
headerMenu.addEventListener('click', toggleMenu);
})();
My HTML:
<div class="navigation">
<div class="navigation--inner">
<div class="wrapper">
<div class="navigation--content">
<aside class="navigation__sidemenu">
<ul class="navigation__list">
<li class="navigation__item"><a class="navigation__link navigation__link--active" href="#"><i class="navigation__arrow"></i> Zero Emissie Stadslogistiek</a></li>
<li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Kennis</a></li>
<li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Tips & tools</a></li>
<li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Doe mee!</a></li>
<li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Community</a></li>
<li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Over ons</a></li>
</ul>
</aside>
<main class="navigation__menu">
<h2 class="navigation__title">Zero Emissie Stadslogistiek</h2>
<ul data-menu="1" class="navigation__sublist">
<li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Alles over Zero Emissie Stadslogistiek</a></li>
<li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Stappenplan ZES</a></li>
<li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Convenant ZES</a></li>
<li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> ZES-Zone en toegangseisen<span></span></a></li>
</ul>
<ul data-menu="2" class="navigation__sublist">
<li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Alles over kennis</a></li>
<li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Stappenplan kennis</a></li>
<li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Convenant kennis</a></li>
</ul>
</main>
</div>
</div>
</div>
</div>
My local environment: http://00cfad965a36.ngrok.io/
How can I fix this?

Your callback for e.target point at <li> not <a> make sure you update static class for first view.
Try to update your statement with this code
if (active) {
active.classList.remove('navigation__link--active');
e.currentTarget.classList.add('navigation__link--active');
}
// No match occurred
else {
e.currentTarget.classList.add('navigation__link--active');
}
Active Class Implementation
// Capture all elements of <a> output should be in an array
var triggers = document.getElementsByClassName("navigation__link");
// Create new variable i stands for index to be used in for loop
var i;
// Loop through all elements been found in box variable
for (i = 0; i < triggers.length; i++) {
// Add Event Listener of Click for <a> elements found in the variable box
triggers[i].addEventListener("click", function(e) {
// Add e in callback function trace the element triggered this event
// In other words, which button has been clicked
var clicked =
e.target;
// default active element otherwise or else will not remove any active class
if (document.querySelector(".active")) {
document.querySelector(".active").classList.remove("active");
document.querySelector(clicked).classList.toggle("active");
// Not found any active css class (box)
} else {
document.querySelector(clicked).classList.toggle("active");
}
})
};
Live Example: codepen.io

Automatically scroll through tabs using jQuery

I have a tab list code posted below.
//TabList
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a id="t1" href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t2" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t3" href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t4" href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab"></a>
</li>
</ul>
Each tab has a pic and some info. I want to automatically scroll through each tab every 5 seconds and then start at the first when the end is reached.
Using a setInterval function (Posted Below) i can get it to work but the infomation does not change. That is because it doesn't add an active class to the hyperlink.
//setInterval Function
setInterval(function () {
//get currently-on tab
var onTab = tabs.filter('.active');
//click either next tab, if exists, else first one
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
nextTab.click();
}, 1000);
var tabs = $('#tabs li');
//on click to tab, turn it on, and turn previously-on tab off
tabs.click(function () {
$(this).addClass('active').siblings('.active').removeClass('active');
}
});
To get it working with the information showing when tab changes i use this code.
tabs.click(function () {
var curr = $('li.active');
curr.removeClass('active');
curr.next().find("a").click();
curr.next().addClass('active');
});
The Problem is when it reaches the end of the it does not go back to the start i have looked at answers on stack-overflow like this but can't get it to work. I feel like i cant see the forest for the trees and that it is a simple answer. Any Help will be greatly appreciated.

var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
hi yo:) Here when u get last element, u should add 'active' class to your first element of list:) Smth like:
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first().addClass('active');

jQuery moving a control while move the mouse on another element

I have a div containing a time range. I also have a scroll for the div when moving the mouse. What I am trying to move the time control along with the scroll, while the mouse is moving on the time range.The issue is time control does not move according to mouse move.
Here is what I did:
$('#timeTable').on('mousemove', function(e) {
var xPrev = 600;
var inc = 0;
var position = $('#nowTime').offset().left;
var leftOffset = $(this).offset().left;
if (xPrev < e.pageX) {
inc = -255;
}
$('#timeTableInner').css('left', -e.clientX + leftOffset + inc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<time id="nowTime">10:00</time>
<div id="timeTable">
<div id="timeTableInner">
<ul id="timeText">
<li class="t0000"><span class="hourText">0:00</span></li>
<li class="t0015"> </li>
<li class="t0030"> </li>
------------
<li class="t2400"><span class="hourText">24:00</span></li>
</ul>
</div>
</div>

Check this please.
Is this what you want?
check my updated fiddle here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<time id="nowTime">10:00</time>
<div id="timeTable">
<div id="timeTableInner">
<ul id="timeText">
<li class="t0000"><span class="hourText">0:00</span></li>
<li class="t0015"> </li>
<li class="t0030"> </li>
<li class="t2400"><span class="hourText">24:00</span></li>
</ul>
</div>
</div>

Javascript: Issue when using .click method

Firsty here is the html which corresponds with the code
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York</li>
<li id="sc">Spanish Cities</li>
<li id="gv">A Glasgow Viewpoint</li>
<li id="sch">Some Churches</li>
<li id="bh">Barcelona Highlights</li>
<li id="mp">Martin’s Pictures</li>
</ul>
</div>
<!-- end .grid_12 - CATEGORIES -->
The idea here is that when each of these links are pressed a var id is changed to the correct number depending on which is clicked
Here is the code i have used to do this
if (nyView.click) {
id = 1;
} else if (scView.click) {
id = 2;
} else if (gvView.click) {
id = 3;
} else if (schView.click) {
id = 4;
} else if (bhView.click) {
id = 5;
} else if (mpView.click) {
id = 6;
}
the view vars are simply locators to find the correct div element so they are done like this
nyView = document.getElementById('ny');
scView = document.getElementById('sc');
gvView = document.getElementById('gv');
schView = document.getElementById('sch');
bhView = document.getElementById('bh');
mpView = document.getElementById('mp');
My issue is that no matter the element i clicked i only get the orginal... for me it seems like the code groups it all together so when u click the ny link it takes this as all other divs are clicked. This was tested as when i clicked the ny link innerHTML in all divs was executed... i am completely stuck as to why this is so would greatly appreciate the help

You don't need inline event handlers
You can use event delegation
Use index to get the clicked element index in ul
HTML
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York
</li>
<li id="sc">Spanish Cities
</li>
<li id="gv">A Glasgow Viewpoint
</li>
<li id="sch">Some Churches
</li>
<li id="bh">Barcelona Highlights
</li>
<li id="mp">Martin’s Pictures
</li>
</ul>
</div>
Javascript
var id;
$('#categories').on('click', 'li>a', function () {
id = $(this).closest('li').index();
});
Demo: http://jsfiddle.net/tusharj/q9xbqck0/3/

When you say nyView.click you are referring to the function definition and that would always be treated as true value, so you would get first condition always.
var id;
$('#categories').on('click', 'li', function(){
id = this.id; // id = $(this).index();
});

My approach is very different, maybe someone else can work with your logic. I can't. My approach:
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li class="licategory" data-val="ny" data-id="1"> New York</li>
<li class="licategory" data-val="sc" data-id="1">Spanish Cities</li>
<li class="licategory" data-val="gv" data-id="1">A Glasgow Viewpoint</li>
<li class="licategory" data-val="sch data-id="1"">Some Churches</li>
<li class="licategory" data-val="bh" data-id="1">Barcelona Highlights</li>
<li class="licategory" data-val="mp" data-id="1">Martin’s Pictures</li>
</ul>
$("li").on("click",function(){
$("this").data("val");
$("this").data("id");
})

Add one common class like .categoryin all li and get the index()
$(".category").click(function(){
// console.log(this.id);
alert($(this).index())
});
Fiddle

nyView.click returns a function that's why value of id =1 always no matter which link you clicked.....try this code
<!doctype html>
<html>
<head>
<script>
function getImageCategories(element) {
var nyView = document.getElementById('ny');
var scView = document.getElementById('sc');
var gvView = document.getElementById('gv');
var schView = document.getElementById('sch');
var bhView = document.getElementById('bh');
var mpView = document.getElementById('mp');
var id=0;
if (element.parentNode === (nyView)) {
id = 1;
} else if (element.parentNode===scView) {
id = 2;
} else if (element.parentNode===gvView) {
id = 3;
} else if (element.parentNode===schView) {
id = 4;
} else if (element.parentNode===bhView) {
id = 5;
} else if (element.parentNode===mpView) {
id = 6;
}
alert(id);
}
</script>
</head>
<body>
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York</li>
<li id="sc">Spanish Cities</li>
<li id="gv">A Glasgow Viewpoint</li>
<li id="sch">Some Churches</li>
<li id="bh">Barcelona Highlights</li>
<li id="mp">Martin’s Pictures</li>
</ul>
</div>
</body>
</html>

Looking for elements with specific depth in JavaScript

I need to write a function in pure JavaScript witn no framework to get all specific tags, but only from first level under parent.
For example: I need to call some function on first <ul> and get all <li> from first level of it (<li> with text 1.2 and <li> with text 2.1)
<div id="sideNavigation">
<ul>
<li class=" act open ">
1.2
<ul>
<li class=" ">
1.2
<ul>
<li class=" ">
1.3
<ul>
<li class=" ">1.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class=" ">
2.1
<ul>
<li class=" ">2.2.1</li>
<li class=" ">2.2.2</li>
<li class=" ">2.2.3</li>
</ul>
</li>
</ul>
</div>
I've been trying to do it like this:
var allLi = document.getElementById("sideNavigation").getElementsByTagName("li");
but it returns all <li> in this div not only first level <li>. Do you have any quick method to solve my problem or do I have to implement a new function to detect depth of nodes

You can use the attribute .children to get those "li"
var firstDepthLi = document.getElementById("sideNavigation").children[0].children;
If you want a generic function you can create something like:
var getElementsByDepth = function(el, tagname, depth) {
var children = el.children;
var res = new Array();
for(var i=0; i<children.length; i++) {
if (children[i].tagName == tagname) {
res.push(children[i]);
if (depth > 0)
res.concat(getElementsByDepth(children[i], tagname, depth-1));
}
}
return res;
}

Try:
var allLi = document.getElementById("sideNavigation").getElementsByTagName("li")[0];
That should return the first li element out of all li's on the page. Change the zero at the end to a different number to get a different element. You could even set a variable for the value:
var liNum = 0;
var allLi = document.getElementById("sideNavigation").getElementsByTagName("li")[liNum];
And in a function:
function getLi(depth) {
var specificLi = document.getElementById("sideNavigation").getElementsByTagName("li")[depth];
return specificLi;
}
var firstLi = getLi(0);
console.log(firstLi);
<div id="sideNavigation">
<ul>
<li>First list tag</li>
<li>Second list tag</li>
<li>Third list tag</li>
</ul>
</div>
And to make the function even shorter, you could just do:
function getLi(depth) {
return document.getElementById("sideNavigation").getElementsByTagName("li")[depth];
}
That should work. :)