We Keep Coding

jQuery: unwanted behavior of my drop down menu (desktop and mobile)

I've built a dropdown with jQuery and some css / scss. It works at first glance, but there are always errors that I think are due to jQuery code or unnecessary CSS rules. I'm just not sure which of them ..
You can see the current status here. The said dropdown menu is the item "Leistungen" in the Navbar:
https://www.s-wat.de
Especially in the mobile viewport errors appear. If I open the dropdown here and in the opened state click on another point (for example "Kontakt") and then on "Leistungen" again, there is an unwanted fadeIn fadeOut effect. The dropdown will open and close first, before I can open it normally.
Here is my jQuery code:
(function($) {
"use strict"; // Start of use strict
// Closes responsive menu when a scroll trigger link is clicked
$('.first .js-scroll-trigger, .last .js-scroll-trigger, .dropdown-menu .js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeOut('slow');
}
$('.dropdown-menu').removeClass('show');
$('.dropdown').removeClass('show');
});
var navbarBehave = function(){
if ($(window).width() < 992){
$('.dropdown-toggle').click(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn('slow');
}else{
$('.dropdown-menu').fadeOut('slow');
}
});
}else{
$('.dropdown-toggle').hover(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn(300);
}else{
$('.dropdown-menu').fadeOut(300);
}
});
}
}
navbarBehave();
$(window).resize(function(){
navbarBehave();
});
})(jQuery); // End of use strict

mobile Safari: prevent scroll page when focus on input

I'm trying to prevent scroll page when user tap on input:
<pre class="js-parent">
<input value="tap to focuss" readonly>
</pre>
$("input").on("focus", function(e) {
e.preventDefault();
e.stopPropagation();
});
$("input").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
this.setSelectionRange(0, 9999);
});
Few problems:
1) when user click on input page scroll to element (to the top of the page)
2) when focus is active, parent block lose position: fixed
demo
demo with code

You can trick safari into thinking that the current focused input is at the top of the page, so that no need to scroll down, by following trick:
$(document).on('touchstart', 'textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){
var intv = 100;
var $obj = $(this);
if (getMobileOperatingSystem() == 'ios') {
e.stopPropagation();
$obj.css({'transform': 'TranslateY(-10000px)'}).focus();
setTimeout(function(){$obj.css({'transform': 'none'});}, intv);
}
return true;
});
You can find more details in following thread, which shows how to do this for android os, too.
jquery mobile How to stop auto scroll to focused input in Mobile web browser

Here is a Vanilla JS version based on the first answer. It prevents IOS & mobile Safari from scrolling the screen when the soft keyboard is opened via the focus event created when clicking into an input.
It works perfectly in iOS 15.2.1
It also works very well with the 'focus' event.
element.addEventListener('touchstart', (event) => {
event.stopPropagation();
element.style.transform = 'TranslateY(-10000px)'
element.focus();
setTimeout(function () { element.style.transform = 'none' }, 100);
});

Bad idea: Responsive menu with resize()?

Is it a bad idea to use jquery's resize() event to toggle an responsive menu?
Okay it's actually not an menu but the idea is almost the same:
I have an sidebar with 4 boxes with different informations. Below a specific device-width I move the sidebar to another place. Now each box is hidden and a <selection> shows up. When the selection changes it'll show the selected box.
$("#my_selection").change(function () {
$.each(all, function () { // "all" are just my boxes
$(this).hide();
});
var val = "#my_box_" + $(this).val();
$(val).show();
});
I hope the concept is clear so far.
So but what happens when the user resizes the window? (aka changing orientation on mobile devices) Right:
Reducing width: Hide boxes
Increasing width again: Boxes are still missing
So.. that sucks. That's my solution:
$(window).resize(function () {
currentDisplay = $('#my_selection').css('display');
if (currentDisplay == lastDisplay)
return;
lastDisplay = currentDisplay;
if (currentDisplay == "none") {
$.each(all, function () {
$(this).show();
})
} else {
$.each(all, function () {
$(this).hide();
})
}
});
But I kinda have the feeling that this is a bit hacky, no? So - are there better solutions for this problem?
Here a simple sketch showing the design I've tried to explain.

