this is my code example:
$( "#new_warehouse" ).onClick(function() {
$('.js-dependent-fields:hidden').children().prop('disabled', true);
});
It adds a "disabled" to all childs of my js-dependent-fields div, if style="display: none;". How can I revert this when the js-dependent-fields div gets visible?
Many thanks in advance!
You should use correctly .on() listener with .click() event with a callback function in the prop() method:
$( "#new_warehouse" ).on('click', function() {
$('.js-dependent-fields').children().prop('disabled', function(){
return $(this).is(':hidden');
});
});
Thing to notice is that the target element is a class selector so it would return a collection so, we have to look for each one with the $(this) and check if it is :visible.
Perhaps a more apt code would be
$( "#new_warehouse" ).onClick(function() {
$('.js-dependent-fields').children().prop('disabled',
$('.js-dependent-fields').is(':hidden') ?
true : false );
});
You can reverse the effect using :visible pseudo class selector. But for your need you can use like this:
$('.js-dependent-fields:hidden').children().prop('disabled',
$('.js-dependent-fields').is(':hidden')//sets true if hidden else false
);
Related
I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});
To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!
You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this
Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way
You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>
Use toggleClass('show')
It will add the class on one click and remove the class on the second click.
<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>
I have separate jQuery functions for "mouseenter" and "mouseleave" that work fine:
$('#imgPostTravel').mouseenter(function () {
$('#imgPostTravel').addClass('popout_image');
$('#imgPostTravel').addClass('shadow');
});
$('#imgPostTravel').mouseleave(function () {
$('#imgPostTravel').removeClass('popout_image');
$('#imgPostTravel').removeClass('shadow');
});
...but am hoping to consolidate it into one "hover" toggle operation.
I first want to make sure it really works, so tried the following on a jsfiddle here:
$( "ptVerbiage" ).hover(function() {
$(this).val('yep!');
}, function() {
$(this).val('nope!');
});
I've tried several things besides setting the value of "val" (changing the "disabled" attr, changing the color, backgroundcolor, etc.) but none of them does a thing. Is this the wrong way to hover/toggle, or what's wrong?
You forgot the hashtag to make reference to an ID. Also, your target element is a h2, that has no .val() method because it is not a form (text) input. You have to use .text() instead.
The portion of code should look like this (jsFiddle):
$("#ptVerbiage").hover(function() {
$(this).text('yep!');
}, function() {
$(this).text('nope!');
});
You seem to be missing a #
$("ptVerbiage") => $("#ptVerbiage")
AND
not .val() but .text(); as .val is for inputs
should look like this
$( "#ptVerbiage" ).hover(function() {
$(this).text('yep!');
}, function() {
$(this).text('nope!');
});
http://jsfiddle.net/n9sq7x8y/4/
Using everyone's suggestions, this is what works:
$( "#imgPostTravel" ).hover(function() {
$(this).addClass('popout_image');
$(this).addClass('shadow');
}, function() {
$(this).removeClass('popout_image');
$(this).removeClass('shadow');
});
I have the following function to open an overlay menu:
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
});
To hide the menu, I would like the user to be able to click on any area outside ".context-switch-menu"
I am trying with :not() but with no success..
$('body').click(function(e) {
if ($(e.target).hasClass('context-switch')) {
return;
}
$(".context-switch-menu").hide();
});
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
return false;
});
The reason this can be difficult is because of event bubbling.
You can try something like this:
$('.context-switch').click(function(e) {
e.stopPropagation();
$(".context-switch-menu").toggle();
});
$(".context-switch-menu").click(function(e){
e.stopPropagation();
});
$("body").click(function(e){
$(".context-switch-menu").hide();
});
The e.stopPropagation() prevents the click event from bubbling to the body handlers. Without it, any click to .context-switch or .context-switch-menu would also trigger the body event handler, which you don't want, as it would nullify the effect of the .context-switch click half the time. (ie, if the state is hidden, and then you click to show, the event would bubble and trigger the body handler that would then hide the .context-switch-menu again.)
Without testing, would something like this work?:
$('.context-switch').click(function() {
$(".context-switch-menu").show();
});
$(document).click(function() {
$(".context-switch-menu").hide();
});
Instead of using document, 'html' or 'body' may work as well.
$(document).on('click', function(e) {
if (e.target.className !='context-switch-menu') {
$(".context-switch-menu").hide();
}
});
Just an idea here, based on what what others have suggested in the past:
$(document).click(function(e){
//this should give you the clicked element's id attribute
var elem = $(e.target).attr('classname');
if(elem !== 'context-switch-menu'){
$('.context-switch-menu').slideUp('slow');
//or however you want to hide it
}
});
try this, we don't want to call a function when you clicked on the element itself, and not when we click inside the element. That's why we need 2 checks.
You want to use e.target which is the element you clicked.
$("html").click(function(e){
if( !$(e.target).is(".context-switch-menu") &&
$(e.target).closest(".context-switch-menu").length == 0
)
{
alert("CLICKED OUTSIDE");
}
});
Live fiddle: http://jsfiddle.net/Xc25K/1/
I have a piece of JQuery that creates a row in a table and in one of the cells there is an X that is surrounded by a class. When it is dynamically created and then clicked on the click listener does not fire.
Here is the code.
$('#add').click(function() {
$( '#table' ).append('<td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});
Since the <td> element does not yet exist when you register your event handler, you have to use live() or delegate() for the handler to be triggered later:
$(".x").live("click", function() {
alert("Fired");
});
$(".x").live("click", function()
{
alert("Fired");
});
Live adds events to anything added later in the DOM as well as what's currently there.
Instead of
$('.x').click(function() {
alert('Fired');
});
Change to this
$('.x').live('click', function() {
alert('Fired');
});
It binds the click function to any created element with class x
You need to use the .live function for content that's dynamically generated.
so replace
$('.x').click(function() {
with
$('.x').live('click',function() {
You are first creating the listener to all .x elements (of which there are presumably zero), then later adding new .x elements.
There are two solutions: one is to use jQuery live, the other is to rewrite your code:
var xClickHandler = function() {
alert('Fired');
};
$('#add').click(function() {
$('#table').append(
$('<td class="x">X</td></tr>').click(xClickHandler);
);
});
Use live instead of click:
$('.x').live("click", function() {
alert('Fired');
});
The html you are appending to the table has a typo, you have missed out the beggining tr tag:
$('#add').click(function() {
$( '#table' ).append('<tr><td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});
I think you need to use the live method. http://api.jquery.com/live/
$('.x').live('click', function() {
// Live handler called.
});
Is it possible to detect when jQuery has fired it's .hide() method on an element?
I tried binding to the hide event on such an element:
$('div').bind('hide', function(){
alert("Hidden");
})
but the alert doesn't display.
You can do it by overriding JQuery's hide method:
var oldHide = $.fn.hide;
$.fn.hide = function() {
alert("Hidden");
oldHide.apply(this, arguments);
}
...as shown here.
all the time? or just for debugging?
you could just use the call back function to write something to the log.
$( '#my-id' ).hide( duration, function(){ console.log( 'fired!' ); } );