Develop Reference

How to change the URL of an anchor tag based on current active tab?

I have two tabs, Google and Yahoo!. The goal is that if the 'Google' tab is active, then the plus sign icon (on the right) will contain the URL based on the conditional.
Example: If 'Google' tab is active, then clicking on the plus sign should open a google.com page.
I'm not sure what I'm doing wrong:
let activeTab = document.querySelector(".nav-tabs li.active");
let selectedForm = document.querySelector("#formSelector");
if (activeTab.textContent == "Google") {
selectedForm.setAttribute("onclick", "location.href='https://www.google.com'");
} else if (activeTab.textContent == "Yahoo!") {
selectedForm.setAttribute("onclick", "location.href='https://www.yahoo.com'");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>

I would recommend adding a click event listener on the button that checks the active tab and redirects accordingly:
let selectedForm = document.querySelector("#formSelector");
selectedForm.addEventListener('click', function() {
let activeTab = document.querySelector(".nav-tabs li.active");
if (activeTab.textContent.trim() == "Google") {
location.href = 'https://google.com'
} else {
location.href = 'https://yahoo.com'
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>

As Spectric said, moving the check to be based on click of a tab would be ideal.
Here's an alternative implementation (requires HTML & JS changes).
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google" related-url="https://google.com">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo" related-url="https://yahoo.com">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
Javascript
<script>
const tabClick = document.querySelectorAll(".nav-tabs");
const selectedForm = document.querySelector("#formSelector");
tabClick.forEach((tabEl) => {
tabEl.addEventListener('click', (e) => {
console.log(tabEl);
console.log(e);
selectedForm.setAttribute('href', e.target.getAttribute('related-url'));
});
})
</script>

jQuery all list items in menu is set to active instead of just the selected one

This is the structure of my menu. I have attached the jQuery code below. The way this works is that when I click on Home Page, its parent element which is the list item has a class that is set to active.
At the moment, When I am at the Home Page, its list item has an active class. However, the list-items for Account Codes and Branches also have an active class set on it. How can I make sure that only my Home Page is affected?
Also, how can I change my jQuery code to work with this menu format where there is a new list within a list?
<ul class="sidebar-menu" id="navigation-menu">
<li><i class="far fa-square"></i><span>Home Page</span></li>
<li class="menu-header">Administrator Mode</li>
<li class="nav-item dropdown">
<i class="fas fa-fire"></i><span>Configuration</span>
<ul class="dropdown-menu">
<li>Account Codes</li>
<li>Branches</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
var current = location.pathname;
$("#navigation-menu a").each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
console.log($this);
$this.parent().addClass('active');
console.log("matched");
}
});
});
</script>

