Develop Reference

click() function is not being fired if mouse is moved at all

I'm writing a small script that enables custom hotkeys for a web app I use (https://notion.so). I'm essentially watching for a combination of hotkeys and clicking a particular element using the code below.
The issue i'm having, is the click function only fires when I manually click into the body of the page. If I move my mouse even one bit, it seems focus is lost and therefore the click no longer functions.
I'm using Chrome.
(function() {
'use strict';
var newButton = '#notion-app > div > div.notion-cursor-listener > div.notion-frame > div.notion-scroller.vertical.horizontal > div:nth-child(2) > div > div > div:nth-child(2) > div:nth-child(6) > div';
var searchButton = '#notion-app > div > div.notion-cursor-listener > div.notion-frame > div.notion-scroller.vertical.horizontal > div:nth-child(2) > div > div > div:nth-child(2) > div:nth-child(4) > div';
window.addEventListener("keydown", keysPressed, false);
window.addEventListener("keyup", keysReleased, false);
var keys = [];
function keysPressed(e) {
// store an entry for every key pressed
keys[e.keyCode] = true;
// Cmd + Alt + N
if (keys[17] && keys[18] && keys[78]) {
// do something
document.querySelector(newButton).click();
// prevent default browser behavior
e.preventDefault();
}
// Cmd + Alt + S
if (keys[17] && keys[18] && keys[83]) {
// do something
document.querySelector(searchButton).click();
// prevent default browser behavior
e.preventDefault();
}
}
function keysReleased(e) {
// mark keys that were released
keys[e.keyCode] = false;
}
})();

show div after scrolling in mobile devices

i want show a div after scrolling 150px just in mobile devices.
this is my code but it doesnt work :
$(document).load($(window).bind("resize", checkPosition));
var phonebox = $(".phonebox");
function checkPosition()
{
if($(window).width() < 460)
{
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
phonebox.show();
}
else {
phonebox.hide();
}
});
}
}
can somebody help me to fix this problem.
thank you

You should not use bind but on instead. And use both resize and load in the same function.
bind is an old version of new added on see here > bind vs on
See jsfiddle
or snippet below ( i used 700 for example purposes only. so it works in snippet )
$(window).on("load resize", checkPosition)
var phonebox = $(".phonebox");
function checkPosition() {
if ($(window).width() < 700) {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(phonebox).show();
} else {
$(phonebox).hide();
}
});
}
}
.phonebox {
top:200px;
height:300px;
width:100px;
position:absolute;
background:red;
display:none;
}
.for_scroll {
height:1000px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phonebox">
</div>
<div class="for_scroll">
</div>

Please try this one,
$(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll >= 150){
phonebox.show();
}else{
phonebox.hide();
}
});
});

you can try this one as show() and hide() functions are not supported by some of the browsers so this could be a reason.
To hide:
$(".phonebox").css("display", "none");
To show:
$(".phonebox").css("display", "block");

OnClick makes scrollTop equal zero for a moment

I've added some simple animated scrolling to my website, however there's a little quirk with this in jQuery. I slideDown() a .nav-fixed navigation bar whenever the website's window top is under a static .nav navigation from the top of the website. Everything's fine except that when you click on any link (I assume any link with jQuery onClick animated scroll function) the .nav-fixed hides momentarily and shows up again after the website scrolls. I'm console logging a message Should hide the nav whenever the the top static .nav is in the window view and noticed that even when we're on the bottom of the page and click on any onclick jquery function link on the website the message gets logged once as if the static navigation was in the window view.
Does anyone have any ideas how to resolve that?
Here's the mentioned website: http://www.mmsmsy.com
Here's the code:
const addClickToNav = (element) => {
$(window.opera ? 'html' : 'html, body').animate({scrollTop: $(element).offset().top - 50}, 1000);
}
$('.nav-link-top').on('click', () => $(window.opera ? 'html' : 'html, body').animate({scrollTop: 0}, 1000));
$('.link-start').on('click', () => addClickToNav('.about'));
$('.nav-link-skills').on('click', () => addClickToNav('.skills'));
$('.nav-link-portfolio').on('click', () => addClickToNav('.portfolio'));
$('.nav-link-contact').on('click', () => addClickToNav('.contact'));
$(window).scroll(function() {
if ($(this).scrollTop() > $('.nav').offset().top + $('.nav').height() + 50 && $('.nav-fixed').css('display') == 'none') {
$('.nav-fixed')
.css('display', 'flex')
.hide()
.slideDown();
}
if ($(this).scrollTop() < $('.nav').offset().top + $('.nav').height() + 50) {
console.log("Should hide the nav");
$('.nav-fixed').slideUp();
}
});

