Changing admin menu class not working on click

Changing admin menu class not working on click - javascript

I want to make admin navigation. When I click a menu it will be active until I click another menu. When I click another menu that should then be active. In my admin nav, I used the below code but it is not working. All my CSS is working properly, but I can't set the clicked menu as active. How I can fix this problem?
$(function() {
$('li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
});
});
.admin-menu ul {
padding: 0;
margin: 0;
}
.admin-menu ul li {
list-style: none;
transition: .4s;
}
.admin-menu ul li a {
color: #333;
display: block;
padding: 10px 15px;
font-size: 16px;
text-transform: capitalize;
}
.admin-menu ul li:hover, li.active {
background-color: #F8694A !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="admin-nav">
<div class="admin-menu">
<ul>
<li class="active"><i class="fas fa-home"></i> Dashboard</li>
<li><i class="far fa-list-alt"></i> Category</li>
<li><i class="fas fa-book"></i> Books</li>
<li><i class="fas fa-users"></i> Users</li>
<li><i class="fas fa-chalkboard-teacher"></i> E-books</li>
<li><i class="fas fa-cart-arrow-down"></i> Orders</li>
<li><i class="fas fa-layer-group"></i> Others</li>
<li><i class="fas fa-cog"></i> Settings</li>
<li><i class="fas fa-power-off"></i> Logout</li>
</ul>
</div>
</div>

Related

Tree view (pure HTML/CSS/JS) problem in js

I have a question about Tree view in pure HTML/CSS/JS files.
I can make Tree view with HTML/CSS successfully and get help from w3school, you can see my code here:
html file:
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
})
}
ul, .menu {
list-style-type: none;
}
.menu {
margin: 0;
padding: 0;
}
.menu a {
text-decoration: none;
}
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
<ul class="menu">
<li><i class="fa fa-home"></i> Home</li>
<li class="caret">
<i class="fa fa-graduation-cap"></i> Tutorial
<ul class="nested">
<li class="caret">
<i class="fa fa-chrome"></i> Web Development
<ul class="nested">
<li>Blog Project</li>
<li>CMS Project</li>
<li>Shop Project</li>
<li>E-learning Project</li>
<li>Automasion Project</li>
</ul>
</li>
<li class="caret">
<i class="fa fa-server"></i> Network
<ul class="nested">
<li>Comptia</li>
<li>Windows</li>
<li>Linux</li>
<li>CISCO</li>
<li>MicroTik</li>
<li>Virtualization</li>
<li>Security</li>
</ul>
</li>
<li class="caret">
<i class="fa fa-microchip"></i> IOT
<ul class="nested">
<li>Concept</li>
<li>Electronic</li>
<li>Sensor</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-archive"></i> Projects</li>
<li><i class="fa fa-info-circle"></i> Resume</li>
<li><i class="fa fa-envelope-open"></i> Contact me</li>
But I have a problem in cascading (Open/close) them in js file, first time that I click on tutorials, that list will open without any problems, but after that when I click on one of the nested lists in it (web development) all of the tree from tutorials is closing.

First thing your JS is correct, this this.parentElement.querySelector(".nested") alwayse targeting the first <ul>, just try to remove caret class from <li> and put it inside <a>, that's main that the click will be binded to <a> instead of<li>. or put it inside <span> as you want, it works as well. See the code snippet below :
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
})
}
ul, .menu {
list-style-type: none;
}
.menu {
margin: 0;
padding: 0;
}
.menu a {
text-decoration: none;
}
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
<ul class="menu">
<li><i class="fa fa-home"></i> Home</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-graduation-cap"></i> Tutorial</a>
<ul class="nested">
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-chrome"></i> Web Development</a>
<ul class="nested">
<li>Blog Project</li>
<li>CMS Project</li>
<li>Shop Project</li>
<li>E-learning Project</li>
<li>Automasion Project</li>
</ul>
</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-server"></i> Network</a>
<ul class="nested">
<li>Comptia</li>
<li>Windows</li>
<li>Linux</li>
<li>CISCO</li>
<li>MicroTik</li>
<li>Virtualization</li>
<li>Security</li>
</ul>
</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-microchip"></i> IOT</a>
<ul class="nested">
<li>Concept</li>
<li>Electronic</li>
<li>Sensor</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-archive"></i> Projects</li>
<li><i class="fa fa-info-circle"></i> Resume</li>
<li><i class="fa fa-envelope-open"></i> Contact me</li>

The problem here is that you are binding the event on ul element. when the click happens it took this.parentElement (this is the element which click was binded on) so it is higher html level then you need. Place caret class on a element inside li. And the next problem is that they are using span element and you are using a element which is doing redirection by default so stopPropagation is needed as well.

ng2-dropdown menu not working in angular2