Dropdown Layout
The most effective HTML layout pattern for dropdown menus is to alternate between <ul>/<ol> and <li>:
<ul>
<li class='dropdown'>
Dropdown
<ul class='menu' style='display:none'>
<li>Item</li>
<li class='dropdown'>
<a href='#/'>Dropdown</a>
<ul class='menu' style='display:none'>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
Also, if you want the menus to be initially closed, add the following inline style:
<ul class='menu' style='display:none'>
The <a>nchors have default behavior that is hard to override when using a framework like Bootstrap or Foundation. Try toggling the .active class on .has-dropdown children tags.
Demo
Details commented in demo
/*
Delegate click event to each .has-dropdown
Toggle .active class on that particular .has-dropdown children tags
Get next .dropdown-menu and toggle it up/down and toggle .active
*/
$('.has-dropdown').on('click', function(e) {
$(this).children().toggleClass('active');
$(this).next('.dropdown-menu').slideToggle().toggleClass('active');
});
.active {
color: tomato
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css' rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<ul id="navigation-menu" class="sidebar-menu">
<li>
<a href="#/" class="nav-link">
<i class="fas fa-home"></i><span> Home Page</span>
</a>
</li>
<li class="menu-header">
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-tools"></i><span> Administration</span>
</a>
<ul class="nav-item dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-lock"></i><span> Security</span>
</a>
<ul class="dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link">
<span> Account Codes</span>
</a>
</li>
<li>
<a href="#/" class="nav-link">
<span> Branches</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-cog"></i><span> Configuration
</span></a>
<ul class="dropdown-menu" style='display:none'>
<li>
<span> Layout</span>
</li>
<li>
<span> Assets</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to fixed the button in navigation bar on scrolling

I have 6 fields in my navbar. 5 of them are links and one is dropdown. When I scroll the page all field remains fixed except the dropdown field.enter image description here
Below is my code:
<div class="collapse navbar-collapse" id="Food-fair-toggle">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
<li>menu</li>
<li>featured</li>
<li>reservation</li>
<li>contact</li>
<li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Deliveroo
Foodora
UberEats
</div>
</div>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->

Can you try the below menu bar along with the dropdown menus.
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_dropdown&stacked=h

Please try with below HTML, JS and CSS. Just change structure, create separate for dropdown with same class. Then you must add id attribute for menu UL.
HTML:
<div class="collapse navbar-collapse" id="Food-fair-toggle">
<ul class="nav navbar-nav navbar-right" id="myHeader">
<li>about</li>
<li>menu</li>
<li>featured</li>
<li>reservation</li>
<li>contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Deliveroo
Foodora
UberEats
</div>
</div>
</li>
</ul>
</div>
JS:
Copy & paste the JS in footer section.
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
CSS:
ul.sticky {
position: fixed !important;
background: #27752A;
}

Below Example shows how to add dropdown menu in bootstrap-4 navbar.
And if you want to fix the navbar on top, then you can add class='fixed-top' in <nav> component then menu will stick to the top while you scroll down.
Or if you dont want navbar menu fixed on top then you can remove that class fixed-top from navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="bg-success navbar navbar-dark navbar-expand-sm">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#featured-dish">FEATURED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reserve">RESERVATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
DROPDOWN
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://deliveroo.nl/">Deliveroo</a>
<a class="dropdown-item" href="https://www.foodora.nl/">Foodora</a>
<a class="dropdown-item" href="https://www.ubereats.com//">UberEats</a>
</div>
</li>
</ul>
</nav>
<br>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the fixed navbar on Top,This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top.</p>
</div>
</body>
</html>

MaterializeCSS - SideNav events not triggering properly

I have a basic html-page with a navbar (Navbar Documentation) and a collapsible sidenav (SideNav Documentation).
The sidenav itself works fine but the "onOpenStart" and "onEndClose" events both trigger as soon as the page is done loading and not when the sidenav opens/closes.
I guess an alternative would be to hook some events on the sidenav-trigger and go from there but that seems quite unneccessary if these events already exist.
JsFiddle: https://jsfiddle.net/gvgo2Lu2/2/
Any help would be appreciated
HTML
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i id="test" class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>
</body>
JS
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: console.log("I trigger as soon as the page is loaded"),
onCloseEnd: console.log("same")
});

According to the documentation the onOpenStart and onCloseEnd events need a callback function. But, you are using the result of a computation: console.log(....). Because that value is undefined you are not adding the event handlers!
In order to overcome the issue you need to change your init to (updated fiddle):
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: function () {
console.log("I trigger as soon as the page is loaded");
},
onCloseEnd: function () {
console.log("same");
}
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#!" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>

Dropdown Menu on Javascript

Im totaly new to Javascript and i fell so lost. Have done a little HTMl/CSS but no JS. Can some1 tell what I need to do in JS to make my Code work? :)
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 2</title>
<script type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Mandagens Lunch <span>#</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Carbonara
</a>
</li>
<li>
<a href="#">
Pizza
</a>
</li>
<li>
<a href="#">
Köttbullar Med Mos
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>

Here i've build something from scratch.. isn't beatiful, but it works.
JS:
var dropdownHidden = true;
function toggleDropdown(){
if(dropdownHidden){
document.getElementById('dropdown-menu').style.display = '';
dropdownHidden = false;
} else {
document.getElementById('dropdown-menu').style.display = 'none';
dropdownHidden = true;
}
}
HTML:
<body>
<ul class="nav">
<li class="button-dropdown">
<a href="#" class="dropdown-toggle" onClick="toggleDropdown()">
Mandagens Lunch <span>#</span>
</a>
<ul id="dropdown-menu" class="dropdown-menu" style="display: none">
<li>
<a href="#">
Carbonara
</a>
</li>
<li>
<a href="#">
Pizza
</a>
</li>
<li>
<a href="#">
Köttbullar Med Mos
</a>
</li>
</ul>
</li>
</ul>
</body>
Codepen: http://codepen.io/anon/pen/xgpdYO
Note: this is a "you havn't provided any code solution"