did u try like this :
$(window).scroll(function() {
if ($(this).scrollTop() > $('.nav').offset().top + $('.nav').height() + 50 && $('.nav-fixed').css('display') == 'none') {
$('.nav-fixed')
.css('display', 'flex')
.hide()
.slideDown();
}
else if ($(this).scrollTop() < $('.nav').offset().top + $('.nav').height() + 50)
{
console.log("Should hide the nav");
$('.nav-fixed').slideUp();
}
});

ol is hiding without entering the if condition

I have this ol with lis into it. On the click of the ol I want the ol to be hidden, but if clicked on the li it should not hide. And this should happen when the screen size is below 768px. Below is my code
jQuery('ol.main-nav').click(function () {
if (jQuery(window).width() <= 768) {
jQuery('ol.main-nav > li ').click(function (event) {
event.stopPropagation();
})
jQuery('ol.main-nav').hide(100);
}
})
Actually, my code is hiding the ol.nav-main. While using the debugger, it doesn't go into the if condition, but still somehow executes the piece of code.

Try this way:
jQuery('ol.main-nav').click(function () {
if (jQuery(window).width() <= 768) {
jQuery('ol.main-nav').hide(100);
}
});
jQuery('ol.main-nav > li ').click(function (event) {
if (jQuery(window).width() <= 768) {
event.stopPropagation();
}
})

You almost never want to hook up an event handler inside another event handler.
You have two choices for what you're describing:
Check when the event occurs to see if it travelled through an li:
jQuery('ol.main-nav').click(function(event) {
var t;
if (jQuery(window).width() <= 768) {
for (t = event.target; t != this; t = t.parentNode) {
if (t.tagName == "LI") {
return; // The click came through an LI
}
}
jQuery('ol.main-nav').hide(100);
}
});
or
Add a handler to the lis that stops propagation. It's much simpler:
jQuery('ol.main-nav').click(function () {
if (jQuery(window).width() <= 768) {
jQuery('ol.main-nav').hide(100);
}
});
jQuery('ol.main-nav > li').click(function(event) {
event.stopPropagation(); // If you like check `width` here too
});

Do a single click event, test if the clicked element is a list item or if the clicked element is a child of a list item:
jQuery('ol.main-nav').click(function (e) {
if (jQuery(window).width() <= 768 && jQuery(e.target).closest('ol.main-nav > li').length) {
e.preventDefault();
} else {
jQuery('ol.main-nav').hide(100);
}
});
demo:https://jsfiddle.net/Lm73y2bL/

hide sticky navigation when browser resize

I have create sticky navigation for my project and this sticky navigation must show only on desktop mininum 980px and hide below 980px on the fly when I resize my browser.
here is my code
if ($(window).width() > 980) {
$('.stickynav a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 132) {
$('.stickynav').fadeIn(250);
}
else if(scrolltop <= 210) {
$('.stickynav').fadeOut(250);
}
});
}
I create in jsfiddle
how can I resolve this?

You can do this in css with media queries.
#media only screen and (max-width: 979px) {
.stickynav{
display: none;
}
}
I've updated your fiddle: http://jsfiddle.net/cXH5g/2/
Media queries allows you to define css for specific devices/screen size.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

the best way to do this is using CSS3 media queries.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
but if you want to do it with jquery:
$(function(){
if ($(window).width() > 980) {
alert($(window).width());
$('.stickynav').on('click', function(e) {
e.preventDefault();
});
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 132) {
$('.stickynav').fadeIn(250);
}
else if(scrolltop <= 210) {
$('.stickynav').fadeOut(250);
}
});
}
});
I put an alert to see when you code should work.
check this fiddle