We Keep Coding

Jquery: <a> link click preventDefault() not working?

I'm trying to prevent a link click from firing if accidentally touched while scrolling in mobile? I have never tried something like this before and am having trouble getting it to work right. I am testing this on a desktop for the time being.
My buttons are structured similar to:
<a href="http://www.google.com">
<div style="width:100%;height:80px;margin-bottom:50px;">test</div>
</a>
I am trying to use the preventDefault() function to override default click actions and check if a the page is being scrolled, or it the click was accidental before allowing it to work. The logic to check seems to work, however the links navigate on click no matter what i do. I assume this has something to do with the links behaviour being propogated to the child div, but am not sure.
Below is my script, the problem is in the last $('a').click(); function.
UPDATE:
I still need a better way to do it using just the $('a') selector if anyone knows how. Kind of a hack but, if i change the selector to $('a>div') and change the 'targetLink' to $(this).parent().attr('href') it seems to work, Is there a way to do this using $('a') only because some of my buttons have more children.
//Mobile accidental scroll click fix:---
//- prevent clicked link from executing if user scrolls after mousedown, until next mousedown.
//- prevent clicked link from executing if user is still scrolling and mouse is down(for slow scrolls)
$(document).ready(function(){
var self = this,
scrolling = false,
mouseDown = false,
scrollAfterPress = false;
scrollDelay = 1500,
linkConditionCheckDelay = 700;
$(window).scroll(function() {
self.scrolling = true;
console.log('scrolling:' + self.scrolling);
clearTimeout( $.data( this, "scrollCheck" ) );
$.data( this, "scrollCheck", setTimeout(function() {
self.scrolling = false;
console.log('scrolling:' + self.scrolling);
}, scrollDelay) );
});
$(document).mousedown(function(){
self.scrollAfterPress = false;
int00 = setInterval(function() { checkScrollAfterPress(); }, 100);//execute every 100ms (while mouse is down)
self.mouseDown = true;
console.log('mousedown:'+ self.mouseDown);
}).mouseup(function(){
clearInterval(int00);
self.mouseDown = false;
console.log('mousedown:'+ self.mouseDown);
});
function checkScrollAfterPress(){
if(self.scroll === true){
self.scrollAfterPress = true;
}
}
$('a').click(function(e){
//prevent default click event behaviour
var targetLink = $(this).attr('href');
console.log('clicked on:'+targetLink);
setTimeout(function() {
if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){
window.location.href = targetLink;
}
}, linkConditionCheckDelay); //add small delay to prevent immeditiate responses between mouse up and start of scroll.
e.stopPropagation();
e.preventDefault();
});
});