jQuery scroll() event doesn't propagate

I have one wordpress plugin which displays popup on scroll. So I have code like this:
jQuery(window).scroll(function(){
//display popup
});
I have problem with one site. The site has those css rules:
html, body {
overflow: hidden;
}
div#pageWrap {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
So scroll event is not triggering on window and my popup doesn't work. So in this case I should set scroll event on #pageWrap div instead on window because scroll event doesn't propagate:
jQuery("#pageWrap").scroll(function(){
//display popup
});
My question is can I handle this dinamicaly. I cannot change code of my plugin for each site where I have this problem. Is possible to do something like make scroll event to propagate or to set some failback. Any idea about this will be helpful.

I can't promise that this will accommodate all edge cases, but it should take care of most of them.
JS:
jQuery.fn['any'] = function() {
return (this.length > 0);
};
if (jQuery("html").css('overflow') == 'hidden') {
if (jQuery("body").css('overflow') == 'hidden') {
var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow') == 'scroll'; });
if (!scrollElement.any()) {
var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow-y') == 'scroll'; });
jQuery(scrollElement[0]).scroll(function(){
//display popup
});
}
else {
jQuery(scrollElement[0]).scroll(function(){
//display popup
});
}
}
else {
jQuery("body").scroll(function(){
//display popup
});
}
}
else {
jQuery(window).scroll(function(){
//display popup
});
}
https://jsfiddle.net/hopkins_matt/d0gtqkat/

I don't think there's a global solution for this issue, but maybe you'll find some close solutions.
The close solution in my mind is to find the div element that has (overflow='scroll') and it's width and height are very close to the width and height of the window.
if you found more than one div like that then you need to deal with the deepest div in the DOM.
if you haven't found any div like that, then you deal with jQuery(window) instead.

Jquery Blur event on div scrolbar

I have a div with scroll bar.
Using Firefox when I click on scroll bar to drag it down to see the div list the blur event is fired and hides my div which I have set to hide when blur is fired.
How can I prevent the blur to fire when the scroll bar is used:
$("#mydiv").blur(function () {
$('#mydiv').fadeOut();
console.log("fadeout blur");
});
I display this div using:
$('#mydiv').fadeIn();
I want the div to hide when its not active but not hide when I try to click on the scroll bar.

May be this is what you are looking for
$(document).ready(function(){
$('#mydiv').fadeIn();
$("body").bind('click', function(ev) {
var myID = ev.target.id;
if (myID !== 'mydiv') {
$('#mydiv').fadeOut();
}
});
});
This will bind the click event with the body and also check the id of the element which triggers the click event. If it doesn't match the DIV, the div will be closed else the div will be always open.

You can do this one:
$(window).scroll(function() {
$('#mydiv').css('display','block');
});

var scrolling = false, scrollingTimeout, blurTimeout;
$(window).scroll(function () {
if (scrollingTimeout) {
clearTimeout(scrollingTimeout);
}
scrolling = true;
scrollingTimeout = setTimeout(function(){
scrollingTimeout = null;
scrolling = false;
}, 300);
});
$("#mydiv").blur(function () {
var that = $(this);
if (!scrolling) {
that.fadeOut();
} else {
if (blurTimeout) {
clearTimeout(blurTimeout);
}
blurTimeout = setTimeout(function () {
blurTimeout = null;
that.focus();
}, 600);
}
});
see jQuery scroll() detect when user stops scrolling and Can I declare logic on jQuery for the start and end of a scrolling event?

Seems your scroll bar is not formed within the div & clicking on it causes call to blur. Please check the css/style used for showing scroll for div is doing what you are expecting (forming scroll bar inside div), if this is the case then use a parent div over both(div & scroll bar) & use focusOut/blur event on parent div containing both.