Jquery multiple actions with same key based on position - javascript

I would like users to scroll down a list with the arrow down key. This is implemented.
Users should be able to load the next list when they hit down on the last item. This is also implemented.
I don't want users to be able to hold the down key from the top of one list and never let go, loading more and more lists at the bottom.
Is there a way for me to "push" a keyup event to the client, saying that once they've reached the bottom of a list they must manually push the down arrow key again?
Edit: Adding some code, in case it helps.
$(document).keydown(function(e) {
switch(e.which) {
case 40:
var lineID = Number($('.active').data('lineid'));
if(lineID != Number($('body > span').last().data('lineid'))) {
//update lineID to next number and activate next line
}
if(lineID == Number($('body > span').last().data('lineid'))) {
//update location to next list article
}
break;
default: return;
}
e.preventDefault();
});
What I need to do now, is somehow prevent a user from holding the down key and loading all lists after reaching the bottom. I would ideally think that "pushing" a key up event somehow would be satisfactory. As that would allow the user to scroll quickly to the bottom but then have to hit "down" again to load the next list, thereby making it easy to reach the bottom and prevent loading the next list by accident.

Use this code for that
// A variable to check when user is at the end of page
var endOfPage = false;
// keydown handler
$(document).keydown(function(e){
if(endOfPage==false){
// Do our thing
switch(e.keyCode){
case 40: // down
console.log('down');
break;
case 38: // up
console.log('up');
break;
}
}
});
$(window).on('scroll',function(){
if($(window).scrollTop() + $(window).height() == $(document).height()) {
//user is at the bottom of page
endOfPage = true;
}
});
// keyup handler
$(document).keyup(function(e){
endOfPage = false;
});

Related

How to switch cases by scrolling

