Use .bind method for down arrow key

Question

I successfully enabled this alert to show whenever I scrolled down with my mouse in the <div>

$('#divID').bind('mousewheel DOMMouseScroll', function (event) {
    if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0) 
    {
        alert('scroll down with scroll');
    }
});

What is the equivalent .bind method I can use to alert whenever I scrolled down with my down arrow key in the <div>

My attempt is (but doesn't work):

$('#section1').bind('onkeydown', function (event) {
    if (event.keyCode == 40) {
        alert('scroll down with arrow key');
    }
});

I'd highly appreciate any help.

I've checked out a solution from: JavaScript KeyCode Values are "undefined" in Internet Explorer 8 - However with this, I can't seem to have this alert happen for a specific <div>, I don't want this effect lingering throughout the whole document.

I am also using .bind() and not any other method, it's because when I get to another <div> I want to .unbind() the previous, because in another <div> I want to do a new .bind()

Have you just tried the [`scroll` event](https://developer.mozilla.org/en/docs/Web/Events/scroll)? — Bergi, Feb 26 '16 at 01:58
Sorry, I don't think I'm doing it right, would it be replacing the 'onkeydown' with 'scroll'?? Do I need to change anything else? — Henry, Feb 26 '16 at 06:58
No, `scroll` is for all scrolls; I don't think there is a special event for scrolling by keyboard — Bergi, Feb 26 '16 at 12:36

Himesh Aadeshara · Answer 1 · 2016-02-26T05:51:58.603

0

Henry i the problem is **

'onkeydown'

above keyword is the html tag's event attribute

you can check out the below reference link for this Reference link 'onkeydown' keyword

key word that you have used to bind the key down that's actually only

'keydown'

that's the only problem else you code is proper

and here is my try with that code.

$(document).on('keydown',function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 40) {
                
                alert("down pressed");
            } else if (code == 38) {
                alert("up pressed");
            }
        });

and here is the link for working code you can check out

Working code

Even working here with .bind() event to you can check out code

edited Feb 26 '16 at 05:51

answered Feb 26 '16 at 05:45

Himesh Aadeshara

2,114
16
26

Sorry if this is a stupid question but if I do $(document).unbind('keydown'); would that work? – Henry Feb 26 '16 at 07:06
And if I do this: $(document).bind('keydown', kd(e)); where – Henry Feb 26 '16 at 07:09
function kd(e) { var activeSection = $('.pp-section.active').index('.pp-section'); var code = (e.keyCode ? e.keyCode : e.which); if (code == 40 && activeSection == 1) { //PP.moveTo('page1'); alert('down'); } if (code == 39 && activeSection == 1) { //PP.moveTo('page1'); alert('down'); } } – Henry Feb 26 '16 at 07:09
@Henry it's just use of $(document) to give an example you can write selector as on which you want to bind the keydown event – Himesh Aadeshara Feb 26 '16 at 07:46
Thank you for your help and time, I highly appreciate it. – Henry Feb 26 '16 at 09:36
@Henry welcome buddy if this helped you then you can just up vote it. – Himesh Aadeshara Feb 26 '16 at 09:59
My reputation hasn't attained 15 yet, but I posted another similar question so maybe if you can some reputation points there, I can help you upvote this one. Help each other, you know what I'm saying – Henry Feb 26 '16 at 10:45
Here's my other question: http://stackoverflow.com/questions/35648080/if-condition-in-javascript-doesnt-seem-to-obey-as-coded?noredirect=1#comment58977008_35648080 – Henry Feb 26 '16 at 10:45
Please have a look Himesh – Henry Feb 26 '16 at 10:45

Use .bind method for down arrow key

1 Answers1