You can use return false or e.preventDefault
But when you click on that link why your adding window.location.href = targetLink;?? which will redirect the user to the given location.Same as link
Try my code below i have removed it.
$(document).ready(function(){
var self = this,
scrolling = false,
mouseDown = false,
scrollAfterPress = false;
scrollDelay = 1500,
linkConditionCheckDelay = 700;
$(window).scroll(function() {
self.scrolling = true;
console.log('scrolling:' + self.scrolling);
clearTimeout( $.data( this, "scrollCheck" ) );
$.data( this, "scrollCheck", setTimeout(function() {
self.scrolling = false;
console.log('scrolling:' + self.scrolling);
}, scrollDelay) );
});
$(document).mousedown(function(){
self.scrollAfterPress = false;
int00 = setInterval(function() { checkScrollAfterPress(); }, 100);//execute every 100ms (while mouse is down)
self.mouseDown = true;
console.log('mousedown:'+ self.mouseDown);
}).mouseup(function(){
clearInterval(int00);
self.mouseDown = false;
console.log('mousedown:'+ self.mouseDown);
});
function checkScrollAfterPress(){
if(self.scroll === true){
self.scrollAfterPress = true;
}
}
$('a').click(function(e){
//prevent default click event behaviour
var targetLink = $(this).attr('href');
console.log('clicked on:'+targetLink);
setTimeout(function() {
if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){
//window.location.href = targetLink;
}
}, linkConditionCheckDelay); //add small delay to prevent immeditiate responses between mouse up and start of scroll.
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com">
<div style="width:100%;height:80px;margin-bottom:50px;">test</div>
</a>

I will suggest another approach and use jQuery Mobile Events. Something like this:
*untested, but is the idea
// set global var 'locked'
var locked = false;
// locked var true while scrolling
jQuery(document).on('scrollstart', function() { locked = true; });
// locked var back to false when finish
jQuery(document).on('scrollstop', function() { locked = false; });
// bind 'tap' & 'click' events to 'a' tag
jQuery(document).on('tap click', 'a', function(event) {
// But before proceed, check locked var
if (locked) {
event.preventDefault;
return false;
} else {
// ok, proceed with the click and further events...
}
});
Docs/ref:
scrollstart event
scrollstop event
tap event
vclick event
.click()

Use in your $'a'.click(function(e){...} part return false; to prevent the default behavior.
In your case:
$('a').click(function(e){
var targetLink = $(this).attr('href');
console.log('clicked on:'+targetLink);
setTimeout(function() {
if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){
window.location.href = targetLink;
}
}, linkConditionCheckDelay);
return false;//Stops default behavior
});

Perhaps there is something I am missing, but I do not see why your code cannot be made as simple as the following:
$(document).ready(function () {
var is_scrolling = false;
var timeout = null;
$(window).scroll(function () {
is_scrolling = true;
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function () {
is_scrolling = false;
}, 1500);
});
$('a').click(function (e){
if (is_scrolling) {
e.preventDefault();
}
});
});

mouseenter bubbling when mousehover multiple times

how to prevent bubbling or "out of control" when user hover(mouseenter) multiple times . When user hover i'm using slideDown and slideUp for mouseleave and delay i set 250. I can only fix this if delay i set to 1 ms. Below is my script :
$("#nav li").mouseenter(function (e) {
e.stopPropagation();
if (!is_opened) {
var left = $(this).position().left;
$(this).children('div').css('left', '-' + left + 'px');
$(this).children('div').slideDown(delay, function () {
// Animation complete.
is_opened = true;
});
}
return false;
});
$("#nav li").mouseleave(function () {
if (is_opened) {
$(this).children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
} else {
setTimeout(function () {
if (is_opened) {
$('#nav li:first-child').children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
}
}, 1000);
}
return false;
});
You can check my JsFiddle here
Reproduce a Problem
Hover Catalogue multiple times and stop hover(but point your cursor at Catalogue), you will see the dropdown will hide but actually it should slide down.

I think your issue is caused by the is_opened flag and then the animation being run along side changing the left css property
If you change your mouse enter and leave js to the following
$("#nav li").each(function() {
//cache vars for better performance
var li = $(this);
var left = $(this).position().left;
var divs = li.children('div');
//change div left first so it only changes once
divs.css('left', '-' + left + 'px');
//do mouse enter and leave stuff
li.mouseenter(function (e) {
e.stopPropagation();
divs.stop(true, true).slideDown(delay);
});
li.mouseleave(function () {
divs.stop().slideUp(delay);
return false;
});
});
it should work: Example

jQuery - when clicking on elements too fast animations get buggy

I've been working on this jQuery effect heres the fiddle:
http://jsfiddle.net/abtPH/26/
Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.
I've tried using :animate
stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.
Here's my jQuery so far:
$('li').on('click', function (e) {
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').fadeIn('medium', function () {
active.toggleClass('active', 400).find('.outer').fadeOut('medium');
});
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
return false;
});

Use .finish() complete all the queued animation before beginning a new one
$('li').on('click', function(e){
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').finish().fadeIn('medium', function(){
active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
});
} else {
$(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
$(this).find('.outer').finish().slideToggle();
}
} else {
$(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
return false;
});
Demo: Fiddle

mouseenter and document click blinks first li element always

I just created a ribbon style menu the problem is in FireFox and Google Chrome browsers when you mouseenter and document click the first element in the list always blinks I dont have this problem in IE could someone check out my page and view the source and have a look at my jquery code and see if you can find whats causing this small glitch - the page is here
It must be todo with my mouseenter function I pass in this selected_slide(this)
mouseenter:
function select_slide(element) {
if($(element).hasClass('.nav_divider_before')) return
$('.nav_browse_ul li')..removeClass('active');
$(element).addClass('active');
if($(element).attr('data-id') != null) {
var current_content = $('#' + $(element).attr('data-id'));
selected_slide = current_content;
$('.ribbon_slides').show();
rotate_ribbon_slides(element);
if(isAnimating) return;
if(!isOpen) {
isAnimating = true;
$('.ribbon_slides').animate({'width': '+=' + (current_content.width() + 20).toString() })
$('.ribbon_panel').animate({'width': '+=' + (current_content.width() - 14).toString()}, function(){
isOpen = true;
isAnimating = false;
})
}
}
}
document click
$(document).click(function(e) {
/**/
if(!$(e.target).closest('.ribbonmenu').length) {
if($('.nav_browse_ul li').hasClass('active')) {
$('.nav_browse_ul li').removeClass('active');
}
$('.ribbon_slides').animate({'width': '-=' + ($(selected_slide).width() + 20).toString()});
$('.ribbon_panel').animate({'width': '-=' + $(selected_slide).width()}, function() {
$('.nav_browse_ul li.nav_divider_before').css('margin-right', '0px');
$('.ribbon_slides').hide();
});
isOpen = false;
}
})

Using arrow keys with jQuery scrollTo

