We Keep Coding

Make JQuery event available after a certain amount of time

I'm trying to make one of those annoying popups when leaving your browser. However, I want the event to be available after a certain amount of time. The event should be allowed to trigger after a certain amount of time. I've seen stuff such as delay and setTimeout, but I have no idea how to implement it on my code.
JavaScript:
$(document).on("mouseleave", function (event) {
if (event.pageY < 0) {
$(".leavemodal").fadeIn(600);
}
});

This is not tested but maybe you can try this.
$(document).ready(function() {
canRun = false;
waitPeriod = 1000;// waiting time
setTimeout(function() { canRun = true; }, waitPeriod);
$(document).on("mouseleave", function (event) {
if (!canRun) {
return false;
}
if (event.pageY < 0) {
$(".leavemodal").fadeIn(600);
}
});
});

If you want to use setTimeout() you can do something like this. Click event will be allowed 2 seconds after you mouseleave the element.
var click = false;
$('.el').mouseleave(function() {
if (click == false) {
setTimeout(function() {
console.log('You can click now')
click = true;
$(this).click(function() {
console.log('click')
})
}, 2000)
}
})
.el {
width: 200px;
height: 200px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el"></div>

jQuery mouseenter functions - changing colour if colour isn't already

So, I am not that fluent with jQuery and I have written a bit of code in it that doesn't look as if it works. Here is my code;
$(document).ready(function() {
$("#loginSelector").mouseenter(function() {
if $("#loginSelector").style.backgroundColor != "#3064CA" {
$("#loginSelector").style.backgroundColor = "#3064CA";
};
});
$("#loginSelector").mouseleave(function() {
if $("#loginSelector").style.backgroundColor != "#5990DE" {
$("#loginSelector").style.backgroundColor = "#5990DE";
};
});
$("#signupSelector").mouseenter(function() {
if $("#signupSelector").style.backgroundColor != "#3064CA" {
$("#signupSelector").style.backgroundColor = "#3064CA";
};
});
$("#signupSelector").mouseleave(function() {
if $("#signupSelector").style.backgroundColor != "#5990DE" {
$("#signupSelector").style.backgroundColor = "#5990DE";
};
});
});
All I want the code to do is check to see if the button is not a certain colour, and if it isn't that colour and it is hovered on, it changes to another colour.

Try this and follow the same for the rest of the blocks.
$("#loginSelector").mouseenter(function() { //when hovered on
var desiredColor = "#3064CA"; //define the desired color
if ( $(this).css('color') === desiredColor) return; //if the element's color = the desired color, don't do anything. stop the execution
$(this).css('color', desiredColor); //else set the desired color
});

Assuming the elements initially have the color #5990DE, I'd simply add the following css:
#loginSelector, #signupSelector{
background: #5990DE;
}
#loginSelector:hover, #signupSelector:hover{
background: #3064CA;
}
Or if otherwise,
css:
.onHover{
background: #3064CA;
}
.onLeave{
background: #5990DE;
}
script:
$(document).on('mouseenter', 'loginSelector , #signupSelector', function(){
$(this).addClass('onHover').removeClass('onLeave');
});
$(document).on('mouseleave', '#loginSelector , #signupSelector', function(){
$(this).addClass('onLeave').removeClass('onHover');
});

Fancy Box 2 - Window jumping to top on click

This is my first time implementing FancyBox in a project for me. I have separated the image from the link. So when you hover over the image the link to view the large image appears. Everything there works fine. My issues is the window keeps jumping/scrolling to the top when the link is clicked. I have used jquery to disable the default action of it by using preventDefault but that didn't solve my issue. Any suggestions? You can see what I'm trying to accomplish at www.labpixls.com
I need to resolve this soon. I am creating a wordpress theme I plan on giving to the wp community.

The problem is that fancyBox changes the overflow value of the body in order to hide the browser scrollbars. This can actually be done with a helper in Fancybox 2.
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});

I realize this question has been asked a while ago, but I think I have found a good solution for it.
The problem is that fancy box changes the overflow value of the body in order to hide the browser scrollbars.
As Thorn points out, we can stop fancy box from doing this by adding the following parameters:
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
But, now we can scroll the main page while looking at our fancy box window. It is better than jumping to the top of the page, but it is probably not what we really want.
We can prevent scrolling the right way by adding the next parameters:
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
},
'beforeLoad': function(){
disable_scroll();
},
'afterClose': function(){
enable_scroll();
}
});
And add these functions from galambalaz. See: How to disable scrolling temporarily?
var keys = [37, 38, 39, 40];
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}

jQuery mousemove fade in/out element cancel fade on element mouseover

