I'm trying to toggle between 2 multiple classes in jquery. I want it to change on click from an own icon to a font-awesome icon. It works with only one class to change however when i want it to change multiple classes i can't get it to work.
jQuery(document).ready(function () {
var $menu = 'icon '+'icon-menu';
var $close = 'fa '+'fa-close';
$('.icon-toggle-menu').click(function (evt) {
$('.nav-screen').fadeToggle();
$($menu, $close).toggleClass($menu +' '+ $close);
$('.nav-logo-black').fadeToggle();
$('.nav-icons').toggleClass('nav-fixed');
$('.nav').toggleClass('nav-padding');
})
});
<nav class="nav">
<a class="nav-logo-black" href="index.html">
<img src="assets/img/logo/forcitx2.png" alt="forcit-logo-banner">
</a>
<ul class="pull-right nav-icons">
<li><a class="icon-chat" href="#"><span class="icon icon-message"></span></a></li>
<li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu"></span></a></li>
</ul>
</nav>
Okay, I'm going to do an attempt at fixing your code. Even though it's not fully clear what you're aiming for:
$(function() {
$('.icon-toggle-menu').click(function(evt) {
//$('.nav-screen').fadeToggle(); Missing in HTML
$('.icon.icon-menu, .fa.fa-close').toggleClass('icon icon-menu fa fa-close');
$('.nav-logo-black').fadeToggle();
$('.nav-icons').toggleClass('nav-fixed');
$('.nav').toggleClass('nav-padding');
})
});
.icon {
font-weight: bold;
}
.fa.fa-close {
color: red;
}
.icon.icon-menu {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<a class="nav-logo-black" href="index.html">
Logo
</a>
<ul class="pull-right nav-icons">
<li><a class="icon-chat" href="#"><span class="icon icon-message">Icon chat</span></a></li>
<li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu">Icon toggle menu (click me)</span></a></li>
</ul>
</nav>
Related
I'm new to Odoo .. I want to make my dropdown toggle display properties set to block only in my home page like this :
So, at other pages, it will set to none to prevent the dropdown override the content like this:
Here is what I've done so far with the code:
views/header.xml
<nav class="navbar navbar-expand-lg navbar-dark multilevel">
<ul class="navbar-nav w-100">
<li class="nav-item dropdown w-100">
<a class="nav-link dropdown-toggle nav-category" href="#"
data-bs-toggle="dropdown">
<i class="icon-view-grid"></i>
<span class="ic-category"></span>
Semua Kategori
</a>
<ul class="dropdown-menu dropdown-category show">
<div href="javascript:void(0)" class="close-category">
<i class="icon-x-circle"></i>
Tutup
</div>
<t t-foreach="product_categories" t-as="category">
<li class="has-submenu">
<a class="dropdown-item dropdown-toggle" t-attf-href="/products?categ={{ category.id }}">
<t t-if="category.image_1920">
<img class="image-category-icon" t-attf-src="/web/image/product.public.category/{{ category.id }}/image_1920"/>
</t>
<span t-esc="category.name"/>
</a>
<div class="megasubmenu dropdown-menu">
<ul class="list-unstyled">
<t t-foreach="category.child_id" t-as="second_level_category">
<t t-if="second_level_category.id">
<li>
<h3 class="content-title f-18"><a t-attf-href="/products?categ={{ second_level_category.id }}"><span t-esc="second_level_category.name"/></a></h3>
</li>
</t>
</t>
</ul>
</div>
</li>
</t>
<li>
<a class="dropdown-item text-center view-all"
href="/products">Lihat Semua Kategori
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</li>
</ul>
</nav>
custom-style.css
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #e5e5e5;
}
.dropdown-menu {
box-shadow: 0px 4px 35px rgba(70, 70, 70, 0.1);
border: 1px solid #d1d1d1;
}
main.js
//CATEGORY MENU
document.addEventListener("DOMContentLoaded", function () {
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function (element) {
element.addEventListener('click', function (e) {
e.stopPropagation();
});
});
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
});
});
document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
console.log(nextEl);
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
});
} else if (window.location.pathname === '/') { // Check if the current URL is home page
// display all submenus
document.querySelectorAll('.submenu').forEach(function (everysubmenu) {
everysubmenu.style.display = 'block';
});
}
});
Is there any possible way to address this kind of stylesheet logics in JS than the built-in window.location.pathname and how to implement that, especially in Odoo, which is basicly using the markup of XML instead of HTML??
Any help would be very appreciated.
Thank a lot in advance.
I need to add active class to the links and change active state while navigating page. I have tried with this but changes not applying after switching between links. (not working after page reload)
Here is my code
$('#shortcuts-main > li').click(function (e) {
$(".shortcut-link-active").removeClass("shortcut-link-active");
$(this).addClass("shortcut-link-active");
});
a{
color:black;
padding-bottom:15px;
display:block;
}
.shortcut-link-active a{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="shortcuts-main">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
Any ideas?
Modification done to the DOM will not persist after the page is refreshed. A solution for this is to save the data on the client and then read after reloading.
Unfortunately localstorage won't work on Stackoverflow, but at least you can see some code:
$('#shortcuts-main > li').click(function(e) {
$(".shortcut-link-active").removeClass("shortcut-link-active");
$(this).addClass("shortcut-link-active");
console.log('id:', $(e.target).data('id'))
localStorage.setItem('shortcut-link-active', $(e.target).data('id'));
});
const lastActiveLink = localStorage.getItem('shortcut-link-active');
if (lastActiveLink) {
$('#shortcuts-main')
.find(`[data-id='${lastActiveLink}']`)
.parent()
.addClass('shortcut-link-active')
}
a {
color: black;
padding-bottom: 15px;
display: block;
}
.shortcut-link-active a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="shortcuts-main">
<li>
<a data-id="link-id-1" href="#">Link 1</a>
</li>
<li>
<a data-id="link-id-2" href="#">Link 2</a>
</li>
<li>
<a data-id="link-id-3" href="#">Link 3</a>
</li>
<li>
<a data-id="link-id-4" href="#">Link 4</a>
</li>
</ul>
I have a hamburger menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as there is no loading so once the user clicks on the nav link they are brought to the location but the dropdown menu will not close. I tried adding .hide to the JS which hides the dropdown on the click of a link but that created my new issue.
After the user clicks one of the nav links it does hide the menu but upon clicking the menu icon again the menu will not open at all. In dev tools I see that upon clicking one of the nav links it is given the style of display:none so I feel that the issue might lie there. Thanks for the help and please let me know if any other information is needed!
HTML:
<nav class="navbar navbar-light navbar-fixed-top">
<div class="wrapping container-fluid">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav navbar-nav float-sm-right mr-0 menu">
<li class="nav-item">
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workshops">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#locations">Location</a>
</li>
<li class="nav-item">
<a class="nav-link last-link" href="#register">Register</a>
</li>
</ul>
<a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
</div>
</nav>
CSS for this menu:
.menu{
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.open{
height: 295px;
}
.hamburger {
cursor: pointer;
padding: 15px 10px 15px 0;
display: block;
float: right;
margin-top: 15px;
}
JS:
$('.hamburger').on('click', function () {
$('.menu').toggleClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').hide();
});
If you're going to use .toggleClass('open') to open the menu, use it for closing the menu as well.
Generally, though, you'll want to use .addClass() and .removeClass() instead:
$('.hamburger').on('click', function () {
$('.menu').addClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').removeClass('open');
});
If your hamburger menu has checkbox behind it, you can simple set it to unchecked to close the hamburger menu
function hideMenu(){
let menuOpen = document.querySelector('.toggler').checked;
if(menuOpen = true){
document.querySelector('.toggler').checked = false;
}
}
window.addEventListener("scroll", hideMenu);
I am struggling with below code. All I want to do is have the slide out menu( nav-container) open on page load, as at the moment its hidden until you open it with a click. How can I achieve this?
$(window).load(function() {
$(".btn-nav").on("click tap", function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
<nav class="nav-container hidden hideNav">
<ul class="nav-list">
<li class="list-item"><i class="fa fa-home"></i></li>
<li class="list-item"><i class="fa fa-credit-card-alt"></i></li>
<li class="list-item"><i class="fa fa-usb"></i></li>
<li class="list-item"><i class="fa fa-edge"></i></li>
<li class="list-item"><i class="fa fa-shopping-basket"></i></li>
</ul>
</nav>
call click:-
$(window).load(function() {
$(".btn-nav").on("click tap", function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
}).click();
});
Option 1: Fire the click event (as mentioned in a previous answer)
Option 2: Remove the click event
$(window).load(function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
});
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});