I'd like to be able to add and remove classes based on the users mouse moving over certain areas. Below is the navigation code as generate by WordPress:
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us</li>
</ul>
</nav>
I've come up with the following JavaScript that targets the <li> in order to change the class of the link within the <li>:
<script>
$(document).ready(function(){
$('#site-navigation li').mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li'').mouseleave(function(){
$('#site-navigation li'').find('li.menu-item a').removeClass('animated, bounceIn');
//$('#site-navigation li').find('.span').removeClass('animated, fadeInUp');
});
});
</script>
I've checked the Console and it looks like the event isn't even firing for the code to work. Any help is greatly appreciated.
Check out this fiddle.
Here is the snippet. (I have added alert on enter and leave events for testing).
$(document).ready(function() {
$('#site-navigation li').mouseenter(function() {
alert("Enter " + $(this).text());
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li').mouseleave(function() {
alert("Leave " + $(this).text());
$('#site-navigation li').find('li.menu-item a').removeClass('animated bounceIn');
//$('#site - navigation li ').find('.span ').removeClass('animated, fadeInUp ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma
</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com
</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us
</li>
</ul>
</nav>
When adding/removing classes with jQuery, they should be space separated, not comma separated. So:
$(this).find('li.menu-item a').addClass('animated bounceIn');
Also, you shouldn't nest your mouseleave inside your mouseenter functions. Also, you should use $.on instead.
Also, within your event handlers, you aren't accessing your elements correctly. $(this) refers to the element that has been entered or left. Since you've set the mouseenter handler on the <li> elements, $(this).find('li.menu-item a') finds nothing.
Try this:
// It's often best practice to cache jQuery objects
// so you're not looking up the elements multiple times.
var $listItems = $('#site-navigation li');
$listItems.on('mouseenter', function(){
$(this).find('a').addClass('animated bounceIn');
});
$listItems.on('mouseleave', function(){
$(this).find('a').removeClass('animated bounceIn');
});
All of this said, if you're simply trying to have an animation on hover, you can achieve that in CSS only with a single class on your <a> elements. The jQuery might be overkill, here.
$('#site-navigation li'')
should be either
$('#site-navigation li')
or
$("#site-navigation li")
(You have wrong quote marks)
and prevent using selector's repetition, do it like this:
var $el = $('#site-navigation li')
$el.mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated bounceIn');
$(this).find('.span').addClass('fadeInUp');
});
$el.mouseleave(function() {
$(this).find('li.menu-item a').removeClass('animated bounceIn');
}
For further reading: http://www.sitepoint.com/efficient-jquery-selectors/
Good Luck
Related
I have an a tag.
Disarray Body
When the link is open. the browser adds ==>aria-current="page". How can I select that element with the atribute of aria-current="page" And execute code to its parent and sibling?
I've tried this.
var items = $('.menu-item>a');
if (items.hasattr("aria-current", "page") === true) {
items.parent.css( "background-color", "red" )};
But it declears as undefined. how do I let jquery find out witch link is currently open in the brouwser. A.K.A. =>aria-current="page"?
Below you can find part of the html.
portriats
<ul class="sub-menu">
<li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
Disarray Body</li>
<li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
#Girls</li>
</ul>
Item2
<ul class="sub-menu">
<li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
object1</li>
<li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
Object2</li>
</ul>
Try using the Attribute Equals selector.
$('a[aria-current="page"]');
Fiddle
I see that you are trying to style the current page differently. Since the current page already has aria-current="page" (as it should), you can styling in CSS like follows, you can use the attribute selector:
[aria-curent="page"] {
background-color: red;
}
I have got an ajax page load working on my wordpress site with both the official twenty sixteen and storefront themes.
The only hitch is that the mobile nav menu does not close once a link has been clicked and the new page has been fetched and loaded by the ajax script.
I've looked through most of the other similar topics and tried various snippets of jquery but have not been able to get it working.
The code for the menu toggle button on twentysixteen is :
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
The menu container html is :
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293">Labels
</li></ul>
</div>
From my research into the matter it would seem that there is potentially two ways to achieve what I'm after.
Changing the aria attribute on click from expanded="true" to expanded="false" could do the trick?
I found this code snippet but have no idea how I would actually implement
$(function () {
$('li').on('click', function (e) {
var menuItem = $( e.currentTarget );
if (menuItem.attr( 'aria-expanded') === 'true') {
$(this).attr( 'aria-expanded', 'false');
} else {
$(this).attr( 'aria-expanded', 'true');
}
});
});
Use a jquery click function to trigger the toggle button.
$( "#menu-main" ).click(function() {
$( "#menu-toggle" ).click();
});
Any help would be greatly appreciated! Thank you!
try this
$(function () {
$('#menu-main li>a').on('click', function (e) {
$( "#menu-toggle" ).click();
});
});
or
$(function () {
$('#menu-main li>a').on('click', function (e) {
// i set $(".toggled-on") because i dunno which is your main menu
//<div class="menu-main-container">
// or
//<ul id="menu-main" class="primary-menu">
$(".toggled-on").attr("aria-expanded","false");
$(".toggled-on").removeClass(".toggled-on");
});
});
Hope this is solves your problem,thanks
$("#menu-toggle").click(function(e){ /*for click on menu*/
$('.menu-main-container').toggle()
})
$('.menu-item').click(function(e){ /*for click on link*/
$("#menu-toggle").trigger('click')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293">Labels
</li></ul>
</div>
The problem is with 2nd and 3rd menu item. Whenever I click the 3rd menu item, the 2nd menu item automatically gets selected/active along with the 3rd one. However, this doesn't happen with other menu items.
For instance(when clicking on the third menu item);
<ul id="menu-1" class="navmenu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464">
list item 1
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-456 current_page_item menu-item-466">
list item 2
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-446">
list item 3
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448">
list item 4
</li>
</ul>
Note: I have no clue where those different class on click are coming from.
I tried to add an active class on click and style accordingly but this didn't work. For instance;
JQuery(function(){
jQuery('.navmenu li').on('click', function(){
jQuery(this).addClass('active').siblings().removeClass('active');
});
});
Here is the css :
.navmenu .current_page_item>a, .navmenu .current_page_ancestor>a, .navmenu .current-menu-item>a, .navmenu .current-menu-ancestor>a {
outline: none;
background-color: #7CD0AE;
color: #fff;
}
It's strange why the class on 2nd menu item has current-menu-item and current-page-item indexed when i click on the third one.
Do you have the CSS to look at? A github or jsfiddle of the relevant code would make it lot easier to help.
I replicated what you have here, and if you hover over each list item you can see they have the correct link. Seems like it's probably in the css, or else something not shared here.
https://jsfiddle.net/xpvt214o/814134/
The code below is because they make me add code when I link a jsfiddle
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt")
})
JQuery(function(){
jQuery('.navmenu li').on('click', function(){
jQuery(this).addClass('active').siblings().removeClass('active');
});
What I'm trying to do here is check if an element has the same id as a class in another element if so hide the matching id.
So far this is what I have came up with but it doesn't seem to kick.
JSfiddle
var theid = $('#me li').attr('id');
if ($('#you li').hasClass( theid )) {
$('#me li#'+theid+'').hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2 & should be hidden</li>
<li id="num-2">iam 3</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-1">iam killer</li>
<li class="num-4">iam killer</li>
</ul>
Use each() to loop over all the li elements inside the #you
hide() the elements having the id same as the class of current element in loop.
$('#you li').each(function() {
$('#' + $(this).attr('class')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2</li>
<li id="num-2">iam 3 & should be hidden</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-2">iam killer</li>
<li class="num-4">iam killer</li>
</ul>
Demo
When you use the .attr() method on a jQuery object that contains multiple elements, it just returns the attribute from the first element. You need to loop over each element and check them one at a time.
It is, however, OK for your purposes to use .hasClass() on the set of all of the #you elements, because .hasClass() will return true if any of the elements in the set has that class. So:
var you = $('#you li');
$('#me li').each(function() {
if (you.hasClass(this.id))
$(this).hide();
});
Note that I'm keeping a reference to the $('#you li') jQuery object in the variable you to save selecting those elements again every time in the loop.
Demo: https://jsfiddle.net/d65sz4js/2/
Try this for your jquery:
$(function() {
$("#you li").each(function(){
var theid = $(this).attr('class');
$('#'+theid).hide();
});
});
Demo: https://jsfiddle.net/nkem9o7o/
You could filter the #me li's, returning elements where their id exists as a class in #you li's, then just hide them. This would also work for multiple classes:
$('#me li').filter(function() {
return $('#you').has('.' + this.id).length;
}).hide();
Here's a fiddle
I'm pretty new to the whole jQuery scene so I do apologise if I'm being dumb however I've tried my hardest to resolve this myself.
I am using jQuery to manipulate a CSS UL menu. I've got a jQuery which works for 3/4 of it's requirements. jQuery finds any items in the UL with children and appends a span to them. The span is used to house a drop down arrow to open the sub-menu.
Clicking the sub-menu opens it okay and clicking anywhere on the page hides the sub-menu okay with the $(document) function I've added, but for some reason, once the sub-menu is open, the second half of the if statement in the .click function doesn't close the menu.
Any thoughts? Platform is WordPress and the menu is generated by wp_nav_menu for what it's worth.
Non-functional part of the jQuery script is the second half of the if statement after the else.
jQuery
$(document).ready(function(){
$('div.sub-menu-wrap').parent().append('<span> v </span>');
$('ul.nav-menu li span').hover(function(){
$(this).toggleClass('hover');
})
$('ul.nav-menu li span').click(function() {
if(!$('div.sub-menu-wrap').is(':visible')) {
$('ul.nav-menu li span').parent().addClass('drop');
$('ul.nav-menu li span').siblings('a').addClass('drop');
$('div.sub-menu-wrap').show();
} else {
$('ul.nav-menu li span').parent().removeClass('drop');
$('ul.nav-menu li span').siblings('a').removeClass('drop');
$('div.sub-menu-wrap').hide();
}
})
$(document).mouseup(function(e){
var container = $("div.sub-menu-wrap");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
$('ul.nav-menu li span').parent().removeClass('drop');
$('ul.nav-menu li span').siblings('a').removeClass('drop');
$('div.sub-menu-wrap').hide();
}
});
});
Now with added HTML.
<div class="nav-menu-wrap">
<ul class="nav-menu" id="menu-navigation-menu">
<li class="first-item menu-item menu-item-type-post_type menu-item-object-page menu-item-251" id="menu-item-251"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-261 current_page_item menu-item-has-children menu-item-271" id="menu-item-271">
<div class="sub-menu-wrap" style="display: none;">
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441" id="menu-item-441"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-461" id="menu-item-461"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451" id="menu-item-451"></li>
</ul>
</div>
<span> v </span>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241" id="menu-item-241"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-211" id="menu-item-211"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-201" id="menu-item-201">li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-221" id="menu-item-221"></li>
<li class="last-item menu-item menu-item-type-post_type menu-item-object-page menu-item-231" id="menu-item-231"></li>
</ul>
</div>
The problem is your $(document).mouseup function. It's firing before the click event on your UL, and is hiding the submenu. When you get into the UL click event, the submenu wrapper is hidden, and therefore you're only ever hitting the first condition in your if statement.
If you change the document mouseup to this, it should work. Just added the main menu wrapper to your containers so that you ignore the mouseup event.
var container = $("div.sub-menu-wrap, div.nav-menu-wrap");