I have successfully implemented the scrollTo jQuery plugin which scrolls to the next div with the class "new" when a link is clicked. However, I would also like to be able to use the arrow keys to scroll up and down to the next/previous divs of the same class.
I have looked all over the internet but have been unable to find out how to do this. I am very new to JS so very simple instructions would be appreciated!
Here is the relevant code:
<script type="text/javascript">
jQuery(function($){
$('<div id="next_arrow"></div>')
.prependTo("body") //append the Next arrow div to the bottom of the document
.click(function(){
scrollTop = $(window).scrollTop();
$('.new').each(function(i, h2){ // loop through article headings
h2top = $(h2).offset().top; // get article heading top
if (scrollTop < h2top) { // compare if document is below heading
$.scrollTo(h2, 800); // scroll to in .8 of a second
return false; // exit function
}
});
});
});
</script>
What do I need to add to this to make the arrow keys work?
Thanks,
Ted

You can use the keydown event listener to listen for keypresses. You can use this on <input> fields and the like. Because keydown events bubble up the DOM, you can use it on the document object to catch any keypress on the page:
$(function () {
$(document).keydown(function (evt) {
alert("Key pressed: " + evt.keyCode);
});
});
Each keypress has a code. If you use the code above in your web page, you'll see that the key code for the down arrow is 40. You can solo this out using an if or switch statement in the handler:
jQuery(function () {
$(document).keydown(function (evt) {
if (evt.keyCode == 40) { // down arrow
alert("You pressed down.");
}
});
});
Now you need to bind in the code that actually jumps to the next heading. I recommend abstracting the code out into a function so you can use it for both keypresses and clicks. Here is the function, together with a variant of your original code that uses it:
// Here is the function:
function scrollToNew () {
scrollTop = $(window).scrollTop();
$('.new').each(function(i, h2){ // loop through article headings
h2top = $(h2).offset().top; // get article heading top
if (scrollTop < h2top) { // compare if document is below heading
$.scrollTo(h2, 800); // scroll to in .8 of a second
return false; // exit function
}
});
}
// Here is your original code, modified to use the function:
jQuery(function () {
$("#next").click(scrollToNew);
});
Finally, you can add in the keypress code and call the function from there:
function scrollToNew () {
scrollTop = $(window).scrollTop();
$('.new').each(function(i, h2){ // loop through article headings
h2top = $(h2).offset().top; // get article heading top
if (scrollTop < h2top) { // compare if document is below heading
$.scrollTo(h2, 800); // scroll to in .8 of a second
return false; // exit function
}
});
}
jQuery(function () {
$("#next").click(scrollToNew);
$(document).keydown(function (evt) {
if (evt.keyCode == 40) { // down arrow
evt.preventDefault(); // prevents the usual scrolling behaviour
scrollToNew(); // scroll to the next new heading instead
}
});
});
Update: To scroll upwards, do two things. Change the keydown handler to:
$(document).keydown(function (evt) {
if (evt.keyCode == 40) { // down arrow
evt.preventDefault(); // prevents the usual scrolling behaviour
scrollToNew(); // scroll to the next new heading instead
} else if (evt.keyCode == 38) { // up arrow
evt.preventDefault();
scrollToLast();
}
}
and write a scrollToLast() function based off of scrollToNew() that finds the last new heading that isn't on the page:
function scrollToLast () {
scrollTop = $(window).scrollTop();
var scrollToThis = null;
// Find the last element with class 'new' that isn't on-screen:
$('.new').each(function(i, h2) {
h2top = $(h2).offset().top;
if (scrollTop > h2top) {
// This one's not on-screen - make a note and keep going:
scrollToThis = h2;
} else {
// This one's on-screen - the last one is the one we want:
return false;
}
});
// If we found an element in the loop above, scroll to it:
if(scrollToThis != null) {
$.scrollTo(scrollToThis, 800);
}
}

Just for giving more idea, working with arrays.
var panel_arr = new Array();
$(document).ready(function(e) {
$('.parallax-panel-wrapper').each(function(i, element){
panel_arr.push( $(this).attr("id") );
});
var current_parallax_panel_no = 0;
$(document).keydown(function (evt) {
if (evt.keyCode == 40) { // down arrow
evt.preventDefault(); // prevents the usual scrolling behaviour
if(current_parallax_panel_no < (panel_arr.length-1)) current_parallax_panel_no++;
scrollByArrowKeys(1);
} else if (evt.keyCode == 38) { // up arrow
evt.preventDefault(); // prevents the usual scrolling behaviour
if(current_parallax_panel_no >= 1) current_parallax_panel_no--;
scrollByArrowKeys(0);
}
});
function scrollByArrowKeys(add_more){
scrollToThis = (($("#" + panel_arr[current_parallax_panel_no]).offset().top) + add_more ; // get element top
$.scrollTo(scrollToThis, 800);
}
});

You need to capture the keypress event and decide which keycode was pressed
$(document).keypress(function(e) {
switch(e.keyCode) {
case 37:
//left arrow pressed
break;
case 39:
//right arrow pressed
break;
}
});