Disable click in other divs if one has been clicked already - javascript

This is my jsfiddle : https://jsfiddle.net/2ajo5jdx/
If you click on link-b a div fade-in,now if you click on link-c another div fadeIn too.I don't want more than one div at the same time.I want to disable click on link-c if link-b has been clicked already.
Is there a simple way?Thank you.
$('.b').on("click", function(e) {
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.c').on("click", function(e) {
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.c-div').addClass('active');
$('.c-div').fadeIn(400);
});
});

To add almost nothing to your code, you could use a flag, set it to true on each click in a link and to false on close
var some_link_opened = false;
$('.b').on("click", function(e) {
if (some_link_opened) return;
some_link_opened = true;
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.x').on("click", function(e) {
some_link_opened = false;
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('this').removeClass('active');
$('.a-div').fadeIn(400);
});
});

I'm not sure if that what you mean, but if you want to show just one div every time you can use the following solutio based on active class.
Hope this helps.
$('.b').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('.active').removeClass('active');
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.c').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('.active').removeClass('active');
$('.c-div').addClass('active');
$('.c-div').fadeIn(400);
});
});
$('.x').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('this').removeClass('active');
$('.a-div').fadeIn(400);
});
});
.b-div,.c-div{
display:none;
}
.x {
color:red;
}
.b,.c,.x{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="b">link-b</a>
<a class="c">link-c</a>
<a class="x">x</a>
<div class="a-div active">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="b-div">bbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="c-div">ccccccccccccccccccccccccccc</div>

Related

Divi - Slide Navigation On Button Optimisation

I have a slide navigation script that allows me to navigate to a particular slide using an "nth-child(#) that triggers a click event.
Each button currently has its own slide reference, i.e Slide-1 button will link to nth-child(1) and so forth through to slide/button 8
I am looking for ways to optimise the below script using a loop or something similar so that it is more manageable and still keeps the same functionality.
<script>
jQuery(document).ready(function( $ ) {
var selector = '.activelinks a';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
$("#Slide-1").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(1)").trigger("click");
});
$("#Slide-2").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(2)").trigger("click");
});
$("#Slide-3").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(3)").trigger("click");
});
$("#Slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});
$("#Slide-5").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(5)").trigger("click");
});
$("#Slide-6").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(6)").trigger("click");
});
$("#Slide-7").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(7)").trigger("click");
});
$("#Slide-8").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(8)").trigger("click");
});
});
</script>
you can give a class to all slide buttons like : slideBtn
then :
jQuery(document).ready(function ($) {
var selector = ".activelinks a";
$(selector).on("click", function () {
$(selector).removeClass("active");
$(this).addClass("active");
});
$(".slideBtn").on("click", function (e) {
e.preventDefault();
var slideNumber = e.target.id.replace( /^\D+/g, '');
$(".et-pb-controllers a:nth-child("+slideNumber+")").trigger("click");
});
});

event.stopPropagation() is not worknig?