How can I switch case by scrolling, and make it so that whenever you scroll up it changes cases one direction, and when you scroll down it changes the cases in the other direction? I hope that makes sense.
Here is how I did what I want to do using hotkeys, but this time I don't want to use hotkeys, I want to use the scrolling feature (I don't mean clicking on the scroll)
document.addEventListener('keydown', function (e) {
if (ws) {
switch (e.keyCode) {
// T
case 84:
if (player.items[ITEM_TYPE.WINDMAIL]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.WINDMAIL].id + ",null]");
break;
// G
case 71:
e.stopPropagation();
if (player.items[ITEM_TYPE.SPIKES]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.SPIKES].id + ",null]");
break;
// Z
case 90:
e.stopPropagation();
if (player.items[ITEM_TYPE.EXTRAS]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.TURRET].id + ",null]");
break;
// F
case 70:
e.stopPropagation();
if (player.items[ITEM_TYPE.PITTRAP]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.PITTRAP].id + ",null]");
break;
}
}
}, true);
and that works fine, but I want to make it so that is possible to do the same thing but my scrolling instead!
Can you help?
You can listen for scroll events using addEventListener (documented here: https://developer.mozilla.org/en-US/docs/Web/Events/scroll)
for example
window.addEventListener('scroll', function(e) {
// do something
});
or to capture scroll events on smaller box within your ui
document.querySelector('.my-scrollable-box').addEventListener('scroll', function(e) {
// do something
});
once you've done that you can keep track of the last know scroll position to determine if they scrolled up or down
var last_known_scroll_position = 0;
window.addEventListener('scroll', function(e) {
if (window.scrollY > last_known_scroll_position) {
// the user scrolled down
} else {
// the user scrolled up
}
last_known_scroll_position = window.scrollY;
}

Keyboard navigation for cbp full width slider

Had tried this JS-FIDDLE But did not succeed. Can some one help out, How to enable the keyboard navigation for this slider.
_toggleNavControls : function() {
// if the current item is the first one in the list, the left arrow is not shown
// if the current item is the last one in the list, the right arrow is not shown
switch( this.current ) {
case 0 : this.$navNext.show(); this.$navPrev.hide(); break;
case this.itemsCount - 1 : this.$navNext.hide(); this.$navPrev.show(); break;
default : this.$navNext.show(); this.$navPrev.show(); break;
}
// highlight navigation dot
this.$navDots.eq( this.old ).removeClass( 'cbp-fwcurrent' ).end().eq( this.current ).addClass( 'cbp-fwcurrent' );
}
Anyhelp would be greatly appreciated.
see demo
You need to bind a keydown event on document in _initEvents functions and watch the left and right arrow keys for being pressed:
$(document).keydown(keyHandler);
function keyHandler(event) {
if (event.keyCode === 39) {
if(self.$navNext.is(":visible")) self.$navNext.trigger("click.cbpFWSlider");
return false;
} else if (event.keyCode === 37) {
if(self.$navPrev.is(":visible")) self.$navPrev.trigger("click.cbpFWSlider");
return false;
}
};
P.S. In Jsfiddle do not forget to put focus in the preview area by clicking on it - the right bottom part, so the keys are being watched.

How do i target or focus drop-down li which is active when a input is focused

JQUERY
$(".share-drop .dropdown-notif").keydown(function (e) {
e.preventDefault();
$(this).parents('.share').find('.share-drop .dropdown-notif').show();
if ($(this).val() == '') {
$('.share-drop .dropdown-notif').hide();
}
if (e.which == 40) {
var next = $('.selected').removeClass('selected').next('li');
next = next.length > 0 ? next : $('.focus li:eq(0)');
next.addClass('selected').children('a').focus();
} else if (e.which == 38) {
var prev = $('.selected').removeClass('selected').prev('li');
prev = prev.length > 0 ? prev : $('.focus li').last();
prev.addClass('selected').children('a').focus();
}
});
I have a drop-down option which will trigger on a keyup function of input text. I need to select those options using my up and down arrow keys I have been trying this using keydown where i couldn't able to move further. Can anyone help me with this. Thanks in advance.
Here is the DEMO
I made a couple of changes to your fiddle and it started working for the up and down key after you do some typing; eg type 'te' then press up and down:
http://jsfiddle.net/c9U3s/2/
The keydown event binding needs to be on the input element itself, and you need to allow preventDefault:
$(".input-hold input").keydown(function (e) {
//e.preventDefault();
and you need an initial selected class somewhere, for your logic to then sucessfully kick in, so I added this to the HTML:
<li class="selected"><a>testmail#test.com</a>
I think there's a couple more bug to step through, (eg what happens when you reach the end of the list with the down key?), but this will hopefully get you started.
This shows you how you can control the scrollTop of the dropdown, so you can scroll to view selected elements:
http://jsfiddle.net/c9U3s/3/
but again, some work needed to refine it to be truly nice.

Disable keydown event defined by javascript in textarea and restore default behavior

I am using reveal.js by Hakim El Hattab to make presentation slides. I have added textarea to a slide. Within the textarea I want to prevent javascript functions from being called when certain keys are pressed, and restore the default behavior of typing. For example, as you can see from the lines of code below from reveal.js, when p is pressed, a function navigatePrev() is called. I want to prevent this function from being called and simply want p to be typed in the textarea when p is pressed. How can I do this using jquery? I tried adding the following script but that does not help.
<script>
$(document).keydown(function (e) {
if ($(e.target).is('textarea')) {
e.stopPropagation();
}
})
</script>
The functions defined in the reveal.js are still called. Using return false in place of e.stopPropagation() does not help either. I am also including the above jQuery lines at the very end on my page (after reveal.js is called).
Thank you.
Relevant lines from reveal.js
function onDocumentKeyDown(event) {
// FFT: Use document.querySelector( ':focus' ) === null
// instead of checking contentEditable?
// Disregard the event if the target is editable or a
// modifier is present
if (event.target.contentEditable != 'inherit' || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return;
var triggered = false;
switch (event.keyCode) {
// p, page up
case 80: case 33: navigatePrev(); triggered = true; break;
// n, page down
case 78: case 34: navigateNext(); triggered = true; break;
// h, left
case 72: case 37: navigateLeft(); triggered = true; break;
// l, right
case 76: case 39: navigateRight(); triggered = true; break;
// k, up
case 75: case 38: navigateUp(); triggered = true; break;
// j, down
case 74: case 40: navigateDown(); triggered = true; break;
// home
case 36: navigateTo(0); triggered = true; break;
// end
case 35: navigateTo(Number.MAX_VALUE); triggered = true; break;
// space
case 32: overviewIsActive() ? deactivateOverview() : navigateNext(); triggered = true; break;
// return
case 13: if (overviewIsActive()) { deactivateOverview(); triggered = true; } break;
}
}
The problem with your keydown event binding is that it binds to the document, which receives the event LAST (once it's too late to prevent the event from bubbling further up the DOM tree).
Instead, try binding the event directly to the textarea every time it is created:
// create text area & append to slide container
createTextAreaOnSlideContainer();
// bind an event handler to the element
$('textarea.slideTextArea').keydown( function(e) {
e.stopPropagation();
});
This will stop the event before it bubbles (propagates) up to the document that is listening for a key to be pressed
You can do this:
$(document).keydown(function(e){
if(!$('#textarea').is(':focus')){
yourfunction();
}
});
You just simply add an if statement inside and if the textarea is not focused then you call the function.

how to add dbclick() on right click in jquery

Hi I want to have a dblclick() on the right click as the google maps have to zoom in and zoom out. Is there any way to do that. I have written the dblclick but now its working with only left click. Any pointers on how to do this. Here is my code
$("div#demo1").dblclick(function(e) {
//alert(e.getElementById());
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("Left Mouse Button was clicked on demo1 div!");
$("div.window").animate({
'height':'+=20', 'width':'+=20'
},0,function(){
jsPlumb.repaintEverything();
jsPlumb.repaintEverything();
});
// Left mouse button was clicked (all browsers)
}
else if( (!$.browser.msie && e.button == 2) || ($.browser.msie && e.button == 3) ) {
alert("right click double");
}
});
There is another way you could detect a double right-click that does not involve fiddling with timers or keeping track of click counts manually. Using the .detail property of the event object in a mouseup or mousedown event. .detail holds the click count which will tell you how many clicks have happened recently. If .detail === 2 it was a double-click.
// suppress the right-click menu
$('#target').on('contextmenu', function (evt) {
evt.preventDefault();
});
$('#target').mouseup(function (evt) {
if (evt.which === 3) { // right-click
/* if you wanted to be less strict about what
counts as a double click you could use
evt.originalEvent.detail > 1 instead */
if (evt.originalEvent.detail === 2) {
$(this).text('Double right-click');
} else if (evt.originalEvent.detail === 1) {
$(this).text('Single right-click');
}
}
});
You might notice that I am using evt.originalEvent.detail to access the property instead of just .detail. This is because jQuery provides it's own version of the event object which does not include .detail, but you can access the original event object that the browser returned via .originalEvent. If you were using pure JavaScript instead of jQuery you would just use evt.detail.
Here's a working example.
There is no real way to do it, you can emulate it by taking the default timer for double clicks which IIRC is 300ms:
function makeDoubleRightClickHandler( handler ) {
var timeout = 0, clicked = false;
return function(e) {
e.preventDefault();
if( clicked ) {
clearTimeout(timeout);
clicked = false;
return handler.apply( this, arguments );
}
else {
clicked = true;
timeout = setTimeout( function() {
clicked = false;
}, 300 );
}
};
}
$(document).contextmenu( makeDoubleRightClickHandler( function(e) {
console.log("double right click" );
}));
http://jsfiddle.net/5kvFG/2/
Because the right-click has meaning to the user agent that is outside the purview of javascript (the context menu), you're going to have to do some dancing around.
First, you should disable the context menu on the target element:
document.getElementById('demo1').oncontextmenu = function() {
return false;
};
Now, when we right click, there won't be the context menu messing up the second click.
Next, understand that "double-click right" does not, generally speaking, exist. Even though you can bind the dblclick event, that isn't a generic event. "Double-click" is, by definition, double-clicking with the left mouse button.
So, we'll have to use the mousedown event, check to see how many times the right has been clicked, and react after two. I created a small helper function that keeps track of the click count and resets the state after a short time-frame.
var RightClick = {
'sensitivity':350,
'count':0,
'timer':false,
'active':function () {
this.count++;
this.timer = setTimeout(
this.endCountdown.bind(this),
this.sensitivity
);
},
'endCountdown': function () {
this.count = 0;
this.timer = false;
}
};
$("div#demo1").mousedown(function(e) {
if(e.which == 3) {
RightClick.active();
if (RightClick.count == 2)
alert("right click double");
}
});
Try it here: http://jsfiddle.net/94L7z/
You can adjust the sensitivity rate, allowing for shorter or longer double-clicks, depending on your preference.
Documentation
element.onContextMenu on MDN - https://developer.mozilla.org/en-US/docs/DOM/window.oncontextmenu
element.onMouseDown on MDN - https://developer.mozilla.org/en-US/docs/DOM/element.onmousedown
window.setTimeout on MDN - https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
jQuery event.which - http://api.jquery.com/event.which/
"Javascript Madness: Mouse Events" on UnixPapa.com, an article showing some tests related to mouse events and the left/right buttons - http://unixpapa.com/js/mouse.html
The problem is the concept of double clicking is only relevant to the left mouse button as far as JS is concerned. So no matter how many time, and how fast you click the right mouse button, it just registers as a bunch of single clicks. So what to do?
Create a global variable to track click count
detect a single right-click, you already know how to do this it seems
set the global variable that the right-click was fired once
set a timeout, so if another right click doesn't come through in a
reasonable time to be considered a dblclick the global variable
resets to 0. I recommend 300 ms, it seems to be the most natural
each time a right-click registers check that variable, if it's more
than one, fire your double-right-click handler.
you may want to make that global variable an object so you can track which element
registered the right click and expire specific element right clicks
accordingly. This will allow you to ignore if they double click
while moving the mouse over various objects. I consider this
optional as the chain of events are unlikely for a user to follow,
but depending on your app may result in unexpected functionality.
It might be better to define a jQuery function with this (try it):
var precision = 400;
var lastClickTime = 0;
$(document).ready(function()
{
var div = $('#div');
$(div).bind("contextmenu", function(e)
{
return false;
});
$(div).mousedown(function(event)
{
if (event.which == 3)
{
var time = new Date().getTime();
if(time - lastClickTime <= precision)
{
// DOUBLE RIGHT CLICK
alert('double click');
}
lastClickTime = time;
}
});
});

Categories