We Keep Coding

How to set an event listener which closes the menu

I have the following code:
<script type="text/discourse-plugin" version="0.8.13">
$(document).ready(function() {
if ($('#daily-check-in').length) {
$('#daily-check-in').attr("href", settings.daily_check_in_url);
$('#daily-check-in').text(settings.daily_check_in_text);
}
if ($('#current-user').length) {
var image_bell = 'https://cdn.ramseysolutions.net/church/fpu/images/icon-bell.svg';
$('#current-user').find('img')[0].setAttribute('src', image_bell);
}
setTimeout(function() {
$('#js_fpu_global_nav > ul').css('transition', 'margin 0.4s').delay(1000);
}, 2000);
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
$(document).on("click", function(e) {
if ($(e.target).is("#js_fpu_global_nav > ul") === false) {
$('#js_fpu_global_nav > ul').removeClass('open-top-nav');
}
});
});
</script>
The important part is:
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
For now, when I move between pages in dynamic way, it keeps the menu open. I would like to close it every time user clicked on some other place of the page (not in the menu box) or if he moved to a different page (even if its from one of the links from this menu page).
I'm familiar with Vanilla JS addEventListener but I'm not sure how to use it here or if its the right approach. The desired output is to close the menu every time user clicks on something else. Other code could be found on Github (link).

Navbar change on scroll and on window load or resize

I have this issue that I'm not being able to work correctly.
I have a navbar that must change on scroll(this part works fine) but it must also change when window/viewport is < 991px.
It actually does work, but I must scroll to apply the effect.
Here's my code:
$(document).ready(function()
{
var $navbar = $('.navbar');
// ----------
$(function()
{
$(window).scroll(function()
{
if(($(window).scrollTop() > 60 && $(window).on('load resize').width() > 992) || ($(window).on('load resize').width() < 992))
{
$navbar.addClass("compressed");
}
else
{
$navbar.removeClass("compressed");
}
});
});
});
If I shrink the broswer, nothing happens. At the first scroll, it works correctly. How should I trigger it when load or resize the window?
Thanks!

Just replace this:
$(window).scroll(function() {...});
with this:
$(window).on("load scroll resize", function() {...});
That will result in the function being called on any of the listed events.

jQuery cant check when window is scrolled

I am using a fullpage.js plugin and would like to transition the menu from the footer to the header once the user scrolls past the first slide.
On this Page:
However the full screen functionality is not allowing me to check when there is a scroll event.
I have written this:
$(window).scroll(function(){
if ($(window).scrollTop() > $('.topDiv').position().top) {
console.log('div hits top!');
}
});
To check if the top grey div is at the top of the window, but it does not work.
Even:
$(window).scroll(function(){ console.log('scrolling'); });
is not working.

I think the best way to implement the desired feature is to use the callbackd provided by fullPage.js instead of relying to $(window).scroll()
You can have a custom function called on each of this callback:
onLeave: function(index, nextIndex, direction){}
afterLoad: function(anchorLink, index){}
Then you can check the index, and nextIndex value to perform the desired logic.
Hope that helps.

May be this will help
$('elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});

Animate on scroll function mess up on using touch countrols of mobile view

Animation on scroll function is working fine on desktop view but it mess up the scrolling and scroll to random sections when I switch to mobile view and uses touch to scroll the screen. This is my animate on scroll function :
$(window).scroll(function() {
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
});
If I use the windows on scroll function, it mess up the mobile view. Please help to solve this issue so that animate on scroll can work on both mobile view with touch scroll and desktop view without messing the scroll.
For more Information these are the other scroll events:
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 54)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '#mainNav',
offset: 80
});
// Closes the Responsive Menu on Menu Item Click
$('#navbarResponsive>ul>li>a').click(function() {
$('#navbarResponsive').collapse('hide');
});
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
});
})(jQuery); // End of use strict

EDIT
Since this is the same function for both events...
Maybe calling it on the same handler and use an or to trigger only once will do the trick.
$(window).on("touchmove scroll", function(e) {
// Do the function on ONLY ONE of the two event.
if(e.type=="touchmove" || e.type=="scroll"){
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').not(".triggered").addClass("triggered").animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
}
});
EDIT
I've added a subtility using a triggered class.
.not(".triggered").addClass("triggered")
One the first iteration of the .each() function, none of the skillbar-bar has the trigered class.
So let's add it! Then trigger the animation.
On the second and all next iterations, the triggered class removes all skillbar-bar which already have the triggered class out of the collection.
This prevent the animate() function to be fired more than once on each skillbar-bar.
I think this was the issue.
Let me know if it works !

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);
});