Develop Reference

Floating section hide when Lightbox popup is exists on screen

So I'm about to hide the right side floating section when Popup exists: https://dev.resiliencelab.us/
So I was trying this jQuery code:
jQuery(document).ready(function(){
if (jQuery('#elementor-popup-modal-2607').css('display') == 'flex') {
jQuery('.right-floating-for-popup').css('display', 'none');
}
if(jQuery('.eicon-close').click()){
jQuery('.right-floating-for-popup').css('display', 'block');
}
});
But it didn't help. It completely hides the lightbox in the first place. I don't want to trigger hide show from the "Learn more" button because on the page load when popup shows, It also shold not show the floating section.
What's wrong with my code?

Well, I just solved this myself :)
Since this was a popup and popup triggering after 3 sec of page load, so I needed to run my jQuery code after 5 sec with the delay function.
Also changed some condition to check the click both close and learn more button. Finally I modified the code and resolved my issue:
jQuery(document).ready(function() {
setTimeout(
function() {
if (jQuery('#elementor-popup-modal-2607').css('display') == 'flex') {
jQuery('.right-floating-for-popup').css('display', 'none');
}
jQuery(".learn-more").click(function() {
jQuery(this).data('clicked', true);
if (jQuery('.learn-more').data('clicked')) {
jQuery('.right-floating-for-popup').css('display', 'none');
}
});
jQuery(".eicon-close").click(function() {
jQuery(this).data('clicked', true);
if (jQuery('.eicon-close').data('clicked')) {
jQuery('.right-floating-for-popup').css('display', 'block');
}
});
}, 3000);
});
Thank you!

Show more button hidden after click

I have a nice script where I show more after clicking a button. This button needs to be hidden after clicking.
This is what I have sofar:
$(function() {
$(".btn-down").next().hide().append('Show less');
$(".btn-down").click(function() {
$(this).next().slideToggle();
});
$(".btn-up").click(function() {
$(this).parent().slideUp();
});
});
My JSFiddle;
https://jsfiddle.net/w5n7zkwu/5/
An other way is just change the button text after click and put it below the hidden text.
I'm close but don't know how to fix this..

Add the .hide() before the .next() here
$(".btn-down").click(function() {
$(this).hide().next().slideToggle();
});
Display again your "show more" button with $(".btn-down").show(); here
$(".btn-up").click(function() {
$(this).parent().slideUp();
$(".btn-down").show();
});

How do I prevent the page from refreshing when closing the modal popup box>

So every time I close the popup modal the page will refresh and the popup will appear again so how do I prevent the page from refreshing and have the popup to fadeout once the user click close?
I am not sure if using e.preventDefault(); will do the trick.
Below are my code. Thank you.
$(document).scroll(function(){
var a = $(this).scrollTop();
if (a > 500) {
$("#mc_embed_signup").fadeIn();
} else
$(".popup-close").click(function(e){
closeSPopup();
});
});
function closeSPopup(e){
$("#mc_embed_signup").fadeTo(0);
e.preventDefault();
}

You need to pass the parameter e
$(".popup-close").click(function(e){
closeSPopup(e);
});
To not show on scroll after user clicked close, try this
$(document).scroll(function(){
console.log('scrolling - '+$("#mc_embed_signup").data('userClosed'));
if (!$("#mc_embed_signup").data('userClosed')) {
$(".popup-close").click(function(e){
closeSPopup(e);
});
var a = $(this).scrollTop();
if (a > 500) {
$("#mc_embed_signup").fadeIn();
}
}
});
function closeSPopup(e){
e.preventDefault();
$("#mc_embed_signup").data('userClosed',true);
$("#mc_embed_signup").fadeTo("slow", 0, function(){
//fadeto only set the opacity and doesn't actually hide the div
//So you need to hide the div after fadeto
$("#mc_embed_signup").hide();
}); //check fadeto here http://api.jquery.com/fadeTo/
}

Logic to hide opened sub menu on click elsewhere?

Suppose user goes to a ecommerce site and clicks on products, there is a submenu which drops down. What logic to write to ensure that when user clicks on any other blank space(or elements) that submenu is hidden back?

Check this js fiddle:-
http://jsfiddle.net/H3Vnw/3/
Here is the java script code:-
$(document).mouseup(function (e)
{
var container = $('.dropdown-menu');
if (container.has(e.target).length === 0)
{
container.hide();
}
});
$('.comment').click(function(){
$('.dropdown-menu').css({'display': 'block'});
});
If we click on the comment we can get drop menu if we click else where the drop menu will be hidden!
Hope this helps!

Wild guess: something that listens to anything but the submenu click, and closes it.
// assumption: submenu has open() and close() functions
submenu.open();
var listener = document.addEventListener('click', function(e){
// TODO: how to check if click is on submenu?
if (e.target != submenu) {
submenu.close();
document.removeEventListener('click', listener);
}
});

JQuery Toggle...one click to open - double to close

I created a mobile menu with a toggle switch.
When I click on the div "dropdown-menu" it opens.
When I click again it closes. But i want it to open with one click and to close with double click.
What do I need to add to my code??
$('.dropdown-menu').click(function() {
$('.dropdown-menu').not(this).children('ul').slideUp("slow");
$(this).children('ul').slideToggle("slow");}
);
$('.dropdown-menu').blur(function() {
$('.dropdown-inside').hide('slow', function() {
});
});

Try to use dblclick,
$('.dropdown-menu').click(function() {
$('.dropdown-menu').children('ul').slideUp("slow");// slideUp all drop-downs
$(this).children('ul').slideDown("slow");// use slideDown instead slideToggle
});
$('.dropdown-menu').dblclick(function() {
$(this).children('ul').slideUp("slow");
});
To prevent sliding after clicking once try this,
$('.dropdown-menu').click(function() {
if( !$(this).children('ul').is(':visible')) {// slide, if ul is not visible
$('.dropdown-menu').children('ul').slideUp("slow");
$(this).children('ul').slideDown("slow");
}
});