How can give arrow key events in full page image slider, for example the below sample link -> https://www.htmllion.com/examples/pure-css-based-fullscreen-slider-demo.html.
I need the same layout with arrow key events.
Kindly help.
Use Keyboard events in Jquery. Based on the user click navigate the page
Using jQuery you can do something like this.
$(window).on('keyup', function(e){
console.log(e.keyCode); // log the keycode of the key pressed
switch(e.keyCode){
case 37:
console.log('Prev');
break;
case 38:
console.log('Up');
break;
case 39:
console.log('Next');
break;
case 40:
console.log('Down');
break;
}
});
You can add a keydown event to any element and call a function.
In the below example i have used an input text field to add a keydown event and it gives alert on pressing left or right arrow key
function myFunction(event) {
var keyVal = event.keyCode;
switch(keyVal)
{
case 37:
alert('Pressed left');
break;
case 39:
alert('Pressed right');
break;
}
}
<input type="text" onkeydown="myFunction(event)">
Related
Still beginner here, please be gentle :)
I have a CSS-lighbox with 3 links: previous image, next image and exit. The links are like that:
<img src="images/prev.png" />
Then i have a KBD listening script:
function kbdNav(e) {
switch(e.keyCode) {
case 37:
// activate link "prev"
break;
case 39:
// activate link "next"
break;
case 27:
// activate link "exit"
break;
}
}
My goal is that when the KBD arrow is pressed (case 37) the link # prev.png gets activated, so that the lightbox image goes to the previous image. Same for the other 2 cases.
What method can be used for this?
First, select the anchor elements:
var prevLink = document.querySelector('.prev');
var nextLink = document.querySelector('.next');
var exitLink = document.querySelector('.exit');
Then edit the listener as follows:
function kbdNav (e) {
switch (e.keyCode) {
case 37:
prevLink.click();
break;
case 39:
nextLink.click();
break;
case 27:
exitLink.click();
}
}
Consider this topic closed. The solution works, but my HTML was quite messily structured.
I found a better solution with a pure JS gallery/lightbox.
I found this excellent question about binding the arrow keys with jQuery: Binding arrow keys in JS/jQuery with a great solution from Sygmoral:
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
break;
case 38: // up
break;
case 39: // right
break;
case 40: // down
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
EXCEPT: This prevents the arrow keys from working the way they would usually work when the focus is in a text input field.
How would I modify this solution to allow the arrow keys to function normally when the current focus is in an input, text area, or another content editable area?
Put this in a condition:
$(document).keydown(function(e) {
if(!$(e.target).is(':input, [contenteditable]')){
switch(e.which){
// the cases as is
}
e.preventDefault(); // prevent the default action (scroll / move caret)
}
});
You can use event.target to get the target element of event, so you can check
var $target = $(e.target);
if($target.is("input") || $target.is("textarea")) {
//
}
Your editable element may have some common class
$('.input').keypress(function(event) {
var charCode = (evt.which) ? evt.which : event.keyCode
switch(charCode) {
case 37: // left
break;
case 38: // up
break;
case 39: // right
break;
case 40: // down
break;
default: return; // exit this handler for other keys
}
e.preventDefault();
});
I need really fast answer. How to distinguish between left and right click inside a function. Code looks like this:
<p onclick="FuncOnClick()">
function FuncOnClick() {
//how to do distinguish?
}
You can do it like this. Using the HTML onclick does not work for right click. But adding the event listener in Javascript instead does seem to work.
document.getElementById('click').onmousedown = FuncOnClick;
function FuncOnClick(event) {
console.log(event.which);
switch (event.which) {
case 1:
alert('Left');
break;
case 3:
alert('Right');
break;
}
}
<p id="click">test</p>
You can do like this :-
$('#mouseClick').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left Mouse button pressed.');
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
break;
default:
alert('You have a strange Mouse!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="mouseClick">Click here</p>
I am having problems with a jquery slideshow where I want to bind next/right to make the images jump forwards/back.
I used the following code to attempt to do it but it simply refreshes the page.
<script>
$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('#prev a').attr('href'); break;
case 39 : window.location = $('#next a').attr('href'); break; }});});
</script>
The I was attempting to call were:
<a href='#' id='prev' onclick='show_image($prev); return false;'>
and
<a href='#' id='next' onclick='show_image($next); return false;'>
Does anyone know an easy way to cut out the middle man and simply bind left/right to the onclick event for each?
Anyhelp would be much appreciated!
This should work:
$(function() {
$(document).keyup(function(e) {
switch (e.keyCode) {
case 37:
$('#prev a')[0].onclick();
break;
case 39:
$('#next a')[0].onclick();
break;
}
});
});
Just call the onclick event handler of the left or right button based on which key you pressed.
$(function() {
$(document).keyup(function(e) {
switch (e.keyCode) {
case 37:
$('#prev').click();
break;
case 39:
$('#next').click();
break;
}
});
});
I have a div with an id of bottom_arrow and I want to use my keyboard arrows left/right to move the div left and right 100px. How can I do this?
As a rule keypress events go to an input or some control that has focus, if you need them generally on a page, which is a sometimes a little frowned upon due to removing standard behavior, then bind the keydown event to the whole document.
$('body').keydown(function(event) {
switch (event.keycode) {
case 37: // left arrow key
$('#bottom_arrow').animate({ 'left': '-=100' });
break;
case 39: // right arrow key
$('#bottom_arrow').animate({ 'left': '+=100' });
break;
}
});
I have used keydown, rather than keypress as a user would expect it to trigger whilst pressing the key.
$('body').keydown(function(event) {
switch (event.keycode) {
case 37: // left arrow key
$('#bottom_arrow').animate({ 'left': '-=100' });
break;
case 39: // right arrow key
$('#bottom_arrow').animate({ 'left': '+=100' });
break;
}
});
According to Jquery documentation, use event.which instead.
$('body').keydown(function(event) {
switch (event.which) {
case 37: // left arrow key
$('#bottom_arrow').animate({ 'left': '-=100' });
break;
case 39: // right arrow key
$('#bottom_arrow').animate({ 'left': '+=100' });
break;
}
});