I have one question about jQuery close system. I have created this DEMO from codepen.io
In this demo you can see there are two div (red and blue). When you click the red div then the .CRtW11 will be an active. But after you click the blue div the .CRtW11 stayed on there; it needs to be inactive. What is the problem there, can anyone tell me ?
JS
// FOR cR
$("body").on("click", ".cR", function(event) {
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
This function wont work for the red and blue div as their click events are stopped in their respective click functions. So the simple solution will be to add the remove class function in the opposite click functions. i.e.
// FOR cR
$("body").on("click", ".cR", function(event) {
$(".BRc").removeClass("BRc-active");
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});
Related
I want to click on Item1, replace the label "Item1" with "Saved", then fade out the button after 500ms and place back the label "Item1" (saved in var currentText)
If I click the button multiple times it fires too many times. How can I prevent that?
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});
This could be solved with a simple flag indicating that you are in the process of fading it out.
var isFadingOut = false;
$('body').on('click', ".item", function() {
if (isFadingOut) {
return;
}
isFadingOut = true;
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
isFadingOut = false;
});
});
Note: this solution works globally. So if you have multiple different buttons on screen that you want to be able to fade out simultaneously, this will not work. If that's the case, something more like what #Phiter wrote would be better.
I'd do something like this:
$('body').on('click', ".item", function() {
if ($(this).data('off')) return;
$(this).data('off', true);
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
$(this).data('off', false);
});
});
The function will not execute while the button has the off data. Kinda like Mike's answer but without the global variable.
Can use not(':animated'). The :animated pseudo selector is used internally by jQuery and is only active when an animation is in progress
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).not(':animated').text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});
This drop down div is view after click packages and i want to add when select choose your destination change the icon set. i tried but when click drop down item on list main div slide up...
my jquery code is below
//SLIDE UP AND DOWN FUNCTION
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
if($packages.is(":visible")){
$packages.slideUp(350);
setTimeout(function () {
$('li.dropdown-packages').removeClass('dwn-arrow');
}, 800);
}
if($packages.is(":hidden")){
$packages.slideDown(350);
setTimeout(function () {
$('li.dropdown-packages').addClass('dwn-arrow');
},800);
}
});
Use the slideToggle() method.
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
$packages.slideToggle();
});
I'm trying to change the area and the button value by clicking the different Tabs.
Here's my question:
First loading the page, the button effect is working, but after clicking the other Tabs, it can't work.
On clicking the second Tab, then clicking the area button, you'll find it can't work.
Here's part of my code:
$(document).ready(function () {
var _showTab = 0;
$('ul.tabs').each(function () {
$(this).find('li').each(function (k) {
if (k != 0) {
$($(this).find("a").attr("href")).hide();
} else {
$(this).addClass('active').append("<span class='tr_icon'></span>");
}
})
});
$('ul.tabs li').click(function () {
var $this = $(this),
_clickTab = $this.find('a').attr('href');
$this.addClass('active').append("<span class='tr_icon'></span>").siblings('.active').removeClass('active').children().remove('span');
// $(_clickTab).stop(false, true).fadeIn().siblings().hide();
paidChange();
areaChange();
return false;
}).find('a').focus(function () {
this.blur();
});
});
Here's all of my code:
Sorry for my poor English, and I hope you'll understand what I mean.
document.on click will trigger on dynamically added tabs.
Change
$('ul.tabs li').click(function() { });
to
$(document).on("click", 'ul.tabs li', function(){});
community!
The idea is to create a list with normal list with text and sometimes clickable links.
Problem:
How to make this list to close only when the button is pressed and not when the user click on any item inside the list or anywhere on screen.
Fiddle: jsfiddle.net/H2Chj/494/
HTML:
<button data-text-swap="Show" id="trigger">Hide</button>
<div id="drop">
Menu item 1
Menu item 2
Menu item 3
Menu item 4
</div>
Javascript
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
$("button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});
The one thing you had missing was stopping the propagation when you click on a link in the dropdown. this stops it from bubbling up to the $(document).click event handler.
$('#drop a').click(function(e){ e.stopPropagation(); });
I assume you had the $(document).click handler there so you could close the dropdown by clicking outside the dropdown menu.
see this fiddle: http://jsfiddle.net/o0m8p4bf/2/
Please use this javascript code:
$(document).ready( function(){
$("button").on("click", function() {
$('#drop').toggle();
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});
I have a series of divs that reveal on link click. When revealed i'm trying to make them close on background click while maintaining their ability to have the different divs replace each other when different links are clicked.
JS fiddle here: http://jsfiddle.net/t593pyg9/3/
$(document).ready(function () {
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
});
});
Listen to clicks on the entire document, to prevent this from closing the "popup" after clicking it's link due to event propagation add a return false; to the show click listener.
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
return false;
});
$(document).on('click',function(e){
$('.toggle').hide();
});
Fiddle
Update
If you want to prevent the popup from hiding on clicking on it add this:
$('.toggle').on('click', function (e) {
return false;
});
New Fiddle