I have implemented click event on window and on specific element. I want to stop window click event propagation on particular element click as mentioned below but it is not working. I am not sure what wrong I am doing here.
$('.dropdown-container').click(function(event){
event.stopPropagation()
var selectElement = '.dropdown-container > select';
if($(selectElement).hasClass('actionDD')){
$(selectElement+'.actionDD').toggleClass('special');
}
else if($(selectElement).hasClass('countryDD')) {
$(selectElement+'.countryDD').toggleClass('special');
}
$('.fa-chevron-down.importC, .fa-chevron-down.exportC ').removeClass('special');
});
$(window).click(function(event){
console.log('window event clicked');
$('.dropdown-container, .fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});
Apart from the typos, if your selects are not nested just do this
$('.dropdown-container').on("click", "select", function(e){
e.stopPropagation()
if($(this).is('.actionDD') || $(this).is('.countryDD')) {
$(this).toggleClass('special');
}
$('.fa-chevron-down.importC, .fa-chevron-down.exportC ').removeClass('special');
});
$(window).on("click", function(e){
console.log('window event clicked');
$('.dropdown-container, .fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});
Please post your HTML since this works:
$('.dropdown-container').on("click", "select", function(e) {
e.stopPropagation()
if ($(this).is('.actionDD') || $(this).is('.countryDD')) {
$(this).toggleClass('special');
}
});
$(window).on("click", function(e) {
console.log('window event clicked');
});
.special {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<select class="actionDD">
<option>Click</option>
</select>
</div>

Javascript menu close

I have a menu in HTML. When you click "menu", a list opens, click "menu" again, the list closes.
I need the menu to close if the user clicks anywhere on the screen
<script type="text/javascript">
$(function() {
var menuVisible = false;
$('#menuBtn').click(function() {
if (menuVisible) {
$('#menu').css({
'display': 'none'
});
menuVisible = false;
return;
}
$('#menu').css({
'display': 'block'
});
menuVisible = true;
});
$('#menu').click(function() {
$(this).css({
'display': 'none'
});
menuVisible = false;
});
});
Here is simple Html and jquery. Hope it will help you.
Html -
<div class="container">
<button id="menu">menu</button>
<div id="list">list</div>
</div>
jQuery -
$('#menu').click(function(e) {
e.stopPropagation();
$('#list').slideToggle();
})
$('#list').click(function(e) {
e.stopPropagation();
});
$('body').click(function() {
$('#list').slideUp();
})
List will toggle on click of menu and slideUp on body click.
jsFiddle - https://jsfiddle.net/dhananjaymane11/Lgfdmjgb/1/
Creating an onclick listener for document should be sufficient:
document.onclick = myClickAnywhereHandler;
function myClickAnywhereHandler() {
alert("hide the menu");
$('#menu').css({
'display': 'none'
});
}
jQuery's .toggle function toggles an elements visibility, that code with the boolean value logic isn't necessary.
Just call .toggle on the menu whenever there's a click within the document.
$(document).click(function(){
$("#menu").toggle();
});

Toggle div when clicked and hide when clicked outside

I already have my code to toggle show and hide the div but whenever I try to add the Hide when clicked outside, it conflicts the toggle code, I need to toggle the div_menu but also hides it when clicked outside just like the facebook drop down menu
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
});
You can do something like
$(document).ready(function () {
$(".toggle_menu").click(function (e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e){
if(!$(e.target).closest('.toggle_menu, .div_menu').length){
$(".div_menu").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle_menu">toggle_menu</button>
<div class="div_menu">
<div>some random content menu</div>
</div>
<div style="height: 100px; background: lightgrey;">some other content goes here</div>
use e.target to find the current targeted element ,and using is() Check the current matched set of elements against a selector
$(document).ready(function () {
$(document).click(function (e) {
if ($(e.target).closest(".toggle_menu,.div_menu").length) {
$(".div_menu").toggle();
e.preventDefault();
} else {
$(".div_menu").hide();
}
});
});
DEMO
$("body").click
(
function(e){
if ($(e.target).is($(".toggle_menu"))) {
$(".div_menu").toggle();
}else{
$(".div_menu").hide();
}
}
);
try this
$(document).click(function(e){
if($(e.target).parents('.div_menu').length == 0 && $(e.target).attr('class') != "div_menu"){
$(".div_menu").toggle();
}
});
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e) {
$(".div_menu").hide();
});
});

jQuery click to toggle

I have this code in my script:
$(document).ready(function() {
$('*').not('div#user').click(function() {
$('div#userSettings').hide();
});
$('div#user').click(function() {
$('div#userSettings').toggle();
$('div#profileSettings').toggleClass('rotate');
});
});
I need the div#userSettings to be hidden whenever anything but it's button or itself is clicked, and I want it to appear only when I click on the div#user.
the toggleclass does still work in this, just that the div#userSettings does not appear at all
You can stop the event propagation
$(document).ready(function () {
$(document).click(function (e) {
$('#userSettings').hide();
})
$('#user').click(function (e) {
e.stopPropagation();
$('#userSettings').toggle();
$('#profileSettings').toggleClass('rotate');
});
$('#userSettings').click(function (e) {
e.stopPropagation();
});
});
Demo: Fiddle

Categories

Resources