Prevent left/right buttons from scrolling page - javascript

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
}
});

Related

Moving with slideshow with arrows on keyboard

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>

Keydown on up arrow not preventing default, still makes div scroll

I have a chat area, where messages go, and a chat input below. As you can see in this structure:
After load I run this function:
function activate_key_detection()
{
$(document).keydown(function(e)
{
code = (e.keyCode ? e.keyCode : e.which);
if(e.ctrlKey)
{
if(window.getSelection().toString() != "")
{
return;
}
}
$('#chat_input').focus();
if(code == 13)
{
send_to_chat();
e.preventDefault();
return false;
}
if(code == 38)
{
$('#chat_input').val(last_input);
e.preventDefault();
return false;
}
if(code == 27)
{
if($('#overlay').css('display') == 'block')
{
hide_boxes();
e.preventDefault();
return false;
}
else
{
clear_input();
}
}
});
}
As you can see it first focuses the input, and when the key is the up arrow (38) it catches it, modifies the input and tries to prevent the default behavior of they key.
The problem is, when I first click inside the chat area, and then press the up arrow, it will still scroll the chat area a line. Subsequent presses of the up arrow don't scroll the chat area further.
I tried adding e.stopPropagation() there too, to no avail.
Any help is welcome.

next click key press

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";
}
});

jQuery Camera slider keyboard controls

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();
}
}
}

How to stop of running the keycodes 37 and 39 when there is a textarea selected

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.

Categories

Resources