I have written this code which fades out the navigation menu to 50% opacity when the mouse is dormant:
var hidden, fadenav, dimNav = function () {
hidden = true;
$('#main-nav').animate({'opacity': 0.5}, 200);
};
$('document').ready(function () {
dimNav();
$('body').on('mousemove', function (e) {
if (hidden) {
$('#main-nav').animate({'opacity': 1}, 200);
hidden = false;
}
if (fadenav !== null) {
clearTimeout(fadenav);
}
fadenav = setTimeout(dimNav, 500);
});
});
What I want to do is make it so that it doesn't fade when the user has their mouse over the #main-nav element.
I have tried this to no avail:
$('#main-nav').on('mouseover mouseout', function (e) {
if (e.type === 'mouseover') {
clearTimeout(fadenav);
} else {
fadenav = setTimeout(dimNav, 500);
}
});
does anyone have any idea how to do this?

Well this certainly is not less code but it may be a bit more straight forward:
​$('#main-nav').on('mousemove',function(e){
if(hidden){
$('#main-nav').animate({'opacity': 1}, 200);
hidden = false;
}
clearTimeout(fadenav);
e.stopPropagation();
});
add that instead of:
$('#main-nav').on('mouseover mouseout', function (e) {
if (e.type === 'mouseover') {
clearTimeout(fadenav);
} else {
fadenav = setTimeout(dimNav, 500);
}
});
you don't have to play with classes at all.
Here is my working sample: http://jsfiddle.net/TbwSA/1
EDIT: I realized that you don't even need the mouseout event.

I discovered the solution myself and thought it might be worth other people knowing:
first, you need to do something similar to this:
$('#main-nav').on('mouseover', function (e) {
if (!$('#main-nav').hasClass('hovered')) {
$('#main-nav').addClass('hovered');
}
}).on('mouseout', function () {
if ($('#main-nav').hasClass('hovered')) {
$('#main-nav').removeClass('hovered');
}
});
and then change the dimNav() function to this:
dimNav = function() {
if (!$('#main-nav').hasClass('hovered')) {
hidden = true;
$('#main-nav').css('opacity', '0.5');
}
};
If anyone can think of a better method than this, please contribute!

Catch scrolling event on overflow:hidden element

Any insights on how to catch a scrolling event on a element that has overflow:hidden? I would like to scroll in a column without showing a scrollbar to the user.

This is actually a somewhat indepth process. What I do is set global flags when users mouse enters and leaves the element that you want to scroll. Then, on the mousewheel event for the body I check to see if the MOUSE_OVER flag is true, then stop propagation of the event. This is so the main body doesnt scroll in case your entire page has overflow.
Note that with overflow hidden, the default scrolling ability is lost so you must create it yourself. To do this you can set a mousewheel listener on your div in question and use the event.wheelDelta property to check whether the user is scrolling up or down. This value is different according to browser, but it is generally negative if scrolling down and positive if scrolling up. You can then change position of your div accordingly.
This code is hacked up quickly but it would essentially look like this...
var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
if(MOUSE_OVER){
if(e.preventDefault) { e.preventDefault(); }
e.returnValue = false;
return false;
}
});
$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });
$('#myDiv').bind('mousewheel', function(e){
var delta = e.wheelDelta;
if(delta > 0){
//go up
}
else{
//go down
}
});

I use overflow:scroll, but also Absolutely position a div over the scroll bar in order to hide it.

$("body").css("overflow", "hidden")
$(document).bind('mousewheel', function(evt) {
var delta = evt.originalEvent.wheelDelta
console.log(delta)
})
works for me. adapted from How do I get the wheelDelta property?

I edited #anson s answer to Vanilla Javascript since it may be useful for others. Also note that "mousewheel" event is deprecated. So my code uses "wheel" instead. Next to that I added arrow functions for practical access the to "this".
fixScrollBehavior(elem) {
elem.addEventListener('scroll', (e) => {
console.log('scrolling');
});
let MOUSE_OVER = false;
elem.addEventListener('wheel', (e) => {
if (MOUSE_OVER) {
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
return false;
}
});
elem.addEventListener('mouseenter', () => {
MOUSE_OVER = true;
});
elem.addEventListener('mouseleave', () => {
MOUSE_OVER = false;
});
elem.addEventListener('wheel', (e) => {
let delta = e.wheelDelta;
if (delta > 0) {
//go up
} else {
//go down
}
});
}
Note that this does not fix the mobile touch-"scroll"s.

$("div").on('wheel', function (e) {
if (e.originalEvent.deltaY < 0) {
console.log("Scroll up");
} else {
console.log("Scroll down");
}
});
This did the trick for me.
JSFiddle
StackFiddle:
$("div").on('wheel', function(e) {
if (e.originalEvent.deltaY < 0) {
console.log("Scroll up");
} else {
console.log("Scroll down");
}
});
div {
height: 50px;
width: 300px;
background-color: black;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

I am late, but I think I have a better answer.
Style your container as overflow: overlay, this will free up space of scrollbar, then style scrollbar or hide it or make its handle height/width 0,
Then you should get scroll events also.
Note : styling the scrollbar is not supported in all web browsers.