i have this html menu:
<ul id='main'>
<li class='active current' id='lighty'>
<a href='/'>Lighty</a>
<ul>
<li class='sub'>
<a href='/'>Hem</a>
</li>
</ul>
</li>
<li id='community'>
<a href='/community'>Community</a>
</li>
</ul>
And this jquery:
$("#menu ul > li").mouseenter(function(){
id = $(this).attr("id");
$("#menu #main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
id = $(this).attr("id");
menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
});
What i am trying to acomplish is that when i hover one of the li's in the main ul the child ul of that li should be displayed. and when i move the mouse out of the li or the child ul the menu should be visible for 2 seconds.
It works through the main li button but if on the child ul and move out it just disapears, it doesnt wait for two seconds.
The waiting two seconds is so you can go in to the menu if you accidentaly move the mouse out of it.
Can anybody help me to fix this error? Maybe you have a better solution?
Here is also a screenshot on how the menu looks if it helps:
screen shot under or click here
is this what you mean?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("ul#main > li").mouseenter( function(){
$("#main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
setTimeout( function()
{
$("#main li").removeClass("active");
}, 2000);
});
});
//-->
</script>
<style type="text/css">
#main li ul {
display: none;
}
#main li.active ul {
display: inline;
}
</style>
<ul id="main">
<li id="lighty">
Lighty
<ul>
<li class="sub">
Hem
</li>
</ul>
</li>
<li id="community">
Community
<ul>
<li class="sub">
more
more1
more2
more4
</li>
</ul>
</li>
</ul>
Related
I wanted to make current selected menu highlighted using jquery
Following is my jquery code
$('ul li a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
Meeting Overview
Meeting Details
</div>
</ul>
Please help
$('ul li a').click(function() {
//$('li').removeClass();
//$(this).parent().addClass('active');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<li> Meeting Overview </li>
<li> Meeting Details </li>
</div>
</ul>
If you are trying to make sub menu use this
$(document).ready(function(){
if (localStorage.getItem('current_page')) {
var page = localStorage.getItem('current_page');
$('ul li').removeClass('active');
$('ul li[data-page="'+page+'"]').addClass('active');
}
});
$('ul li > a').click(function() {
$('li').removeClass('active');
$(this).parent().addClass('active');
var page = $(this).parent().attr('data-page');
localStorage.setItem('current_page', page);
});
In your code, $(this).parent() is your <li> element only when you click your first link, links under dropdown-content div have not an <li> parent, so, the removeClass() function is not working as you expected.
Please, changethis and tell us if your code works as you expect.
Try this
$('ul li a').click(function() {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
ul li{
list-style-type:none;
float:left;
display:inline-block;
margin:0 10px;
padding:5px;
}
ul li.active{
background:pink;
}
li a{
text-decoration:none;
outline:0;
}
ul li.active a{
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Menu1
</li>
<li class="dropdown">
Menu2
</li>
</ul>
This can´t work as expected. The problem is, you click the link () the current li elemet gets the class "active" and then the page refreshes because the link redirects you, which removes the active class from the current li element.
What you can do is teh following:
Option 1: Get the current path from the url
When the page gets loaded, you can extract the path and add the active class to the li that contains the link:
$(document).ready(function() {
var currentPath = window.location.pathname;
$('a[href="'+currentPath+'"]').partent().addClass("active");
});
This will find the link with the currentPath and add the class active to the corresponding li element.
You also need to wrap all links in separate list-elements:
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<ul>
<li>Meeting Overview</li>
<li>Meeting Details</li>
</ul>
</div>
</li>
</ul>
Option 2: Add the active link name as Query Param
You can append a query param to your links like this:
<li class="link home">
Meeting Overview
</li>
<li class="link usermeetings">
Meeting Details
</li>
In your javascript you can then get the page param and add the active class like this:
$(document).ready(function() {
var page = $.url().param('page');
$('.link').find('.' + page).addClass('active');
});
Basically I do have a block of HTML code for nested list as below:
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
Using this what I need to do is, I want to check li.level_1 has a <ul>, if so then I need to disable <a> link link which is directly inside li.level_1.
This is how I tried it in jquery, but its removing all a from the list.
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}
Can anybody tell me how to fix that issue?
You can check if li has ul and disable a like this.
$('.level_1:has(ul) > a').removeAttr('href')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
You could set an event listener like this:
Set an id to the top level ul element:
<ul id="top_level_ul">
jQuery
$(document).on('click', '#top_level_ul > li > a', function(e) {
e.preventDefault();
});
ALTERNATIVE (pointer-events)
You can also set pointer-events:none to prevent any interaction:
$('#top_level_ul > li > a').each(function() {
$(this.addClass('noPointer'));
});
CSS
.noPointer {
pointer-events: none;
}
You have to start your "search" for links from $('ul li')
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
See following example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
<script>
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
</script>
</body>
</html>
I hope it helps you. Bye.
Link
$(document).ready(function(){
$('.level_2').siblings('a').remove();
});
UPD
$(document).ready(function(){
$('.level_2').siblings('a').css('pointer-events','none');
});
or
$(document).ready(function(){
$('.level_2').siblings('a').attr('onclick','return false');
});
I am trying to toggle between font-awesome elements .
I want to remove the font-awesome element when a new a tag is clicked. The font-awesome element should be visible only for the current clicked a tag.
[FIDDLE][1]
My JS CODE.
$(document).ready(function() {
$('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$('.nav ul li a').click(function(event) {
event.preventDefault();
$(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working
});
});
$(document).ready(function() {
var fontAwesome = $('<i/>').addClass('fa fa-chevron-right');
$('.nav ul li:first').append(fontAwesome);
$('.nav ul li a').on('click', function(event) {
event.preventDefault();
$('.nav ul li a i.fa.fa-chevron-right').remove();
$(this).append(fontAwesome);
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Option A</li>
<li>Option B</li>
<li>Option C</li>
</ul>
</div>
I know that you have accepted an answer, but you don't need all that logic - all you have to do is set an active class on the currently selected li - and using CSS add the FA icon to that element. Then clicking each li will remove the active class from the list and then apply it to the selected l=i - and the icon will magically move. Note that I have not applied an event.preventDefault(); to the click of a's - I presume that they should in fact navigate to the element you want - since they are in a nav list.
The benefit of setting the active class to the li - is that you can then style it as you want - as well as adding the icon to it.
$(document).ready(function() {
$('nav ul li').click(function(){
$('nav ul li').removeClass('active');
$(this).addClass('active');
})
});
nav ul li.active:after {
font-family: FontAwesome;
content: "\f054";
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
I have ul.menu for which few li are styled differently, therefore those li dont need to add active class.
<ul class="menu">
<li id="1st" class="default">Text1</li>
<li id="2nd" class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
jQuery to add active class for first two links, except li.cross-out
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('cross-out').addClass('active');
});
What is wrong? Hope I was clear enough...
You forgot the class identifier before cross-out:
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
The period makes all the difference. Then because you may have several other ul.menu elements on your page, you just want the one whose li was clicked to change:
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
.active {
background-color:gray;
font-weight:bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
Jquery has a toggle class function
$("#td_id").toggleClass('default active');
related post jquery change class name
From many days am trying this but there is no result please help me when i click on main menu sub menu should highlight in php.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cssmenu a').each(function (index) {
console.log(this.href);
if (this.href.trim() == window.location) {
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active {
background: #4FA9E4;
color: #FFF;
display: block;
}
</style>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul>
<li class="has-parent">a
</li>
<li>b
</li>
</ul>
</li>
<li class="has-sub">Patners
<ul>
<li>c
</li>
<li>d
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
You should handle the click event or other events you are interested, and toggle class in the event handler.
$(document).ready(function () {
$('#cssmenu ul ul a').click(function (e) {
//e.preventDefault();
$(this).parents('li.has-sub').find('>a').toggleClass('active');
});
});
Check the jsFiddle example.