I have on my website the same slideshow gallery as on this URL: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp.
I would like to have a moving gallery with the arrow keys on the keyboard.
Please, does anyone know, how to do it?
Thanks very much!
If you add this code, it should works:
<script>
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
plusSlides(-1)
}
else if(event.keyCode == 39) {
plusSlides(1)
}
});
</script>
Related
I want to move focus right, left, up and down using arrow keys in JavaScript.
I am able to implement right functionality using JavaScript.
This will help you.
$(document).keydown(
function(e)
{
if (e.keyCode == 37) {
$(".tab:focus").prev().focus();
}
if (e.keyCode == 38) {
//code for up key
}
if (e.keyCode == 39) {
$(".tab:focus").next().focus();
}
if (e.keyCode == 40) {
//code for down key
}
}
);
I have an iframe which contains slider. The slider allows navigating between pictures with left/right key arrows but if there is horizontal scroll on the page then the page is scrolled as well with left/right key arrows. Is there any way to prevent page scrolling but not the navigation between slides in the iframe.
The code looks like this:
if (e.keyCode === 39) {
next();
}
if (e.keyCode === 37) {
prev();
}
Thanks.
you should apply e.preventDefault(); in order to terminate the default behavior of an event.
some kind of
$(document).on("keypress", function () {
if (e.keyCode === 39 || e.keyCode === 37) {
return
}
});
I'm making a gallery and trying to figure out how to program the arrow keys to navigate the gallery.
So, pressing the left arrow would go to the previous image url:
function window.location = 'http://www.example.com/prevphoto.php';
Pressing the right arrow would go to the next image url.
function window.location = 'http://www.example.com/nextphoto.php';
Update (Thanks Haxxed pointing me in the right direction)
This is where I'm at, but it's not working. Can you see why?
$('body').keypress(function (e) {
if (e.which == 37) {
// Left Arrow Pushed
window.location = "/prevphoto.php";
} else if (e.which == 39) {
// Right Arrow Pushed
window.location = "/nextphoto.php";
}
});
Basically you'll need to make the body tag have a keypress event (or use jquery to make an event listener) and then just check the keycodes (Left Arrow is 37, Right is 39) and then use window.location to redirect the page. All Key Codes
<head>
<script>
function e(event){
if(event.keyCode == 37){
//Left Arrow Pushed
window.location = "../prevphoto.php";
}else if(event.keyCode == 39){
//Right Arrow Pushed
window.location = "../nextphoto.php";
}
}
</script>
</head>
<body onKeyPress="e(event)" >
</body>
See this related answer: https://stackoverflow.com/a/5597114/380487
You'll need to listen for the keydown event, not the keypress event.
Try putting the script in your head tags, then modifying the body to use document.
$(document).keypress(function (e) {
if (e.which == 37) {
//Left Arrow Pushed
window.location = "/prevphoto.php";
} else if (e.which == 39){
//Right Arrow Pushed
window.location = "/nextphoto.php";
}
});
I'm using the Camera jQuery slideshow on my site, but it lacks being able to control with keyboard which I need. In their google group someone posted the previous/next commands which work, however I still need the pause/resume keyboard button to work (in my case I'm using the spacebar). What would I need to enter to have .camera_play also controlled by the spacebar? Is that even possible?
Here is the code that pertains to the problem:
$(document.documentElement).keyup(function (event) {
// handle cursor keys
if (event.keyCode == 37) {//go left
$('.camera_prev').click();
} else if (event.keyCode == 39) { //go right
$('.camera_next').click();
} else if(event.keyCode == 32) { // spacebar to stop
$('.camera_stop').click();
After seeing how camera plugin works, you can use the :visible selector to click on the currently active action (which may be stop or resume), like this:
$(document.documentElement).keyup(function (event) {
// handle cursor keys
if (event.keyCode == 37) {//go left
$('.camera_prev').click();
} else if (event.keyCode == 39) { //go right
$('.camera_next').click();
} else if(event.keyCode == 32) { // spacebar to stop
$('.camera_stop , .camera_play').filter(':visible').click();
}
});
The documentation doesn't show this, but I dug into the code and it looks like when you click the stop button, it adds a class to the main wrapper called 'paused'. Here's how you can update the your code to handle both pausing and starting with the space bar.
$(document.documentElement).keyup(function (event) {
// handle cursor keys
if (event.keyCode == 37) {//go left
$('.camera_prev').click();
} else if (event.keyCode == 39) { //go right
$('.camera_next').click();
} else if(event.keyCode == 32) { // spacebar to stop
if($('.camera_wrap').hasClass('paused')){
$('.camera_play').click();
}
else{
$('.camera_stop').click();
}
}
}
Simply I have a js script that change the page with left and right arrows, but how to stop that if a specific textarea is selected ?
This is my js to change the page
$(document).keydown(function(event) {
if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
$('textarea').on('keypress', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
See example fiddle: http://jsfiddle.net/GUDqV/1
Update: after OP clarification this works even on jQuery 1.2.6 on Chrome: http://jsfiddle.net/GUDqV/2/
$('textarea').bind('keyup', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
see screenshot of this code on Chrome and jQ1.2.6
Probably the simplest approach is to factor event.target into your code, checking to see if it is the textarea:
$(document).keydown(function(event) {
if (event.target.id == "myTextArea") {
return true;
}
else if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
Any key events that originate from a textarea element with an id of myTextArea will then be ignored.
You can check if the textarea is in focus by doing something like:
if (document.activeElement == myTextArea) {
// Don't change the page
}
$("#mytextarea").is(":focus") This will let you know if the element is focused.
Also $(document.activeElement) will get the currently focused element.
You can check to see if your text area is focused, and disable the script that navigates when using left and right arrow keys.
A little bit of code showing what you've tried might bring in more specific responses.
Hope this helps.