jQuery toggleClass if another element is visible - javascript

I had a project with jQuery 1.11.2.1
where this jquery statement was working with no problems:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $( $("#panel").is(":visible") ) );
$("#panel").slideToggle();
});
});
after I moved to jQuery 1.11.3.2
browser freezes whenever I click the ".clickme" button and ask me to block a script (jquery) that was hanging too long.
I had to remove the is visible condition to avoid browser hanging:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed");
$("#panel").slideToggle();
});
});
the problem is I need to check the visibility of the #panel element.
element #panel default state is display:none
the issue is present in all browsers I can check.

The first example is almost correct, except that you're putting a boolean (from .is()) in to a jQuery object. The boolean needs to be given directly as a parameter to the toggleClass method. Try this:
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $("#panel").is(":visible"));
$("#panel").slideToggle();
});
More info on toggleClass()

Related

Body hasclass doesn´t work

so my code which should add a class to an element if the body has a certain class doesnt work. It looks like this:
if ($("body").hasClass("shifter-open")) {
$(".scrollheader").addClass("hovered");
}
I think its because a Jquery code adds this class (shifter-open) to the body with this code:
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() {
$("body").toggleClass("shifter-open", 1000);
});
});
Is there a way to make my code work? and maybe combine these 2 codes into one?
Your conditional :
if ($("body").hasClass("shifter-open")) {
$(".scrollheader").addClass("hovered");
}
Is only going to be evaluated once unless you have a timeout or interval polling it. A better solution might be to combine those two sections into one. Such as:
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() {
$("body").toggleClass("shifter-open", 1000);
$(".scrollheader").toggleClass("hovered");
});
});
Or something like that. You might also want to check the documentation for toggleClass because it doesn't appear to take an integer as a second parameter
Assuming you want to remove the class as well, just imitate exactly what the body is doing. You can toggle the class hovered on your .scrollheader just as the body is toggling its shift-open class.
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() { //When shifter-handle is clicked
$("body").toggleClass("shifter-open"); //Toggle "shifter-open" on the body
$(".scrollheader").toggleClass("hovered"); //Toggle "hovered" on .scrollheader
});
});
Additionally, the second parameter of toggleClass() takes a boolean that determines if the toggle should activate. Your second parameter of 1000 is permanently truthy, so there is no reason at all to include it.

jQuery selectors not working with added class

I'm working on a php/jQuery store and have run into the following problem:
I have a few div boxes as articles and as soon as a box is clicked, it is moved into the shopping cart and therefore has to become inactive.
That's my code so far:
$( ".artbox" ).not( ".inactive" ).on('click', function(){
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive")
})
It adds the class .inactive to two div objects, which are positioned inside each other. The rest of this function is left out here to keep it short. The problem is that while the according styles for .inactive are applied, I can still click on the box again and again and the function will be called again and again (although I have added the .not() selector) which results in having this specific article in the shopping cart multiple times - and this is what I would like to prevent. If I reload the page manually everything is fine and this
$( ".artbox.inactive" ).on('click', function(){
$(this).effect( "shake", {distance:1});
})
works, too (it doesn't for the items added without reloading).
But I am looking for a solution that works without reloading because I am displaying a popup window with a sucess message after the item was added to the cart.
JSFiddle
I've tried this here https://stackoverflow.com/a/12202186/2842292 but unfortunatly can't get it to work in my example.
Thanks in advance!
You can do it in two ways:
You unregister the event listener upon the click.
You can do it adding this to the event listener: $(this).unbind();,
You add an additional check at the very top of the listener:
if($(this).hasClass("inactive")) return;
Then if it even runs, it will quit and will not do the job.
The eventbinding happens on page load, so you should build the logic in the function:
$( ".artbox" ).on('click', function() {
if ($(this).hasClass("inactive")) {
$(this).effect( "shake", {distance:1});
} else {
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive");
}
});

Make jQuery(document).ready(function() fire again when a div opens

How do I get jQuery(document).ready(function() to fire again when an overlay div is activated?
I'm using this function to hide the a.button:
jQuery(function($) {
jQuery(document).ready(function() {
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize'
).css("display","none");
});
});
The same button with the same class exists in a "overlay" called .theme-wrap, and within .theme-wrap, the a.button CSS looks like this (the difference being .active-theme ):
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
If I reload the page with the .theme-wrap overlay open, the button disappears, because the jQuery document ready function fires again.
I tried adding both CSS rules to the one function
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize,
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
but it doesn't work.
How do I get document ready to fire again when the overlay opens?
Update 10/14/14
As was pointed out in the answer below: there is no need for jQuery in this instance. The CSS I'm using is the same for each div - the original and the overlay - so a simple {display:none} rule added to the admin stylesheet will suffice.
Instead of using the $(document).ready() function again, try adding the CSS directly to your stylesheet.
Once the overlay is activated run the following:
jQuery('.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
Or better still create a function:
function hideElement( sel) {
$( sel ).hide(); //.hide() is equiv to .css('display', 'none');
}
Then call the function at DOM ready with first selector:
$(document).ready(function() {
hideElement( 'selector-1' );
});
And then when the overlay is fully activated, call the function with the appropriate selector:
hideElement( 'selector-2' );

How to bind jquery function to specified element

I want to make function working only on page with specified element.
I have search page, search fields and results are in search-block div.
I want to bind function to this block, so function will not work on other pages (without <div id='search-block>...</div>)
I have next js code atm:
$(document).ready(function()
// instructions for another page (handlers for some links)
$(function(){
setInterval(findSomething,1000);
});
});
It working fine on page with search-block div, but it works fine on the other pages too. Browser tries to run this function on all other pages. I don't need this.
I tried jquery bind, but it now worked for me, don't know why :(
$("#search-block").bind(function(){
setInterval(findSomething,1000);
});
How I can bind handler to speciges too.fied block?
Instead of bind you have to check for the length of that elem:
$(document).ready(function(){
if($('#search-block').length > 0){ // <---checks the availability
setInterval(findSomething,1000);
}
});
Bind is always used with an event to bind to:
$( "#foo" ).bind( "mouseenter mouseleave", function() {
});
if you want to execute that only when the block is available on the page, use this:
if ($('#search-block').length) {
setInterval(findSomething,1000);
}
This checks the number of times #search-block is found on the page and if it is not 0(false) it executes the code.

jQuery .live() only works one time

I have a simple jQuery AJAX code which generates XHTML code:
$("a.close").live("click", function( e ){
e.preventDefault();
$( '#info' ).fadeOut( 'slow' );
});
This code works great once. My div closes and everything is fine, but if I click on the link that opens up my #info div a second time then I can't close the div. I get no errors in Firebug and I can't solve the problem.
Could you try returning false instead of calling e.preventDefault?
Try the following:
$("#info").fadeOut('slow').remove();
It's possible you're adding multiple '#info' boxes, but not actually removing the old ones - just hiding them.

Categories