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
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.
I've got some jQuery that I'm using to change a class of two elements. It works once, and the elements change class once, but I want it to work interchangeably. so when they click they click the 'deselected' button it assigns itself the 'selected' class, and the 2nd button changes to a 'deselected' class.
Here's the jQuery:
$('.network_bar_deselected').on('click', function(){
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
and the HTML is quite simple:
<div class="network_bar_selected"><h4>Network Updates</h4></div>
<div class="network_bar_deselected"><h4>Latest Tweets</h4></div>
Since you're changing classes dynamically, you should use delegation:
$(document).on("click", ".network_bar_deselected", function() {
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
Your original code only binds the handler to the elements with the network_bar_selected class when the document is loaded, not to elements that get that class later.
Add the handler to both the classes
$('.network_bar_selected, .network_bar_deselected').on('click', function () {
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
Demo: Fiddle
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>
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
I'd like to use this lightbox plugin for some autocomplete links, that don't yet exist on my page.
You normally activate it using:
$(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Since the a links aren't all on the page upon page load, I would normally look to the .live or .delegate methods to bind to an event, but in this case, what 'event' would I bind to to say "once this element is on the page, then call this method on it".
Or am I going about this totally the wrong way?
There is no such event.
You need to invoke the plugin when you add the elements to the page.
// create a new <a>, append it, and call the plugin against it.
$('<a>',{rel:"facebox"}).appendTo('body').facebox();
This example creates a new <a> element. If you're getting some elements from an AJAX response, call it against those:
var elems = $( response );
elems.filter( 'a[rel="facebox"]' ).facebox(); // if the <a> is at the top level
elems.find( 'a[rel="facebox"]' ).facebox(); // if the <a> is nested
elems.appendTo('body');
Not yet tested :
$(document).ready(function($) {
$(document).bind('change', docChanged) ;
})
function docChanged()
{
if ($('a[rel*=facebox][class!="faceboxed"]').length > 0)
{
$('a[rel*=facebox][class!="faceboxed"]').addClass("faceboxed").facebox();
}
}
This is entirely possible using the .live function. You just need to use the DOMNodeInserted event.
$(document).ready(function() {
$("a[rel*=facebox]").live("DOMNodeInserted", function() {
$(this).facebox();
});
});
You'll need to just add this call to the ajax that loads in the links.