I have an AJAX implementation on my Wordpress install and I'm using the 'CSS and Javascript toolbox' plugin to apply additional Javascript code. I have also tried the following code in the header.php file in both the section and .
I'm using the standard 'Twenty Fourteen' theme and I'm referencing the primary navigation bar at the top. There are no subpages, just normal links.
http://twentyfourteendemo.wordpress.com/
The code I'm using, which I'm sure is the problem, is this
<script>
jQuery('ul.menu li').click(function(){
// Remove class on each item
jQuery('ul.menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
jQuery(this).addClass('current_page_item current-menu-item');
})
</script>
I have also tried this
<script>
jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');
</script>
I don't know Javascript very well but this isn't doing anything. When a link is clicked, the 'highlighted' page on the navigation bar stays on the original page.
I have other code, that toggles the navigation bar on and off when a link is clicked (on mobile) and that works fine so the code is registering, just not working.
Does anyone know why this code isn't working? I've been stuck with this problem for days and I can't launch without this being fixed, I'd even throw some beer money to anyone with a solution
I cannot see your sample code in that website, to see if you code is in the body or head etc, but a couple of things you can try:
1 - You have not wrapped your code in a document ready event.
That means you may be running code against DOM elements before they exist, so the code does nothing.
This shortcut version of jQuery(document).ready() also provides a locally scoped $ variable so you can shorten your jQuery code:
<script>
jQuery(function($){
$('ul.menu li').click(function(){
// Remove class on each item
$('ul.menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
$(this).addClass('current_page_item current-menu-item');
})
});
</script>
2 - If the menu items are added/classed-up after load (e.g. by a plugin), you need to use delegated event handlers:
e.g.
<script>
jQuery(function($){
$(document).on('click', 'ul.menu li', function(){
// Remove class on each item
$('ul.menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
$(this).addClass('current_page_item current-menu-item');
})
});
</script>
This works by listening for the event bubbling up to a non-changing ancestor element, then applying a jQuery element selector, then applying your function to any selected elements that caused the event.
Notes: The fallback element for delegated events should always be document and not 'body' as 'body' has some bugs (related to styling) that can cause events not to trigger. You should however target the nearest non-changing ancestor to be most efficient.
Note: The second option is generally the best way to code event handlers for e group of controls, as it only adds a single handler to the DOM.
Update:
As predicted, the JS code was in the header, so needed wrapping in a document ready event handler.
Also, the actual website uses a menu like this: <ul id="menu-pages" class="nav-menu"> so the selector for the menu items should be ul.nav-menu li or #menu-pages li and not ul.menu li.
e.g
<script>
jQuery(function($){
$(document).on('click', 'ul.nav-menu li', function(){
// Remove class on each item
$('ul.nav-menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
$(this).addClass('current_page_item current-menu-item');
})
});
</script>
Related
I wrote some code to addClass to elements to open an iFrame imported by Shopify on WordPress and it works.
But now, I want to close the iFrame by removing the class on my website element.
I've tried a lot of things but it dosen't work
Here is my code :
jQuery(document).ready(function( $ ) {
$(document).ready(function() {
$('.cart-button').click(function() {
$('.shopify-buy-cart-wrapper').addClass('is-active is-visible');
$('.shopify-buy-cart-wrapper iframe').addClass('is-block');
return false;
});
//$("iframe").contents().find("button .shopify-buy__btn--close").click(function(){
$('.shopify-buy__btn--close').click(function() {
$('.shopify-buy-cart-wrapper').removeClass('is-active is-visible');
$('.shopify-buy-cart-wrapper iframe').removeClass('is-block');
});
});
});
Open cart is working, but now I want to close the cart
If you want to remove multiple classes with jQuery removeClass() you have to pass them as an array, not as a string.
Also, any event listener should be attached only after the element has been inserted in the DOM. If you define the event listener but the element is created afterwards, it won't work.
when i click on gallery, and visit for example "paintings", the links on the menu stops working, why is this? can someone please tell me whats wrong -_-
http://madebysam.se/elbarco
This is the code im using
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
$('ul li').on('click',function(event) { event.stopPropagation(); })
});
});
Using dev tools and a breakpoint inside your example code snippet on your live site, I see that only the links loaded initially trigger your event handling code.
The problem is here:
$('a').on('click',function(){
// do stuff
});
The common pitfall is that you register this handler against all anchor tags that are loaded in the page at that moment. Any anchor tags dynamically added later will not enjoy that same event handler.
A workaround is to use a different syntax, targeting first a larger tag that is guaranteed to be there on first load, and then filter down to the anchor tags:
$('body').on('click', 'a', function(){
// do stuff
});
Templating is done in Jade, #name is putting a ID on the tag and .name puts a class
div#chatroom
div.row#chatcontainer.chatbg
div.large-12.columns
div.row
div.large-10.columns
h2#chatanchor.thin Party
i.fa.fa-minus-square-o
div.large-2.columns
i.fa.fa-users
div.row.chatbox
div.large-12.columns.chatwindow
div.mymessage
p Bill: Templating!
div.theirmessage
p.theirmessage Fredrickson: Templating!
div.row
div.large-12.columns.sitbottom
div.row.collapse
div.small-10.columns.large-10.sitbottom
input(type="text").sitbottom
div.small-2.columns.large-2.sitbottom
button(type="submit", class="button postfix sitbottom") Send
I have a simple chat window and when I click the h2 at the top it is supposed to minimize using this:
$('#chatanchor').on('click', function(e) {
console.log("Here");
});
The bind is called within document.ready in jQuery but doesn't work when I click it, but if I copy the code and paste it into the dev console and then click it, it works, so I'm not sure why it is not binding on page load.
It would seem that the element is being added after the DOM is ready, so your event isn't getting attached. Have it attach to any new elements that match your selector with the following:
$(document).on('click', '#chatanchor', function(e) {
console.log("Here");
});
I have a little problem here, and if someone could help me, I will truly appreciate.
I have a menu that opens when I click on a div, and once open, I want to close the menu clicking again on te same div. The problem is that I can open the menu but I can't close it.
Here is my code:
<script>
$(document).ready(function () {
$("#menuResp").click(function () {
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2')
});
$("#menuResp2").click(function () {
$('#profile_menu').css('margin-left','-300px');
$('#menuResp2').css('margin-left','0px');
$('#menuResp2').attr('id', 'menuResp')
});
});
</script>
<div id="menuResp">
<ul id="menuRespCss">
<li class="icon-css">
<a>Menu</a>
</li>
</ul>
</div>
Anyone have an idea of why this doesn't work?
What your code is doing is setting callbacks at the moment, when the initial DOM is being built. Of course, there is no #menuResp2 yet. Insdead, set the callback on the document element (or body, or some other parent element), specifying the selector of your menu - this element will fire the event. This will work:
$(document).ready(function () {
$(document).on('click', "#menuResp", function () {
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2')
}).on('click', "#menuResp2", function () {
$('#profile_menu').css('margin-left','-300px');
$('#menuResp2').css('margin-left','0px');
$('#menuResp2').attr('id', 'menuResp')
});
});
But. I would stroungly recommend not to change the ID attribute, but to work with classes instead.
you need to add the click handler like this
$(document).on('click', '#menuResp', function(){
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2');
});
.click() only works for elements that are already created, using .on() will cover elements that will be created later.
you should really be identifying the element by class though , and using .addClass() and .removeClass() like the comment suggest
just use toggle. if the item is closed, it will open, if its open, it will close. all the answers above do not check to see if the item is open already or not.
$(document).on("click", function(e){
e.preventDefault();
$('#menuResp').toggle();
$("##menuResp2").toggle();
})
easier would be to give element a single class and just toggle once on class name, rather than changing the ID of the item, this second item would not have an avent binding added to it. But at the same time. You dont need the ID when you can just toggle with class. like so:
$(".clasname").toggle();
this will open any element that is closed with the class of clasname. this will also, at the same time, close all elements that have that class name, and are also open
My jquery should open only the first of two divs on page load, but now it opens both.
Also, I've added .active class to my CSS to color the active divs link, but it won't work.
Jquery
$(document).ready(function () {
$(this).find('.infoexpanderContent').slideDown();
});
$('.infoexpanderHead').click(function () {
$(this).siblings().find('.infoexpanderContent').slideUp();
$(this).find('#infoactive').addClass("active");
$(this).find('.infoexpanderContent').slideDown();
$(this).siblings().find('#infoactive').removeClass("active");
});
CSS
.active {
color: green;
}
Really new to JS and Jquery so be simple please :)
Try specifying the :first selector:
$('.infoexpanderContent:first').slideDown();
By the way, there's no need for the $(this).find() method, since in the DOM wrapper, $(this) refers to the document, which is always assumed in jQuery.
Inside the dom ready handler this refers to the document object so your selector $(this).find('.infoexpanderContent') returns all infoexpanderContent elements in the page and slides them down
Fire the click event on the first element after the click handler is added
$('.infoexpanderHead').click(function () {
$(this).siblings().find('.infoexpanderContent').slideUp();
$(this).find('#infoactive').addClass("active");
$(this).find('.infoexpanderContent').slideDown();
$(this).siblings().find('#infoactive').removeClass("active");
}).first().click();
It is better to use a manual click trigger since you also will have to add the active class to the first infoactive element