I have just setup FancyBox3 to see if its ok to use with my project.
So far so good.
Just one thing though, Is it possible to set the left and right keyboard buttons to skip forward or backward 5 seconds?
In the JS file, i found the following code;
// Left arrow and Up arrow
if (keycode === 37 || keycode === 38) {
e.preventDefault();
self.previous();
return;
}
// Righ arrow and Down arrow
if (keycode === 39 || keycode === 40) {
e.preventDefault();
self.next();
return;
}
I think this means that at the moment the left and up arrow skip to the next video, and right and down skip to the previous video, but can it change to skipping 5 seconds forward and backward on the current video
Use this one.
if (keycode === 37 || keycode === 38) {
e.preventDefault();
if($("video")[0].currentTime-5>=0)
{
$("video")[0].currentTime=$("video")[0].currentTime-5;
}
return;
}
// Righ arrow and Down arrow
if (keycode === 39 || keycode === 40) {
e.preventDefault();
if($("video")[0].currentTime+5<=$("video")[0].duration)
{
$("video")[0].currentTime=$("video")[0].currentTime+5;
}
return;
}
just replace $("video")[0] with the video element you want to fast forward.this may not be perfect but works if you are able to get the video element.
Related
With the code below, is there anyway of preventing the user from entering special characters that are generated by pressing CTRL + ALT + 4 for example?
That produces the euro currency sign. All the below code works perfectly, I just need to prevent any special characters that are generated from CTRL + ALT
Prevent the user from using their mouse to right click and paste the content in
Working with IE8
`
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});`
If you want to allow only certain keyboard shorcuts, you can disable anything but whatever you let pass. You can also decide to list everything that you want disabled, and allow everything else to execute. A simple way I see this can go is to disable the Ctrl key and the Alt key if they are pressed simultaneously, as such:
$("#txtboxToFilter").keydown(function (e) {
if (e.ctrlKey === true && e.altKey === true) {
return;
}
else {
//Do whatever;
if (e.key === "Tab") {
//Tab was pressed
}
else if (e.key === "H") {
//Shift H was pressed
}
else if (["Home", "End", "PageUp", "PageDown"].includes(e.key) === true) {
//Navigational Keys Were Pressed
}
else if (["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"].includes(e.key) === true) {
//Directional Arrows Were Pressed
}
}
});
And may I recommend that you use e.key instead of e.keyCode, e.which, or code, because it is more supported, and it is way easier to understand. Just take a look at the code snippet above, there are examples of e.key. Besides, there is no confusion with numbers, because the key names are used. If you wanted to use the Windows Key on Windows, the Search key on Chromebooks, e.key === "Meta" is the way to go.
Hope this extra information helps!!!
I recently made a rudimentary html/css galery that is practicaly a table with next/previous buttons.The thing is I want to make it responsive to keyboard.Like if anyone hits the "left" button on keyboard it should go on the previous photo and if it hits the "right" button go on the next page.
I would love if you could make it with as less javascript/jquery as possible.I searched google for something like that but I haven't found none !
If you need any code of my website please let me know.
Please help !
You could capture the keyboard interaction using .on() and the keydown event, and decide what to do after the returned value like :
$(document).on("keydown", function (e) {
e.preventDefault();
var code = e.which || e.keyCode;
console.log(code)
if (code == 40) {
// down arrow pressed : do something
console.log("down arrow pressed")
}
});
See JSFIDDLE
The keyboard map of the navigation arrows are
// 37 = left arrow
// 38 = up arrow
// 39 = right arrow
// 40 = down arrow
EDIT : to avoid excessive use of if else if else, you could use switch (which performs better) like :
$(document).on("keydown", function (e) {
e.preventDefault();
var code = e.which || e.keyCode;
switch (code) {
case 37:
console.log("left arrow pressed")
break;
case 38:
console.log("up arrow pressed")
break;
case 39:
console.log("right arrow pressed")
break;
case 40:
console.log("down arrow pressed")
break;
default:
return false
}
});
See updated JSFIDDLE
JFK's answer is correct, but I extended that a little
$(document).on("keydown", function (e) {
var code = e.which || e.keyCode;
if (code == 40 || code == 39) { // down & right
// replace selector with your button id/class
$('.btn-next').click();
} else if (code == 38 || code == 37) { // up & left
// replace selector with your button id/class
$('.btn-previous').click();
}
});
The code simulates a click on the next/previous buttons so you are able to place any code which should happen when clicking or key pressing only once.
simple Question I think. I got an input field which is focused on load via jQuery.
$('#myInput').focus();
What I want is when you klick on the arrow keys, go out of the input and so that you can scroll with the keys down.
if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40 ) {
return false;
}
return false is to prevent rendering.
You can use .blur() to lose focus
$('#myinput').blur();
Please Help! I have spent a week to complete this game and this is the final huddle i have been stuck with for a couple of days now. I know some techy out there would probably take a glance and flick something in place. But I'm not very sophisticated with javascript and therefore need some help.
$(document).keydown(function(e){
// left arrow
if (e.keyCode == 37 && currentCell > 0) {
currentCell--;
ChangeCurrentCell();
return false;
}
// up arrow
if (e.keyCode == 38 && currentRow > 0) {
currentRow--;
ChangeCurrentCell();
return false;
}
// right arrow
if (e.keyCode == 39 && currentCell < MAX_CELL) {
currentCell++;
ChangeCurrentCell();
return false;
}
//down arrow
if (e.keyCode == 40 && currentRow < MAX_ROW) {
currentRow++;
ChangeCurrentCell();
return false;
}
// enter key
if (e.keyCode == 13) {
}
});
function ChangeCurrentCell()
{
document.getElementById(Boxes[currentRow + currentCell]).focus();
SimulateMouseOver(document.getElementById(Boxes[currentRow + currentCell]));
}
// function will trigger event of selecting current focus.
function selectElement()
{
}
$(document).ready(function(){
loadDivs()
// will give initial focus to top left element paving way for key navigation
ChangeCurrentCell();
// above gives first element in Boxes the focus when loading.
The div element will not focus despite getting it and calling the focus method, i have tried to trigger mousehover on the element with no luck. Please assist me, i put my masters thesis aside despite already being on a tight schedule to do this game which is a requirement for a job position. I have done whole the whole game logic and it all works well, if i send the code in as it is it will definitely be discarded because it doesnt meet the key navigation requirement ... i am desperate i will even pay if i need to -frustrated Student
Look at this
It's my solution for a test, maybe the same...maybe can help you :) If it is, please use it as a hint and don't copy all my code :D
Regards,
L.
You can bind to the document.keydown event to capture key strokes. Then you can use event.which (normalized by jQuery) to determine which key was pressed.
$(document).on("keydown", function (event) {
if (event.which === 37) {
//code for left arrow
} else if (event.which === 38) {
//code for up arrow
} else if (event.which === 39) {
//code for right arrow
} else if (event.which === 40) {
//code for down arrow
}
});
UPDATE
I just noticed you didn't tag your question with jQuery. To use native JS you'll have to change how you bind to the document.keydown event and how you determine the key that was pressed (different browser implementations store the info under different indexes of the event object).
to make it more convenient () not necessary:
`var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, SPACE = 32;`
then bind to keydown, keypress doesn't catch arrow keys
and do something like this:
$(document).bind("keydown", function (e){
var which = e.which;
var navigationKeyWasPressed = which !== undefined && which >= 39 && which <= 40;
//do nothing if no significant key was pressed
if (!navigationKeyWasPressed ) {
return;
}
if ($(".selectedWithKey").length === 1){
switch (which) {
case LEFT:
//...
break;
case UP:
//...
break;
case RIGHT:
//...
break;
case DOWN:
//...
break;
case SPACE:
//turn card
break;
default: //non arrow pressed
//...
}
} else {
// if no card is selected, select one to start arrow navigation
$(".sponsor:first").addClass("selectedWithKey")
}
});
In Jquery, how can I set an event such that when user is browsing some pictures, and presses the left/right arrow key, it calls a function which can be used to show the previous/next photos? I only need to know how to check if the key pressed was the right/left arrrow key and ignore all other key preses.
The image will be in its own div.\
I've used this in the past. It works for me in the enviornments I've used (linux and windows with FF)
$(document).keypress( function(e) {
if (e.keyCode === 37) {
// left
}
else if (e.keyCode === 39) {
// right
}
});
That being said, I'm not so sure connecting on the arrow keys is a good idea since a user could change text size and cause the scroll bar to appear. Arrowing would change the picture unexpectedly.
Use the jQuery keypress event like so:
$("input").keypress(function (e) {
if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
|| (97 <= e.which && e.which <= 97 + 25)) {
var c = String.fromCharCode(e.which);
$("p").append($("<span/>"))
.children(":last")
.append(document.createTextNode(c));
} else if (e.which == 8) {
// backspace in IE only be on keydown
$("p").children(":last").remove();
}
$("div").text(e.which);
});
I'm not sure which value will be present for left/right but a little experimenting with this script should get you going