I've been stuck on this for hours and hours and became pretty desperate. So I have this angular2 applicaton made for a school project but what I want to do is when i click on the + button this dropdown menu comes down and when i click on it again, or when I click on a link, it closes again. Right now it just stays open all the time and doesn't do anything when I click it
I have tried many different things, from ng2-dropdown to a javascript file that shows or hides the menu. I am out of options and getting really frustrated on this.
this is the html element in the browser before i click the +
this is the html element in the browser after i click the +
I have done the proper imports for the ng2-dropdown module which should make it work. It might be something small and stupid, but I don't see it.
This is my app.component which has the navigation bar as a template. on click i route to other components html's.
#Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],
template: `
<header id="header">
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<div class="navgroup">
<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
</div>
<div class="navgroup">
<li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>
</div>
<div class="navgroup login">
<div class="add-button" dropdown [dropdownToggle]="true">
<div dropdown-open > +</div>
<ul class="dropdown" >
<a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
<a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
<a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</ul>
</div>
<li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
</div>
</ul>
</nav>
</header>
And this is my css (actually sass but gets converted when run) for the dropdown class just in case. So when i click on the button the class is .dropdown and when you click it again it should change to .hidden
.dropdown {
position: relative;
top: 25px;
margin: 0 auto;
padding: 5px 0 0 0;
width: 200px;
height: auto;
background: $primary_color1_white;
border: 1px solid $primary_color2_black;
border-radius: 3px;
list-style: none;
&:before {
content: "";
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #A1A4AA;
background: $primary_color1_white;
height: 14px;
width: 14px;
position: absolute;
top: -7px;
transform: translateX(-50%) rotate(45deg);
}
a {
text-decoration: none;
color: $primary_color2_black;
font-size: 1em;
li {
text-align: left;
padding: 10px 15px;
margin: 0;
i {
margin-right: 10px;
}
}
&:hover {
color: #ffffff;
li {
background: linear-gradient(to top right, $primary_color1_white, $melon 30%); } } } }
.hidden{visibility: hidden;}

in your template modify this :
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
and then in your component logic:
showDropdown: boolean = false;
toggleDropdown():void {
this.showDropdown = !this.showDropdown;
}

Adding and removing CSS classes with jquery

I am trying to resize my footer with jquery. So far when I resize the window it doesn't add the class. Am I implementing it right?
/* My jQuery: */
$(document).ready(function() {
$(window).on('resize', function(){
var win = $(this);
if (win.width() > 600) {
$("#anc").addClass('social-lg');
$("#ico").addClass("icon-lg");
} else {
$("#anc").addClass('social-sm');
$("#ico").addClass("icon-sm");
}
});
});
/* My CSS: */
.social-lg div.col-md-12 > ul > li > a {
border: 2px solid #616161;
border-radius: 50%;
display: inline-block;
letter-spacing: normal;
text-align: center;
height: 4.25rem;
width: 4.25rem;
}
.icon-lg div.col-md-12 > ul > li > a > i {
padding-top: .5rem;
font-size: 2em;
}
.social-sm div.col-md-12 > ul > li > a {
border: 2px solid #616161;
border-radius: 50%;
display: inline-block;
letter-spacing: normal;
text-align: center;
height: 3.25rem;
width: 3.25rem;
}
.icon-sm div.col-md-12 > ul > li > a > i {
padding-top: .5rem;
font-size: 1.5em;
}
<!-- My HTML: -->
<div class="row" id="footer">
<div class="col-md-12">
<ul>
<li><a id="anc" class="nostyle" href="https://www.linkedin.com/in/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://github.com/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://www.instagram.com/_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://twitter.com/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
<p>Lorem Ipsum</p>
</ul>
</div>
</div>
Edit: embedded code inside the question instead of providing a link

You have a number of same id parameters for li and i tags which prevents jquery to select all the elements of the same id, so make them classes like following
<div class="row" id="footer">
<div class="col-md-12">
<ul>
<li><a class="anc nostyle" href="https://www.linkedin.com/in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://github.com/"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://www.instagram.com/_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://twitter.com/"><i class="ico fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
<p>Lorem Ipsum</p>
</ul>
</div>
</div>
Then use the modified javascript code
$(document).ready(function() {
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 600) {
$(".anc").addClass('social-lg').removeClass('social-sm');
$(".ico").addClass("icon-lg").removeClass("icon-sm");
} else {
$(".anc").addClass('social-sm').removeClass('social-lg');
$(".ico").addClass("icon-sm").removeClass("icon-lg");
}
}).trigger("resize"); //this to force first event on load
});

You didn't include a case when there's a need to delete a one class to make another one work. Toggle class should fix it.
Edit: toggle won't work in this case. You have to use another solution:
$(document).ready(function() {
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 600) {
$("#anc").addClass('social-lg');
$("#ico").addClass("icon-lg");
$("#anc").removeClass('social-sm');
$("#ico").removeClass("icon-sm");
} else {
$("#anc").addClass('social-sm');
$("#ico").addClass("icon-sm");
$("#anc").removeClass('social-lg');
$("#ico").removeClass("icon-lg");
}
});
});

hover li and second li element

I have a navigation menu and it has before psuedo if I hover my li element I want to change properties of current li and after than li element
.cruise-turlari .cruise-box .cruise-list-box ul li:after {
content: "";
width: 86%;
display: block;
margin: 0 auto;
height: 1px;
background: #cbcbcb;
}
.cruise-turlari .cruise-box .cruise-list-box ul li a {
display: block;
color: #000;
font-size: 14px;
padding: 7px 33px;
-webkit-transition: all linear 0.4s;
-moz-transition: all linear 0.4s;
transition: all linear 0.4s;
}
.cruise-turlari .cruise-box .cruise-list-box ul li a:hover {
background: #000;
color: #FFF;
}
<div class="cruise-list-box">
<ul>
<li>Vizesiz Yunan Adaları İzmir Hareket <i class="fa fa-chevron-right"></i>
</li>
<li>Vizesiz Yunan Adaları İstanbul Hareket <i class="fa fa-chevron-right"></i>
</li>
<li>Vizesiz Yunan Adaları <i class="fa fa-chevron-right"></i>
</li>
<li>Ege & Adriyatik <i class="fa fa-chevron-right"></i>
</li>
<li>Akdeniz & Adriyatik <i class="fa fa-chevron-right"></i>
</li>
<li>Baltık Başkentleri <i class="fa fa-chevron-right"></i>
</li>
<li>Kuzey Avrupa & Akdeniz <i class="fa fa-chevron-right"></i>
</li>
<li>Fiyordlar <i class="fa fa-chevron-right"></i>
</li>
<li>Akdeniz <i class="fa fa-chevron-right"></i>
</li>
<li>Kanarya Adaları <i class="fa fa-chevron-right"></i>
</li>
</ul>
</div>
and click to real demo

I think this is what you want:
.cruise-turlari .cruise-box .cruise-list-box ul li:hover:before, .cruise-turlari .cruise-box .cruise-list-box ul li:hover + li:before {
height: 1px;
background: transparent;
}
So you use the adjacent sibling selector on the hover too.

you add a special class
.cruise-list-box ul li.special:after {
height: 1px;
opacity: 0;
}
then, using jQuery, add events on mouseover and mouseleave
$('li').mouseover(function(){
$(this).addClass('special');
});
$('li').mouseleave(function(){
$(this).removeClass('special');
});

Javascript: "Share button" opens and closes on both comment boxes (jsfiddle)?

Javascript: Problem "Share button" opens and closes on both comment boxes (jsfiddle)? Please check example on jsfiddle or show snippet view.
When share button is clicked on, it opens the list items on other comment boxes and I don't understand how to add a fix.
https://jsfiddle.net/64t88uze/2
$( "button" ).click(function() {
$( ".share-list" ).toggle();
});
/*share buttons on each post*/
.share{float:left;list-style: none;padding: 0 10px 0 0px;margin: 0px; text-align:center; background-color:white;}
.share li {display: block;position: relative;width:80px}
.share ul {display: none;}
.share a {text-decoration: none;display: block;box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.125) inset;text-decoration: none;white-space: nowrap;color:#fff!important; border-radius:5%;}
.share ul li a:hover {text-decoration: none;}
.share li:hover li {float: none;}
.share-list {
position: absolute;
z-index: 2;
}
.COMMENTBOX{height:300px; background-color:#F1F1F1;}
.COMMENTBOX2{height:300px; background-color:#D1D1D1;}
.share-list a :hover{background-color:grey;transition: 0.3s ease}
.share-list a {box-shadow: none;border-radius:0px;}
.fa.fa-facebook,.fa.fa-twitter,.fa.fa-google-plus{font-size:40px; text-align:center; color:#fff;padding:20px; display:block;}
.share button {
padding: 0px;
background-color: inherit;
}
.fa-share-alt {color: #02bf03;padding: 10px;}
.fa.fa-facebook{background-color:#3A5795;}
.fa.fa-twitter{background-color:#26C4F1;}
.fa.fa-google-plus{background-color:#E93F2E; border-bottom-left-radius:5%;border-bottom-right-radius:5%;}
.share h3 {display: inline;padding-right:10px;}
/*end*/
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="COMMENTBOX">
<h1>Comment Box 1</h1>
<div class="share">
<li><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button>
<ul class="share-list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</li>
</div>
</DIV>
<div class="COMMENTBOX2">
<h1>Comment Box 2</h1>
<div class="share">
<li><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button>
<ul class="share-list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</li>
</div>
</DIV>

Use the following code.
$( "button" ).click(function() {
$(this).parents('.share').find('.share-list').toggle();
});
The scope in your code referes to each and every item called .share-list. You have to select the .share-list in the clicked element.

This addition adds hides "share buttons" when user clicks outside them.
$( "button" ).click(function() {
$(this).parents('.share').find('.share-list').toggle();
});
$("html").click(function(event) {
if ($(event.target).closest('.share, .share-list').length === 0) {
$('.share-list').hide();
}
});

Develop Reference

JavaScript is the programming language of the Web.

Changing admin menu class not working on click - javascript

Related

Tree view (pure HTML/CSS/JS) problem in js

ng2-dropdown menu not working in angular2

Adding and removing CSS classes with jquery

hover li and second li element

Javascript: "Share button" opens and closes on both comment boxes (jsfiddle)?

Categories

Resources